Блог

Главная - Вопросы по программированию - JS JQUERY JSPDF Как я могу загружать изображения и входные значения из объекта BLOB в формате PDF

JS JQUERY JSPDF Как я могу загружать изображения и входные значения из объекта BLOB в формате PDF

#javascript #jquery #jspdf

Вопрос:

Я могу преобразовать свой HTML-код в объект BLOB в формате PDF.

     var that = this;
    var doc = new jsPDF('p', 'pt', 'a4');
    var htmlString = '<div class="container"> <img src="base64image" alt="Image"> <input value="testing"><p> Paragraph</p> <label class="bold" for="fname">Vehicle</label></div>';

    doc.fromHTML(htmlString, 20, 20, {}, function (bla) {
        doc.save('saveDOC.pdf'); // After downloading PDF i can see image and Label. But i cant see my input values.
    },0);

    // Below code is to convert HTML into Blob as PDF

    var blob = new Blob([doc.output("blob")], {
        type: "application/pdf"
    });

В приведенном выше коде переменная htmlString содержит <img/> , <input/> , <label/> . Когда я пытаюсь загрузить объект BLOB в формате PDF, я получаю пустой PDF-файл. Но когда я удаляю <img/> , <input/> я могу просматривать содержимое в формате PDF объекта BLOB.

Ниже приведен код для преобразования большого двоичного объекта в формат PDF..

 const downloadFile = (blob, fileName) => {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    document.body.append(link);
    link.click();
    link.remove();
    setTimeout(() => URL.revokeObjectURL(link.href), 7000);
};
downloadFile(new Blob([doc.output("blob")]), "document.pdf");

Как я могу получить изображения и входные значения в загруженный PDF-файл из объекта BLOB?

Заранее спасибо.

Комментарии:

1. Кто-нибудь, пожалуйста, может мне помочь???

2. @KJ, если я скопирую строку изображения base64, то смогу получить изображение без каких-либо проблем… Но единственная проблема заключается в том, что файл не отображается в формате PDF, загруженном из большого двоичного объекта. и тег <input> , какой будет альтернативный тег, который я могу дать.. потому что, если я добавлю <метку> или <метку><текст>, то полный пользовательский интерфейс будет выглядеть неуклюжим, а CSS также не будет применяться в BLOB …как я могу продолжить? вы можете мне помочь

Ответ №1:

Есть 2 вещи, которые вы должны знать о jsPDF, которые могут быть вашей проблемой:

  1. Что касается изображений. jsPDF пытается прочитать изображение и вставить его в PDF-файл с помощью JavaScript. Из-за стандартов политики безопасности контента jsPDF не может добавлять изображения, существующие в других доменах. (Если только они этого не разрешат). Веб-страница может вставлять эти изображения на страницу, но JavaScript не имеет доступа к содержимому этих изображений. Это похоже на IFRAME. Вы можете добавить другой веб-сайт, но не можете получить к нему доступ. Подумайте о ком-то, кто будет встраивать YouTube и сможет получить ваше имя пользователя Google. Это невозможно. То же самое касается изображений. Если вы используете данные, как в примере, возможно, есть проблема с тем, что вы закодировали изображение (вы не предоставили свои данные).
  2. Что касается полей ввода. jsPDF не читает текст во входных данных. Это не часть HTML, это просто текущее состояние (даже если вы поместили его в атрибут value). Также jsPDF не считывает цвет ссылки (если вы посетили или нет…, это просто состояние). Поэтому в вашем случае я предлагаю вам преобразовать все поля ввода в простой текст в том же стиле (вы можете использовать элементы DIV…)
Метки: