前端生成pdf文件之pdfmake.js
转载:点击查看原文
pdfmake.js是一个简单的生成pdf文件的插件。
pdfmake.js https://files.cnblogs.com/files/s313139232/pdfmake.min.js
代码也很简单:
html文件:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>my first export PDF</title>
<script src="pdfmake.min.js"></script>
<script src="vfs_fonts.js"></script>
<script>
function down() {
var dd = {
content: [
'中英文测试',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
defaultStyle: {
font: '方正姚体'
}
};
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
},
方正姚体: {
normal: 'FZYTK.TTF',
bold: 'FZYTK.TTF',
italics: 'FZYTK.TTF',
bolditalics: 'FZYTK.TTF',
}
};
pdfMake.createPdf(dd).download();
}
</script>
</head>
<body>
<button onclick="down()">下载</button>
</body>
</html>
代码中会引用两个技术,pdfmake.min.js vfs_fonts.js
其中pdfmake.min.js是pdfmake的支持文件,而vfs_fonts.js是字体文件(.ttf)打包成的js文件。
content中pdf的内容拼接:
内容拼接类似于html+css,但是写法为pdfmake插件自带,可以去pdfmake的github首页介绍中查看。
字体文件(.ttf)打包可以通过pdfmake的github上的源文件进行打包制作。
下面是两种字体的vfs_fonts.js文件:
方正姚体 https://files.cnblogs.com/files/s313139232/方正姚体vfs_fonts.js
Roboto-Itali https://files.cnblogs.com/files/s313139232/Roboto-Italivfs_fonts.js
注意:中文的字体文件较大,打包出来多数都在10M以上,推荐方正姚体等ttf文件较小的字体进行打包。
打包教程:http://www.cnblogs.com/xrab/p/7210588.html
打包步骤:
1.在https://github.com/bpampuch/pdfmake下载pdfmake的源文件
2.在根目录用 npm 安装 gulp
npm install gulp --save-dev
3.安装pdfmake依赖包
npm install
4.在cmd运行打包examples/fonts中的.ttf文件的命令。
gulp buildFonts
如果运行上面的命令后,报 什么 apply 什么的 一个错误, 就 npm i gulp-cli -g 一下 ,应该就好了。
5.然后在 build 文件中可以找到vfs_fonts.js文件。
由于字体打包文件较大,建议examples/fonts中的.ttf文件只放置一个字体文件。
前端生成pdf文件之pdfmake.js的更多相关文章
- 前端生成PDF,让后端刮目相看
PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨率.设备等因素没有关系,不论是在Windows,Unix还是在苹果公 ...
- 在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all
在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all 前天来了个新需求, 有一个授权书的文件要点击下载, 需要在前端生成, ...
- PDF.Js的使用—javascript中前端显示pdf文件
PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...
- 纯前端导出pdf文件
纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...
- Itext生成pdf文件
来源:https://my.oschina.net/lujianing/blog/894365 1.背景 在某些业务场景中,需要提供相关的电子凭证,比如网银/支付宝中转账的电子回单,签约的电子合同等. ...
- 根据PDF模板生成PDF文件(基于iTextSharp)
根据PDF模板生成PDF文件,这里主要借助iTextSharp工具来完成.场景是这样的,假如要做一个电子协议,用过通过在线填写表单数据,然后系统根据用户填写的数据,生成电子档的协议.原理很简单,但是每 ...
- 在C#.NET中,如何生成PDF文件?主要有以下几个途径
1.使用.NET文件流技术:若通过.NET的文件流技术生成PDF文件,必须对PDF文件的语法很清楚,例如BT表示实体内容开始:ET表示实体内容结束:TD表示换行等等.我们可以从Adobe的官方网站上下 ...
- linux下编译bib、tex生成pdf文件
实验: 在linux环境下,编译(英文)*.bib和*.tex文件,生成pdf文件. 环境: fedora 20(uname -a : Linux localhost.localdomain 3.19 ...
- ThinkPHP3.2.3扩展之生成PDF文件(MPDF)
目前是PHP生成PDF文件最好的插件了,今天介绍下在ThinkPHP3.2.3里如何使用. 先安照路径放好如图. 下面是使用方法 public function pdf(){ //引入类库 Vendo ...
随机推荐
- MVC传参数给js的时候 如果是数值 变量要进行一下转换才能正确识别 例如var aaa = parseInt('@Model.ClickIndex');
这是拼接参数的格式 <div id="a1" style="font-size:12px" onclick="location = '@item ...
- Scrapy快速上手
超详细官方教程解析 https://blog.csdn.net/fly_yr/article/details/51540269 实战过程: 创建一个Scrapy项目 定义提取的Item 编写爬取网站的 ...
- iris数据集(鸢尾花)
包含三个花的品种(Iris setosa(山鸢尾),Iris virginica(北美鸢尾),Iris versicolor(变色鸢尾)) 每个品种各50个样 每个样本四个特征参数(萼片长度和宽度.花 ...
- Node.js安装和简介
Node.js是基于Chrome的V8 JavaScript引擎构建的JavaScript运行平台.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 的包 ...
- asyncio之asyncio.run
asyncio.run(coro, *, debug=False) python3.7加入,只能作为asyncio的入口函数.
- 设计模式C++学习笔记之四(Multition多例模式)
多例模式,这个在GOF的模式设计里没有提到,但在实际工作中确实会用到.更详细的内容及说明可以参考原作者博客:cbf4life.cnblogs.com. 4.1.解释 main(),客户 略 说明: ...
- LNMP下Nginx 中文文件名或目录404无法访问的解决方法
貌似很多人还是会遇到中文乱码的问题,Apache可以使用mod_encoding支持中文目录和文件,LNMP下Nginx其实不需要安装额外的组件即可支持中文文件名或中文目录,下面说一下常见的CentO ...
- linux系统网络相关问题
暂时将你的 eth0 这张网络卡的 IP 设定为 192.168.1.100 ,如何进行? ifconfig eth0 192.168.1.100 我要增加一个路由规则,以 eth0 连接 192.1 ...
- ABP 框架从源码学习——abp框架启动和结束(1)
1.abp框架的启动是从Global.asax文件的Application_Start启动的,当然代表Global的application必须从AbpWebApplication继承: publ ...
- 词向量之Word2vector原理浅析
原文地址:https://www.jianshu.com/p/b2da4d94a122 一.概述 本文主要是从deep learning for nlp课程的讲义中学习.总结google word2v ...