#TIL 35 - Fix blank image with html2pdf

Dec 31, 2022 · Dung Huynh

What

Fix blank images when converting HTML to PDF with html2pdf.js.

Why

html2pdf blocks cross-origin images by default for security.

How

Enable CORS in html2canvas options:

const element = document.getElementById("thread");

window
  .html2pdf()
  .set({
    filename: `${id}-${Date.now()}.pdf`,
    html2canvas: {
      scale: 2,
      useCORS: true, // Allow cross-origin images
    },
  })
  .from(element)
  .save();