如何将角度页面导出为具有多页的pdf答案

【问题标题】：how to export a angular page into pdf with multiple page如何将角度页面导出为具有多页的pdf
【发布时间】：2020-03-28 01:01:30
【问题描述】：

我有一个很长的角度形式，我需要将其转换为 pdf。由于它是一个非常冗长的形式，我必须将它分成更小的块并在 pdf 的多个页面中显示它。我怎样才能实现它。而且我还需要为每个页面添加页眉和页脚。

我正在使用 jsPDF 和 dom-to-image 包进行 pfd 转换。

以下是我为pdf转换编写的代码：

exportPdf(){
    var doc = new jsPDF('potrait','px','a4');
    let imageData= new Image();
    imageData.src='../../assets/images/testimg.png';
    var filename="application";
    var options={};
    var img;
    var newImage;
    var node = document.getElementById('formContent');
    var numRowsToCut=3;
    var imagePieces=[];

      domtoimage.toPng(node, { }).then(function(dataUrl) 
      {
        img = new Image();
        img.src = dataUrl;
        newImage = img.src;
        img.onload = function(){

            var pdfWidth = img.width;
            console.log("image width "+pdfWidth);
            var pdfHeight = (img.height)/3;

            var width = doc.internal.pageSize.getWidth();
            console.log("width "+width);
            var height = doc.internal.pageSize.getHeight();

            for(var y = 0; y < numRowsToCut; ++y) {
              var canvas = document.createElement('canvas');
              var context = canvas.getContext('2d');
              context.drawImage(newImage, 0, y *pdfHeight, pdfWidth,pdfHeight, 0, 0,pdfWidth,pdfHeight);
              imagePieces.push(canvas.toDataURL());
          }            

            var docDefinition = {
            content: [{
                image: imagePieces[0],
                width: 500,
                pagebreak:'after'
            },
            {
              image: imagePieces[1],
              width: 500,
              pagebreak:'after'
          },
          {
            image: imagePieces[0],
            width: 500,
            pagebreak:'after'
        }],
            pageBreakBefore: function(currentNode) {
              return currentNode.style && currentNode.style.indexOf('myDivClass') > -1;
            }
          };
          pdfMake.createPdf(docDefinition).download(filename);
        };


      })
      .catch(function(error) {

        // Error Handling
        console.log(error);


      });

  }

任何帮助将不胜感激。

【问题讨论】：

标签： angular6 pdf-generation jspdf

【解决方案1】：

我从教程中得到了解决方案。在这里发布它，因为它可能对其他人有帮助。

Generate Multipage PDF using Single Canvas of HTML Document using jsPDF

How to Create Multipage PDF from HTML Using jsPDF and html2Canvas

【讨论】：