jspdf 打印多页时两边取消留白_jspdf – 带有html2Canvas的多页pdf

我试图使用jsPDF解决这个问题,但我没有成功. jsPDF管理要分页的内容的方式对我来说并不清楚.

所以我决定使用另一个惊人的js库pdfMake.

我在这个问题中得到了这些信息：

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'

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.

// 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.

// 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.

// 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.

print using PDFMake

使用bluebird的Promise.map和async / await资源,我们可以确保我们等到画布生成所有图像的结束.此过程可能需要一段时间,具体取决于图像的大小.

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