纯前端HTML转PDF下载（html2canvas + jsPdf 实现）

纯前端HTML转PDF下载（html2canvas + jsPdf 实现）

最近的一个需求，需要将页面的内容转为PDF并且下载，通过搜索终于实现了想要的效果，以下是一些笔记内容。

实现过程

我们会用到html2Canvas和JsPDF去实现。
1.html2Canvas会将html页面截屏并转为canvas
2.然后利用JsPDF将canvas图片排版后下载保存。

安装好html2canvas和jspdf

html2canvas官网 和 jspdf官网

npm insatll --save html2canvas jspdf

html2canvas参数

Name	Default	Description
allowTaint	false	是否允许跨源图像污染画布
backgroundColor	#ffffff	画布背景颜色，如果在DOM中没有指定。设置空的transparen
canvas	null	Existing canvas 现有的画布元素用作绘图的基础
foreignObjectRendering	false	如果浏览器支持，是否使用ForeignObject渲染
imageTimeout	15000	加载图像的超时时间（以毫秒为单位）。 设置为0以禁用超时。
ignoreElements	(element) => false	谓词功能，可从渲染中删除匹配的元素。
logging	true	启用日志记录以进行调试
onclone	null	克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。
proxy	null	用于加载跨域图像。 如果保留为空，则不会加载跨域图像。
removeContainer	true	是否清除HTML2canvas临时创建的克隆DOM元素
scale	window.devicePixelRatio	用于渲染的比例尺。 默认为浏览器设备像素比率。
useCORS	false	是否尝试使用CORS从服务器加载图像
width	Element width	canvas的宽度
height	Element height	canvas的高度
x	Element x-offset	裁剪画布X坐标
y	Element y-offset	裁剪画布Y坐标
scrollX	Element scrollX	渲染元素时要使用的x滚动位置 (for example if the Element uses position: fixed)
scrollY	Element scrollY	呈现元素时要使用的y滚动位置, (for example if the Element uses position: fixed)
windowWidth	Window.innerWidth	呈现元素时要使用的窗口宽度，这可能会影响诸如媒体查询之类的内容
windowHeight	Window.innerHeight	呈现元素时要使用的窗口高度，这可能会影响媒体查询之类的内容

jspdf参数

// jspdf部分源码
constructor(orientation?:any, // 方向
            unit?:string<