Скрипт кнопки сохранения html в pdf

Преобразование веб-страниц в PDF

На этой странице

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Веб-страницы и PDF

Ядром веб-страницы является файл, написанный на языке разметки гипертекста (HTML). Обычно HTML-файл включает связи с другими файлами, которые либо отображаются на веб-странице, либо определяют внешний вид или работу страницы.

При преобразовании веб-страницы в формат PDF HTML-файл и все связанные файлы — например, изображения в формате JPEG, файлы Adobe FLA , каскадные таблицы стилей, текстовые файлы, карты изображений и формы — включаются в процедуру преобразования.

Конечный файл PDF действует аналогично исходной веб-странице. Например, изображения, ссылки, карты изображений и большинство файлов мультимедиа отображаются и работают обычным образом в PDF (анимированные файлы в формате GIF отображаются в виде неподвижных изображений, показывая последний кадр анимации).

Такой файл PDF функционирует как любой другой файл PDF. Например, можно перемещаться по файлу при помощи прокрутки или закладок; пользователи могут добавлять комментарии; можно добавить функции защиты, поля формы и иные функции, которые расширяют работу с файлом.

При подготовке к преобразованию веб-страниц в PDF, учитывайте следующие рекомендации, которые влияет на ваш подход к процессу преобразования.

Какой объем необходимо преобразовать?

Если необходимо преобразовать только выбранные области текущей открытой веб-страницы, используйте PDFMaker из Internet Explorer . Если необходимо преобразовать несколько или все уровни с многостраничного сайта в PDF, следует использовать Acrobat.

Необходимо создать новый файл PDF из веб-страниц или добавить преобразованные страницы к существующему файлу PDF?

Эту операцию можно выполнить либо в Acrobat, либо с помощью Internet Explorer , но для этого придется использовать разные кнопки и команды.

Для преобразования веб-страниц на китайском, японском и корейском языках (CJK) в PDF на Западноевропейской системе в Windows при установке Acrobat необходимо установить файлы поддержки языков CJK. Также лучше выбирать соответствующую кодировку из параметров преобразования HTML.

Преобразование веб-страниц в PDF в Internet Explorer, Google Chrome и Firefox (Windows)

Acrobat устанавливает панель инструментов Adobe PDF в браузере Internet Explorer (версия 8.0 или более поздняя), Google Chrome и Firefox. Используя команды на этой панели инструментов, вы можете преобразовать отображаемую веб-страницу в PDF различными способами. Например, вы можете преобразовать всю веб-страницу или только ее выделенные области. Также вы можете создать документ PDF или добавить преобразованную веб-страницу к существующему файлу PDF. Меню панели инструментов также содержит команды, с которых начинаются дальнейшие действия после преобразования, например присоединение созданного файла PDF к новому сообщению электронной почты или его печать.

Как сохранить веб-страницу в PDF — 3 способа

Всем доброго времени!

Несмотря на то, что в каждом браузере можно быстро создавать закладки на понравившиеся страницы, тем не менее, порой очень необходимо сохранить нужную веб-страничку в PDF (хотя бы потому, что эта страница со временем с сайта может быть удалена или отредактирована) .

К тому же информацию из PDF-формата можно легко читать на самых разных устройствах (его поддерживают все ридеры без исключения), можно редактировать в Word, передавать другим пользователям. Да и сама страница, со временем не разъедется, не изменится ее форматирование и оформление. В общем, полезная и нужная вещь!

В этой статье рассмотрю несколько способов, как это можно быстро и легко сделать. Собственно, приступим к делу.

3 способа сохранения веб-страницы в DPF

С помощью печати в браузере

Будем считать, что вы нашли очень интересный и нужный материал, который непременно необходимо сохранить к себе. Рассмотрю действия по порядку.

1) Какой бы не был у вас браузер (Chrome, Opera, Edge, Firefox и др.), нажмите сочетание кнопок Ctrl+P (это сочетание означает распечатку страницы). Также эта функция доступна в меню браузеров.

Нашли веб-страницу, которую нужно сохранить

