Pdf Generated is very Blurry .

[ashishiiit01]

vardaan-invoice.pdf When Scale={1}, The pdf is very blurry . vardaan-invoice (2).pdf When scale={0.5}, it is displaying full QR CODE but pdf quality is so low, that I can't scan the QR CODE vardaan-invoice (3).pdf When scale={0.8}, it is somewhat good but not displaying full QR CODE

[ivmarcos]

@ashishiiit01 please provide a codesandbox or jsfiddle showing the issue.

[akashmrk]

pdf resolution is low in the codesandbox that you provided itself. Is it a solvable issue ??

[MallikarjunHt]

what method are you using, if using ctrl + p or the Browser way of printing then we get very low resolution. if you can explain how or what methods you use then we can think of a possible solution. Thank you :nerd_face:

[akashmrk]

@MallikarjunHt Are you asking @ivmarcos or me ?

[akashmrk]

@MallikarjunHt https://codesandbox.io/s/l2l4pz0jyl?file=/src/index.js just zoom the generated pdf, youll find it to be a low res. For smaller texts its pretty much pixelated.

[benswinburne]

The only way I managed to get this not to blur is to implement it outside this library for now so i could control the scale options of the addImage function. Just adding what I did in case it's helpful to someone the facility gets added to this library.

    html2canvas(ref.current, {
      logging: true,
      useCORS: true,
      allowTaint: true,
      scale: 4,
    }).then((canvas) => {
      const data = canvas.toDataURL('image/jpeg', 1);
      const pdf = new JsPdf(pdfOptions);

      // https://github.com/niklasvh/html2canvas/pull/1087#issuecomment-534593208
      pdf.addImage(data, 'JPEG', 0, 0, canvas.width / 16, canvas.height / 16);
      pdf.save('file.pdf');

      ref.current.classList.remove('exporting');
    });

Combining the scale property on html2canvas with the width and height options on pdf.addImage gets me a non blurred image.

---

(not tested the following but glancing back at my code and notes you could probably just work out the maths there to not need to do the /16 bit). I didn't finish it, not sure why but here're the notes i made -

we can't change the width/height on the image we need to do set the scale so the maths works out the same.

setting the unit changes internal scale factor (default is mm), so if we know what that is we can do some maths

switch (unit) {
    case "pt":
      scaleFactor = 1;
      break;
    case "mm":
      scaleFactor = 72 / 25.4;
      break;
    case "cm":
      scaleFactor = 72 / 2.54;
      break;
    case "in":
      scaleFactor = 72;
      break;
    case "px":
      if (hasHotfix("px_scaling") == true) {
        scaleFactor = 72 / 96;
      } else {
        scaleFactor = 96 / 72;
      }
      break;
    case "pc":
      scaleFactor = 12;
      break;
    case "em":
      scaleFactor = 12;
      break;
    case "ex":
      scaleFactor = 6;
      break;
    default:
      throw new Error("Invalid unit: " + unit);
  }

the default width and height on addImage are -96 which then gets passed into this

width = (-1) * image.width * 72 / width / this.internal.scaleFactor;

setting the unit to pt simplifies it as we know pt scaleFactor is 1.

width = (-1) * image.width * 72 / -96 / 1;

then we have the scale of html2canvas which defaults to the device pixel ratio (1 on most, 2 on retina)

.... then i obviously stopped for some reason. hope the above helps someone

[KirillAleshkin]

can someone know to solve this problem yet

[ivmarcos]

This is a known downside basically related to how it works the library as mentioned in the README. Seems a complex but nice feature to have and I'd love any PR for this. Scaling should be a way to mitigate this but that brings increase in size.

[ivmarcos]

v1 has been released supporting a resolution option, higher values would mean less blur. See https://github.com/ivmarcos/react-to-pdf/blob/main/CHANGELOG.md#100-alpha0-august-26-2023 how to migrate from v0 to v1 or README for more details/examples.