Многостраничный pdf с html2Canvas

Я использую react-typescript, и я успешно создал PDF-файл из html-страницы с помощью этой ссылки Создание файла PDF из компонентов React

Но если мы хотим создать PDF-файл с несколькими страницами, что делать? со страницей формата А4 с соответствующими полями со всех сторон, и на каждой новой странице следует применять это поле.

И вот мой код.

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 html2canvas html2pdf
person Hardik Chaudhary    schedule 28.11.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я пытался использовать jsPDF для решения этой проблемы, но мне это не удалось. Способ, которым jsPDF управляет разделением содержимого на страницы, мне не ясен. Поэтому я решил использовать pdfMake, еще одну замечательную библиотеку js. Я получил эту информацию в этом вопросе: Создание файлов PDF с помощью JavaScript

В вопросе, который вы указали (Создание файла PDF из компонентов React ), лучший ответ предлагает хороший способ справиться с нумерацией страниц. Вы делаете 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>

Используя Promise.map от bluebird с ресурсами async/await, мы можем гарантировать, что дождемся окончания генерации всех изображений с холста. Этот процесс может занять некоторое время в зависимости от размера вашего изображения.

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

Взгляните на github pdfMake: https://github.com/bpampuch/pdfmake

И его игровая площадка с отличными примерами и инструкциями: http://pdfmake.org/playground.html

Я все еще пытаюсь обновить этот способ, чтобы решить эту проблему с нумерацией страниц, но это был самый быстрый способ решить проблему, и я надеюсь, что он будет полезен для кого-то.

person Matheus Reis    schedule 11.03.2018

arrow_upward
0
arrow_downward

Вы пытаетесь?

const printDocument= () => {
const input = document.getElementById('divToPrint');
const input2 = document.getElementById('divToPrint2');
const pdf = new jsPDF();

html2canvas(input)
  .then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    pdf.addImage(imgData, 'JPEG', 0, 0);
    pdf.addPage();
    html2canvas(input2)
      .then((canvas2) => {
        const imgData2 = canvas2.toDataURL('image/png');
        pdf.addImage(imgData2, 'JPEG', 0, 0);
        pdf.save("download.pdf");
      })
    ;
  })
;

}

person Sơn Hoàng    schedule 23.01.2021