ヴューのV-チャートとダウンロードに基づいて画像をエクスポート

頼ります

NPMファイル・セーバーをインストール

 

ページ

< VE-チャートREF = "チャート" > </ VE-チャート> 

< EL-ボタンタイプ= "危険" @click = "exportChart" >导出图表</ EL-ボタン>

 

JS

 

exportChart（）{
       IF（typeof演算ブロブ！== '関数' ）{
         この。$アラート（ 'あなたのブラウザはサポートしていません！クローム/ Firefoxブラウザの最新バージョンを使用してください！' ）
         のリターン
      } 
      のconstキャンバス = この。$レフリー.Chart。el.getElementsByTagName $（ 'キャンバス'）[0 ]
       トライ{ 
        canvas.toBlob（（BLOB） => { 
          FileSaver.saveAs（
            BLOB、
            'chart.png' 
          ）
        }）
      } キャッチ（E）{ 
        console.error （E）
        本。アラート$（ 'エクスポートが失敗しました！' ）
      }
    }

 

推奨ブラウザ：

 

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5 ％AE％B9

 

ブラウザは互換性に使用されていない場合キャンバス-toBlob.js pollyfillなど