jspdf - 带有 html2Canvas 的多页 pdf

Question

我正在使用 react-typescript 并借助此 ref 成功地从 html 页面创建了一个 PDF 文件 Generating a PDF file from React Components

但是如果我们想创建一个包含多个页面的 PDF 那么该怎么办呢？ a4 大小的页面在所有边上都有适当的边距，并且在每个新页面中都应该应用边距。

这是我的代码。

private printDocument() {
        const input = document.getElementById("pdf");

        html2canvas(input)
            .then((canvas) => {
                const pdf = new jsPDF("p", "px", "a4");
                pdf.addHTML(input, 0, 0, {
                    pagesplit: true,
                    background: "#ffffff",
                }, () => {
                    pdf.save("download.pdf");
                });
            });
    }

请帮我把它弄成银色。 提前谢谢你

Answer 1

我尝试使用 jsPDF 来解决这个问题，但我没有成功。我不清楚 jsPDF 管理分页内容的方式。 所以我决定使用 pdfMake，另一个很棒的 js 库。 我在这个问题中得到了这些信息:Generating PDF files with JavaScript

在您提到的问题 ( Generating a PDF file from React Components ) 中，最佳答案是处理分页的好方法。你为每个页面制作一个 div。但就我而言，我的内容可以极大地增加垂直尺寸，所以我无法修复 div 的垂直尺寸。 所以，我确实喜欢这样:

printDocument() {
  const divs = document.getElementsByClassName('example');
  const newList = [].slice.call(inputs);
  var contentArray = []
  var docDefinition = {
            pageSize: {width: 800, height: 1173},
            content: [
                {
                    text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Confectum ponit legam, perferendis nomine miserum, animi. Moveat nesciunt triari naturam.'
                }
            ]
            
        }
        
  Promise.map(newList, async (element, index) => {
            let canvas = await html2canvas(element);
            const imgData = await canvas.toDataURL('image/png');
            // console.log("imgData URL => ", imgData)
            // margin horizontal -40 = removing white spaces
            return contentArray[`${index}`] = [{ image: imgData, width: canvas.width, height: canvas.height, margin: [-40, 0] }, {
                text: ` ${index} - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Confectum ponit legam, perferendis nomine miserum, animi.`
}];
           
        }).then(
            () => ( docDefinition.content.push(contentArray))
        ).then(
            () => {
                console.log("... starting download ...")
                pdfMake.createPdf(docDefinition).download('examplePdf.pdf')
            } 
        )
}

// In your react's component constructor ... 

constructor(props) {
        super(props);
        this.printDocument = this.printDocument.bind(this)
}

// the imports below ...
import Promise from 'bluebird';
import html2canvas from 'html2canvas';
import pdfMake from 'pdfmake/build/pdfmake.js';
import pdfFonts from "pdfmake/build/vfs_fonts.js";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

// i'm using these middlewares
import promise from 'redux-promise'
import multi from 'redux-multi'
import thunk from 'redux-thunk'

<div>
  The approach here is: a div it's not a page. Because if the image generated by the canvas element it's bigger than the page vertical size, we'll need to control the pagination by ourselves. So, we broke our content in small elements to the pdf generator handle the pagination to us. This way we garantee that the pagination will occurs without cuts. 
  <div className="example" style={{ backgroundColor: '#ffffff', maxWidth: '800px', maxHeight: '1173px', borderStyle: 'groove', borderColor: 'red', margin: '0px' }} >
  
  // any content or component here, we need maxHeight to be sure that the div's height size it's not bigger than the your PDF doc's height dimension, else your div may never be rendered inside it.
  
  </div>
  <div className="example" style={{ backgroundColor: '#ffffff', maxWidth: '800px', maxHeight: '1173px', borderStyle: 'groove', borderColor: 'red', margin: '0px' }} >
  
  // any content or component here, we need maxHeight to be sure that the div's height size it's not bigger than the your PDF doc's height dimension, else your div may never be rendered inside it.
  
  </div>
  <div className="example" style={{ backgroundColor: '#ffffff', maxWidth: '800px', maxHeight: '1173px', borderStyle: 'groove', borderColor: 'red', margin: '0px' }} >
  
  // any content or component here, we need maxHeight to be sure that the div's height size it's not bigger than the your PDF doc's height dimension, else your div may never be rendered inside it.
  
  </div>
  
</div>

<div>
 <button onClick={this.printDocument}> print using PDFMake  </button>
</div>

将 bluebird 的 Promise.map 与 async/await 资源结合使用，我们可以确保我们会等到从 Canvas 生成所有图像结束。此过程可能需要一段时间，具体取决于图片的大小。

http://bluebirdjs.com/docs/api/promise.map.html

看看pdfMake的github: https://github.com/bpampuch/pdfmake

他的 playground 有很好的例子和操作方法: http://pdfmake.org/playground.html

我仍然会尝试升级这种方式来解决这个分页问题，​​但这是我解决问题的最快方式，我希望对某些人有用。