wordpress 同步微信素材seo快速优化软件网站
原因是默认字体不支持中文，需要更换字体。
详情官网：pdfmake
官网的大致意思是，下载pdfmake后，自行生成可用的字体js文件
以下是详细操作：
重要前提：电脑上需要已安装nodejs
点击进入官网下载安装即可：Nodejs官网
一、首先获取免费商用字体
推荐去字体天下获取：字体天下官网
创建demo文件夹，进去再创建font文件夹，将下载的字体放到这里
具体参考如下文件目录结构
起始文件目录 >>>
|-- demo # 项目文件夹名|-- font # 字体文件夹| |-- xxx.ttf # 下载的字体文件
然后单击demo文件夹直接托到vscode中打开
二、安装pdfmake
安装命令
npm install pdfmake
成功示例：
PS D:\peter\桌面\demo> npm install pdfmake
added 42 packages in 11s
17 packages are looking for funding
runnpm fundfor details
安装后的项目文件目录 >>>
|-- demo # 项目根目录|-- font # 字体文件夹| |-- xxx.ttf # 下载的字体文件|-- node_modules # 安装后生成的文件夹|-- package-lock.json # 安装后生成的文件|-- package.json # 安装后生成的文件
进入目标文件夹
执行命令
cd node_modules/pdfmake/
成功示例：
PS D:\peter\桌面\demo> cd node_modules/pdfmake/
PS D:\peter\桌面\demo\node_modules\pdfmake>
生成目标js文件
执行命令
node build-vfs.js "../../font/"
成功示例：
PS D:\peter\桌面\demo\node_modules\pdfmake> node build-vfs.js “…/…/font/”
Source path: …/…/font/FILE: xxx.ttf
Builded 1 files to ./build/vfs_fonts.js.
PS D:\peter\桌面\demo\node_modules\pdfmake>
最终文件目录 >>>
|-- demo # 项目根目录|-- font # 字体文件夹| |-- xxx.ttf # 下载的字体文件|-- node_modules # 安装后生成的文件夹| |-- pdfmake # 安装的pdfmake| | |-- build # 生成的内容文件夹| | | |-- vfs_fonts.js # 这是生成的我们所需的最终文件| |-- 其他文件...|-- package-lock.json # 安装后生成的文件|-- package.json # 安装后生成的文件
然后进入目标文件夹内找到 vfs_fonts.js即可。
三、将生成的此文件引入html
【重要】打开生成的vfs_fonts.js也能看到名称，替换的名称要与此文件内的名称保持一致
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {"xxx.ttf": "AAEAAAANAIAAAwBQRFNJRwAAAAEAGFQYAAAACEdQT1MOHRLOABg2...后面省略
使用示例：
<!-- 请根据自己存放的路径引入 >>> 此处为示例 -->
<script src="pdfmake.min.js"></script>
<script src="vfs_fonts.js"></script>
<!-- 字体设置的脚本一定要在引入的字体后 -->
<script>var fonts = {// 自定义字体名称Roboto: { // 这里名称任意，不过要和下面配置的对应normal: 'xxx.ttf', // 主要将这里的替换为你下载的字体文件名bold: 'xxx.ttf', // 主要将这里的替换为你下载的字体文件名italics: 'xxx.ttf', // 主要将这里的替换为你下载的字体文件名bolditalics: 'xxx.ttf' // 主要将这里的替换为你下载的字体文件名}};pdfMake.fonts = fonts;
</script>
<script>
$(document).ready(function() {$('#table').DataTable({buttons: ['excel', {extend: 'pdfHtml5',title: 'PDF 文件的标题',filename: 'PDF 文件名', messageTop: 'PDF 顶部显示的信息',customize: function (doc) {doc.defaultStyle = {font: 'Roboto' // 对应自定义的字体名称};}}],// 其他配置...});});
</script>
启动项目，点击pdf导出即可看到效果。
四、补充
由于生成是针对文件夹内的所有字体生成的，因此可以下载多个字体，配置的时候选择配置即可。