前端页面的pdf导出（h2c,jsPDF）

import jsPDF from 'jsPDF'
import html2canvas from 'html2canvas'
//需要引入这两个必要的依赖

const exportPdf = () =>{
    const detail = document.getElementById('detail') //获取到html包含此页面的外层标签，detail为页面中需要导出为pdf的最外层标签的id名
    const imgHeight = detail.clientHeight;
    const imgWidth = detail.clientWidth;
    html2canvas(detail,{
        letterRendering:true,//每个字是否分别绘制，如果这样做，需要设置字间距
        allowTaint:true,//是否允许跨域图片污染画布
        taintTest:false,//是否在绘制前测试每个图像是否污染画布
        height:imgHeight,//canvas的高度
        width:imgWidth,
        backgroundColor:'#fff',//背景色
        scale:2,//绘制的缩放比例（支持小数），默认是浏览器的缩放比，值越大，画面质量越高，但是会增加文件大小
        onclone:(detail) => {//回调函数，绘制前将dom克隆，这样可以对绘制的图片进行修改，不会影响到源dom
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve()
                },500)
            }).then((canvas)=>{
                const pageData = canvas.toDataURL('image/jpeg',1) //生成一个包含图片展示的data URL
                //设置pdf的尺寸，pdf要使用pt，已知1pt/1px=0.75    pt = (px/scale)*0.75
                //2为上面的scale缩放了2倍，40为pdf四周的留白
                let pdfX = (imgWidth+40)/2*0.75
                let pdfY = (imgHeight+40)/2*0.75
                let imgX = (imgWidth/2*0.75)
                let imgY = (imgHeight/2*0.75)//内容图片不需要留白
                //pdfX，pdfY为pdf的大小，imgX，imgY为内容图片的大小
                let PDF = new jsPDF('','pt',[pdfX,pdfY])//3个参数，1.p为横排，l为竖排；2.页面单位；3.page大小
                //7.5按照上面算出来的结果设置的坐标，让img在pdf中水平垂直居中，四周留白均匀
                PDF.addImage(pageData,'JPEG',7.5,7.5,imgX,imgY)
                //获取当前时间戳用于命名
                let timestmp = new Date().getTime()
                PDF.save(`pdf${timestmp}.pdf`)

            }).catch(()=>{
                document.write("出错了")
            })
        }
    } )

}

有用请点赞，谢谢~