时间戳

首页 > 解决方案 > 谷歌图表下载并保存PNG文件

javascript - 谷歌图表下载并保存PNG文件

问题描述

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

我尝试了各种画布选项，但无法正常工作。

将 SVG 下载为 PNG 图像

将谷歌仪表图另存为 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>

标签： javascripthtmlsvgreact-google-charts

解决方案

您可以使用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>


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

推荐阅读