2) Далее измените принтер по умолчанию на «Сохранить как PDF» или «Microsoft Print to PDF» (в зависимости от вашего браузера и ОС — у вас могут быть доступны разные варианты: как оба, так и всего один из них). См. пару скриншотов ниже.

Изменяем принтер на сохранение в PDF

Microsoft Print to PDF

3) Теперь задайте основные настройки: кол-во сохраняемых страниц, раскладку страницы, поля, цветность, колонтитулы и пр. После нажмите кнопку «Печатать».

Задаем основные настройки

4) Далее укажите место на диске, где вы хотите сохранить файл, задайте ему имя.

Задаем расположение и имя файла

Собственно, на этом задача выполнена. Теперь полученный PDF можно открыть в Word, Adobe PDF Reader, и сотнях других программ, поддерживающих данный формат.

Задача выполнена, файл сохранен

С помощью спец. расширений

Для большинства популярных браузеров сейчас есть куча различных дополнений и расширений, позволяющая сохранять понравившиеся странички как в облачные хранилища, так и в PDF файлы на жестком диске.

Выделить я бы хотел одно очень интересное дополнение — PDF MAGE.

Читать еще: Rdp через vpn настройка

Небольшое дополнение для Firefox, Opera, Chrome, позволяющие в 1 клик мышкой сохранить веб-страницу полностью на жесткий диск!

Отмечу, что после нажатия по значку PDF Mage — текущая страничка просто скачивается в формате PDF к вам в папку загрузки. Удобнее придумать просто нельзя.

Покажу на примере.

После установки расширения в меню у вас будет небольшой значок. Найдя интересную страницу, просто щелкните по нему левой кнопкой мышки.

Так выглядит значок PDF Mage на панели в Chrome

Далее вы увидите сообщение, что начато сохранение страницы. Теперь можете вообще перейти на другую вкладку из быть о ней.

Начало сохранение веб-странички

Буквально через мгновение, браузер сам автоматически начнет загружать файл в формате PDF. Собственно, делается все без лишних телодвижений, быстро и удобно!

Загрузка странички в формате PDF

В общем, рекомендую к использованию!

С помощью онлайн сервисов

В сети также есть множество интернет-сервисов, позволяющих быстро сохранить любые странички в сети в PDF. Суть работы примерно следующая: вы вставляете в спец. строку URL-адрес странички, которую вам нужно сохранить.

Далее жмете кнопку генерации PDF файла. Через некоторое время получаете ссылку на загрузку своего PDF. Пользоваться, конечно, можно, но на мой скромный взгляд — всё это утомительно и годится для временного использования. Например, у вас есть «проблемы» с браузером или Windows, попалась какая-то «странная» страница, которая не хочет сохраняться предыдущими способами.

И так, самые популярные из сервисов подобного рода:

Преобразование веб-страниц в PDF

На этой странице

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Веб-страницы и PDF

Какой объем необходимо преобразовать?

Преобразование веб-страниц в PDF в Internet Explorer, Google Chrome и Firefox (Windows)

Скрипт кнопки сохранения html в pdf

html2pdf.js converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF.

Table of contents

The simplest way to use html2pdf.js is to download dist/html2pdf.bundle.min.js to your project folder and include it in your HTML with:

Note: Click here for more information about using the unbundled version dist/html2canvas.min.js .

Install html2pdf.js and its dependencies using NPM with npm install —save html2pdf.js (make sure to include .js in the package name).

Note: You can use NPM to create your project, but html2pdf.js will not run in Node.js, it must be run in a browser.

Install html2pdf.js and its dependencies using Bower with bower install —save html2pdf.js (make sure to include .js in the package name).

Читать еще: Html практические задания

If you’re on a webpage that you can’t modify directly and wish to use html2pdf.js to capture a screenshot, you can follow these steps:

Open your browser’s console (instructions for different browsers here).
Paste in this code:

Once installed, html2pdf.js is ready to use. The following command will generate a PDF of #element-to-print and prompt the user to save the result:

Every step of html2pdf.js is configurable, using its new Promise-based API. If html2pdf.js is called without arguments, it will return a Worker object:

