Хобрук: Ваш путь к мастерству в программировании

Экспорт в PDF угловой 6

Я хочу экспортировать свою HTML-страницу в pdf, используя angular 6. Я написал следующий код для преобразования в pdf

let dataPdf = document.getElementById('contentToPrint');
const pdf = new jspdf('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('contentToPrint'),()=>{
    pdf.save('web.pdf');
});

Получение следующей ошибки:

core.js:12301 ERROR Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData 
    at Object.x.convertStringToImageData (jspdf.min.js:50)
    at Object.x.addImage (jspdf.min.js:50)
    at Object.<anonymous> (jspdf.min.js:188)
    at Object.options.complete (html2canvas.js:2711)
    at start (html2canvas.js:2215)
    at Object._html2canvas.Preload (html2canvas.js:2488)
    at html2canvas.js:2719
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:13842)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
javascript angular jspdf angular6 html-to-pdf
08.03.2019

Ответы:


1

Вам необходимо преобразовать изображение в формат base64.

Если ваши изображения статичны, вы можете преобразовать их здесь: https://www.base64-image.de/
Если изображения являются динамическими: преобразование изображения в base64 в угловой 2

После преобразования изображения в строку base64 вы можете передать это jsPDf как:

pdf.addHTML('your base64 string);
09.03.2019
  • Сделал все, но не получилось! 15.03.2019

    • 2

    Я сталкиваюсь с аналогичной проблемой.

    Похоже, вам нужно преобразовать элемент DOM в PNG. Получив его, вы должны преобразовать его в строку base64 и добавить с помощью pdf.addImage()

    Вы можете использовать html2canvas для преобразования элементов DOM в изображения.

    РЕДАКТИРОВАТЬ

    let dataPdf = document.getElementById('contentToPrint');
const pdf = new jspdf('p', 'pt', 'a4');
 html2canvas(dataPdf).then((canvas) => {
   let img = canvas.toDataURL('image/png');
   pdf.addImage(img, 'png', 40, 90, 515, 600); //sizings here
   pdf.save('web.pdf');
 }
    12.03.2019

    3

    Вы можете сделать что-то вроде этого

    import html2canvas from 'html2canvas';

var data = document.getElementById('ELEMENT_ID');
        html2canvas(data).then(canvas => {
            var imgWidth = 208;
            var pageHeight = 295;
            var imgHeight = canvas.height * imgWidth / canvas.width;
            var heightLeft = imgHeight;

            const contentDataURL = canvas.toDataURL('image/png')
            let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
            var position = 0;
            pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
            //save file with specific name
            pdf.save("Wallet.pdf");
        });
    01.04.2019
    Новые материалы
    Как симулировать серию пенальти на Python с помощью симуляции Монте-Карло, часть 1: генерация функций
    Серия пенальти была огромным испытанием во время чемпионата мира по футболу. Они вызвали много споров в социальных сетях и новостных агентствах. Даже финальный матч турнира решался по..
    AST для разработчиков JavaScript
    TL; DR Эта статья - мое выступление на недавно состоявшейся конференции Stockholm ReactJS Meetup. Вы можете посмотреть слайды здесь..
    5 проектов на Python, которые нужно создать прямо сейчас!
    Добро пожаловать! Python — один из моих любимых языков программирования. Если вы новичок в этом языке, перейдите по ссылке ниже, чтобы узнать о нем больше:
    Dall-E 2: недавние исследования показывают недостатки в искусстве, созданном искусственным интеллектом
    DALL-E 2 — это всеобщее внимание в индустрии искусственного интеллекта. Люди в списке ожидания пытаются заполучить продукт. Что это означает для развития креативной индустрии? О применении ИИ в..
    «Очень простой» эволюционный подход к обучению с подкреплением
    В прошлом семестре я посетил лекцию по обучению с подкреплением (RL) в моем университете. Честно говоря, я присоединился к нему официально, но я редко ходил на лекции, потому что в целом я нахожу..
    Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
    Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..
    Фишинг — Упаковано и зашифровано
    Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..