DEV Community

andi-per
andi-per

Posted on

(Pesonal) Logo/Image size issue for html2pdf.js on Safari browser

Last night, I work on bug that occured on iOS devices. The generated PDF file with html2pdf.js library when tested on iOS devices had certain images trimmed, despite we had set the element of the images with the size we want it to appear, and it only happened on iOS devices and tested with Safari browser.

And here's what I found :

  1. That issue occured on browser with webkit engine(i.e Safari).
  2. So, If you find bug/issue that tested on Safari, you can test it with another browser with webkit engine( You didn't need to use apple's product to test).
  3. Since I'm using linux, I've installed epiphany browser for testing.
  4. The main cause of the bug is behavior between browser(that's built with webkit engine) and the pdf generated by html2pdf.js. (* i don't know if 'behavior' is the right word)

The solution: html2pdf.js generated pdf content as image. And on webkit engine browser, the solution I found is we need to use image/logo with the exact dimension as we want it to appear in our PDFs' contents. When we use image with bigger dimension(i haven't test with smaller ones), the content generated by html2pdf.js for webkit browser will persist its file dimension, not the dimension you have set on your code.

So, If I wanna change the size, I will change it on the svg file not on my html code(that will be converted as PDF).

this is my first post, and I'm beginner on this field and non-native english. So, I apologize for the flawsss....

Top comments (0)