Question

我想通过使用JavaScript单击下载按钮来下载html元素。 html元素包含一些文本和一个高图。 HighChart来自angular js控制器。当我单击下载按钮时，它仅导出文档的文本元素，而不导出word文档中的highchart图。我的代码如下：

<div ng-controller="testController">
    <div id="exportContent">
        <h2> What is Lorem Ipsum?</h2>
        Lorem Ipsum is simply dummy text

        <div id="container3">Placeholder for chart</div>
        <br />
        Test
    </div>

    <button onclick="Export2Doc('exportContent');">Export as .doc</button>

</div>

<script type="text/javascript">

    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>

这是html视图的屏幕截图：Html View。但是，当我单击下载按钮时，它将下载此文档文件downloaded doc file。我该如何克服这个问题，以便文档文件同时包含text元素和highchart？

无法在Java脚本中使用HighChart导出HTML元素

0 个答案: