将带有 Google 图表仪表板的 HTML 页面导出到 .docx 文件

Question

我有一个 HTML 页面，其中包含一个 Google 图表仪表板，我正尝试使用 javascript 库将其导出到 .docx 文件。我目前尝试使用 Export2Doc 库：

<script>
    function Export2Doc(element, filename = '') {
        var preHtml =
            "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
        var postHtml = "</body></html>";
        var html = preHtml + document.getElementById(element).innerHTML + postHtml;

        var blob = new Blob(['\ufeff', html], {
            type: 'application/msword'
        });

        // Specify link url
        var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);

        // Specify file name
        filename = filename ? filename + '.doc' : 'document.doc';

        // Create download link element
        var downloadLink = document.createElement("a");

        document.body.appendChild(downloadLink);

        if (navigator.msSaveOrOpenBlob) {
            navigator.msSaveOrOpenBlob(blob, filename);
        } else {
            // Create a link to the file
            downloadLink.href = url;

            // Setting the file name
            downloadLink.download = filename;

            //triggering the function
            downloadLink.click();
        }

        document.body.removeChild(downloadLink);
    }

</script>

<button class="button" onclick="Export2Doc('exportContent', 'Monthly Report');">Word</button>

其中 exportContent 是 <div> 和 Monthly Report 导出的文件名。

导出前我也将图表转换为图像。

var columnChartB = new google.visualization.ChartWrapper({
                'chartType': 'ColumnChart',
                'containerId': 'chart2',
                'options': {
                    'width': 400,
                    'height': 400,
                    'allowHtml': true,
                    'titleTextStyle': {
                        color: 'grey', // any HTML string color ('red', '#cc00cc')
                        fontName: 'Roboto', // i.e. 'Times New Roman'
                        fontSize: '14', // 12, 18 (don't specify px)
                        bold: false, // true or false
                    },
                    vAxis: {
                        gridlines: {
                            count: 0
                        },
                        textPosition: 'none',
                        baselineColor: 'transparent'
                    },
                    title: 'Number of Projects',
                    legend: 'none',
                    colors: ['#FFD700']
                },
                'view': {
                    'columns': [1, 2, {
                        calc: "stringify",
                        sourceColumn: 2,
                        type: "string",
                        role: "annotation"
                    }]
                }
            });

            // Chart Above as Image
            google.visualization.events.addListener(columnChartB, 'ready', function () {
            
            html2canvas($('#chart2').get(0)).then( function (canvas) {
                        
                var data = canvas.toDataURL('image/png', 0.9);
                var src = encodeURI(data);
                document.getElementById('chart2_image').src = src;
                
            });
            
            });

但是，只显示图例和轴，而不显示条 and/or 列。（见下面的例子）

我做错了什么？

Answer 1

我已经通过使用 DOM to image 库找到了这个问题的解决方案：

        <head><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/dom-to-image.min.js'></script></head>
        
        <body>
        <script>
        // Define a column charts to show financial data
        var columnChartA = new google.visualization.ChartWrapper({
            'chartType': 'ColumnChart',
            'containerId': 'chart1',
            'options': {
                'width': 600,
                'height': 400,
                'allowHtml': true
                },
                legend: {
                    position: 'top',
                    alignment: 'center'
                },
                title: 'Overall Financial Information',
                textStyle: {
                    fontName: 'Roboto',
                    color: '#00AEEF'
                },
                colors: ['#00AEEF', '#FF6347', '#32CD32']
            },
            'view': {
                'columns': [1,4,5,6]
            }
        });
        // Chart Above as Image
        google.visualization.events.addListener(columnChartA, 'ready', function () {
        var node = document.getElementById('chart1');
        domtoimage.toPng(node).then (function (dataUrl) {
        document.getElementById('chart1_image').src = dataUrl;
        })
        .catch(function (error) {
        console.error('oops, something went wrong!', error);
        });
        </script>
        </body>

当页面导出为 Word 文档时，图表将呈现为图像，如下所示：

Answer 2

您不需要单独的库来获取图表图像。
图表有自己的方法来获取图像 --> getImageURI()

google.visualization.events.addListener(columnChartA, 'ready', function () {
  document.getElementById('chart1_image').src = columnChartA.getChart().getImageURI();
});

将带有 Google 图表仪表板的 HTML 页面导出到 .docx 文件

Export HTML page with Google Charts dashboard to .docx file

html

javascript

charts

google-visualization

export-to-word