dompdf.js只需一行代码即可实现html转矢量pdf

admin

2025年12月12日 9:58 本文热度 35

下面是在网上找到的一些可以使用，但各有优缺点的方案，优点、缺点都有列出，供大家参考。

方案类型	优点	缺点
Puppeteer等无头浏览器	渲染效果与浏览器完全一致支持 JavaScript 动态内容	资源消耗大(内存、CPU) 启动速度慢并发处理能力有限需要服务器环境
jsPDF/PDFKit 纯前端解决方案	纯前端实现，无服务器依赖文件体积小生成速度快支持矢量图形	需要手动构建 PDF 结构不支持复杂 HTML 布局学习成本较高样式支持有限
PDFMake	声明式 API，易于使用支持表格、图表等模板化程度高	不支持 HTML 直接转换需要重新构建文档结构样式定制能力有限复杂布局实现困难
html2canvas + jsSDK 纯前端方案	实现简单纯前端实现所见即所得快速上手，对代码入侵小	生成图片式 PDF，无法编辑文件体积大清晰度不够不支持文字选择部分 CSS 属性支持有限
dompdf.js	纯前端实现文件体积小支持文字选择和编辑矢量图形，清晰度高	复杂布局可能有差异浏览器兼容性要求

这里面，稍微好点的就是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

文字绘制（颜色，大小）
图片绘制（支持 jpeg, png 等格式）
背景，背景颜色（支持合并单元格）
边框，复杂表格绘制（支持合并单元格）
canvas （支持多种图表类型）
svg （支持 svg 元素绘制）
阴影渲染（使用 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 编辑过

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。