TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Sabab Zulfiker
NA
85
25.4k
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
Reply
Answers (
1
)
Child div is not fitting properly with parent div element
show image properly even in mobile view too