点击HTML按钮将多个指定div内容导出为PDF的实现方案

原有代码失效原因 #

你之前写的代码存在几个明确问题，导致生成空白PDF：

• 使用的jsPDF版本过旧（1.3.4为2017年发布的版本），内置的fromHTML方法对现代HTML结构、图片、CSS样式支持极差
• jsPDF实例初始化在点击事件外部，多次点击会出现内容叠加问题
• 两次调用fromHTML时都使用了相同的坐标参数(15,15)，会导致内容完全重叠
• 仅选取了#htmlContent1和#htmlContent2两个元素，没有覆盖你需要导出的所有内容块
• 没有处理图片加载、跨域、动态文件名的逻辑

实现思路 #

采用html2canvas+jsPDF的封装方案（整合为html2pdf依赖，无需手动处理分页、坐标转换），点击按钮时动态创建临时容器，按需求顺序将需要导出的元素克隆到临时容器中，等待资源加载完成后统一导出，导出完成后自动销毁临时容器，不影响原页面的正常显示。

完整实现代码 #

首先删除你之前添加的所有和PDF导出相关的script标签（包括旧版jQuery引入、旧版jsPDF引入、你自己写的点击事件代码），然后在页面的</body>闭合标签前，插入以下代码：

<!-- 引入导出依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
document.getElementById('generatePDF').addEventListener('click', async function() {
    // 获取文件名（取prodtitle的文本，过滤系统不允许的文件名字符）
    const titleEl = document.querySelector('.prodtitle');
    const fileName = `${titleEl.innerText.trim().replace(/[\\/:*?"<>|]/g, '')}.pdf`;

    // 创建离屏临时导出容器，用户无感知
    const exportContainer = document.createElement('div');
    exportContainer.style.position = 'absolute';
    exportContainer.style.left = '-9999px';
    exportContainer.style.top = '-9999px';
    exportContainer.style.width = '794px'; // 匹配A4纸宽度像素值，保证导出比例正确
    exportContainer.style.padding = '20px';
    exportContainer.style.background = '#fff';

    // 按需求顺序定义需要导出的元素选择器
    const needExportSelectors = [
        '.header',
        '.prodtitle',
        '.prodinfotitle',
        '.prodinfo',
        '.prodmaterialstitle',
        '.prodmaterials',
        '.gallery'
    ];

    // 逐个克隆元素到临时容器
    needExportSelectors.forEach(selector => {
        document.querySelectorAll(selector).forEach(el => {
            const cloneEl = el.cloneNode(true);
            exportContainer.appendChild(cloneEl);
        });
    });

    // 插入临时容器，等待所有图片加载完成
    document.body.appendChild(exportContainer);
    const imgs = exportContainer.querySelectorAll('img');
    await Promise.all(Array.from(imgs).map(img => {
        if (img.complete) return Promise.resolve();
        return new Promise(resolve => {
            img.onload = resolve;
            img.onerror = resolve;
        });
    }));

    // 导出参数配置
    const opt = {
        margin: 10,
        filename: fileName,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: {
            scale: 2, // 提高导出清晰度
            useCORS: true, // 允许加载跨域图片
            logging: false
        },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
    };

    try {
        await html2pdf().set(opt).from(exportContainer).save();
    } finally {
        // 导出完成后销毁临时容器
        document.body.removeChild(exportContainer);
    }
});
</script>

部署&配置注意事项 #

• 本方案用原生JS实现，不需要额外引入jQuery，原有页面引入的jQuery如果没有被其他功能使用可以直接删除；不要修改原有页面的class命名，否则会导致元素选取失败
• 测试时不要直接双击本地HTML文件用file协议打开，建议放到Web服务环境（比如Nginx、Apache，或者本地开发用的Live Server插件）下访问，避免file协议的图片加载权限问题
• 如果你的logo、gallery内的图片存储在其他域名下，需要对应图片存储服务配置跨域响应头（Access-Control-Allow-Origin），否则图片无法正常渲染到PDF中，这是浏览器安全策略限制，代码层面无法绕过
• 如果导出的PDF样式和原页面不一致，可以将PDF需要用到的样式写为全局CSS，避免局部作用域样式无法作用到克隆的临时元素上

常见问题排查 #

• 导出空白：检查对应class的元素是否存在，class名是否有拼写错误
• 图片缺失：首先检查图片路径是否可访问，其次确认是否存在跨域限制，是否用file协议打开了本地文件
• 内容被截断：可以调整exportContainer的width值，或者修改html2canvas的scale参数适配
• 文件名异常：检查.prodtitle元素内是否有特殊字符，代码已经做了非法字符过滤，如仍有问题可手动调整过滤规则

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