This worker has methods that can be chained sequentially, as each Promise resolves, and allows insertion of your own intermediate functions between steps. A prerequisite system allows you to skip over mandatory steps (like canvas creation) without any trouble:

The basic workflow of html2pdf.js tasks (enforced by the prereq system) is:

Method	Arguments	Description
from	src, type	Sets the source (HTML string or element) for the PDF. Optional type specifies other sources: ‘string’ , ‘element’ , ‘canvas’ , or ‘img’ .
to	target	Converts the source to the specified target ( ‘container’ , ‘canvas’ , ‘img’ , or ‘pdf’ ). Each target also has its own toX method that can be called directly: toContainer() , toCanvas() , toImg() , and toPdf() .
output	type, options, src	Routes to the appropriate outputPdf or outputImg method based on specified src ( ‘pdf’ (default) or ‘img’ ).
outputPdf	type, options	Sends type and options to the jsPDF object’s output method, and returns the result as a Promise (use .then to access). See the jsPDF source code for more info.
outputImg	type, options	Returns the specified data type for the image as a Promise (use .then to access). Supported types: ‘img’ , ‘datauristring’ / ‘dataurlstring’ , and ‘datauri’ / ‘dataurl’ .
save	filename	Saves the PDF object with the optional filename (creates user download prompt).
set	opt	Sets the specified properties. See Options below for more details.
get	key, cbk	Returns the property specified in key , either as a Promise (use .then to access), or by calling cbk if provided.
then	onFulfilled, onRejected	Standard Promise method, with this re-bound to the Worker, and with added progress-tracking (see Progress below). Note that .then returns a Worker , which is a subclass of Promise.
thenCore	onFulFilled, onRejected	Standard Promise method, with this re-bound to the Worker (no progress-tracking). Note that .thenCore returns a Worker , which is a subclass of Promise.
thenExternal	onFulfilled, onRejected	True Promise method. Using this ‘exits’ the Worker chain — you will not be able to continue chaining Worker methods after .thenExternal .
catch, catchExternal	onRejected	Standard Promise method. catchExternal exits the Worker chain — you will not be able to continue chaining Worker methods after .catchExternal .
error	msg	Throws an error in the Worker’s Promise chain.

A few aliases are also provided for convenience:

Method	Alias
save	saveAs
set	using
output	export
then	run

html2pdf.js can be configured using an optional opt parameter:

The opt parameter has the following optional fields:

Name	Type	Default	Description
margin	number or array	0	PDF margin (in jsPDF units). Can be a single number, [vMargin, hMargin] , or [top, left, bottom, right] .
filename	string	‘file.pdf’	The default filename of the exported PDF.
pagebreak	object		Controls the pagebreak behaviour on the page. See Page-breaks below.
image	object		The image type and quality used to generate the PDF. See Image type and quality below.
enableLinks	boolean	true	If enabled, PDF hyperlinks are automatically added ontop of all anchor tags.
html2canvas	object		Configuration options sent directly to html2canvas (see here for usage).
jsPDF	object		Configuration options sent directly to jsPDF (see here for usage).

html2pdf.js has the ability to automatically add page-breaks to clean up your document. Page-breaks can be added by CSS styles, set on individual elements using selectors, or avoided from breaking inside all elements ( avoid-all mode).

By default, html2pdf.js will respect most CSS break-before , break-after , and break-inside rules, and also add page-breaks after any element with class html2pdf__page-break (for legacy purposes).

