Не удается получить содержимое div с помощью jsPDF

Я пытался создать PDF из HTML, используя jsPDF и html2canvas. Он работал с полной страницей, но не с конкретным div, используя getElementById(). Консоль говорит

IndexSizeError: Index or size is negative or greater than the allowed amount html2canvas.js:2859

Вот мой сценарий

 <script>
        let doc = new jsPDF();

        doc.addHTML(document.getElementById('content'), function() {
            doc.save('html.pdf');
        });
    </script>

Кто-нибудь может мне с этим помочь?

предположим, что document.getElementById('content') что-то возвращает, возможно, лучше всего начать с него

David Bray 02.02.2019 22:34

Он возвращает [object HTMLDivElement], я предполагаю, что это должно быть правильно

Areg 02.02.2019 22:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
1 636
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

doc.addHTML() теперь фактически устарел. Новый API, поддерживающий работу с векторами, doc.html(), работает намного лучше. Посмотрите их образец сами. Вот рабочий код:

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity = "sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin = "anonymous"></script>
<script src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->

<script>
    function download() {
        let pdf = new jsPDF('l', 'pt', 'a3');
        pdf.html(document.getElementById('content'), {
            callback: function (pdf) {
                pdf.save('test.pdf');
            }
        });
    }
</script>

Update: if you got a blank page, try different versions of html2canvas

Другие вопросы по теме