Reputation: 6577
Is there any way to Convert HTML table to Image file? I have one HTML table which contains controls like Labels, GridView, and CheckBoxes. How can we convert this table into Image file for creating a PDF file?
Upvotes: 2
Views: 2252
Reputation: 131
Datatables is a powerful jquery plugin for working with tables. One of the option that datatables offered is make a pdf or excel from your table. You can see find many examples in it's website.
Upvotes: 0
Reputation: 1
Converting HTML Table into Image File
$("#selfAssessmentPowerPointDownload").on('mouseover', function () {
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function (canvas) {
getCanvas = canvas;
var imgageData = getCanvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#selfAssessmentPowerPointDownload").attr("download", "gridData.png").attr("href", newData);
}
});
});
<button id="selfAssessmentPowerPointDownload">Download</button>
<table id="html-content-holder"></table>
Upvotes: 0
Reputation: 26766
If this is a one-off, load it up in your browser and take a screenshot (Alt-PrtScr on windows for just the current application)
If you need to do this repeatedly/in an automated way, you can either automate a browser control or you can use a headless browser
You should also look into WebKit2Png which will render the page in the same manner as Chrome/other webkit browsers and then save that as a png. It can optionally simulate javascript/etc too
Similarly, there's a wkhtmltopdf which works on all platforms
Upvotes: 2
Reputation: 67355
This is not a trivial task. Ultimately, you need an HTML renderer to convert the HTML to pixels.
Fortunately, you don't need to write your own. You can use the WebBrowser control.
You can see some code I wrote to extract a thumbnail image from a given URL in the article Creating Website Thumbnails in ASP.NET.
Upvotes: 2