曾经生成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)" οnclick="createAndOutput()">生成并输出</a>
<br/>
<a href="javascript:void(0)" οnclick="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)" οnclick="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中插入图片。
转自:http://www.see-source.com/front/front!index