Javascript 如何使用jsPDF和HTML2Canvas从网站获取多页pdf？

我有一个脚本，它使用HTML2Canvas在页面中截取

div

，然后使用jsPDF将其转换为pdf

问题是生成的pdf只有一页，而屏幕截图在某些情况下需要多页。例如，屏幕截图大于8.5x11。宽度很好，但我需要它来创建多个页面，以适应整个屏幕截图

这是我的剧本：

var pdf = new jsPDF('portrait', 'pt', 'letter');
$('.export').click(function() {
      pdf.addHTML($('.profile-expand')[0], function () {
           pdf.save('bfc-schedule.pdf');
      });
 });

---

您知道如何修改它以允许多个页面吗？

您可以使用addhtml的页面拆分选项，如下所示：

var options = {
    background: '#fff',
    pagesplit: true
};

var doc = new jsPDF(orientation, 'mm', pagelayout);
doc.addHTML(source, 0, 0, options, function () {
        doc.save(filename + ".pdf");
        HideLoader();`enter code here`
});

---

注意：这将破坏多个页面上的html，但这些页面将被拉伸。到目前为止，拉伸是addhtml中的一个问题，我仍然无法在internet上找到如何解决这个问题。

pdf.addhtml在网页上有svg图像时不起作用。 我在这里复制解决方案，基于画布中的图片

以下是我发现有效的数字（纸张宽度和高度）。它仍然在页面之间创建了一个小的重叠部分，但对我来说已经足够好了。如果你能从jsPDF中找到一个官方号码，就使用它们

var imgData = canvas.toDataURL('image/png');
var imgWidth = 210; 
var pageHeight = 295;  
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;

doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
  position = heightLeft - imgHeight;
  doc.addPage();
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
}
doc.save( 'file.pdf');`

你可以试试：

$('#cmd2').click(function () {

    var len = 4; //$x(".//body/div/div").length
    var pdf = new jsPDF('p', 'mm','a4');
    var position = 0;
    Hide
    for (let i = 1;i  <= len; i++){
        html2canvas(document.querySelector('#pg'+i),
            {dpi: 300, // Set to 300 DPI
            scale: 1 // Adjusts your resolution
            }).then(canvas => {
            pdf.addImage(canvas.toDataURL("images/png", 1), 'PNG', 0,position, 210, 295);

            if (i == len){
                pdf.save('sample-file.pdf');
            }else{
                pdf.addPage();
            }
        });
    }
});

$（'#cmd2'）。单击（函数（）{
变量len=4；//$x（“.//body/div/div”）。长度
var pdf=新的jsPDF（'p'，'mm'，'a4'）；
var位置=0；
隐藏
for（设i=1；i{
addImage（canvas.toDataURL（“images/png”，1），“png”，0，position，210295）；
如果（i==len）{
pdf.save（'sample-file.pdf'）；
}否则{
pdf.addPage（）；
}
});
}
});

我能够使用

async

功能完成它

(async function loop() {
    var pages = [...]
    for (var i = 0; i < pages.length; i++) {
      await new Promise(function(resolve) {
        html2canvas(pages[i], {scale: 1}).then(function(canvas) {

          var img=canvas.toDataURL("image/png");
          doc.addImage(img,'JPEG', 10, 10);
          if ((i+1) == pages.length) {
            doc.save('menu.pdf');
          } else {
            doc.addPage();
          }
          resolve();
        });
      });
    }
})();

（异步函数循环（）{
变量页=[…]
对于（变量i=0；i

这是我的建议，还有jspdf和html2canvas，它们为我做了很好的工作：

我使用的包装器节点保存要转换为pdf的内容：

<div id="main-content">
    <!-- the content goes here -->
</div>
<!-- and a button somewhere in the dom -->
 <a href="javascript:genPDF()">
     <i class="far fa-file-pdf"></i> &nbsp; Download PDF
 </a>

享受

---

为@Code Spy提供了您提供的链接，该链接是本aporach的基础。

在jsPDF的Github上有一篇文章讨论了拉伸问题和模糊问题。他们确实提供了一些解决方法。但是它扩展了HTML？使用最新的jsPDF，它在pagesplit option=true时对我很好。关于这方面的类似教程您是否尝试过？它肯定不起作用，因为承诺是异步的，这是一个for循环。我试过了，但不起作用。这取决于你想在何时何地生成文件。。。但它仍然适用于我的项目。这不起作用，我只得到第一页。但我想问题在于html2canvas函数……如何创建页面的动态宽度和高度？

var height=Math.max（body.scrollHeight，body.offsetHeight，html.clientHeight，html.scrollHeight，html.offsetHeight）

document.body.style.height=${height}px

@ManmeetKhurana这就是我如何获得任何页面的完整高度。1） 计算高度2）设置高度。html2canvas然后将其“画布”高度设置为该值。也可以使用宽度，只需将高度更改为宽度。当PDF中的页数超过2页时，代码对我来说已经崩溃了。我使用了-pageHeight*计数器表示位置（在while循环中），这为这一行的myank you@helle修复了它：

let pdf=new jsPDF（'p'，'mm'，[pdf_-Width，pdf_-Height]）保存了我的一天。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript">

    const documentSlug = "some Slug";
    const documentTitle ="Some Title";

    function genPDF(){
        let html2pdf = new pdfView();
        html2pdf.generate();
    }
</script>

//assuming jquery is in use

let pdfView = function(){
    //assuming documentSlug is a constant set earlier 
    this.documentSlug = documentSlug;
    //assuming documentTitle is a constant set earlier
    this.documentTitle = documentTitle;

    //in this html node the part which shall be converted to pdf
    this.nodeId = "main-content";
};

pdfView.prototype.generate = function(){
    let self = this;
    this.prepareDocumentToPrint();

    //variables
    let HTML_Width = $("#"+self.nodeId).width();
    let HTML_Height = $("#"+self.nodeId).height();
    let top_left_margin = 15;
    let PDF_Width = HTML_Width+(top_left_margin*2);
    let PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);

    this.pdfWidth = PDF_Width;
    this.pdfHeight = PDF_Height;

    let canvas_image_width = HTML_Width;
    let canvas_image_height = HTML_Height;

    let totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;

    html2canvas($("#"+self.nodeId)[0],{allowTaint:true, scale: 2}).then(function(canvas) {
        canvas.getContext('2d');

        //console.log(canvas.height+"  "+canvas.width);

        let imgData = canvas.toDataURL("image/jpeg", 1.0);
        let pdf = new jsPDF('p', 'mm',  [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);

        pdf = self.addPdfHeader(pdf);
        pdf = self.addPdfFooter(pdf, 1);

        for (let i = 1; i <= totalPDFPages; i++) {
            pdf.addPage(PDF_Width, PDF_Height);

            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4) + top_left_margin,canvas_image_width,canvas_image_height);

            pdf = self.addPdfHeader(pdf);
            pdf = self.addPdfFooter(pdf, (i+1));
        }

        pdf.save(self.documentSlug+".pdf");

        self.resetDocumentAfterPrint();

    });
};

//this one sets a fixed viewport, to be able to 
//get the same pdf also on a mobile device. I also
//have a css file, which holds the rules for the 
//document if the body has the .printview class added
pdfView.prototype.prepareDocumentToPrint = function(){
    let viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=1280, initial-scale=0.1');
    $('body').addClass("printview");
    window.scrollTo(0,0);
};

pdfView.prototype.addPdfHeader = function(pdf){

    pdf.setFillColor(255,255,255);
    pdf.rect(0, 0, this.pdfWidth, 40, "F");

    pdf.setFontSize(40);
    pdf.text("Document: "+this.documentTitle+" - Example Lmtd. Inc. (Whatsoever)", 50, 22);

    return pdf;
};

pdfView.prototype.addPdfFooter = function(pdf, pageNumber){

    pdf.setFillColor(255,255,255);
    pdf.rect(0, pdf.internal.pageSize.height - 40, this.pdfWidth, this.pdfHeight, "F");

    pdf.setFontSize(40);
    pdf.text("Seite "+pageNumber, 50, pdf.internal.pageSize.height - 20);
    return pdf;
};

//and this one resets the doc back to normal
pdfView.prototype.resetDocumentAfterPrint = function(){
    $('body').removeClass("printview");
    let viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'device-width, initial-scale=1, shrink-to-fit=no');
};

body.printview #header,
body.printview footer
{
    display: none !important;
}

body.printview{
    margin-top: 0px !important;
}

body.printview #main-content{
    margin-top: 0px !important;
}

body.printview h1{
    margin-top: 40px !important;
}