JavaScript实现HTML转PDF问题：内容截断与多页A4格式需求

问题分析 #

1. 你使用的是旧版自定义封装的html2canvas，对长内容的渲染支持存在缺陷，容易导致末尾内容截断
2. 当前实现直接将整个页面转为单张图片塞入PDF，未处理长内容的分页逻辑，超出单页范围的内容会被截断
3. 尺寸配置混乱：代码中注释标注a3为A4尺寸，但实际使用了A3格式PDF，尺寸计算逻辑错误

修复方案 #

1. 升级依赖库 #

弃用自定义的html2canvas封装，改用官方最新版的html2canvas和jsPDF，这类版本对长内容渲染、PDF分页的支持更完善

2. 实现A4自动分页 #

利用jsPDF的分页API，结合html2canvas渲染的内容高度，自动将长内容拆分到多页A4纸张中

3. 确保内容完整渲染 #

配置html2canvas的关键参数，避免因滚动、元素隐藏等问题导致渲染不完整

完整修复代码 #

(function () {
    const form = document.querySelector('#formpdf, #logo');
    const createBtn = document.querySelector('#create_pdf');

    createBtn.addEventListener('click', async function () {
        window.scrollTo(0, 0); // 滚动到页面顶部，确保渲染范围完整
        await createPDF();
    });

    async function createPDF() {
        // 配置A4标准尺寸（单位：mm）
        const a4Width = 210;
        const a4Height = 297;
        const pdf = new jspdf.jsPDF({
            unit: 'mm',
            format: 'a4',
            orientation: 'portrait'
        });

        // 渲染目标元素为canvas，提升分辨率避免PDF模糊
        const canvas = await html2canvas(form, {
            scale: 2,
            logging: false,
            useCORS: true,
            scrollY: 0,
            scrollX: 0,
            windowWidth: form.scrollWidth,
            windowHeight: form.scrollHeight
        });

        const imgData = canvas.toDataURL('image/png');
        const imgWidth = a4Width;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        let remainingHeight = imgHeight;
        let currentPosition = 0;

        // 添加第一页内容
        pdf.addImage(imgData, 'PNG', 0, currentPosition, imgWidth, imgHeight);
        remainingHeight -= a4Height;

        // 循环生成后续分页
        while (remainingHeight >= 0) {
            currentPosition = remainingHeight - imgHeight;
            pdf.addPage();
            pdf.addImage(imgData, 'PNG', 0, currentPosition, imgWidth, imgHeight);
            remainingHeight -= a4Height;
        }

        pdf.save('Texas_Transportation.pdf');
    }
}());

关键优化说明 #

• 依赖升级：官方最新版库修复了旧版本的渲染bug，能更好处理长内容、复杂样式
• 分页逻辑：根据A4页面高度自动拆分canvas内容，确保所有内容都能分到对应页面
• 分辨率优化：scale:2提升canvas清晰度，避免PDF输出模糊
• 渲染完整性：scrollY:0和windowHeight: form.scrollHeight确保渲染整个目标元素，不会遗漏末尾内容
• 尺寸规范：统一使用A4标准尺寸（210×297mm），避免尺寸混乱导致的内容截断

额外注意事项 #

• 确保目标元素#formpdf和#logo没有被CSS的overflow:hidden、height限制等截断内容
• 若页面包含动态加载内容，需等待内容完全加载后再触发PDF生成
• 避免目标元素内使用position:fixed，这类元素在html2canvas渲染时可能出现位置异常

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