pdfmake的使用以及对中文的支持
前言
这次项目有个需求是需要导出pdf。但是jspdf这个插件对中文支持不够友好，用html的canvas转图片后还是很模糊。几经周转选用了pdfmake插件。
目前为止有以下几个优点:
1.直接在前端导出pdf，当然也可以和后端交互；
2.支持中文，当然这点是 最最最最最 重要的
3.易上手，只需看几下文档
4.项目一直在更新和维护
介绍
pdfmake是用来导出pdf的js插件，使用gulp进行自动化构建（用于更改字体支持中文时使用）
github: bpampuch/pdfmake
doc: document
可以在github下载整个工程，比较重要的是两个文件：
pdfmake.min.js （pdfmake/build/pdfmake.min.js ）
vfs_fonts.js（pdfmake/build/vfs_fonts.js，与支持中文有关）
使用以及对中文的支持
使用
pdfmake使用比较简单，引入pdfmake.min.js 和vfs_fonts.js。
pdf中的文件内容：
var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };内容的样式（这个挺好用的）：
styles: {
per_info_header: {
fontSize: 24,
alignment: 'center'
},
per_info: {
alignment: 'center'
}
}还有对图片的支持（注：图片模糊的话可以转成base64，在放到pdf里会清晰很多，这是部长研究出来的666）
详细用法看文档即可， 比较重要的还有github上的issue, 比如在pdf中画直线就可以在issue中找到方法。
对中文支持
￣へ￣ 扯了这么多终于到重点了！
思路：
1.加中文字体文件：xx.ttf到 pdfmake\examples\fonts 目录下；
2.然后通过gulp的 gulp buildFonts命令，在命令行下pdfmake文件夹中 将字体打包成vfs_fonts.js文件；没安装gulp的可以看下这篇教程：gulp详细入门教程
3.再将vfs_fonts.js放到自己工程的js文件夹里即可。
ps:不知道怎么找中文字体的同学可以这样，控制面板（查看方式为：类别）-> 外观和个性-> 字体 ，然后找自己要的字体即可，这里放一下我使用的微软雅黑和宋体的字体
这样就能在js中对需要的字体进行引用：
/*设置默认字体*/
defaultStyle: {
font: 'msyh'
}
/*设置字体*/
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
},
/*这里是加入的微软雅黑字体*/
msyh: {
normal: 'msyh.ttf',
bold: 'msyh.ttf',
italics: 'msyh.ttf',
bolditalics: 'msyh.ttf',
}
};放一个代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>my first export PDF</title>
<script src="build/pdfmake.min.js"></script>
<script src="build/vfs_fonts.js"></script>
<script>
function down() {
var dd = {
pageSize:'A4',
content: [
'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns',
{
columns: [
{
// auto-sized columns have their widths based on their content
width: 'auto',
text: 'First column'
},
{
// star-sized columns fill the remaining space
// if there's more than one star-column, available width is divided equally
width: 'auto',
text: 'Second column'
},
{
// fixed width
width: 'auto',
text: 'Third column'
},
{
// percentage width
width: '10%',
text: 'Last column'
}
],
// optional space between columns
columnGap: 10
},
'This paragraph goes below all columns and has full width'
],
defaultStyle: {
font: 'msyh'
},
styles: {
per_info_header: {
fontSize: 24,
alignment: 'center'
},
per_info: {
alignment: 'center'
}
}
};
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
},
msyh: {
normal: 'msyh.ttf',
bold: 'msyh.ttf',
italics: 'msyh.ttf',
bolditalics: 'msyh.ttf',
}
};
pdfMake.createPdf(dd).download("test.pdf");
}
</script>
</head>
<body>
<button onclick="down()">下载</button>
</body>
</html>结尾
大概就是酱紫啦。最重要的是修改字体以支持中文这点很好哇~
上一篇： LeetCode 61——旋转链表
下一篇： leetcode61. 旋转链表