Hi, I’m Dung Huynh Duc . Nice to meet you.

About Me

I’m a full stack developer. I’m a fast learner and self-taught coder. I often take my time for researching and learning about hot and trending technology.

html2pdf

threadify

#TIL 35 - Fix blank image with html2pdf

Dung Huynh

Sat Dec 31 2022

HTML2PDF is quite popular tool for convert html2pdf from client side. However, I run into this issue with blank image. It is a bit surprise as the document doesn't mention about this one. I've searched on Github issues and found out that's common issue. The default is rendering image from same domain.

Below is the way I've fixed for Threadify+ app which I'm working on recently.

const downloadPdfFile = async (id?: string) => {
  const element = document.getElementById("thread");
  const opt = {
    filename: `${id}-${Date.now()}.pdf`,
    pagebreak: { mode: ["avoid-all", "css", "legacy"] },
    html2canvas: { scale: 2, useCORS: true }, // Allow to render image from different domain
  };

  // @ts-expect-error global html2pdf from CDN
  return window.html2pdf().set(opt).from(element).save();
};

More detail on feat: add pdf download button · jellydn/threadify-plus@5b5327b