Question

我有一个网页，其中有一个画布js图表。当我生成pdf时，唯一的画布js图表不会显示在pdf中。我怎么解决这个问题？

Answer 1

我以前遇到过此问题，我们最终使用：http://www.highcharts.com/然后导出到png - ＆gt; http://www.highcharts.com/docs/export-module/export-module-overview

svg-＆gt;之后png转换我们使用标准库转换为PDF。

Answer 2

要将JS Chart导出为PDF，首先必须将图表数据转换为画布图像字节流，然后再转换为PDF 以下代码将帮助您将JS Chart转换为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＆＃34; dvTable＆＃34;下的任何数据点击导出

后将转换为PDF

Answer 3

PhantomJS听起来像是一个选项，看看NReco包装器与.Net https://www.nrecosite.com/phantomjs_wrapper_net.aspx

一起使用它

将网页导出为pdf

3 个答案: