谷歌图表下载并保存PNG文件答案

【问题标题】：Google chart Download and save PNG file谷歌图表下载并保存PNG文件
【发布时间】：2020-09-18 14:49:35
【问题描述】：

这是我的谷歌饼图。现在，我可以右键单击并将图像另存为 PNG。但是，当页面加载时，我需要在指定的文件夹中自动下载图像。

我尝试了各种画布选项，但无济于事。

有人可以帮忙吗？

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </style>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        google.charts.load("current", {packages:['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Work',     11],
                ['Eat',      2],
                ['Commute',  2],
                ['Watch TV', 2],
                ['Sleep',    7]
            ]);
            var options = {
                    title: 'My Daily Activities',
                    is3D: true
            };
            var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));

          google.visualization.events.addListener(chart, 'ready', function () {
                piechart_3d.innerHTML = '<img src=' +  chart.getImageURI() + '>';
            });
            chart.draw(data, options);
        }
    </script>
</head>
<body>

    <div id="JSFiddle">
        <div id="piechart_3d" style="width: 1100px; height: 500px;"></div>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript html svg react-google-charts

【解决方案1】：

您可以使用download html-attribute 实现下载。
示例：

<a href="/image.png" download>

要在您的应用中实现这一点，请执行以下操作：
添加下载链接

<a id="download_link" href="/" download="">download</a>

并在图表加载后立即更改其 href 属性

google.visualization.events.addListener(chart, 'ready', function () {
            piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
            document.getElementById("download_link").setAttribute("href", chart.getImageURI())
});

如果您想在页面加载后立即自动下载：
使 a 标签不可见

<a style="display:none" id="download_link" href="/" download="">download</a>

并直接在其上触发点击事件

document.getElementById("download_link").click();

所以 google.visualization.events.addListener 函数应该如下所示：

google.visualization.events.addListener(chart, 'ready', function () {
            piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
            document.getElementById("download_link").setAttribute("href", chart.getImageURI())
            document.getElementById("download_link").click();

 });

整个代码应如下所示：（自动下载）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </style>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="piechart_3d"></div>
    <a style="display:none" id="download_link" href="/" download>download</a>

</body>

<script>
    google.charts.load("current", { packages: ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Work', 11],
            ['Eat', 2],
            ['Commute', 2],
            ['Watch TV', 2],
            ['Sleep', 7]
        ]);
        var options = {
            title: 'My Daily Activities',
            is3D: true
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));

        google.visualization.events.addListener(chart, 'ready', function () {
            piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
            document.getElementById("download_link").setAttribute("href", chart.getImageURI())
            document.getElementById("download_link").click();

        });
        chart.draw(data, options);
    }
</script>

</html>

无法选择要下载的文件夹（出于安全原因）

【讨论】：