Post
Ask Question
Sabab Zulfiker

Sabab Zulfiker

  • NA
  • 85
  • 25.5k

How to Export HTML Elements with HighChart to Word File?

Jul 10 2018 12:47 AM
I am trying to export html element containing a high chart to a word file. This is the HTML Code:
 
<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>
 
When I click the button, it will call the Export2Doc() method in the javascript, and will export the texts and highcharts of the "exportContent" div. For this I have used the following javascript code :
 
<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>
 
But when I export the elements of the "exportContent" div, only the texts are exported . The highchart is not exported. Though before exporting the highchart into the word file I have convert the highchart into svg format, but still it is not working

Answers (1)