Question

我有一个非常长的角形式，我需要将其转换为pdf。由于它是一种非常长的形式，因此我必须将其分成较小的块，并以pdf的形式在多页中显示。我怎样才能做到这一点。而且我还需要为每个页面添加页眉和页脚。

我正在使用jsPDF和dom-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

如何将多页的角度页面导出为pdf

1 个答案: