vue 下载pdf

   <div @click='downloadToPDF'>下载PDF</div>
       <div ref='pafWrap'>
            <img src="detail.pictureUrl" alt="" @load='onImgLoaded'>
       </div>
       <script>
           onImgLoaded(e){
               if(e.target.width > e.target.height){
                   e.target.style.width = '100%'
               }else{
                   e.target.style.height = '100%'
               }
           },
           async downloadToPDF(){
             const dom = this.$refs.pdfWrap;
             if(!dom) return
             //dom使用html2canvas转图片
             const domWidth = dom.offsetWidth;
             const domHeight = dom.offsetHeight;
             const scale = 2;
             const canvas = document.createElement('canvas');
             //设定canvas 元素属性，宽度为DOM节点宽高*像素比
             canvas.width = domWidth * scale;
             canvas.height = domHeight * scale;
             //设定canvas 样式属性 宽度为iDOM节点宽高，可以理解为放大的画布绘制了放大的DOM后，再将其拉缩到DOM的宽高
            //  canvas.style.width = `${domWidth}px`;
            //  canvas.style.height = `${domHeight}px`;
            // 不仅仅放大canvas画布的宽度，还要放大canvas绘制DOM元素的上下文的比例，让其绘制时将DOM元素放大 到canvas放到的宽高；
            const ctx = canvas.getContext('2d');
            ctx.scale(scale,acale);
            const DOMCanvas = await html2canvas(dom,{
                canvas,
                backgroundColor:'rgba(0,0,0,0)',
                width:domWidth,//DOM原始宽度，最终生成的图片是原始的DOM的宽度和高度
                height:domHeight,//DOM 原始高度
                useCORS:true,//是否允许跨域图片绘制在canvas上
                allowTaint:false,//是否允许画布绘制受污染，比如绘制允许跨域的图片得到的就是一张受污染的画布canvas,
                scrollX:0,
                scrollY:0,
                logging:true//日志打印
            })
            const pageData = DOMCanvas.toDataURL('image/jpeg',1.0);
            //图片通过JsPDF生成pdf文件
            //第一个参数：l:横向， P:纵向
            //第二个参数：测量单位（‘pt','mm','cm','m','in' or 'px')
            // 第三个参数：可以是下面格式，默认为'a4'
            // a0 - a10
            // b0 - b10
            // c0 - c10
            // ...  
            // 默认为 a4，  如果想使用自己的格式，之需要将大小作为数字数组传递，列如[598.54,897.88];
            //原图的宽高
            const canvasWidth = domWidth * scale;//canvas绘制图形时放大了scale
            const canvasHeight = domHeight * scale;
            //将原图的宽高等比放到A4纸张大小的pdf的宽高
            //绘制到PFD中的宽高，采用A4的大小【592.28 * 841.89】
            const widthInPdf = 592.28;
            const heightInPdf = widthInPdf / canvasWidth * canvasHeight;

            // const pdf = new JsPDF('p','pt','a4');
            // if(heightInPdf < 841.89){//只需一页
            //     // 20为左右边距，0 为顶部偏移量
            //     pdf.addImage(pageData,'JPEG',20,0,widthInPdf,heightInPdf)

            // }else{//需要多页
            //     let restHeight = heightInPdf
            //      let position = 0;
            //      while(restHeight > 0){
            //          pdf.addImage(pageData,'jpeg',20,position,widthInPdf,heightInPdf)
            //          restHeight = restHeight - 841.89;
            //          position = position - 841.89;
            //          //避免添加空白页，当前有剩余高度给pdf加空白页
            //          if(restHeight > 0){
            //              pdf.addPage();

            //          }
            //      }

            // }
            // paf.save('test.pdf')
            // //由于分页会导致上页与下页之间的内容有间隔，不采用分页了

            const pdf = new JsPDF('p','pt',[widthInPdf,heightInPdf])
             // 20为左右边距，10 为顶部偏移量
             pdf.addImage(pageData,'JPEG',0,0,widthInPdf,heightInPdf)
             pdf.save('test.pdf')



           }

       </script>