將網頁導出到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