.NET Core 3.1下使用jsPDF转换含Bootstrap、图片及CSS的HTML为PDF：CSS样式与分页失效问题求助

嘿，这个问题我之前也碰到过！你的核心问题在于用了jsPDF里已经被废弃的fromHTML方法，它对CSS样式和分页的支持简直弱爆了，换成新的html()方法就能解决大部分问题，下面给你一步步说：

为什么原代码失效？ #

• fromHTML是jsPDF的旧版API，早就被官方弃用了，它只能识别非常基础的内联样式，像break-inside这类现代分页属性完全不支持。
• 你写的空div分页标记，因为旧API不处理，所以根本起不了作用。

解决方案：改用新版html()方法 #

首先确保你引入的是最新版jsPDF（旧版本可能没有html()方法），然后修改你的生成函数：

function generatePDF() {
  // 初始化jsPDF，明确设置页面尺寸为A4，纵向
  const doc = new jsPDF('p', 'mm', 'a4');
  
  // 使用新版html()方法，对CSS和DOM的支持好很多
  doc.html(document.getElementById("divMainScreen"), {
    x: 15, // 左边距
    y: 15, // 上边距
    width: 170, // 内容宽度，A4总宽210mm，减去左右边距刚好适配
    callback: function(pdfDoc) {
      pdfDoc.save("VehicleInspection.pdf");
    }
  });
}

修复样式和分页 #

1. 样式问题：

   • 确保你的CSS样式是内联样式，或者写在页面的<style>标签里（外部CSS可能会因为加载顺序问题不生效）。比如你的header里的字体、SVG样式，保持内联就没问题。
   • 如果有复杂样式（比如flex、grid），新版html()方法基本都能识别，比旧API靠谱多了。

2. 分页问题：
   把你原来的空div分页标记，替换成标准的分页CSS属性：

   <div id="divHeader">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="red" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
       <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
     </svg>
     <i class="bi bi-caret-right-fill"></i><font>DATE : 08/09/2021</font>
   </div>
   <!-- 用这个替代原来的空div，强制后面的内容换页 -->
   <div style="page-break-after: always; break-after: page;"></div>
   <div id="divThree"> <!-- Body Content --></div>
   

   或者直接给需要分页的元素加page-break-after: always，比如给divHeader加这个样式，效果一样。

额外注意点 #

• 如果你的SVG还是显示有问题，确保它的所有样式都是内联的（比如你已经加了fill="red"，这就没问题）。
• 如果页面加载了外部CSS，最好在调用generatePDF()前确保CSS已经加载完成，避免样式丢失。

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