如何实现HTML转PDF时每页显示Logo？（附问题代码）

你当前的代码里，Logo只在第一页显示的原因是：你把Logo放在了相对定位的容器内，当内容被html2pdf分页时，这个Logo只会属于第一页的DOM结构，不会自动重复到后续页面。下面是几种可行的解决方法：

方法1：使用CSS固定定位（最简单） #

把Logo的定位方式改成fixed，这样html2canvas渲染时会自动将固定元素重复到每一页。修改你的Logo样式代码：

const logoImg = document.createElement("img");
logoImg.src = logo;
logoImg.style.position = "fixed"; // 改成fixed定位
logoImg.style.left = "20px";
logoImg.style.top = "20px";
logoImg.style.maxHeight = "50mm";
logoImg.style.maxWidth = "50mm";
logoImg.style.zIndex = 10; // 确保Logo在内容上方（可选）

如果页面内容有遮挡Logo的情况，调整z-index值保证Logo层级更高即可。

方法2：利用jsPDF手动添加每页Logo #

通过html2pdf的回调获取jsPDF实例，然后遍历所有页面手动添加Logo，这种方法更灵活，适合需要精确控制Logo位置的场景：

1. 先将Logo转换为Base64（避免跨域或资源加载问题）：

// 可选：将Logo转换为Base64格式
async function getLogoBase64(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

2. 修改生成PDF的代码，在回调中添加每页Logo：

generatePDF = async () => { // 改成async函数
  const logoBase64 = await getLogoBase64(logo); // 获取Base64格式的Logo

  // 容器和内容创建代码保持不变
  const container = document.createElement("div");
  container.style.position = "relative";
  let currentPageContent = this.createNewPageContentDiv(container);
  const htmlContent = document.documentElement.innerHTML;
  currentPageContent.innerHTML = htmlContent;

  const opt = {
    filename: "logo_and_html.pdf",
    image: { type: "jpeg", quality: 1 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
  };

  html2pdf()
    .from(container)
    .set(opt)
    .set({
      pagebreak: { mode: "avoid-all", before: "#page2el" },
    })
    .then((pdf) => {
      const totalPages = pdf.internal.getNumberOfPages();
      // 遍历每一页添加Logo
      for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
        pdf.setPage(pageNum);
        // addImage参数：图片源、类型、X坐标、Y坐标、宽度、高度（单位mm）
        pdf.addImage(logoBase64, "JPEG", 20, 20, 50, 50);
      }
      pdf.save();
    });
};

方法3：使用CSS @page规则（兼容性有限） #

部分浏览器和html2canvas版本支持CSS的@page规则定义页眉，你可以尝试在全局样式中添加：

@page {
  @top-left {
    content: url('你的Logo路径');
    margin-top: 20px;
    margin-left: 20px;
    width: 50mm;
    height: 50mm;
  }
}

注意：这种方法的兼容性不如前两种，部分场景下html2canvas可能无法正确解析@page规则，建议优先尝试前两种方法。

内容的提问来源于stack exchange，提问作者sinsns