将网页导出到pdf

Question

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

Answer 1

我以前有过这个问题，我们最后用的是：http://www.highcharts.com/然后输出到png - >http://www.highcharts.com/docs/export-module/export-module-overview。

经过svg-> png转换后，我们使用标准库转换为PDF格式。

Answer 2

要将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

Answer 3

PhantomJS听起来像是一个选项你可以看看NReco包装与.Net的使用https://www.nrecosite.com/phantomjs_wrapper_net.aspx