Question

enter image description here
当前，我正在使用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

使用野生动物园浏览器重叠文本时也遇到问题。此修复有助于：GitHub。 “从标签中删除换行符”

html2pdf：正在下载的pdf文本重叠并且中断了页面

3 个答案: