jspdf添加宋体_JS导出PDF插件(支持中文、图片使用路径)

本文介绍了如何使用pdfmake库在Web上实现导出包含中文和图片的PDF文件。首先,详细说明了pdfmake的基本使用方法,然后讲解了如何解决中文显示问题,包括下载字体文件、更新vf_fonts.js以及在代码中声明字体。接着,讨论了如何通过图片路径插入图片,提出了ImageDataURL函数对象来将图片转为Data URL。提供了完整示例代码供参考。
摘要由CSDN通过智能技术生成

在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题。它的效果可以先到http://pdfmake.org/playground.html查看。在使用过程中,还发现图片的插入是相对繁琐的一件事。

针对这些问题,本文的主要内容可分为三部分:

pdfmake的基本使用方法;

如何解决中文问题;

如何通过指定图片地址插入图片。

pdfmake的基本使用方法

1.包含以下两个文件

2.在JS代码中声明一个Document-definition对象,这个是pdfmake自己的术语。简单点说,就是创建一个至少包含content属性的对象。然后就可以调用pdfMake的方法导出PDF,具体见如下代码:

//创建Document-definition对象

var dd = {

content: [

'One paragraph',

'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'

]

};

//导出PDF

pdfMake.createPdf(dd).download();

按照上例操作,就可以看到提示文件下载了。关于pdfmake的完整教程请登陆pdfmake项目查看。

pdfmake支持中文

三个步骤:

1.到pdfmake项目网站,把工程都下载下来,然后进入工程目录将字体文件(比如微软雅黑.ttf)放到examples/fonts目录下,然后使用grunt dump_dir生成新的vfs_fonts.js文件;

从上面描述可知该工程是通过grunt管理的,如果无相关知识,请上网先补习下。

grunt dump_dir命令会将fonts目录下所有文件都打包,因此无用文件请别放进去。

微软雅黑.ttf网上一搜一大把,WINDOWS电脑系统盘下存放字体的目录也找得到。

2.回到自己的例子代码中,JS代码中修改pdfMake的f

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值