使用到的第三方库

1.html2canvas
2.jsPDF - PDF Document creation from JavaScript
3.pdfh5 - web/h5/移动端PDF预览插件

工具用途说明

1.html2canvas 用于将页面生成为图片
2.jsPDF 将图片生成PDF文件
3.pdfh5 展示PDF文件

具体实现

/**
生成图片和PDF
*/
html2canvas(document.querySelector("#qqq")).then(canvas => {
    const image = canvas.toDataURL('image/jpeg', 1)
    var doc = new jspdf.jsPDF();
    doc.addImage(image, "JPEG", 0, 0, 210, 290);
    const blob = base64toBlob(doc.output('datauristring'))
    const url = URL.createObjectURL(blob);
    loadDocPdf(url);
});
/**
生成URL使用的Blob数据
*/
function base64toBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
/**
加载预览PDF文件
*/
function loadDocPdf(url) {
            var pdfh5 = new Pdfh5('#docPdf', {
                pdfurl: url,
                loadingBar: true,
                pageNum: true,
                backTop: true
            });

            //pdf准备开始渲染，此时可以拿到pdf总页数
            pdfh5.on("ready", function () {
                console.log("总页数：" + this.totalNum)
            })
            //监听pdf渲染过程，currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
            pdfh5.on("render", function (currentNum, time, currentPageDom) {
                console.log("当前渲染页：" + currentNum + "，耗时：" + time + "毫秒")
            })
            //监听完成事件，加载失败、渲染成功都会触发
            pdfh5.on("complete", function (status, msg, time) {
                console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
            })
            //监听pdf渲染成功
            pdfh5.on("success", function (time) {
                console.log("加载完成，耗时" + time + "毫秒")
            })
}