将资源解释为文档，但以MIME类型图像/八位字节流传输

使用以下代码保存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"); 
    }

来源

2016-08-24 NaaN

你节省什么类型的图表？为什么不使用['getImageURI（）']（https://developers.google.com/chart/interactive/docs/printing）？另外，你可以澄清，_getting下载为一个文件，而不是一个image_？你如何计划保存图表，如果不在文件中？ – WhiteHat

这是一个没有扩展名的文件。就像一个Windows exe文件。 – NaaN

你可以使用一个锚标记与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>

来源

2016-08-24 14:52:27 WhiteHat

将资源解释为文档，但以MIME类型图像/八位字节流传输

回答

相关问题