-
在
WEB
上想做一个导出
P
DF
的功能，发现
jsPDF
比较多人
推荐，遗憾的是不支持中
文
，
最
后
找
到
pdfmak
e
，
很
好
地<
/p>
解
决
了
此
问
题
。
它
的
效
果
可
以
先
到
/
查看。在使用过程中，还发现图片的插入是相对繁琐的一
件事。
针对这些问题，本文的主要内容可分为三部分：
•pdfmake<
/p>
的基本使用方法；
•
如何解决中文问题
;
•
< br>如何通过指定图片地址插入图片。
pdfmake
的基本使用方法
1.
包含以下两个文件
<script
src=
<script src=
2.
在
JS
代码中声明一个
Document-definition
对象，这个是
pdfmake
自己的术语。
简单
点说，
就是创建一个至少包含
co
ntent
属性的对象。
然后就可以调用
pdfMake
的方法导出
PDF
，
具体见如下代码：
<script type=
//
创建
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
Pdf(dd).download();
</script>
按照上例操作，就可以看到提示文
件下载了。关于
pdfmake
的完整教程请登陆
pdfmake
项目查看。
pdfmake
支持中文
三个步骤：
1.
到
pd
fmake
项目网站，把工程都下载下来，然后进入工程目录将字体文件（比如微软
雅黑
.ttf)
放到
examples/fonts
目录下，然后使用
grunt
dump_dir
生成新的
vfs_
文
件；
从
上面描述可知该工程是通过
grunt
管理的，如果无相关知识
，请上网先补习下。
grunt dump_dir
命令会将
fonts
目录下所有文件都打包，因此无用文件请别放进去。
微软雅黑
.ttf
网上一搜一大把，
WINDOWS
电脑系统盘下存放字体的目录也找得到。
2.
回到自己的例子代码中，
JS
代码中修改
pdfMake
的
fonts
对象，
声明当
前要用到字体：
= {
Roboto: {
normal: '',
bold: '',
italics: '',
bolditalics:
''
},
微软雅黑
: {
normal: '
微软雅黑
.ttf',
bold:
'
微软雅黑
.ttf',
italics: '
微软雅黑
.ttf',
bolditalics:
'
微软雅黑
.ttf',
}
};
nt-
definition
对象中声明默认要使用的字体，具体来说：就是声明一个对象，<
/p>
除了
content
属性，还要有一个<
/p>
defaultStyle
属性，该
de
faultStyle
下面还有再有一个
font
属
性：
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: '
微软雅黑
'
}
};
以下为根据如上步骤做的一个完整例子源码：
<!DOCTYPE
html>
<html lang=
<head>
<meta
charset=
<title>my first export PDF</title>
<script src=
<script src=
<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: '
微软雅黑
'
}
};
= {
Roboto: {
normal: '',
bold: '',
italics:
'',
bolditalics: ''
},
微软雅黑
: {
normal: '
微软雅黑
.ttf',
bold:
'
微软雅黑
.ttf',
italics: '
微软雅黑
.ttf',
bolditalics:
'
微软雅黑
.ttf',
}
};
Pdf(dd).download();
}
</script>
</head>
<body>
<button
onclick=
下载
</button>
</body>
</html>
插入图片
在插入图片方面，
jsPDF
要求先将
图片转换成
Data
URL
才行，而
pdfmake
允许直接指
定路径，看
起来是很方便，但这是有条件的，必须是以
作为服务器，或者将
图片放
到
vfs_
中，
所以总的来说，
用处不大，
还是一样得将图片转换成<
/p>
Data URL
形式才行。
为解决此问题，
< br>我写了一个
ImageDataURL
的函数对象，
可同时传入多个图片地址。在
图片都加载完成后，
< br>lete
将被触发，
在回调中通过
a
取出各
个图片的
Data URL
，根据
pdfmake
的要求组织下，
就可正确生成
pdf
了。
ImageDataURL
的原理是通过
H5
的
canvas
标签，将图片绘制在
canvas
上，然后通过
canvas
的
toDataURL
得到图像的
Data
URL
。使用时请注意浏览器兼容性问题。
以下为将
,
,
依次写入
PDF
的例子，测试
时
不存在，
PDF
直接忽略。
<!DOCTYPE html>
<html
lang=
<head>
<meta charset=
<title>my
second export PDF</title>
<script
src=
<script src=
<script>
function down() {
var
x
=
new
ImageDataUR
L([