2016-08-24 63 views
1

使用以下代碼保存Google圖表。但它越來越下載的文件,而不是圖像,它被扔以下將資源解釋爲文檔,但以MIME類型圖像/八位字節流傳輸

"Resource interpreted as Document but transferred with MIME type image/octet-stream: "data:image/octet-stream;base64,..." 

,代碼:

function getImgData(chartContainer) { 
    var chartArea = chartContainer.getElementsByTagName('div')[1]; 
    var svg = chartArea.innerHTML; 
    var doc = chartContainer.ownerDocument; 
    var canvas = doc.createElement('canvas'); 
    canvas.setAttribute('width', chartArea.offsetWidth); 
    canvas.setAttribute('height', chartArea.offsetHeight); 


    canvas.setAttribute(
     'style', 
     'position: absolute; ' + 
     'top: ' + (-chartArea.offsetHeight * 2) + 'px;' + 
     'left: ' + (-chartArea.offsetWidth * 2) + 'px;'); 
    doc.body.appendChild(canvas); 
    canvg(canvas, svg); 
    var imgData = canvas.toDataURL("image/png"); 
    canvas.parentNode.removeChild(canvas); 
    return imgData; 
    } 

    function saveAsImg(chartContainer) { 
    var imgData = getImgData(chartContainer); 
    window.location = imgData.replace("image/png", "image/octet-stream"); 
    } 
+0

你節省什麼類型的圖表?爲什麼不使用['getImageURI()'](https://developers.google.com/chart/interactive/docs/printing)?另外,你可以澄清,_getting下載爲一個文件,而不是一個image_?你如何計劃保存圖表,如果不在文件中? – WhiteHat

+0

這是一個沒有擴展名的文件。就像一個Windows exe文件。 – NaaN

回答

1

你可以使用一個錨標記與download屬性指定的文件名

大多數圖表有getImageURI方法

也看不出需要replace("image/png", "image/octet-stream")

見下工作片斷......

google.charts.load('current', { 
 
    callback: function() { 
 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     // set anchor tag 
 
     var saveLink = document.getElementById('saveLink'); 
 
     saveLink.href = chart.getImageURI(); 
 

 
     // cause download to occur 
 
     saveLink.click(); 
 
    }); 
 

 
    chart.draw(google.visualization.arrayToDataTable([ 
 
     ['Task', 'Hours'], 
 
     ['A', 19.2], 
 
     ['B', 30.8], 
 
     ['C', 50.0] 
 
    ]), { 
 
     height: 200, 
 
     chartArea: { 
 
     top: 24 
 
     }, 
 
     legend: 'none', 
 
     pieHole: 0.4, 
 
     theme: 'maximized', 
 
     width: 200 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div> 
 
<a id="saveLink" download="chart.png">Save Chart</a>

相關問題