使用jsPDF转换HTML表单为PDF时内容超宽被截断问题求助

针对你遇到的内容超出PDF页面宽度被截断的问题，可以通过以下几种方式调整：

1. 合理配置width和windowWidth参数 #

这两个参数是控制HTML转PDF时尺寸适配的关键：

• width：设置PDF中内容的目标宽度，建议用页面宽度减去边距，避免内容撑满页面边缘
• windowWidth：模拟浏览器窗口的宽度，设置为你HTML表单的实际宽度，防止内容被过度压缩

修改后的代码如下：

$("#save-img").on("click", function () {
    var doc = new jsPDF();
    var pageWidth = doc.internal.pageSize.getWidth();
    var elementHTML = document.querySelector("#Saftyinspecmodal");

    doc.html(elementHTML, {
        callback: function (doc) {
            doc.save("document-html.pdf");
        },
        margin: [10, 10, 10, 10], // 给内容留边距，避免贴边
        width: pageWidth - 20, // 页面宽度减去左右边距总和
        windowWidth: 800 // 匹配你的表单实际宽度，可根据情况调整
    });
});

2. 切换为横向页面 #

如果表单本身宽度较大，直接用横向页面能获得更宽的显示空间：

// 初始化时设置横向A4页面
var doc = new jsPDF('l', 'mm', 'a4');

3. 给HTML表单添加适配CSS #

在你的HTML元素里添加针对PDF转换的样式，强制内容适配页面宽度：

#Saftyinspecmodal {
    max-width: 100%;
    overflow-x: hidden;
}
#Saftyinspecmodal table, #Saftyinspecmodal div {
    width: 100% !important;
    box-sizing: border-box;
}

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