Question

我的以下代码工作正常，但我希望所有页面都在一个PDF中。我有2个json对象。当我单击按钮时，它在2选项卡中打开具有不同的结果，我希望它在一个pdf选项卡中打开，在一个pdf中的多个页面中添加多个记录。你能帮我吗？

for (let i = 0;i  <= this.reportVGWM.length; i++){
          html2canvas(document.querySelector('#myTable' + i)).then(canvas => {
            var imgWidth = 180;
            var pageHeight = 280;
            var imgHeight = canvas.height * imgWidth / canvas.width;
            var heightLeft = imgHeight;
            var imgData = canvas.toDataURL("image/jpeg");
            var heightLeft = imgHeight;
            var pdf = new jsPDF('p', 'mm', 'a4');
            var position = 20;
            var font: { 'padding-bottom: 40%; padding-top:30%' };
            pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
            pdf.addPage();                 
            pdf.output('dataurlnewwindow');

          });
        }
        }, 1);
      });

Answer 1

您可以使用pdfMake，这是另一个很棒的js库。我在以下问题中得到了这些信息：使用JavaScript生成PDF文件

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资源，我们可以确保我们等到所有图像生成结束从画布。此过程可能需要一段时间，具体取决于您的图片大小。

使用html2canvas和jspdf在pdf中添加多个页面

1 个答案: