dompdf.js只需一行代码即可实现html转矢量pdf
|
admin
2025年12月12日 9:58
本文热度 44
|
下面是在网上找到的一些可以使用，但各有优缺点的方案，优点、缺点都有列出，供大家参考。
| | |
|---|
| 渲染效果与浏览器完全一致
支持 JavaScript 动态内容 | 资源消耗大(内存、CPU)
启动速度慢
并发处理能力有限
需要服务器环境 |
| 纯前端实现，无服务器依赖
文件体积小
生成速度快
支持矢量图形 | 需要手动构建 PDF 结构
不支持复杂 HTML 布局
学习成本较高
样式支持有限 |
| 声明式 API，易于使用
支持表格、图表等
模板化程度高 | 不支持 HTML 直接转换
需要重新构建文档结构
样式定制能力有限
复杂布局实现困难 |
| 实现简单
纯前端实现
所见即所得
快速上手，对代码入侵小 | 生成图片式 PDF，无法编辑
文件体积大
清晰度不够
不支持文字选择
部分 CSS 属性支持有限 |
| 纯前端实现
文件体积小
支持文字选择和编辑
矢量图形，清晰度高 | |
这里面，稍微好点的就是dompdf.js，也是我今天要讲的主角。
dompdf.js 最大的优点就是支持矢量图形，生成的文件体积小，速度快，生成对应的 pdf 文档可以进行文字搜索，选中，编辑等功能。而且，页眉、页脚、表格跨页等都 api 化了，上手也非常的简单，默认情况下，只需几行代码即可实现 html 转 pdf 的功能。
// 引入 dompdf.js库
import dompdf from "dompdf.js";
dompdf(document.querySelector("#xttblog")).then(function (blob) {
//文件操作
});
即使是复杂的表格，也能轻松应对。
有了 dompdf.js，报表导出、小票生成、合同下载、体检报告、复杂图表等都可以进行 html 转 pdf 操作。
dompdf.js 的原理
官网地址：https://github.com/lmn1919/dompdf.js
还提供了在线体验：https://dompdfjs.lisky.com.cn
- 阴影渲染 （使用 foreignObjectRendering，支持边框阴影渲染）
- 渐变渲染 （使用 foreignObjectRendering，支持背景渐变渲染）
浏览器兼容性
该库应该可以在以下浏览器上正常工作（需要 Promise polyfill）：
Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Safari 6+
dompdf 库使用 Promise 并期望它们在全局上下文中可用。如果您希望支持不原生支持 Promise 的较旧浏览器，请在引入 dompdf 之前包含一个 polyfill，比如 es6-promise。
安装：
npm install dompdf.js --save
CDN引入：
<script src="https://cdn.jsdelivr.net/npm/dompdf.js@1.0.4/dist/dompdf.min.js"></script>
基础用法
import dompdf from 'dompdf.js';
dompdf(document.querySelector("#capture"), {
useCORS: true //是否允许跨域
})
.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.log(err, 'err');
});
由于jspdf只支持英文，所以其他语言会出现乱码的问题，需要导入对应的字体文件来解决，如果需要自定义字体，在这里将字体 tff 文件转化成 base64 格式的 js 文件，中文字体推荐使用思源，体积较小，在代码中引入该文件即可。
<script type="text/javascript" src="./SourceHanSansSC-Normal-Min-normal.js"></script>
dompdf(document.querySelector("#capture"), {
useCORS: true, //是否允许跨域
fontConfig: {
fontFamily: 'SourceHanSansSC-Normal-Min',
fontBase64: window.fontBase64,
},
})
.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.log(err, 'err');
});
阅读原文：https://mp.weixin.qq.com/s/H9zf3mlCs7J3pzKEx296wg
该文章在 2025/12/12 10:22:25 编辑过
400 186 1886