Setting	Type	Default	Description
mode	string or array	[‘css’, ‘legacy’]	The mode(s) on which to automatically add page-breaks. One or more of ‘avoid-all’ , ‘css’ , and ‘legacy’ .
before	string or array	[]	CSS selectors for which to add page-breaks before each element. Can be a specific element with an ID ( ‘#myID’ ), all elements of a type (e.g. ‘img’ ), all of a class ( ‘.myClass’ ), or even ‘*’ to match every element.
after	string or array	[]	Like ‘before’, but adds a page-break immediately after the element.
avoid	string or array	[]	Like ‘before’, but avoids page-breaks on these elements. You can enable this feature on every element using the ‘avoid-all’ mode.

Mode	Description
avoid-all	Automatically adds page-breaks to avoid splitting any elements across pages.
css	Adds page-breaks according to the CSS break-before , break-after , and break-inside properties. Only recognizes always/left/right for before/after, and avoid for inside.
legacy	Adds page-breaks after elements with class html2pdf__page-break . This feature may be removed in the future.

Image type and quality

You may customize the image type and quality exported from the canvas by setting the image option. This must be an object with the following fields:

Name	Type	Default	Description
type	string	‘jpeg’	The image type. HTMLCanvasElement only supports ‘png’, ‘jpeg’, and ‘webp’ (on Chrome).
quality	number	0.95	The image quality, from 0 to 1. This setting is only used for jpeg/webp (not png).

These options are limited to the available settings for HTMLCanvasElement.toDataURL(), which ignores quality settings for ‘png’ images. To enable png image compression, try using the canvas-png-compression shim, which should be an in-place solution to enable png compression via the quality option.

The Worker object returned by html2pdf() has a built-in progress-tracking mechanism. It will be updated to allow a progress callback that will be called with each update, however it is currently a work-in-progress.

html2pdf.js depends on the external packages html2canvas, jsPDF, and es6-promise. These dependencies are automatically loaded when using NPM or the bundled package.

If using the unbundled dist/html2pdf.min.js (or its un-minified version), you must also include each dependency. Order is important, otherwise html2canvas will be overridden by jsPDF’s own internal implementation:

When submitting an issue, please provide reproducible code that highlights the issue, preferably by creating a fork of this template jsFiddle (which has html2pdf.js already loaded). Remember that html2pdf.js uses html2canvas and jsPDF as dependencies, so it’s a good idea to check each of those repositories’ issue trackers to see if your problem has already been addressed.

Rendering: The rendering engine html2canvas isn’t perfect (though it’s pretty good!). If html2canvas isn’t rendering your content correctly, I can’t fix it.

You can test this with something like this fiddle, to see if there’s a problem in the canvas creation itself.

Node cloning (CSS etc): The way html2pdf.js clones your content before sending to html2canvas is buggy. A fix is currently being developed — try out:

direct file: Go to html2pdf.js/bugfix/clone-nodes-BUILD and replace the files in your project with the relevant files (e.g. dist/html2pdf.bundle.js )
npm: npm install eKoopmans/html2pdf.js#bugfix/clone-nodes-BUILD
Related project: Bugfix: Cloned nodes

Resizing: Currently, html2pdf.js resizes the root element to fit onto a PDF page (causing internal content to «reflow»).

This is often desired behaviour, but not always.
There are plans to add alternate behaviour (e.g. «shrink-to-page»), but nothing that’s ready to test yet.
Related project: Feature: Single-page PDFs

Rendered as image: html2pdf.js renders all content into an image, then places that image into a PDF.

This means text is not selectable or searchable, and causes large file sizes.
This is currently unavoidable, however recent improvements in jsPDF mean that it may soon be possible to render straight into vector graphics.
Related project: Feature: New renderer

Promise clashes: html2pdf.js relies on specific Promise behaviour, and can fail when used with custom Promise libraries.

In the next release, Promises will be sandboxed in html2pdf.js to remove this issue.
Related project: Bugfix: Sandboxed promises

Maximum size: HTML5 canvases have a maximum height/width. Anything larger will fail to render.

This is a limitation of HTML5 itself, and results in large PDFs rendering completely blank in html2pdf.js.
The jsPDF canvas renderer (mentioned in Known Issue #4) may be able to fix this issue!
Related project: Bugfix: Maximum canvas size

html2pdf.js is currently sorely lacking in unit tests. Any contributions or suggestions of automated (or manual) tests are welcome. This is high on the to-do list for this project.

If you want to create a new feature or bugfix, please feel free to fork and submit a pull request! Create a fork, branch off of master , and make changes to the /src/ files (rather than directly to /dist/ ). You can test your changes by rebuilding with npm run build .

0 0 голоса

Рейтинг статьи