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

About Me

With over a decade of experience under my belt as a full-stack developer, I've had the opportunity to spearhead project teams at tech startups in Vietnam, Thailand, Japan and Singapore. Additionally, I have worked as a freelance engineer for various companies based in Asia Pacific, Europe, and North America.

Presently, I serve the role of a Senior Full Stack Software Engineer at ACX. I am consistently committed to exploring and acquiring knowledge on emerging and popular technologies.

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