vue項目中引入 html2canvas ，控制台報錯 Cannot assign to read only property 'className' of object '#< SVGSVGElement >'

 

 

 本人遇到該錯誤，找了好久原因，終於找到了原因，

一開始以為是后台管理系統的模板問題有沖突導致的，於是尋找最初模板使用同樣方法引入，竟然沒有報錯，啊！這個時候就很神傷了。

仔細研究報錯內容<SVGSVGElement>，難道和我使用的SVG矢量圖有關系？於是嘗試把有svg標簽的地方全都注釋掉了，結果，好了！！！！

原因大致可以歸結為，html2Canvas 在導出圖片時是按照節點去遍歷的，極有可能不能識別svg（模板自定義的標簽）。於是在下載圖片的頁面內所存在的svg節點，均使用img設定為背景代替。

下邊使用html2canvas導出圖片的代碼如下：

npm安裝

npm install --save html2canvas

在需要的地方引入

import canvas2 from 'html2canvas'

html2canvas(document.querySelector('#imageDom'), { scale: 1, logging: false, useCORS: true }).then(canvas => {
        // 轉成圖片，生成圖片地址
        if (window.navigator.msSaveOrOpenBlob) { // ie瀏覽器下的兼容性
          const blob = canvas.msToBlob()
          window.navigator.msSaveBlob(blob, '×××.png')
        } else { // 非ie瀏覽器
          const link = document.createElement('a')
          link.href = canvas.toDataURL('image/png')
          link.setAttribute('download', '×××') link.style.display = 'none'// a標簽隱藏
          document.body.appendChild(link) link.click()}
        })

#imageDom 為需要下載圖片的容器節點，由於ie瀏覽器下有自身的msSaveBlob方法去下載，不能使用a的download去下載。