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');
<div> The approach here is: a div it not a page. Because if the image generated by the canvas element it 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 height size it not bigger than the your PDF doc 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 height size it not bigger than the your PDF doc 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 height size it not bigger than the your PDF doc height dimension, else your div may never be rendered inside it. </div> </div> <div> <button onClick={this.printDocument}> print using PDFMake </button> </div>