如何用JsPDF实现.NET 7.0中Razor视图转PDF的按钮功能？

你的问题主要出在两个容易忽略的点上：jsPDF UMD版本的实例化方式错误，以及缺少html2canvas依赖（doc.html()方法必须依赖它才能将HTML转为PDF内容）。以下是分步修复方案：

1. 补充必要依赖脚本 #

jsPDF的html()方法需要html2canvas来渲染HTML内容，你需要在引入jsPDF之后添加这个脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

2. 修正jsPDF实例化代码 #

UMD版本的jsPDF导出的命名空间是window.jspdf，你需要通过jspdf.jsPDF来实例化，而不是直接用jsPDF()。同时添加日志和错误捕获，方便排查问题：

document.getElementById('generatePdfButton').addEventListener('click', async function () {
    try {
        // 正确实例化jsPDF（UMD版本）
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF({
            orientation: 'portrait', // 匹配你的页面方向
            unit: 'mm',
            format: 'a4' // 可选，指定纸张尺寸
        });

        const targetElement = document.querySelector('.page-portrait-custom');
        
        // 用async/await处理异步渲染，或者保留callback方式
        await doc.html(targetElement, {
            callback: function (pdf) {
                pdf.save('ChangeOrderForm.pdf');
            },
            x: 10, // 内容在PDF中的X偏移
            y: 10, // Y偏移
            width: 190 // 适配A4宽度（210mm减去左右边距）
        });
    } catch (error) {
        // 打印错误到控制台，方便排查
        console.error('PDF生成失败:', error);
    }
});

3. 额外调试建议 #

• 打开Chrome开发者工具的Console标签，点击按钮后查看是否有报错信息（比如未捕获的引用错误、渲染错误）。
• 确保.page-portrait-custom元素确实存在，可在控制台执行document.querySelector('.page-portrait-custom')验证是否返回正确的DOM节点。
• 如果页面中有复杂样式（比如浮动、绝对定位），可能需要调整html()方法的配置项，或者给目标元素添加打印友好的样式（比如避免overflow: hidden、确保内容不超出纸张宽度）。

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