javascript html2pdf:下载PDF文本重叠,并打破页面

bz4sfanl  于 2023-11-15  发布在  Java
关注(0)|答案(4)|浏览(242)


的数据
目前,我使用html2pdf库下载PDF文件,它对我来说工作正常,但问题是,经过几次下载的文本重叠和完整的页面被打破。使用pagebreak类,我可以限制分页问题,但重叠问题和破碎的页面问题仍然存在。

<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文本在几次下载之后变得重叠,

5cnsuln7

5cnsuln71#

试试这个功能

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);


希望对你有帮助:)

pgky5nke

pgky5nke2#

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();

字符串

izkcnapc

izkcnapc3#

也有与Safari浏览器重叠文本的问题.此修复帮助:GitHub.“从标签中删除换行符”

rjee0c15

rjee0c154#

得到了解决方案,重叠在下载的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>

字符串

相关问题