Export web page to pdf - asp.net

Question

I am having a web page in which there is a canvas js chart. When I generated a pdf, the only canvas js chart do not displayed in the pdf.
How can I solve this problem?

Answer 1

I previously had this issue, we ended up using: http://www.highcharts.com/ then exported to png -> http://www.highcharts.com/docs/export-module/export-module-overview.
After the svg-> png conversion we converted to PDF using standard libraries.

Answer 2

To export JS Chart into PDF, First you have to convert chart data into canvas image byte stream and then to PDF.
The following code will help you to convert JS Chart into PDF
In Aspx Page
<asp:HiddenField ID="hfImageData" runat="server" />
<div id="dvTable">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title"> Your chart data comes here <h2> SLA </h2>
</div>
<div class="x_content">
<canvas id="canvas000"></canvas>
</div>
</div>
</div>
</div>
</div>
<asp:Button ID="btnExport" runat="server" Text="Export to PDF" CssClass="btn btn-primary" onclick="btnExport_Click" OnClientClick="return ConvertToImage(this)" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<script type="text/javascript">
function ConvertToImage(btnExport) {
html2canvas($("#dvTable")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=hfImageData]").val(base64);
__doPostBack(btnExport.name, "");
});
return false;
}
</script>
In Aspx.cs Page
protected void btnExport_Click(object sender, EventArgs e)
{
string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
byte[] bytes = Convert.FromBase64String(base64);
string fileName = "Chart.pdf";
iTextSharp.text.Image image = iTextSharp.text.Image.GetInstance(bytes);
using (MemoryStream memoryStream = new MemoryStream())
{
var pgSize = new iTextSharp.text.Rectangle(1600, 1000);
Document document = new Document(pgSize, 88f, 88f, 10f, 10f);
PdfWriter writer = PdfWriter.GetInstance(document, memoryStream);
document.Open();
document.Add(image);
document.Close();
bytes = memoryStream.ToArray();
memoryStream.Close();
}
Response.Clear();
Response.Buffer = true;
Response.Charset = "";
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.ContentType = "application/pdf";
Response.AppendHeader("Content-Disposition", "attachment; filename=" + fileName);
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
}
whatever data present under div id "dvTable" will be converted to PDF when we click on Export

Answer 3

PhantomJS sounds like an option for you, take a look at the NReco wrapper for using it with .Net https://www.nrecosite.com/phantomjs_wrapper_net.aspx