I have a reporting system which needs to display a set of finished projects as well as 3 images of the finished projects. The images are hosted on my static file server.
When I generate the report, I send the save path to the images to my frontend and then on the frontend I append the save path to the static server URL and then put that into the src attribute of an img tag (actually my own React Image component but its all the same).
So when I generate the report and view it through my reporting system fronted it all works, when I export it as PDF it all works but when I export it as excel, it does not display the images. I have tried the following 3 methods:
Using sheetjs - this was the tool I used so far for over an year but they require a payment of $800 USD in order to provide me with the ability to render images inside of my xlsx.
Using @linways/table-to-excel which afaik is currently not maintained. I tried the following:
TableToExcel.convert(print, {name: props.name + " - " + props.datesInfo})
but it did not work - it just displayed the text and ignored the images.
Finally I tried with the encodeURIComponent function to encode my html as data:application/vnd.ms-excel. Surprisingly this was the easiest and least bloaty way (doesn't require any packages) and worked the best. It was not pretty but at least I had something - images. The images however appeared as just a red cross (x).
Does anyone know how to solve this issue with the red cross (x)? Could it be some issue with the encoding or maybe some security precaution by MS Office Excel?
Edit:
The pictures were actually appearing in the report, its just that I was using the web version of Excel because I am running Arch Linux btw and dont have access to the native version of Excel without installing bloatware like Wine and Winetricks and what not. All is fine, I even figured out how to add styles. If anyone gets stuck on styles, make sure that they are inline styles and only on td and th. CSS will not take.