曾经生成PDF都是服务器端代码的专利，在今天的这篇文章中，我们将介绍一个javascript类库 - jsPDF，使用它能够帮助你使用前端脚本生成PDF文件，是不是很棒，试试吧！
jsPDF支持不同类型的PDF文件格式，包括：文本，数字，图形，图片，同时你可以自由的编辑标题或者其它类型元素。
支持互动的内容制作，例如，你可以输入文字或者数字，然后jsPDF帮助生成最后的PDF内容。
支持现代浏览器，如果是老式浏览器的话，可以很好的使用flash来实现兼容。不过貌似支持Firefox不是很好，如果要查看演示，使用Chrome吧！
官网地址：http://jspdf.com/
下载地址：https://github.com/MrRio/jsPDF
下面做几个简单的demo
<script type="text/javascript" src="jspdf.min.js"></script>
并不需要依赖库，只要引入jspdf.js(或压缩的jspdf.min.js)即可。
demo1：生成简单的文本
Html代码
<a href="javascript:void(0)" onclick="createAndOutput()">生成并输出</a> <br/> <a href="javascript:void(0)" onclick="createAndDownload()">生成并下载</a>
Js代码
<script type="text/javascript">
//生成并输出
function createAndOutput(){
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage(); //生成下一页
doc.text(20, 20, 'Do you like that?');
doc.output('datauri');
}
//生成并下载
function createAndDownload(){
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage(); //生成下一页
doc.text(20, 20, 'Do you like that?');
doc.save('Test.pdf');
}
</script>
demo2生成图片
Html代码
<a href="javascript:void(0)" onclick="createAndDownload()">生成并下载</a>
Js代码
<script type="text/javascript">
//生成并下载
function createAndDownload(){
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, "jsPDF image demo");
var imgAsDataURL = createDateUrl();
doc.addImage(imgAsDataURL, 'JPEG', 15, 40, 180, 180);
doc.save('Test.pdf');
}
//利用html5的画布功能生成简单的矩形
function createDateUrl(){
var imgCanvas = document.createElement("canvas");
if (imgCanvas.getContext) {
alert("您的浏览器支持 canvas 标签");
} else {
alert("您的浏览器不支持 canvas 标签");
}
imgContext = imgCanvas.getContext("2d");
imgContext.fillRect(20, 20, 100, 100);
return imgCanvas.toDataURL("image/jpeg");
}
</script>
由于jsPDF处理的图片数据为DataURL的，你可通过html5的画布功能进行转化下，之后在通过jsPDF的addImage方法向PDF中插入图片。