在java里，我们常用Itext来生成pdf，在pdf文件里组合图片，文字，画表格，画线等操作，还会遇到中文支持的问题。
那好，现在想直接在web前端就生成pdf怎么办，目前有以下几个解决方案
1：JSPDF.js
这个库支持不同类型的PDF文件格式，包括：文本，数字，图形，图片，同时你可以自由的编辑标题或者其它类型元素。
还支持互动的内容制作，例如，你可以输入文字或者数字，然后jsPDF帮助生成最后的PDF内容。
缺点，不支持中文，不支持svg导入（解决方案：svg+html转换成canvas）
http://jspdf.com/
示例代码如下：
You must have Flash 10 installed to download this file.
2：pdfmake
pdfmake的基本使用方法
1.包含以下两个文件
|
1
2
|
|
2.在JS代码中声明一个Document-definition对象，这个是pdfmake自己的术语。简单点说，就是创建一个至少包含content属性的对象。然后就可以调用pdfMake的方法导出PDF，具体见如下代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
|
pdfmake支持中文
三个步骤：
1.到pdfmake项目网站，把工程都下载下来，然后进入工程目录将字体文件（比如微软雅黑.ttf)放到examples/fonts目录下，然后使用grunt dump_dir生成新的vfs_fonts.js文件；
从上面描述可知该工程是通过grunt管理的，如果无相关知识，请上网先补习下。
grunt dump_dir命令会将fonts目录下所有文件都打包，因此无用文件请别放进去。
微软雅黑.ttf网上一搜一大把，WINDOWS电脑系统盘下存放字体的目录也找得到。
2.回到自己的例子代码中，JS代码中修改pdfMake的fonts对象，声明当前要用到字体：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
pdfMake.fonts = {
Roboto: {
normal:
'Roboto-Regular.ttf'
,
bold:
'Roboto-Medium.ttf'
,
italics:
'Roboto-Italic.ttf'
,
bolditalics:
'Roboto-Italic.ttf'
},
微软雅黑: {
normal:
'微软雅黑.ttf'
,
bold:
'微软雅黑.ttf'
,
italics:
'微软雅黑.ttf'
,
bolditalics:
'微软雅黑.ttf'
,
}
};
|
3.Document-definition对象中声明默认要使用的字体，具体来说：就是声明一个对象，除了content属性，还要有一个defaultStyle属性，该defaultStyle下面还有再有一个font属性：
|
1
2
3
4
5
6
7
8
9
|
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:
'微软雅黑'
}
};
|
以下为根据如上步骤做的一个完整例子源码：
"zh-CN"
>
"utf-8"
>
my first export PDF
插入图片
在插入图片方面，jsPDF要求先将图片转换成Data URL才行，而pdfmake允许直接指定路径，看起来是很方便，但这是有条件的，必须是以node.js作为服务器，或者将图片放到vfs_fonts.js中，所以总的来说，用处不大，还是一样得将图片转换成Data URL形式才行。
为解决此问题，我写了一个ImageDataURL的函数对象，可同时传入多个图片地址。在图片都加载完成后，ImageDataURL.oncomplete将被触发，在回调中通过this.imgdata取出各个图片的Data URL，根据pdfmake的要求组织下，就可正确生成pdf了。
ImageDataURL的原理是通过H5的canvas标签，将图片绘制在canvas上，然后通过canvas的toDataURL得到图像的Data URL。使用时请注意浏览器兼容性问题。
以下为将sampleImage.jpg, sampleage.jpg, sampleImage.jpg依次写入PDF的例子，测试时sampleage.jpg不存在，PDF直接忽略。
"zh-CN"
>
"utf-8"
>
my second export PDF