-
在
WEB
上想做一个导出
P
DF
的功能,发现
jsPDF
比较多人
推荐,遗憾的是不支持中
文
,
最
后
找
到
pdfmak
e
,
很
好
地<
/p>
解
决
了
此
问
题
。
它
的
效
果
可
以
先
到
/
查看。在使用过程中,还发现图片的插入是相对繁琐的一
件事。
针对这些问题,本文的主要内容可分为三部分:
•pdfmake<
/p>
的基本使用方法;
•
如何解决中文问题
;
•
< br>如何通过指定图片地址插入图片。
pdfmake
的基本使用方法
1.
包含以下两个文件
<script
src=
<script src=
2.
在
JS
代码中声明一个
Document-definition
p>
对象,这个是
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
项目网站,把工程都下载下来,然后进入工程目录将字体文件(比如微软
p>
雅黑
.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
的函数对象,
p>
可同时传入多个图片地址。在
图片都加载完成后,
< br>lete
将被触发,
在回调中通过
a
取出各
个图片的
Data URL
,根据
pdfmake
的要求组织下,
就可正确生成
pdf
了。
ImageDataURL
的原理是通过
H5
的
canvas
标签,将图片绘制在
canvas
上,然后通过
canvas
的
toDataURL
得到图像的
Data
URL
。使用时请注意浏览器兼容性问题。
以下为将
,
,
依次写入
PDF
的例子,测试
p>
时
不存在,
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([