html2pdf：下载的pdf文本重叠并破坏页面

Question

目前，我正在使用 html2pdf 库下载 PDF 文件，它对我来说工作正常，但问题是在几次下载后文本重叠并且整个页面被破坏。使用分页符类我可以限制分页符问题，但重叠问题和断页问题仍然存在。尝试过的代码是

<div class="export-pdf" id="export-pdf">
      <div class="fullWidth page-min-height">
            Planned Procedure
      </div>
</div>

var element = document.getElementById('export-pdf');
var opt = {
            margin: [10, 0, 10, 0],
            pageNumber: true,
            pagebreak: {
                mode: 'css',
                avoid: '.breakPage',
                before: '.beforeClass'
            },
            filename: test.pdf,
        };
  html2pdf().set(opt).from(element).save()

文本重叠，我期待“计划程序”...如果我们有更多数据
完整的 pdf 文本在几次下载后变得重叠，

Answer 1

试试这个功能

 function genTablePDF(heightSize){
     html2canvas(document.getElementById("HTMLtoPDF"),{
       onrendered: function (canvas){
         var img = canvas.toDataURL("image/png");
         var doc = new jsPDF();
         doc.addImage(img,'JPEG',5,8,200, +heightSize);
         doc.setPage(2);
         doc.internal.getNumberOfPages();
         var dateName = new Date();
         doc.save('PDF ( ' + dateName + ' ) ' +'.pdf'); // file name pdf
       }
     });
  }

最后一个参数中的变量用于页面的高度

doc.addImage(img,'JPEG',5,8,200, +heightSize);

您可以通过函数 heightSize 传递它或者您可以使用

heightSize = document.getElementById('pageSize').value

其中 document.getElementById('pageSize').value 给出页表的行数，或者您可以使用业务逻辑，例如：

     var heightSize = document.getElementById('pageSize').value;
     if( +heightSize === 7 ){
        heightSize = 120;
     }
     if( +heightSize === 14 ){
        heightSize = 200;
     }
     if( +heightSize === 21 ){
        heightSize = 260;
     }
     if( +heightSize === 28 || +heightSize === 35 || +heightSize === 42 || +heightSize === 50 ){
        heightSize = 285;
     }
     doc.addImage(img,'JPEG',5,8,200, +heightSize);

希望对你有帮助:)

Answer 2

var element = document.getElementById('inner');
            var opt = {
                margin: 30,
                filename: this.auth_user,
                image: {type: 'jpeg',quality: 0.98},
                html2canvas: {
                    scale: 2,
                    bottom: 20
                },
                pagebreak: { mode: ['css'], padding : 200 },
                jsPDF: {
                    unit: 'mm',
                    orientation: 'portrait'
                }
            };

            html2pdf().set(opt).from(element).then(function() {
            }).save();

Answer 3

还存在与 safari 浏览器重叠文本的问题。此修复有帮助：GitHub。 “从标签中删除换行符”

Answer 4

找到了下载的pdf文件重叠的解决方案。

字体系列请使用CDN

<!-- Include the Roboto font -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/font/Roboto/normal.js"></script>


and in script below changes

<script>
window.jsPDF = window.jspdf.jsPDF;
function Convert_HTML_To_PDF() {
    var doc = new jsPDF();
    
    // Load the Roboto font
    doc.addFont('Roboto', 'normal');
    
    // Set the font for the document
    doc.setFont('Roboto');

    // Set font size
    var fontSize = 16;
    doc.setFontSize(fontSize);
    
    // Source HTMLElement or a string containing HTML.
    var elementHTML = document.querySelector("#printReport");

 // Set the font size for the HTML element
    elementHTML.style.fontSize = fontSize + 'px';

    // Use the specified font in the HTML to ensure consistency
    elementHTML.style.fontFamily = 'Roboto';
    
    doc.html(elementHTML, {
        callback: function(doc) {
            // Save the PDF
            doc.save('report.pdf');
        },
        margin:[15,5,25,5],
        autoPaging: 'text',
        x:0,
        y:0,
        width: 200, //target width in the PDF document
        windowWidth: 1000 //window width in CSS pixels
    });
}
</script>