У меня есть следующий HTML-код:
<!DOCTYPE html>
<html>
<body>
<p>don't print this to pdf</p>
<div id="pdf">
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Все, что я хочу сделать, это напечатать в pdf все, что найдено в div с идентификатором «pdf». Это должно быть сделано с использованием JavaScript. Документ «pdf» должен автоматически загружаться с именем файла «foobar.pdf»
Я использовал jspdf для этого, но единственная функция, которую он имеет, это «текст», который принимает только строковые значения. Я хочу отправить HTML в jspdf, а не в текст.
javascript
jspdf
Джон Кроуфорд
источник
источник
fromHTML
функцию; см. пример «HTML Renderer» по адресу: mrrio.github.io/jsPDFОтветы:
jsPDF умеет использовать плагины. Для того, чтобы он мог печатать HTML, вы должны включить некоторые плагины и, следовательно, должны сделать следующее:
Если вы хотите игнорировать определенные элементы, вы должны пометить их идентификатором, который затем можно игнорировать в специальном обработчике элемента jsPDF. Поэтому ваш HTML должен выглядеть так:
Затем вы используете следующий код JavaScript, чтобы открыть созданный PDF-файл во всплывающем окне:
Для меня это создало красивый и аккуратный PDF, который включал только строку «напечатать это в pdf».
Обратите внимание, что обработчики специальных элементов имеют дело только с идентификаторами в текущей версии, что также указано в выпуске GitHub . Здесь утверждается:
Поэтому замена «#ignorePDF» на селекторы классов, такие как «.ignorePDF», не работала для меня. Вместо этого вам придется добавить один и тот же обработчик для каждого элемента, который вы хотите игнорировать, например:
В примерах также указано, что можно выбрать теги типа «a» или «li». Это может быть немного не ограничивающим для большинства случаев использования:
Очень важно добавить, что вы теряете всю информацию о стиле (CSS). К счастью, jsPDF умеет красиво форматировать h1, h2, h3 и т. Д., Что было достаточно для моих целей. Кроме того, он будет печатать текст только в текстовых узлах, что означает, что он не будет печатать значения текстовых полей и т.п. Пример:
источник
<div>
, который может быть одним из сотен - поэтому он должен отметить все нежелательные элементы DOM ??Это простое решение. Это работает для меня. Вы можете использовать концепцию печати javascript и просто сохранить ее в формате PDF.
источник
Вы можете использовать autoPrint () и установить для вывода значение dataurlnewwindow следующим образом:
источник
если вам нужно загрузить PDF с определенной страницы, просто добавьте кнопку, подобную этой
используйте window.print (), чтобы напечатать всю страницу, а не просто div
источник
document.querySelector("#myIframe").contentWindow.print()
Как уже упоминалось, вы должны использовать jsPDF и html2canvas . Я также нашел функцию внутри вопросов jsPDF, которая автоматически разбивает ваш PDF на несколько страниц ( источники )
источник
Одним из способов является использование функции window.print (). Который не требует никакой библиотеки
Pros
1. Никакой внешней библиотеки не требуется.
2. Мы можем печатать только отдельные части тела.
3. Никаких конфликтов и проблем.
4.Core html / js функциональность
--- Просто добавьте ниже код
CSS для
JS-код - вызов функции bewlow при нажатии btn
Примечание: используйте! Важное в каждом объекте CSS
Пример -
источник
я использую jspdf и html2canvas для рендеринга CSS и экспортирую содержимое определенного div, так как это мой код
источник
http://...domain.../path.css
или около того. Он создает отдельный HTML-документ и не имеет контекста главного.Это служило мне в течение многих лет:
источник
<body >
этом, нуждается в этом: PЕсли вы хотите экспортировать таблицу, вы можете взглянуть на этот пример экспорта, предоставляемый виджетом Shield UI Grid.
Это делается путем расширения конфигурации следующим образом:
источник
Используйте pdfMake.js и этот Gist .
(Я нашел здесь Gist вместе со ссылкой на пакет html-to-pdfmake , который я пока не использовал.)
После
npm install pdfmake
и сохранения GisthtmlToPdf.js
я использую это так:Примечания:
pdfMake
«sgetBuffer()
функции), все из браузера. Сгенерированный PDF оказывается лучше для этого вида HTML, чем с другими решениями, которые я пробовал.jsPDF.fromHTML()
предложенного в принятом ответе, поскольку это решение легко спутать со специальными символами в моем HTML, которые, очевидно, интерпретируются как своего рода разметка и полностью портят полученный PDF.jsPDF.from_html()
функции, которую не следует путать с функцией из принятого ответа) не подходит для меня, поскольку я хочу, чтобы текст в сгенерированном PDF-файле можно было вставлять, в то время как решения на основе холста генерируют растровые PDF-файлы.источник
Мне удалось заставить jsPDF печатать динамически созданные таблицы из div.
Отлично работает с Chrome и Firefox ... форматирование все взорвано в IE.
Я также включил эти:
источник
Для захвата div в PDF вы можете использовать решение https://grabz.it . У него есть JavaScript API, который прост и гибок и позволит вам захватывать содержимое одного HTML-элемента, такого как div или span
Для того , чтобы реализовать его вам нужно будет сначала получить ключ приложения и секрет и скачать в (бесплатно) SDK.
А теперь пример.
Допустим, у вас есть HTML:
Чтобы захватить то, что находится под идентификатором функций, вам нужно:
Пожалуйста, обратите внимание
target: #feature
.#feature
это ваш селектор CSS, как в предыдущем примере. Теперь, когда страница загружена, будет создан снимок экрана в том же месте, что и тег script, который будет содержать все содержимое div возможностей и ничего больше.Другие конфигурации и настройки, которые вы можете сделать с механизмом div-screenshot, пожалуйста, проверьте их здесь
источник