Fatal编程技术网
  • javascript/
  • 使用JavaScript在word文件中导出带有HighChart Js的Html元素

使用JavaScript在word文件中导出带有HighChart Js的Html元素

javascript highcharts

使用JavaScript在word文件中导出带有HighChart Js的Html元素,javascript,highcharts,Javascript,Highcharts,我正在尝试将包含高位图表的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.

我正在尝试将包含高位图表的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>


什么是Lorem Ipsum？
Lorem Ipsum只是印刷和排版行业的虚拟文本。
图表占位符


试验
导出为.doc
当我单击按钮时，它将调用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>


$（函数（）{
$（“#container3”）。高图({
标题：{
文本：“客户端下载示例”
},
图表：{
类型：“区域”
},
xAxis：{
类别：[一月、二月、三月]
},
系列：[{
数据：[29.9,71.5,106.4]
}]
});
});
函数Export2Doc（元素，文件名=“”）{
var preHtml=“将HTML导出到文档”；
var postHtml=“”；
var svg=$（'#container3'）.highcharts（）.getSVG（）；
var imageD1=document.createElement（'img'）；
imageD1.setAttribute（“对齐”、“中间”）；
设置属性（“样式”，“文本对齐：居中”）；
var width=parseInt（svg.match（/width=“[0-9]+）”/）[1]），height=parseInt（svg.match（/height=“[0-9]+）”/）[1]）；
var canvas=document.createElement（'canvas'）；
宽度温度=500；//500
高度温度=（高度/宽度）*宽度温度；
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（画布、svg、{
忽略维度：对，
缩放宽度：宽度温度，
刻度高度：高度温度
});
image=canvas.toDataURL（“image/jpeg”）；
}
imageD1.src=图像；
var doc2=document.createElement（“div”）；
doc2.追加子项（图像D1）；
var html=preHtml+document.getElementById（element.innerHTML+“
”+doc2.innerHTML+postHtml；
var blob=new blob（['\ufeff'，html]{
键入：“应用程序/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（下载链接）；
if（navigator.msSaveOrOpenBlob）{
msSaveOrOpenBlob（blob，文件名）；
}否则{
downloadLink.href=url；
downloadLink.download=文件名；
downloadLink.click（）；
}
document.body.removeChild（下载链接）；
}
但是当我导出“exportContent”div的元素时，只导出文本。不会导出highchart。虽然在将highchart导出到word文件之前，我已经将highchart转换为svg格式，但它仍然不起作用

您可以用代码发布一个示例JSFIDLE吗？您不能只导出图像并将其粘贴到word文件中？