dompdf.js 1.1.0 → 1.2.0

package/README_CN.md

@@ -1,305 +1,300 @@
-# dompdf
-
-dompdf 纯前端将HTML转换为可编辑，非图片式的，可打印的PDF文件。
-
-> :warning: v0.10 版本中报告了一些问题。这些问题正在调查中,同时您可以考虑继续使用 v0.9.3 版本("^0.9.3" in npm, 或者[在 HTML script 标签中使用 cdnjs](https://cdnjs.com/libraries/dompdf.js/0.9.3))。
-
-## 目录
-
-- [开始使用](#开始使用)
-  - [CDN](#cdn)
-  - [原生 JS](#原生-js)
-  - [NPM](#npm)
-  - [Bower](#bower)
-  - [控制台](#控制台)
-- [使用方法](#使用方法)
-  - [高级用法](#高级用法)
-    - [工作流程](#工作流程)
-    - [Worker API](#worker-api)
-- [配置选项](#配置选项)
-  - [分页](#分页)
-    - [分页设置](#分页设置)
-    - [分页模式](#分页模式)
-    - [使用示例](#使用示例)
-  - [图片类型和质量](#图片类型和质量)
-- [进度跟踪](#进度跟踪)
-- [依赖项](#依赖项)
-- [贡献](#贡献)
-  - [问题](#问题)
-  - [测试](#测试)
-  - [Pull requests](#pull-requests)
-- [致谢](#致谢)
-- [许可证](#许可证)
-
-## 开始使用
-
-#### CDN
-
-使用 dompdf.js 最简单的方法是通过 cdnjs 在 HTML 中引入它:
+# dompdf.js
 
-```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/dompdf.js/0.10.1/dompdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-```
+[English](./README.md) | [中文](./README_CN.md)
 
-使用 CDN URL 会锁定到特定版本,这可以确保稳定性并让您控制何时更改版本。cdnjs 提供访问 [dompdf.js 的所有历史版本](https://cdnjs.com/libraries/dompdf.js)。
+<!-- [主页](https://html2canvas.hertzen.com) | [下载](https://github.com/niklasvh/html2canvas/releases) | [问题](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)
 
-*注意: 关于使用未打包版本 `dist/html2canvas.min.js` 的更多信息,请参阅[依赖项](#依赖项)。*
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master)
+[![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
+[![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/html2canvas) -->
 
-#### 原生 JS
+该脚本允许您直接在用户浏览器上将网页或部分网页生成为可编辑、非图片式、可打印的矢量 pdf。支持分页，最多可以生成上数千页的 pdf 文件。由于生成是基于 DOM 的，因此可能与实际表现不会 100% 一致。如果是复杂的 pdf 生成需求，不建议使用。
 
-您也可以直接下载 `dist/dompdf.bundle.min.js` 到项目文件夹中,并在 HTML 中引入:
+在线体验：[在线体验](https://dompdfjs.lisky.com.cn)
 
-```html
-<script src="dompdf.bundle.min.js"></script>
-```
+### 📄 pdf 生成示例
 
-#### NPM
+![pdf生成示例](./examples/test.jpg)
 
-使用 NPM 安装 dompdf.js 及其依赖项: `npm install --save dompdf.js` (请确保包名中包含 `.js`)。
+### 🛠️ 它是如何工作的
 
-*注意: 您可以使用 NPM 创建项目,但 dompdf.js **不能在 Node.js 中运行**,它必须在浏览器中运行。*
+该脚本基于[html2canvas](https://github.com/niklasvh/html2canvas)和[jspdf](https://github.com/MrRio/jsPDF)，与以往将 html 页面通过 html2canvas 渲染为图片，再通过 jspdf 将图片生成 pdf 文件不同，该脚本通过读取 DOM 和应用于元素的不同样式，改造了 html2canvas 的 canvas-renderer 文件，调用 jspdf 的方法生成 pdf 文件。
+所以他有以下优势：
 
-#### Bower
+1. 不需要服务器端的任何渲染，因为整个 pdf 是在**客户端浏览器**上创建的。
+2. 生成的是真正的 pdf 文件，而不是图片式的，这样生成的 pdf 质量更高，您也可以编辑和打印生成 pdf 文件。
+3. 更小的 pdf 文件体积。
+4. 不受 canvas 渲染高度限制，可以生成数千页的 pdf 文件。
 
-使用 Bower 安装 dompdf.js 及其依赖项: `bower install --save dompdf.js` (请确保包名中包含 `.js`)。
+当然，它也有一些缺点：
 
-#### 控制台
+1. 由于是基于 DOM 的，所以可能与实际表现不会 100% 一致。
+2. 有的 css 属性还没有被支持，查看[支持的 css 属性](https://www.html2canvas.cn/html2canvas-features.html)。
 
-如果您在一个无法直接修改的网页上想要使用 dompdf.js 来捕获截图,可以按照以下步骤操作:
+### ✨ 已实现功能
 
-1. 打开浏览器控制台(不同浏览器的说明[在此](https://webmasters.stackexchange.com/a/77337/94367))。
-2. 粘贴以下代码:
-    ```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/dompdf.js/0.10.1/dompdf.bundle.min.js');
-    ```
-3. 现在您可以直接在控制台中执行 dompdf.js 命令。要捕获整个页面的默认 PDF,使用 `dompdf(document.body)`。
+| 功能     | 状态 | 说明                                                                                                      |
+| -------- | ---- | --------------------------------------------------------------------------------------------------------- |
+| 分页     | ✅   | 支持 PDF 分页渲染，可生成数千页的 PDF 文件                                                                |
+| 文本渲染 | ✅   | 支持基础文本内容渲染,font-family,font-size,font-style,font-variant,color 等，支持文字描边，不支持文字阴影 |
+| 图片渲染 | ✅   | 支持网络图片，base64 图片，svg 图片                                                                       |
+| 边框     | ✅   | 支持 border-width,border-color,border-style,border-radius,暂时只实现了实线边框                            |
+| 背景     | ✅   | 支持背景颜色，背景图片，背景渐变                                                                          |
+| canvas   | ✅   | 支持渲染 canvas                                                                                           |
+| svg      | ✅   | 支持渲染 svg                                                                                              |
+| 阴影渲染 | ✅   | 使用 foreignObjectRendering，支持边框阴影渲染                                                             |
+| 渐变渲染 | ✅   | 使用 foreignObjectRendering，支持背景渐变渲染                                                             |
+| iframe   | ❌   | 暂不支持渲染 iframe                                                                                       |
 
-## 使用方法
+### 📦 使用方法
 
-安装完成后,dompdf.js 就可以使用了。以下命令将生成 `#element-to-print` 的 PDF 并提示用户保存结果:
+dompdf 库使用 `Promise` 并期望它们在全局上下文中可用。如果您希望支持不原生支持 `Promise` 的[较旧浏览器](http://caniuse.com/#search=promise)，请在引入 `dompdf` 之前包含一个 polyfill，比如 [es6-promise](https://github.com/jakearchibald/es6-promise)。
 
-```js
-var element = document.getElementById('element-to-print');
-dompdf(element);
-```
+安装：
 
-### 高级用法
+     npm install dompdf.js --save
 
-dompdf.js 的每个步骤都是可配置的,使用其新的基于 Promise 的 API。如果调用 dompdf.js 时没有参数,它将返回一个 `Worker` 对象:
+CDN 引入：
 
-```js
-var worker = dompdf();  // 或:  var worker = new dompdf.Worker;
+```html
+<script src="https://cdn.jsdelivr.net/npm/dompdf.js@latest/dist/dompdf.js"></script>
 ```
 
-这个 worker 有一些方法可以按顺序链式调用,每个 Promise 解析后,允许在步骤之间插入您自己的中间函数。先决条件系统允许您跳过必需的步骤(如画布创建)而不会出现任何问题:
+#### 🚀 基础用法
 
 ```js
-// 这将在保存之前隐式创建画布和 PDF 对象
-var worker = dompdf().from(element).save();
+import dompdf from 'dompdf.js';
+
+dompdf(document.querySelector('#capture'), options)
+    .then((blob) => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'example.pdf';
+        document.body.appendChild(a);
+        a.click();
+    })
+    .catch((err) => {
+        console.error(err);
+    });
 ```
 
-#### 工作流程
+#### 📄 PDF 分页渲染
 
-dompdf.js 任务的基本工作流程(由先决条件系统强制执行)是:
+默认情况下，dompdf 会将整个文档渲染到单页中。
 
-```
-.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()
-```
+您可以通过设置 `pagination` 选项为 `true` 来开启分页渲染。通过 pageConfig 字段自定义页眉页脚的尺寸，内容，字体颜色/大小，位置等信息。
 
-#### 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       |
-
-## 配置选项
-
-dompdf.js 可以使用可选的 `opt` 参数进行配置:
+**_ 需要注意，将要生成 PDF 的 dom 节点设置为对应的页面宽度（px）,比如 a4 要设置宽度为 794px,这里是页面尺寸对照表：[page_sizes.md](./page_sizes.md) _**
 
 ```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:
-dompdf().set(opt).from(element).save();
-
-// Old monolithic-style usage:
-dompdf(element, opt);
+import dompdf from 'dompdf.js';
+
+dompdf(document.querySelector('#capture'), {
+    pagination: true,
+    format: 'a4',
+    pageConfig: {
+        header: {
+            content: '这是页眉',
+            height: 50,
+            contentColor: '#333333',
+            contentFontSize: 12,
+            contentPosition: 'center',
+            padding: [0, 0, 0, 0]
+        },
+        footer: {
+            content: '第${currentPage}页/共${totalPages}页',
+            height: 50,
+            contentColor: '#333333',
+            contentFontSize: 12,
+            contentPosition: 'center',
+            padding: [0, 0, 0, 0]
+        }
+    }
+})
+    .then((blob) => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'example.pdf';
+        document.body.appendChild(a);
+        a.click();
+    })
+    .catch((err) => {
+        console.error(err);
+    });
 ```
 
-`opt` 参数具有以下可选字段:
+##### 更精准的分页控制-`divisionDisable` 属性
 
-|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          |`{mode: ['css', 'legacy']}`     |Controls the pagebreak behaviour on the page. See [Page-breaks](#page-breaks) below.                        |
-|image       |object          |`{type: 'jpeg', quality: 0.95}` |The image type and quality used to generate the PDF. See [Image type and quality](#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](https://html2canvas.hertzen.com/configuration) for usage).|
-|jsPDF       |object          |`{ }`                           |Configuration options sent directly to `jsPDF` ([see here](http://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html) for usage).|
+如果您不希望某个容器在分页时被拆分时，为该元素添加 `divisionDisable` 属性，跨页时它会整体移至下一页。
 
-### Page-breaks
+#### ⚙️ options 参数
 
-dompdf.js 具有自动添加页面断点的能力,以清理您的文档。页面断点可以通过 CSS 样式、使用选择器设置在单个元素上,或者避免在所有元素内部断开(`avoid-all` 模式)。
+| 参数名             | 必传 | 默认值        | 类型                     | 说明                                                                                                                                                                                                                                          |
+| ------------------ | ---- | ------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `useCORS`          | 否   | `false`       | `boolean`                | 允许跨域资源（需服务端 CORS 配置）                                                                                                                                                                                                            |
+| `backgroundColor`  | 否   | 自动解析/白色 | `string \| null`         | 覆盖页面背景色；传 `null` 生成透明背景                                                                                                                                                                                                        |
+| `fontConfig`       | 否   | -             | `object \| Array`        | 非英文字体配置，见下表                                                                                                                                                                                                                        |
+| `encryption`       | 否   | 空配置        | `object`                 | PDF 加密配置，属性`userPassword` 用于给定权限列表下用户的密码；属性`ownerPassword` 需要设置 userPassword 和 ownerPassword 以进行正确的身份验证；属性`userPermissions` 用于指定用户权限，可选值为 `['print', 'modify', 'copy', 'annot-forms']` |
+| `precision`        | 否   | `16`          | `number`                 | 元素位置的精度                                                                                                                                                                                                                                |
+| `compress`         | 否   | `false`       | `boolean`                | 是否压缩 PDF                                                                                                                                                                                                                                  |
+| `putOnlyUsedFonts` | 否   | `false`       | `boolean`                | 仅将实际使用的字体嵌入 PDF                                                                                                                                                                                                                    |
+| `pagination`       | 否   | `false`       | `boolean`                | 开启分页渲染                                                                                                                                                                                                                                  |
+| `format`           | 否   | `'a4'`        | `string`                 | 页面规格，支持 `a0–a10`、`b0–b10`、`c0–c10`、`letter` 等                                                                                                                                                                                      |
+| `pageConfig`       | 否   | 见下表        | `object`                 | 页眉页脚配置                                                                                                                                                                                                                                  |
+| `onJspdfReady`     | 否   | ``            | `Function(jspdf: jsPDF)` | jspdf 实例初始化                                                                                                                                                                                                                              |
+| `onJspdfFinish`    | 否   | ``            | `Function(jspdf: jsPDF)` | jspdf 实例绘制 pdf 完成                                                                                                                                                                                                                       |
 
-默认情况下,dompdf.js 将尊重大多数 CSS [`break-before`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before), [`break-after`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after), 和 [`break-inside`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside) 规则,并在任何元素具有类 `dompdf__page-break` 时添加页面断点(出于遗留目的)。
+##### `pageConfig`字段：
 
-#### Page-break settings
+| 参数名   | 默认值                   | 类型   | 说明     |
+| -------- | ------------------------ | ------ | -------- |
+| `header` | 见下表 pageConfigOptions | object | 页眉设置 |
+| `footer` | 见下表 pageConfigOptions | object | 页脚设置 |
 
-|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. |
+##### `pageConfigOptions` 字段：
 
-#### Page-break modes
+| 参数名            | 默认值                                                    | 类型                               | 说明                                                                                                                                                  |
+| ----------------- | --------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `content`         | 页眉默认值为空,页脚默认值为`${currentPage}/${totalPages}` | `string`                           | 文本内容，支持 `${currentPage}`、`${totalPages}`，`${currentPage}`为当前页码，`${totalPages}`为总页码                                                 |
+| `height`          | `50`                                                      | `number`                           | 区域高度（px）                                                                                                                                        |
+| `contentPosition` | `'center'`                                                | `string \| [number, number]`       | 文本位置枚举 `center`、`centerLeft` 、 `centerRight`、`centerTop`、 `centerBottom`、`leftTop`、 `leftBottom`、`rightTop`、`rightBottom`或坐标 `[x,y]` |
+| `contentColor`    | `'#333333'`                                               | `string`                           | 文本颜色                                                                                                                                              |
+| `contentFontSize` | `16`                                                      | `number`                           | 文本字号（px）                                                                                                                                        |
+| `padding`         | `[0,24,0,24]`                                             | `[number, number, number, number]` | 上/右/下/左内边距（px）                                                                                                                               |
 
-| 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 `dompdf__page-break`. This feature may be removed in the future. |
+##### 字体配置（`fontConfig`）字段：
 
-#### 使用示例
+| 字段         | 必传                           | 默认值 | 类型     | 说明                               |
+| ------------ | ------------------------------ | ------ | -------- | ---------------------------------- |
+| `fontFamily` | 是（启用自定义字体时）         | `''`   | `string` | 字体家族名（与注入的 `.ttf` 同名） |
+| `fontBase64` | 是（启用自定义字体时）         | `''`   | `string` | `.ttf` 的 Base64 字符串内容        |
+| `fontStyle`  | 是（启用自定义字体时）         | `''`   | `string` | `normal \| italic`                 |
+| `fontWeight` | 是（启用自定义字体时字体加粗） | `''`   | `number` | `400 \| 700`                       |
+| `iconFont`   | 否                          | `false` | `boolean`| `false \| true`                            |
 
-```js
-// Avoid page-breaks on all elements, and add one before #page2el.
-dompdf().set({
-  pagebreak: { mode: 'avoid-all', before: '#page2el' }
-});
-
-// Enable all 'modes', with no explicit elements.
-dompdf().set({
-  pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
-});
-
-// No modes, only explicit elements.
-dompdf().set({
-  pagebreak: { before: '.beforeClass', after: ['#after1', '#after2'], avoid: 'img' }
-});
-```
+#### 🔣 乱码问题-字体导入支持
 
-### Image type and quality
+由于 jspdf 只支持英文，所以其他语言会出现乱码的问题，需要导入对应的字体文件来解决，如果需要自定义字体，在[这里](https://github.com/lmn1919/dompdf.js/tree/main/fontconverter)将字体 tff 文件转化成 base64 格式的 js 文件，中文字体推荐使用[思源黑体](https://github.com/lmn1919/dompdf.js/blob/main/examples/SourceHanSansSC-Normal-Min-normal.js),体积较小。
+在代码中引入该文件即可。
 
-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:
+> **注意：导入字体会导致最终的 pdf 体积增大，如果对最终 pdf 体积有要求的，建议精简字体，可以剔除不需要的字体。或者使用`Fontmin‌`等工具对字体进行瘦身**
 
-|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()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL), which ignores quality settings for 'png' images. To enable png image compression, try using the [canvas-png-compression shim](https://github.com/ShyykoSerhiy/canvas-png-compression), which should be an in-place solution to enable png compression via the `quality` option.
+```js
+<script type="text/javascript" src="./SourceHanSansSC-Normal-Min-normal.js"></script>
+<script type="text/javascript" src="./SourceHanSansCNBold-bold.js"></script>
+<script type="text/javascript" src="./SourceHanSansCNNormal-normal.js"></script>
+<script type="text/javascript" src="./SourceHanSansCNRegularItalic-normal.js"></script>
+<script type="text/javascript" src="./iconfont-ttf.js"></script>
+<script>
+  /* 导入字体 */
+  dompdf(document.querySelector('#capture'), {
+    useCORS: true,
+    /* 单个字体导入 */
+    /* fontConfig: {
+      fontFamily: 'SourceHanSansSC-Normal-Min',
+      fontBase64: window.fontBase64,
+      fontStyle: 'normal',
+      fontWeight: 400,
+    }, */
+    /* 导入注册多种字体，需要支持什么语种，样式，就导入对应的字体 */
+    fontConfig: [
+        {
+            fontFamily: 'iconfont',
+            fontBase64: window.iconfont,
+            fontUrl: '',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            iconFont: true
+        },
+        {
+            fontFamily: 'SourceHanSansCNRegularItalic',
+            fontBase64: window.SourceHanSansCNRegularItalic,
+            fontUrl: '',
+            fontWeight: 400,
+            fontStyle: 'italic' // 斜体
+        },
+        {
+            fontFamily: 'SourceHanSansCNBold',
+            fontBase64: window.SourceHanSansCNBold,
+            fontUrl: '',
+            fontWeight: 700, // 加粗
+            fontStyle: 'normal'
+        },
+        {
+            fontFamily: 'SourceHanSansCNNormal',
+            fontBase64: window.SourceHanSansCNNormal,
+            fontUrl: '',
+            fontWeight: 400,
+            fontStyle: 'normal'
+        },
+    ],
+  })
+    .then(function (blob) {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'example.pdf';
+      document.body.appendChild(a);
+      a.click();
+    })
+    .catch(function (err) {
+      console.error(err);
+    });
+</script>
+```
 
-## 进度跟踪
+#### 🎨 绘制渐变色、阴影等复杂样式-foreignObjectRendering 使用
 
-`dompdf()` 返回的 Worker 对象具有内置的进度跟踪机制。它将更新以允许进度回调,但目前仍在进行中。
+在 dom 十分复杂，或者 pdf 无法绘制的情况（比如：复杂的表格，边框阴影，渐变等），可以考虑使用 foreignObjectRendering。
+给要渲染的元素添加 foreignObjectRendering 属性，就可以通过 svg 的 foreignObject 将它渲染成一张背景图插入到 pdf 文件中。
 
-## 依赖项
+但是，由于 foreignObject 元素的渲染依赖于浏览器的实现，因此在不同的浏览器中可能会有不同的表现。
+所以，在使用 foreignObjectRendering 时，需要注意以下事项：
 
-dompdf.js 依赖于外部包 [html2canvas](https://github.com/niklasvh/html2canvas), [jsPDF](https://github.com/MrRio/jsPDF), 和 [es6-promise](https://github.com/stefanpenner/es6-promise)。这些依赖项在使用 NPM 或捆绑包时自动加载。
+1. foreignObject 元素的渲染依赖于浏览器的实现，因此在不同的浏览器中可能会有不同的表现。
+2. IE 浏览器完全不支持，推荐在 chrome 和 firefox,edge 中使用。
+3. 生成的图片会导致 pdf 文件体积变大。
 
-如果使用未打包的 `dist/dompdf.min.js` (或其未最小化的版本),您还必须包括每个依赖项。顺序很重要,否则 html2canvas 将被 jsPDF 的内部实现覆盖:
+示例
 
 ```html
-<script src="es6-promise.auto.min.js"></script>
-<script src="jspdf.min.js"></script>
-<script src="html2canvas.min.js"></script>
-<script src="dompdf.min.js"></script>
+<div style="width: 100px;height: 100px;" foreignObjectRendering>
+    <div
+        style="width: 50px;height: 50px;border: 1px solid #000;box-shadow: 2px 2px 5px rgba(0,0,0,0.3);background: linear-gradient(45deg, #ff6b6b, #4ecdc4);"
+    >
+        这是一个div元素
+    </div>
+</div>
 ```
 
-## 贡献
-
-### 问题
-
-在提交问题时,请提供可重现的代码,最好是创建一个[这个模板 jsFiddle](https://jsfiddle.net/u6o6ne41/) 的 fork(已经加载了 dompdf.js),记住 dompdf.js 使用 [html2canvas](https://github.com/niklasvh/html2canvas) 和 [jsPDF](https://github.com/MrRio/jsPDF) 作为依赖项,所以检查每个仓库的问题跟踪器以查看是否已经解决了您的问题。
-
-#### 已知问题
-
-1. **渲染:** html2canvas 渲染引擎不是完美的(尽管它相当不错!)。如果 html2canvas 没有正确渲染您的内容,我无法修复它。
-    - 您可以使用[这个 fiddle](https://jsfiddle.net/eKoopmans/z1rupL4c/) 进行测试,看看画布创建本身是否有问题。
-
-2. **节点克隆(CSS 等):** dompdf.js 克隆内容的方式存在错误。正在开发修复 - 尝试:
-    - 直接文件: 转到 [dompdf.js/bugfix/clone-nodes-BUILD](/eKoopmans/dompdf.js/tree/bugfix/clone-nodes-BUILD) 并替换项目中的相关文件(例如 `dist/dompdf.bundle.js`)
-    - npm: `npm install eKoopmans/dompdf.js#bugfix/clone-nodes-BUILD`
-    - 相关项目: [Bugfix: Cloned nodes](https://github.com/eKoopmans/dompdf.js/projects/9)
-
-3. **调整大小:** 目前,dompdf.js 将根元素调整大小以适应 PDF 页面(导致内部内容"重新流动")。
-    - 这通常是所需的行为,但并非总是如此。
-    - 有计划添加替代行为(例如"shrink-to-page"),但尚未准备好测试。
-    - 相关项目: [Feature: Single-page PDFs](https://github.com/eKoopmans/dompdf.js/projects/1)
-
-4. **渲染为图像:** dompdf.js 将所有内容渲染为图像,然后将该图像放入 PDF 中。
-    - 这意味着文本是*不可选择或可搜索的*,并导致大文件大小。
-    - 这是目前不可避免的,但是最近在 jsPDF 中的改进可能很快使其能够直接渲染为矢量图形。
-    - 相关项目: [Feature: New renderer](https://github.com/eKoopmans/dompdf.js/projects/4)
-
-5. **Promise 冲突:** dompdf.js 依赖于特定的 Promise 行为,并且可能在与自定义 Promise 库一起使用时失败。
-    - 在下一个版本中,Promises 将在 dompdf.js 中沙盒化以删除此问题。
-    - 相关项目: [Bugfix: Sandboxed promises](https://github.com/eKoopmans/dompdf.js/projects/11)
-
-6. **最大大小:** HTML5 画布具有[最大高度/宽度](https://stackoverflow.com/a/11585939/4080966)。任何大于该值的都会失败。
-    - 这是 HTML5 本身的限制,导致 dompdf.js 中的大 PDF 完全空白。
-    - jsPDF 画布渲染器(在已知问题 #4 中提到)可能能够修复此问题!
-    - 相关项目: [Bugfix: Maximum canvas size](https://github.com/eKoopmans/dompdf.js/projects/5)
-
-### 测试
+### 🌐 浏览器兼容性
 
-dompdf.js 目前严重缺乏单元测试。任何贡献或建议的自动(或手动)测试都是受欢迎的。这是这个项目的高优先级待办事项。
+该库应该可以在以下浏览器上正常工作（需要 `Promise` polyfill）：
 
-### Pull requests
+-   Firefox 3.5+
+-   Google Chrome
+-   Opera 12+
+-   IE9+
+-   Safari 6+
 
-如果您想创建新功能或错误修复,请随时分叉并提交拉取请求!分叉,从 `main` 分支分支,并对 `/src/` 文件进行更改(而不是直接对 `/dist/` 进行更改)。您可以通过重建 `npm run build` 来测试更改。
+### 🏗️ 构建
 
-## 致谢
+克隆 git 仓库：
 
-[Erik Koopmans](https://github.com/eKoopmans)
+    $ git clone git@github.com:lmn1919/dompdf.js.git
 
-#### 贡献者
+安装依赖：
 
-- [@WilcoBreedt](https://github.com/WilcoBreedt)
-- [@Ranger1230](https://github.com/Ranger1230)
+    $ npm install
 
-#### 特别感谢
+构建浏览器包：
 
-- [Sauce Labs](https://saucelabs.com/) 用于单元测试。
+    $ npm run build
 
-## 许可证
+## 📈 Star History
 
-[The MIT License](http://opensource.org/licenses/MIT)
+[![Star History Chart](https://api.star-history.com/svg?repos=lmn1919/dompdf.js&type=Date)](https://www.star-history.com/#lmn1919/dompdf.js&Date)
 
-Copyright (c) 2017-2019 Erik Koopmans <[http://www.erik-koopmans.com/](http://www.erik-koopmans.com/)>