如何将 angular 页面导出为多页 pdf

Question

我在 angular 中有一个非常长的表格，我需要将其转换为 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);


      });

  }

如有任何帮助，我们将不胜感激。

Answer 1

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

Generate Multipage PDF using Single Canvas of HTML Document using jsPDF

How to Create Multipage PDF from HTML Using jsPDF and html2Canvas

如何将 angular 页面导出为多页 pdf

how to export a angular page into pdf with multiple page

pdf-generation

jspdf

angular6