html-web转pdf项目-javascript-css-项目分享.zip

# html2pdf.js html2pdf.js converts any webpage or element into a printable PDF entirely client-side using [html2canvas](https://github.com/niklasvh/html2canvas) and [jsPDF](https://github.com/MrRio/jsPDF). > :warning: There have been several issues reported in v0.10. They are being investigated but in the meantime you may wish to remain on v0.9.3 ("^0.9.3" in npm, or [use cdnjs for HTML script tags](https://cdnjs.com/libraries/html2pdf.js/0.9.3)). ## Table of contents - [Getting started](#getting-started) - [CDN](#cdn) - [Raw JS](#raw-js) - [NPM](#npm) - [Bower](#bower) - [Console](#console) - [Usage](#usage) - [Advanced usage](#advanced-usage) - [Workflow](#workflow) - [Worker API](#worker-api) - [Options](#options) - [Page-breaks](#page-breaks) - [Page-break settings](#page-break-settings) - [Page-break modes](#page-break-modes) - [Example usage](#example-usage) - [Image type and quality](#image-type-and-quality) - [Progress tracking](#progress-tracking) - [Dependencies](#dependencies) - [Contributing](#contributing) - [Issues](#issues) - [Tests](#tests) - [Pull requests](#pull-requests) - [Credits](#credits) - [License](#license) ## Getting started #### CDN The simplest way to use html2pdf.js is to include it as a script in your HTML by using cdnjs: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> ``` Using a CDN URL will lock you to a specific version, which should ensure stability and give you control over when to change versions. cdnjs gives you access to [all past versions of html2pdf.js](https://cdnjs.com/libraries/html2pdf.js). *Note: [Read about dependences](#dependencies) for more information about using the unbundled version `dist/html2canvas.min.js`.* #### Raw JS You may also download `dist/html2pdf.bundle.min.js` directly to your project folder and include it in your HTML with: ```html <script src="html2pdf.bundle.min.js"></script> ``` #### NPM 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.* #### Bower Install html2pdf.js and its dependencies using Bower with `bower install --save html2pdf.js` (make sure to include `.js` in the package name). #### Console 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: 1. Open your browser's console (instructions for different browsers [here](https://webmasters.stackexchange.com/a/77337/94367)). 2. Paste in this code: ```js function addScript(url) { var script = document.createElement('script'); script.type = 'application/javascript'; script.src = url; document.head.appendChild(script); } addScript('https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js'); ``` 3. You may now execute html2pdf.js commands directly from the console. To capture a default PDF of the entire page, use `html2pdf(document.body)`. ## Usage 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: ```js var element = document.getElementById('element-to-print'); html2pdf(element); ``` ### Advanced usage 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: ```js var worker = html2pdf(); // Or: var worker = new html2pdf.Worker; ``` 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: ```js // This will implicitly create the canvas and PDF objects before saving. var worker = html2pdf().from(element).save(); ``` #### Workflow The basic workflow of html2pdf.js tasks (enforced by the prereq system) is: ``` .from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save() ``` #### Worker API | 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](https://rawgit.com/MrRio/jsPDF/master/docs/jspdf.js.html#line992) 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](#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](#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 | ## Options html2pdf.js can be configured using an optional `opt` parameter: ```js var element = document.getElementById('element-to-print'); var opt = { margin: 1, filename: 'myfile.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; // New Promise-based usage: html2pdf().set(opt).from(element).save(); // Old monolithic-style usage: html2pdf(element, opt); ``` The `opt` parameter has the following optional fields: |Name |Type |Default |Description | |------------|----------------|--------------------------------|-----------------------------------------------