如何使用html2pdf向pdf添加水平线

问题描述

我正在研究 PWA 项目,该项目应该在用户输入数据后离线生成 pdf,到目前为止我使用的是 html2pdf 库,我可以生成 pdf,但是当我尝试为页脚添加一行时,它无法正确显示。这是它如何在 pdf

enter image description here

显示的屏幕截图

我用来生成pdf的代码如下

    $(document).on("click","#btnViewVisits",function(){
                $.get("http://127.0.0.1:8000/html/progressnotes.html",function(data) {
                  var opt = {
                    margin: 0.2,filename: 'NewVisit.pdf',image: { type: 'jpeg',quality: 1.0 },html2canvas: { scale: 2,bottom: 10 },jsPDF: { unit: 'in',format: 'letter',orientation: 'portrait' }
                };
                html2pdf().from(data).set(opt).toPdf().get('pdf').then(function (pdf) {
                var totalPages = pdf.internal.getNumberOfPages();

                
                for (i = 1; i <= totalPages; i++) {
                  pdf.setPage(i);
                  pdf.setFontSize(8);
                  pdf.line(0,pdf.internal.pageSize.getHeight() - 0.4,315,0);
                  //pdf.text('Page ' + i + ' of ' + totalPages,pdf.internal.pageSize.getWidth() - 1,pdf.internal.pageSize.getHeight() - 0.25);
                } 
              }).save();
            });
        });

我在 pdf.line 中尝试了多个值,但它产生了粗线,第二个是斜线。非常感谢您对此的任何帮助。

解决方法

我终于能够通过更改 javascript 中的一些设置来解决这个问题,对于任何寻找解决方案的人,我正在发布 js 方法

$(document).on("click","#btnViewVisits",function(){
                $.get("http://127.0.0.1:8000/html/progressnotes.html",function(data) {
                  var opt = {
                    margin: 5,filename: 'NewVisit.pdf',image: { type: 'jpeg',quality: 1.0 },html2canvas: { scale: 5 },jsPDF: { unit: 'mm',format: 'a4',orientation: 'portrait' }
                };
                html2pdf().from(data).set(opt).toPdf().get('pdf').then(function (pdf) {
                var totalPages = pdf.internal.getNumberOfPages();

                
                for (i = 1; i <= totalPages; i++) {
                  pdf.setPage(i);
                  pdf.setFontSize(8);
                  pdf.setLineCap(2);
                  pdf.line(3,pdf.internal.pageSize.getHeight() - 20,pdf.internal.pageSize.getWidth() - 2,pdf.internal.pageSize.getHeight() - 20);
                  pdf.text('Page ' + i + ' of ' + totalPages,pdf.internal.pageSize.getWidth() - 25,pdf.internal.pageSize.getHeight() - 10);
                } 
              }).save();
            });
        });