西安苗木行业网站建设价格,公司页面网站设计模板,公司部门,梅州做网站需要多少钱原因是默认字体不支持中文#xff0c;需要更换字体。
详情官网#xff1a;pdfmake
官网的大致意思是#xff0c;下载pdfmake后#xff0c;自行生成可用的字体js文件
以下是详细操作#xff1a; 重要前提#xff1a;电脑上需要已安装nodejs 点击进入官网下载安装即可需要更换字体。
详情官网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 run npm fund for 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 srcpdfmake.min.js/script
script srcvfs_fonts.js/script
!-- 字体设置的脚本一定要在引入的字体后 --
scriptvar 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导出即可看到效果。
四、补充
由于生成是针对文件夹内的所有字体生成的因此可以下载多个字体配置的时候选择配置即可。
