Question

我正在使用谷歌图表，我希望用户只需点击一下按钮即可将图表下载为图像。

我有这个代码下载图表，但我的问题是没有扩展名，我无法修改文件名。它仅在我的下载列表中显示为“下载”。

function getImgData(chartContainer) {
        var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
        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);

        // Replacing the mime-type will force the browser to trigger a download
        // rather than displaying the image in the browser window.
        window.location = imgData.replace("image/png", "image/octet-stream");
      }

Answer 1

首先，大多数Visualization API图表现在都有getImageURI方法，可以为您完成所有转换为PNG格式：

window.location = myChart.getImageURI();

其次，文件名不是你可以在javascript中设置的。要下载具有特定文件名的图像，您必须将图像流发送到服务器，将其另存为png文件，然后将保存的文件作为下载文件发送回客户端。

使用自定义文件名和扩展名下载Google图表

1 个答案: