html2canvas+Filesaver.js保存画像

>プロジェクトのニーズと問題点:
1、PC端末に画像をダウンロードする必要がある(画像要求:qrcodeで生成したQRコード+カスタムのスタイルと文字.2、html 2 canvasプラグインを利用してhtmlをcanvasに変換し、canvasを画像に変換してダウンロードする.)3、html 2 canvasはスクロール後にスクリーンショットに空白の問題があり、aラベルダウンロード画像ブラウザの互換性の問題がある.最大の困難は、html 2 canvasがスクロールバーを生成した後にスクリーンショットに空白があるという問題で、html 2 canvasの使用を放棄し、jsを使用して自分でcanvasを手動で描画してからaラベルでダウンロードすることです.
htmlコード:

 

      
      
      
      
      

        

          
        
        

          
{
    {item.name}}
          
         
          
yiweishiyiliaofeiwuzhuisu
        
      
    

jsコード

 downLoadCode(ind, row) {
     
                this.top = this.gettop()
                //              
                setTimeout(() => {
     
                    //          ，       ，         
                    const canvas = document.getElementById('canvas' + ind);
                    QRCode.toCanvas(canvas, row.id, {
     
                        width: 50,
                        height: 50,
                        margin: 0
                    }, function (error) {
     
                        if (error) throw error
                    })
                    /* qrcode vs qrcodejs2           ，
                    //qrcode：  canvas       
                    //qrcodejs2：          ，    canvas     ，  canvas     img  ，canvas  display:none    html2canvas     “ xx promise” ,
                                     html2canvas   opacity=0|| visibility：hidden ||display:none
                      const qrcode = new QRCode(canvas, {
                          width: 50,
                          height: 50,
                          text: row.id,
                          colorDark: "#000000",
                          colorLight: "#ffffff",
                          correctLevel: QRCode.CorrectLevel.H
                      });
                    */
                    document.documentElement.scrollTop = 0 //           html2canvas        
                    const canvasBox = document.getElementById('canvasBox' + ind);

                    //   : this.$ref['canvasBox'+i]   dom html2canvas    "Element is not attached to a Document"    ：   v-for      ，
                    html2canvas(canvasBox, {
     
                        logging: false,
                        useCORS: true,
                        background: null,
                    }).then(function (canvas) {
     
                        //        FileSaver    
                        // require  ，      ，     
                        const fileSaver = require("file-saver")
                        /* canvas.toBlob             . ie     toBlob  
                        *     ：  canvas-toBlob.js（https://github.com/eligrey/canvas-toBlob.js/blob/master/canvas-toBlob.js）
                        * */
                        canvas.toBlob(function (blob) {
     
                            fileSaver.saveAs(blob,  row.name + ".jpeg");
                        });

                        //  base64    ，  a    ，        
                        // document.documentElement.scrollTop = this.top                    ，html2canvas      
                        const url = canvas.toDataURL("image/jpeg"),// canvas   base64    （toDataURL：       ）
                            dowmDom = document.createElement("a");
                        const userAgent = navigator.userAgent; //      userAgent   
                        if (userAgent.indexOf("Trident") > -1) {
     
                            //  base64       blob   
                            function dataURLtoBlob(dataurl) {
     
                                var arr = dataurl.split(',');
                                //  base64               
                                var _arr = arr[1].substring(0,arr[1].length-2);
                                var mime = arr[0].match(/:(.*?);/)[1],
                                    bstr =atob(_arr),
                                    n = bstr.length,
                                    u8arr = new Uint8Array(n);
                                while (n--) {
     
                                    u8arr[n] = bstr.charCodeAt(n);
                                }
                                return new Blob([u8arr], {
     
                                    type: mime
                                });
                            }
                            //    
                            navigator.msSaveBlob(dataURLtoBlob(url),  row.name + ".jpeg");
                        }else{
     
                            //   a    
                            dowmDom.download = row.name;//         ，   '  '
                            dowmDom.href = url;
                            dowmDom.click();
                            dowmDom.remove(); //             
                        }
                    })

                    //          
                    document.documentElement.scrollTop = this.top
                }, 100)
            },

単一のダウンロードで完了し、テストされたieを除いてスクロールバーの処理に小さな問題が発生し、他のブラウザには一時的に問題がありません.