Экспорт каждого html классов в файл PDF - PullRequest
Новая
       1

Экспорт каждого html классов в файл PDF

1 голос
/ 07 января 2020

Я пытаюсь экспортировать html .class на объединенные страницы PDF. Используя эту библиотеку: pdfMake

внутри тела есть два .content, и я дал стиль a4 .. 

.content {
    padding: 50px 0;
    width: 1000px;
    height: 842px;
}

и пытаюсь экспортировать эти элементы в PDF.

ОБНОВЛЕНО 

function makePdf(){
    pages = document.querySelectorAll(".content")
    html2canvas(pages, {
        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 500
                }]
            };


            pdfMake.createPdf(docDefinition).download("document.pdf");
        }
    });
}

Но проблема здесь. Я не могу экспортировать .content как объединенные страницы PDF. Когда я использую это так: html2canvas(pages, { это экспорт 2 слитых страниц, но пустой.

Я пытался проверить это так. html2canvas(pages[0], { тогда он экспортирует один файл PDF без проблем. но второе .content не приходит (конечно ...)

Так что я поместил его в forEach l oop, как показано ниже. 

function makePdf(){
    pages = document.querySelectorAll(".content")
    pages.forEach(page => {
        html2canvas(page, {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500
                    }]
                };


                pdfMake.createPdf(docDefinition).download("table.pdf");
            }
        });
    })

}

Но затем он экспортирует .content PDF-файлов один за другим. это не слилось ...

Я немного растерялся. Как мне получить объединенные PDF-страницы от .content

Ответы [ 2 ]

0 голосов
/ 07 января 2020

это чуть не убило меня, но, в конце концов, я решил проблему. используется библиотека jsPDF вместо pdfMake.

стили 

.content {
    margin: auto;
    padding: 50px 0;
    width: 1000px;
    height: auto;
}

script 

function makePdf(){

    pages = document.querySelectorAll(".content")
    let count = 0;
    pages.forEach(page => {
        html2canvas(page, {
            onrendered: function (canvas) {
                // var data = canvas.toDataURL();
                var data = canvas.toDataURL('image/png');
                var imgWidth = pdf.internal.pageSize.getWidth();
                pdf.addImage(data, 'PNG', '', '', imgWidth, 0);
                pdf.addPage(page)
                count++;
                if (count === pages.length) {
                    pdf.save("document.pdf")                        
                }
            }
        });
    }) //loop       
} //fn.

PS: о размерах страницы в формате PDF следует избегать internal.pageSize.getHeight(); если вы ожидаете хорошего разрешения. просто дайте это 0

0 голосов
/ 07 января 2020 
async function makePdf(){
    const pdf = new jsPDF("a4");
    let documents = document.querySelectorAll(".content")
    html2canvas(documents).then(canvas => {
      var imgWidth = pdf.internal.pageSize.getWidth();
      var imgHeight = pdf.internal.pageSize.getHeight();
      const contentDataURL = canvas.toDataURL('image/png');
      pdf.addImage(contentDataURL, 'PNG', 0, 0, imgWidth, imgHeight, '', 'FAST');
      pdf.save("test.pdf"); // Generated PDF
    });
}
...