使用javascript生成PDF的类库 – jsPDF

 

曾经生成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