Search code examples
javascripthtmlchartsgoogle-visualizationexport-to-word

Export HTML page with Google Charts dashboard to .docx file

I have a HTML page which includes a Google Charts dashboard that I am trying to export to a .docx file using a javascript library. I have currently attempted to use the Export2Doc library as such:

<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>

Where exportContent is the <div> and Monthly Report the exported file name.

I have also converted my charts to images before the export.

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;
                
            });
            
            });

However, only the legends and axis appear and not the bars and/or columns. (See example below)

enter image description here

What am I doing wrong?

Solution

  • I have managed to find a solution to this issue by using the DOM to image library:

            <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>

    When the page is exported as a Word document the chart is then rendered as an image as shown below:

    enter image description here