html2canvas + jsPdf 实现导出pdf(及部分问题解决方案)

     再做项目中遇到了需要导出pdf的功能,遇到很多问题包括html2canvas截屏不全,jsPdf导出文字图片不展示-内容错位-背景黑色-jsPdf超过一页被分割等问题,就是把我的解决方案写在这给大家点思路和便利。

1.html2canvas和jsPdf简单介绍

一.html2canvas

    html2canvas官网

    npm引入方式  npm insatll --save html2canvas

    <stript>方式  html2canvas.min.js   html2canvas.js  点击前面两个超链接复制保存

    使用方式

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});
//原理大概是通过入参的绑定元素 复制一个相同的canvas

 

下图为html2canvas的第二个参数options