如何使用jsPDF为PDF设置多张动态背景图片？

核心问题分析 #

1. 虚拟DOM无法被html2canvas识别：你直接传入的React JSX是虚拟DOM，html2canvas需要操作真实的DOM节点才能正确渲染背景图。
2. 跨域图片配置缺失：背景图是跨域资源，仅设置allowTaint: true不够，还需开启useCORS配置。
3. scrollWidth获取无效：虚拟DOM没有scrollWidth属性，导致scale计算错误，可能影响渲染效果。

修复步骤及代码示例 #

步骤1：使用真实DOM节点 #

通过React的useRef获取渲染后的真实DOM元素，而非直接传递JSX。

步骤2：完善html2canvas配置 #

添加useCORS: true以允许加载跨域图片，确保allowTaint与useCORS配合生效。

步骤3：修正scale计算逻辑 #

基于真实DOM的offsetWidth计算缩放比例。

修改后的完整代码：

import { jsPDF } from "jspdf";
import { useRef, useEffect } from "react";

const GeneratePdf = async (name = "test.pdf", domElement) => {
  if (!domElement) return;

  let pdf = new jsPDF('p', 'pt', 'a4');
  let pWidth = pdf.internal.pageSize.width;
  let srcWidth = domElement.offsetWidth;
  let margin = 10;
  let scale = (pWidth - margin * 2) / srcWidth;

  pdf.html(domElement, {
    x: margin,
    y: margin,
    html2canvas: {
      scale: scale,
      allowTaint: true,
      useCORS: true, // 新增：允许跨域加载图片
      backgroundColor: 'white'
    },
    callback: function (doc) {
      let totalPages = doc.internal.getNumberOfPages();
      let currentPage = doc.internal.getCurrentPageInfo().pageNumber;
      if (totalPages > currentPage) {
        for (let p = totalPages; p > currentPage; p--) {
          doc.deletePage(p);
        }
      }
      doc.save(name);
    },
    margin: [20, 0, 20, 0]
  });
};

// 在组件中使用
const PdfGenerator = () => {
  const contentRef = useRef(null);

  useEffect(() => {
    // 组件挂载后再调用生成PDF，确保DOM已渲染完成
    if (contentRef.current) {
      GeneratePdf("myfile.pdf", contentRef.current);
    }
  }, []);

  return (
    <div 
      ref={contentRef}
      className='row mb-5 p-3 background-image' 
      style={{ 
        backgroundImage: `url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSkxORFDMPY7v_DGrlgBxnFBHtwifP9Uz28Y5-8TcNpdTwILs3E')`, 
        backgroundRepeat: "repeat-y" 
      }}
    >
      Hello World
    </div>
  );
};

export default PdfGenerator;

额外注意事项 #

• 确保图片服务器允许跨域访问（设置CORS响应头），若为自有资源，需在服务器配置Access-Control-Allow-Origin。
• 若跨域问题无法通过配置解决，可将图片转为base64格式后作为背景图，彻底规避跨域限制。

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