dompdf.js 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +154 -155
- package/dist/dom/replaced-elements/iframe-element-container.d.ts +2 -2
- package/dist/dompdf.esm.js +170 -2285
- package/dist/dompdf.esm.js.map +1 -1
- package/dist/dompdf.js +170 -2285
- package/dist/dompdf.js.map +1 -1
- package/dist/render/canvas/pdf-renderer.d.ts +0 -1
- package/html2pdf-userscript.js +935 -935
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,155 +1,154 @@
|
|
|
1
|
-
# dompdf
|
|
2
|
-
|
|
3
|
-
<!-- [主页](https://html2canvas.hertzen.com) | [下载](https://github.com/niklasvh/html2canvas/releases) | [问题](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)
|
|
4
|
-
|
|
5
|
-
[](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
|
6
|
-
|
|
7
|
-
[](https://www.npmjs.org/package/html2canvas)
|
|
8
|
-
[](https://www.npmjs.org/package/html2canvas) -->
|
|
9
|
-
|
|
10
|
-
该脚本允许您直接在用户浏览器上将网页或部分网页生成为可编辑、非图片式、可打印的 pdf。由于生成是基于 DOM 的，因此可能与实际表现不会 100%
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
.
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
````
|
|
1
|
+
# dompdf
|
|
2
|
+
|
|
3
|
+
<!-- [主页](https://html2canvas.hertzen.com) | [下载](https://github.com/niklasvh/html2canvas/releases) | [问题](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)
|
|
4
|
+
|
|
5
|
+
[](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.org/package/html2canvas)
|
|
8
|
+
[](https://www.npmjs.org/package/html2canvas) -->
|
|
9
|
+
|
|
10
|
+
该脚本允许您直接在用户浏览器上将网页或部分网页生成为可编辑、非图片式、可打印的 pdf。由于生成是基于 DOM 的，因此可能与实际表现不会 100% 一致。如果是复杂的pdf生成需求，不建议使用。
|
|
11
|
+
在线体验：[在线体验](https://dompdfjs.lisky.com.cn)
|
|
12
|
+
|
|
13
|
+
pdf生成示例
|
|
14
|
+
|
|
15
|
+
### pdf生成示例
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### 它是如何工作的
|
|
20
|
+
|
|
21
|
+
该脚本基于[html2canvas](https://github.com/niklasvh/html2canvas)和[jspdf](https://github.com/MrRio/jsPDF)，与以往将 html 页面通过 html2canvas 渲染为图片，再通过 jspdf 将图片生成 pdf 文件不同，该脚本通过读取 DOM 和应用于元素的不同样式，改造了 html2canvas 的 canvas-renderer 文件，调用 jspdf 的方法生成 pdf 文件。
|
|
22
|
+
所以他有以下优势：
|
|
23
|
+
|
|
24
|
+
1. 不需要服务器端的任何渲染，因为整个 pdf 是在**客户端浏览器**上创建的。
|
|
25
|
+
2. 生成的是真正的 pdf 文件，而不是图片式的，这样生成的 pdf 质量更高，您也可以编辑和打印生成 pdf 文件。
|
|
26
|
+
3. 更小的 pdf 文件体积
|
|
27
|
+
|
|
28
|
+
当然，它也有一些缺点：
|
|
29
|
+
|
|
30
|
+
1. 由于是基于 DOM 的，所以可能与实际表现不会 100% 一致。
|
|
31
|
+
2. 有的 css 属性还没有被支持，查看[支持的 css 属性](https://www.html2canvas.cn/html2canvas-features.html)。
|
|
32
|
+
3. 不适合在 nodejs 中使用。
|
|
33
|
+
4. 有的样式可能无法被正确渲染，比如：
|
|
34
|
+
- text-shadow
|
|
35
|
+
|
|
36
|
+
### 已实现功能
|
|
37
|
+
|
|
38
|
+
| 功能 | 状态 | 说明 |
|
|
39
|
+
| -------- | ---- | --------------------------------------------------------------------------------------------------------- |
|
|
40
|
+
| 文本渲染 | ✅ | 支持基础文本内容渲染,font-family,font-size,font-style,font-variant,color 等，支持文字描边，不支持文字阴影 |
|
|
41
|
+
| 图片渲染 | ✅ | 支持网络图片，base64 图片，svg 图片 |
|
|
42
|
+
| 边框 | ✅ | 支持 border-width,border-color,border-style,border-radius,暂时只实现了实线边框 |
|
|
43
|
+
| 背景 | ✅ | 支持背景颜色，背景图片，背景渐变 |
|
|
44
|
+
| canvas | ✅ | 支持渲染 canvas |
|
|
45
|
+
| svg | ✅ | 支持渲染 svg |
|
|
46
|
+
| 阴影渲染 | ✅ | 使用 foreignObjectRendering，支持边框阴影渲染 |
|
|
47
|
+
| 渐变渲染 | ✅ | 使用 foreignObjectRendering，支持背景渐变渲染 |
|
|
48
|
+
| iframe | ❌ | 支持渲染 iframe |
|
|
49
|
+
|
|
50
|
+
### foreignObjectRendering 使用
|
|
51
|
+
|
|
52
|
+
在 dom 十分复杂，或者 pdf 无法绘制的情况（比如：复杂的表格，边框阴影，渐变等），可以考虑使用 foreignObjectRendering。
|
|
53
|
+
给要渲染的元素添加 foreignObjectRendering 属性，就可以通过 svg 的 foreignObject 将它渲染成一张背景图插入到 pdf 文件中。
|
|
54
|
+
|
|
55
|
+
但是，由于 foreignObject 元素的渲染依赖于浏览器的实现，因此在不同的浏览器中可能会有不同的表现。
|
|
56
|
+
所以，在使用 foreignObjectRendering 时，需要注意以下事项：
|
|
57
|
+
|
|
58
|
+
1. foreignObject 元素的渲染依赖于浏览器的实现，因此在不同的浏览器中可能会有不同的表现。
|
|
59
|
+
2. IE 浏览器完全不支持，推荐在 chrome 和 firefox,edge 中使用。
|
|
60
|
+
3. 生成的图片会导致 pdf 文件体积变大。
|
|
61
|
+
|
|
62
|
+
示例
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<div style="width: 100px;height: 100px;" foreignObjectRendering>
|
|
66
|
+
<div
|
|
67
|
+
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);"
|
|
68
|
+
>
|
|
69
|
+
这是一个div元素
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 浏览器兼容性
|
|
75
|
+
|
|
76
|
+
该库应该可以在以下浏览器上正常工作（需要 `Promise` polyfill）：
|
|
77
|
+
|
|
78
|
+
- Firefox 3.5+
|
|
79
|
+
- Google Chrome
|
|
80
|
+
- Opera 12+
|
|
81
|
+
- IE9+
|
|
82
|
+
- Safari 6+
|
|
83
|
+
|
|
84
|
+
### 使用方法
|
|
85
|
+
|
|
86
|
+
dompdf 库使用 `Promise` 并期望它们在全局上下文中可用。如果您希望支持不原生支持 `Promise` 的[较旧浏览器](http://caniuse.com/#search=promise)，请在引入 `dompdf` 之前包含一个 polyfill，比如 [es6-promise](https://github.com/jakearchibald/es6-promise)。
|
|
87
|
+
|
|
88
|
+
安装：
|
|
89
|
+
|
|
90
|
+
npm install dompdf.js --save
|
|
91
|
+
|
|
92
|
+
#### 基础用法
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
import dompdf from 'dompdf.js';
|
|
96
|
+
dompdf(document.querySelector("#capture"), {
|
|
97
|
+
useCORS: true //是否允许跨域
|
|
98
|
+
})
|
|
99
|
+
.then(function (blob) {
|
|
100
|
+
const url = URL.createObjectURL(blob);
|
|
101
|
+
const a = document.createElement('a');
|
|
102
|
+
a.href = url;
|
|
103
|
+
a.download = 'example.pdf';
|
|
104
|
+
document.body.appendChild(a);
|
|
105
|
+
a.click();
|
|
106
|
+
})
|
|
107
|
+
.catch(function (err) {
|
|
108
|
+
console.log(err, 'err');
|
|
109
|
+
});
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
#### 字体支持
|
|
113
|
+
|
|
114
|
+
如果需要自定义字体，在[这里](https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html)将字体 tff 文件转化成 base64 格式的 js 文件，中文字体推荐使用[思源黑体](https://github.com/lmn1919/dompdf.js/blob/main/examples/SourceHanSansSC-Normal-Min-normal.js),体积较小。
|
|
115
|
+
在代码中引入该文件即可。
|
|
116
|
+
|
|
117
|
+
````js
|
|
118
|
+
<script type="text/javascript" src="./SourceHanSansSC-Normal-Min-normal.js"></script>
|
|
119
|
+
dompdf(document.querySelector("#capture"), {
|
|
120
|
+
useCORS: true, //是否允许跨域
|
|
121
|
+
fontConfig: {
|
|
122
|
+
fontFamily: 'SourceHanSansSC-Normal-Min',
|
|
123
|
+
fontBase64: window.fontBase64,
|
|
124
|
+
},
|
|
125
|
+
})
|
|
126
|
+
.then(function (blob) {
|
|
127
|
+
const url = URL.createObjectURL(blob);
|
|
128
|
+
const a = document.createElement('a');
|
|
129
|
+
a.href = url;
|
|
130
|
+
a.download = 'example.pdf';
|
|
131
|
+
document.body.appendChild(a);
|
|
132
|
+
a.click();
|
|
133
|
+
})
|
|
134
|
+
.catch(function (err) {
|
|
135
|
+
console.log(err, 'err');
|
|
136
|
+
});
|
|
137
|
+
````
|
|
138
|
+
|
|
139
|
+
### 构建
|
|
140
|
+
|
|
141
|
+
<!-- 您可以在[这里](https://github.com/niklasvh/html2canvas/releases)下载已构建好的版本。 -->
|
|
142
|
+
|
|
143
|
+
克隆 git 仓库：
|
|
144
|
+
|
|
145
|
+
$ git clone git@github.com:lmn1919/dompdf.js.git
|
|
146
|
+
|
|
147
|
+
安装依赖：
|
|
148
|
+
|
|
149
|
+
$ npm install
|
|
150
|
+
|
|
151
|
+
构建浏览器包：
|
|
152
|
+
|
|
153
|
+
$ npm run build
|
|
154
|
+
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ElementContainer } from '../element-container';
|
|
2
|
-
import { Color } from '../../css/types/color';
|
|
3
1
|
import { Context } from '../../core/context';
|
|
2
|
+
import { Color } from '../../css/types/color';
|
|
3
|
+
import { ElementContainer } from '../element-container';
|
|
4
4
|
export declare class IFrameElementContainer extends ElementContainer {
|
|
5
5
|
src: string;
|
|
6
6
|
width: number;
|