你不知道的jsPDF

jsPDF大多数做前端开发的可能都使用过，常用来生成pdf文件，一般搭配html2canvas可以将网页内容导出为pdf，然后使用save方法就能下载生成的pdf文件。

一般情况下，基本都能满足我们产品的需求，但是总存在一些不太一般的情况，比如要在小程序和App使用，发现要么是生成的文件内容排版不行，要么是无法预览和下载，下面分享几点不常用但实用的小技巧：

1、如何生成不分页的pdf文件？

其实只需要在初始化时，将第三个参数设置为文档的宽高就行，即：

new jsPDF('p', 'pt', [width, height])

width和height可以通过html2canvas导出的canvas获取，也可以通过文档对象获取。

2、如何在小程序、App里面生成指定格式的pdf文件？

我们在小程序或App里面使用jsPDF导出文件时，为了用户的体验效果常常是按照手机分辨率来设计UI的，这就导致导出的pdf文件也只能以这种大小显示，我们想要生成指定格式的文件就只得另外处理，可以采取以下两种方式：

（1）通过webview或者iframe嵌入网页的方式，根据需求写好页面，在此页面调用jsPDF生成文件，就能生成指定格式的文件了；

<web-view src="http://127.0.0.1:5500/index.html"></web-view>

（2）通过jsPDF提供的方法进行绘制，原理类似canvas，调用相应的api即可绘制如图片、文字、线段和图形。

let pdf=new jsPDF();
pdf.text("hello world",10,10);
pdf.save();

3、如何让导出的pdf文件可以编辑？

我们指定html2canvas是通过绘制图像的方式导出的canvas，以此种方式生成的文件是不能编辑的，所以只能采用上面提到的绘制内容的方式，使用jsPDF提供的绘制方法将内容按照需求绘制到文件里。需要注意的是，因为jsPDF不支持绘制中文内容，绘制中文文本内容会乱码，需要使用其GitHub提供的工具，将支持中文的字体转码成js文件，然后在需要的页面引入，详情可参考官网示例。

4、如何在小程序、App实现预览和保存pdf文件的功能？

我们在小程序使用jsPDF的save方法时，发现无法下载也无任何报错，查看源码发现其save方法实现逻辑实际上是浏览器常用的a标签下载方式，即

小程序不支持因此无法下载并保存，那么，我们是否可以通过获取获取其生成的内容自己处理呢？

答案是肯定的，查看其说明文件，我们发现有以下几个方法可以获取输出内容：

我们不能直接生成文件，因此可以选择的只有3个，即

output(type: "arraybuffer"): ArrayBuffer;
output(type: "blob"): Blob;
 output(type: "bloburi" | "bloburl"): URL;

根据后台接收的格式进行选择，我们就以导出blob为示例：

let blob = pdf.output('blob');
let fileUrl = new File([blob], `xxx.pdf`, { type: blob.type });
//上传文件至后台
uploadFile(fileUrl);

这样即可将生成pdf文件上传，然后通过后台返回文件的URL地址，即可实现预览和下载了。

创作不易，觉得有用的希望点赞关注和转发~~欢迎评论交流