使用html2canvas和jspdf把网页保存pdf并下载

使用html2canvas和jspdf把网页保存pdf并下载

直接上代码，先引入两个插件，jspdf放前面

<script src="/static/js/jspdf.debug.js"></script>
<script src="/static/js/html2canvas.js"></script>

点击下载时调用的方法

// 调用下载
download($("body>div"));

/**
 * 下载
 * @param content 要保存的dom元素
 */
async function download(content) {
    let indnum = 0;
    var PDF = new jsPDF('1', 'pt', [1920 * 0.75, 1080 * 0.75])
    for (let index = 0; index < content.length; index++) {
        await html2canvas(content[index], {
            useCORS: true,
            allowTaint: true,
            scale: 2 // 提升画面质量，但是会增加文件大小
        }).then(function (canvas) {
            /**jspdf将html转为pdf分页，整体思路：
             * 1. 获取DOM
             * 2. 将DOM转换为canvas
             * 3. 获取canvas的宽度、高度（稍微大一点）
             * 4. 将pdf的宽高设置为canvas的宽高
             * 5. 将canvas转为图片
             * 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
             */
            // 得到canvas画布的单位是px 像素单位
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            // 将canvas转为base64图片
            var pageData = canvas.toDataURL('image/jpeg', 1.0)
            // 设置内容图片的尺寸，img是pt单位
            var imgX = (contentWidth) / 2 * 0.75;
            var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
            // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
            PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY);
            if (indnum < content.length - 1) {
                PDF.addPage();
            }
            // 保存下载
            if (indnum == content.length - 1) {
               	PDF.save('学习资料.pdf')
            }
            indnum += 1;
        }).catch(res => {
        	console.log("下载失败，请重新下载！");
        })
    }
}