多页PDF与html2Canvas(Multipage pdf with html2Canvas)

我使用的反应，打字稿，我已经成功地创建从HTML页PDF文件与此参考的帮助下生成从反应的组分PDF文件

但是，如果我们要创建具有多页的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");
                });
            });
    }

请帮我了银色。先感谢您

我试图用jsPDF要解决这个问题，但我没有成功。这jsPDF管理分页拆分内容的方式是，我不清楚。所以我决定用pdfMake，另一个惊人的js库。我得到了这个问题，这些相关信息：生成的PDF文件使用JavaScript

在你文件档案化（问题生成从反应的组分PDF文件），最佳答案sugest处理分页的好方法。你为每个页面一个div。但对我来说，我的内容可以dinamically增加你的垂直尺寸，所以我不能修复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>

使用Promise.map通过蓝鸟与异步/等待资源，我们可以保证，我们会等到代从画布上的所有图像的结束。根据您的图像的大小的过程可能需要一段时间。

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

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

而他的操场外观极好的例子，以及如何TOS： http://pdfmake.org/playground.html

我还是会尝试这种方式来解决这个问题，分页升级，但它是我解决了这个问题最快捷的方式，我希望对别人有用。