1. 程式人生 > >Echarts3用JS實現儲存圖片

Echarts3用JS實現儲存圖片

Echarts3儲存圖表為圖片需要自己實現。用HTML5中給a標籤增加了一個download屬性,只要有這個屬性,點選這個連結時瀏覽器就不在開啟連結指向的檔案,而是改為下載(目前只有chrome、firefox和opera支援)。

這個已經有大神實現,點選跳轉。這裡轉轉載下大神的程式碼吧。

但是,上面的實現方法,不支援IE系列,當然微軟肯定提供了下載方法,在網上找了方法,最後確定了先用這種實現方法,知乎原文

function saveFileForIE(canvas, fileName) {
    var blob = canvas.msToBlob();
    navigator.msSaveBlob(blob, fileName);
}

這種方法需要先獲取到Echarts的canvas,而Echarts的canvas在使用者設定的chartId的子節點中,獲取方法是
var canvas = document.getElementById(chartId).children[0].children[0];
所以,最終我這個方法是在這樣寫的。

if(isIE()){
    var allFileName = filename + ".png";
    var canvas = document.getElementById(chartId).children[0].children[0];
    var blob = canvas.msToBlob();
    navigator.msSaveBlob(blob,allFileName);
    return
; }

其實我覺得應該還有別的實現方法,這是微軟MSDN的文件。有興趣或者精力的大神可以研究下。