最近论坛里有一位网友在实际用 jsPDF 插件，遇到了问题。我这个整理一下关于这个插件的用法。
jsPDF HTML5是一个客户端解决方案生成pdf文件。适合活动门票、报告、证书,等等。 它将在IE6+,Firefox 3 +,Chrome,Safari 3 +,Opera。IE9下工作。
jspdf 官方地址：https://parall.ax/products/jspdf
jspdf 支持以下几种内容：
- Images 图片
- Font faces 字体
- Two page Hello World 分页显示内容
- Circles 椭圆图形等
- Font sizes 设置字体大小
- Landscape 预览设置，打印，大小缩放等
- Lines 线条，简单图表
- Rectangles 矩形图形
- String Splitting 字符串拆分，自动换行
- Triangles 支持三角形
除了上面的特色外，还支持大小缩放，大小调整，打印，下载等功能。
jspdf 实例
jspdf 的使用非常简单，只需导入对应js，编写以下代码即可。
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Downloadify</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css" media="screen">
body {background: #fff; width: 500px; margin: 20px auto;}
input, textarea, p { font-family: 宋体, 黑体; font-size: 12pt;}
input, textarea { border: solid 1px #aaa; padding: 4px; width: 98%;}
</style>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/downloadify.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<!-- <script type="text/javascript" src="js/downloadify.min.js"></script> -->
<script type="text/javascript">
window.load=function(){
Downloadify.create('downloadify',{
filename: function(){
return document.getElementById('filename').value;
},
data: function(){
var doc = new jsPDF();
doc.text(20, 20, document.getElementById('data').value);
doc.addPage();
doc.text(20, 20, document.getElementById('data').value);
return doc.output();
},
onComplete: function(){ alert('成功保存文件!'); },
onCancel: function(){ alert('您已经取消保存文件'); },
onError: function(){ alert('出现错误了'); },
swf: 'js/downloadify.swf',
downloadImage: 'js/download.png',
width: 100,
height: 30,
transparent: true,
append: false
});
}
</script>
</head>
<body onload="load();">
<input type="text" name="filename" value="文件名.pdf" id="filename" /><br />
<textarea cols="60" rows="10" name="data" id="data">it seem do not support to Chinese</textarea>
<p id="downloadify">You must have Flash 10 installed to download this file.</p>
</body>
</html>
jspdf 插件下载，大家可以到官网上自行下载。
中文乱码处理
jsPDF 插件对中文支持不够友好，会出现乱码问题。目前比较好的解决办法是，中文部分使用图片替换。还有一种做法是制作一个文字包。这种做法需要对源码有很深的理解。
感觉这样麻烦的，可以把所有内容都加入 Canvas 中，使用 html2canvas 插件将 canvas 中内容转换成图片，然后jspdf 中显示图片即可。关于 html2canvas 的内容，点这里进行学习。
： » 使用 jQuery jsPDF 插件生成pdf文档并解决中文乱码问题
原创文章，作者：Carrie001128，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251219.html