Question

我正在尝试将包含高图表的html元素导出到word文件。这是HTML代码：

    <div>
        <div id="exportContent">
            <h2> What is Lorem Ipsum?</h2>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 

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

            <br />
            Test
        </div>

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

当我单击按钮时，它将在javascript中调用Export2Doc（）方法，并将导出“ exportContent” div的文本和高图。为此，我使用了以下javascript代码：

<script type="text/javascript">


    $(function () {

        $('#container3').highcharts({

            title: {
                text: 'Client-Side Download Example'
            },

            chart: {
                type: 'area'
            },

            xAxis: {
                categories: ['Jan', 'Feb', 'Mar']
            },

            series: [{
                data: [29.9, 71.5, 106.4]
            }]

        });


    });

    function Export2Doc(element, filename = '') {

        var preHtml = "<html><head><title>Export HTML To Doc</title></head><body>";
        var postHtml = "</body></html>";

        var svg = $('#container3').highcharts().getSVG();

        var imageD1 = document.createElement('img');

        imageD1.setAttribute("align", "middle");
        imageD1.setAttribute("style", "text-align: center");
        var width = parseInt(svg.match(/width="([0-9]+)"/)[1]), height = parseInt(svg.match(/height="([0-9]+)"/)[1]);

        var canvas = document.createElement('canvas');
        widthTemp = 500;  //500
        heightTemp = (height / width) * widthTemp;

        canvas.setAttribute('width', widthTemp);
        canvas.setAttribute('height', heightTemp);
        canvas.getContext("2d").drawImage(canvas, 0, 0, widthTemp, heightTemp);


        var image = "";
        if (canvas.getContext && canvas.getContext('2d')) {

            canvg(canvas, svg, {
                ignoreDimensions: true,
                scaleWidth: widthTemp,
                scaleHeight: heightTemp
            });

            image = canvas.toDataURL("image/jpeg");
        }

        imageD1.src = image;

        var doc2 = document.createElement("div");
        doc2.appendChild(imageD1);
        var html = preHtml + document.getElementById(element).innerHTML + "<br>"+ doc2.innerHTML + postHtml;

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

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


        filename = filename ? filename + '.doc' : 'document.doc';


        var downloadLink = document.createElement("a");

        document.body.appendChild(downloadLink);

        if (navigator.msSaveOrOpenBlob) {
            navigator.msSaveOrOpenBlob(blob, filename);
        } else {

            downloadLink.href = url;
            downloadLink.download = filename;
            downloadLink.click();
        }

        document.body.removeChild(downloadLink);
    }

</script>

但是当我导出“ exportContent” div的元素时，仅导出文本。高图表未导出。尽管在将highchart导出到word文件之前，我已经将highchart转换为svg格式，但是仍然无法正常工作

使用JavaScript将Word中带有HighChart Js的HTML元素导出

0 个答案: