代码之家 › 专栏 › 技术社区 › Samuel Mwamburi

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

export-to-word google-visualization html javascript

Samuel Mwamburi · 技术社区 · 4 年前

我有一个HTML页面,其中包含一个谷歌图表仪表板,我正试图使用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;
                
            });
            
            });

但是,只显示图例和轴,而不显示条形图和/或列。(见以下示例)

我做错了什么?

0 回复 | 直到 4 年前

Samuel Mwamburi 4 年前

我通过使用 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文档时,图表将呈现为图像,如下所示:

WhiteHat 4 年前

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

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