我有一个网页,其中有一个画布js图表。当我生成pdf时,唯一的canvas js图表不会显示在pdf中。 我该如何解决这个问题?将网页导出到pdf
回答
我以前有过这个问题,我们最后用的是:http://www.highcharts.com/然后输出到png - >http://www.highcharts.com/docs/export-module/export-module-overview。
经过svg-> png转换后,我们使用标准库转换为PDF格式。
浏览网站。什么会写在C#出口到PDF? – Vicky
好吧,你必须做图png/gif之前,你转换为PDF格式。由于您已经完成了PDF转换,因此请使用与原先相同的机制,只需确保在转换图像后转换为PDF。 –
要将JS图表导出为PDF,首先必须将图表数据转换为画布图像字节流,然后转换为PDF。
下面的代码将帮助您JS图表转换成PDF
在ASPX页面
<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>
在Aspx.cs页
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();
}
任何数据目前在div ID为“dvTable “当我们点击导出时将转换为PDF
iTextSharp dll是必需的 –
PhantomJS听起来像是一个选项你可以看看NReco包装与.Net的使用https://www.nrecosite.com/phantomjs_wrapper_net.aspx
- 1. 将网页导出为PDF
- 2. 将网页导出为PDF
- 3. 使用jsPDf将网页导出为PDF
- 4. 将网页导出为pdf文件
- 5. 将当前网页导出为pdf
- 6. 将ASP网页导出为PDF
- 7. 将HTML页导出为PDF
- 8. 将网站导出到XML页面
- 9. PDF到网页
- 10. 将PDF页面内容导出到单个页面
- 11. JQGrid:将网格导出为PDF
- 12. 用于将ASP.Net页导出为pdf/xls
- 13. 将网页内容导出为pdf和excel格式
- 14. 使用htm将aspx网页导出为pdf
- 15. 如何使用Javascript或PHP将网页表单导出为PDF
- 16. 我可以将图表从网页导出为PDF格式吗?
- 17. 将动态网页导出为pdf或excel?
- 18. 将aspx网页导出为pdf并下载
- 19. 将网页中选定的div集导出为PDF或Word
- 20. 导出一个PHP页面到PDF
- 21. 导出多个Highcharts到多页PDF
- 22. ASP.NET网页到PDF
- 23. 导出PDF Telerik电网MVC
- 24. ASP.Net页面导出为pdf
- 25. 导出为PDF - 多页
- 26. ASP.Net页面导出为pdf
- 27. ExtJS我们如何将导出的网格数据导出到Excel/PDF
- 28. 将网页上的PDF加载到ipad
- 29. 将ASHX的PDF返回到网页
- 30. 将活动PDF嵌入到网页中?
你是如何创建js图表的?它是svg吗? –
在jquery函数中。 – Vicky
$()。canvasjschart(); – Vicky