使用javascript下載HTML頁面中的div作爲pdf

我有一個id爲「內容」的內容div。在內容div中，我有一些圖表和一些表格。我想在用戶點擊下載按鈕時將該div下載爲pdf。有沒有辦法做到這一點使用JavaScript或jQuery？使用javascript下載HTML頁面中的div作爲pdf

來源

2013-06-25 Midhun Mathew

http://code.google。com/p/jspdf /是我所知道的最好的庫，它可以做到這一點。 – AlvinArulselvan

如何使用jsPDF下載特定格式的內容？從我在他們的網站中看到的例子中看不出來。 –

可以使用jsPDF

HTML做到這一點：

<div id="content"> 
    <h3>Hello, this is a H3 tag</h3> 

    <p>a pararaph</p> 
</div> 
<div id="editor"></div> 
<button id="cmd">generate PDF</button>

的JavaScript：

var doc = new jsPDF(); 
var specialElementHandlers = { 
    '#editor': function (element, renderer) { 
     return true; 
    } 
}; 

$('#cmd').click(function() { 
    doc.fromHTML($('#content').html(), 15, 15, { 
     'width': 170, 
      'elementHandlers': specialElementHandlers 
    }); 
    doc.save('sample-file.pdf'); 
});

來源

2013-06-25 09:56:44 skafandri

+12

我在這裏遇到問題。我在這裏添加的CSS沒有被應用在pdf文件中。我也有一些圖表..這些r不會在pdf中。我該怎麼做才能得到這些？ –

jsPDF沒有正確格式表，它只是將td/th解釋爲display：block; – Dave

它工作正常。 –

沒有這樣的jQuery的機制，但是你可以使用插件，像 http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/

還要檢查這個帖子 Is it possible to generate PDF using jQuery?

來源

2013-06-25 09:04:36 Baseleus

您的解決方案需要一些Ajax方法將HTML傳遞到後端服務器，它有一個HTML到PDF設施，然後將生成的PDF輸出返回給瀏覽器。

首先建立客戶端代碼，我們將設置jQuery代碼作爲

var options = { 
      "url": "/pdf/generate", 
      "data": "data=" + $("#content").html(), 
      "type": "post", 
     } 
    $.ajax(options)

然後截距從HTML2PDF生成腳本數據如下

$html = $_POST['data']; 
    $pdf = html2pdf($html); 

    header("Content-Type: application/pdf"); //check this is the proper header for pdf 
    header("Content-Disposition: attachment; filename='some.pdf';"); 
    echo $pdf;

來源

2013-06-25 09:07:08 DevZer0

你的意思是「有一個htmltopdf工具」？ –

是否可以引用相同的網址或我應該更改它？ –

您需要稍微不同的網址，以便區分這兩個內容 – DevZer0

AFAIK沒有原生的jquery函數可以做到這一點。最好的選擇是在服務器上處理轉換。你如何做到這一點取決於你使用的語言（.net，php等）。您可以將div的內容傳遞給處理轉換的函數，這會將pdf返回給用戶。

來源

2013-06-25 09:20:29

是的，它可能捕捉格在JS PDF文件。您可以查看https://grabz.it提供的解決方案。他們擁有乾淨利落的JavaScript API，可讓您捕捉單個HTML元素（如div或跨度）的內容。

所以，喲使用它，你將需要和app+key和免費SDK。它的用法如下：

比方說，你有一個HTML：

<div id="features"> 
    <h4>Acme Camera</h4> 
    <label>Price</label>$399<br /> 
    <label>Rating</label>4.5 out of 5 
</div> 
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget 
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at 
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

要捕捉什麼是功能ID下，你將需要：

//add the sdk 
<script type="text/javascript" src="grabzit.min.js"></script> 
<script type="text/javascript"> 
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html", 
{"target": "#features", "format": "pdf"}).Create(); 
</script>

您需要更換您的目標網址爲http://www.example.com/my-page.html，您的CSS選擇器爲#feature。

就是這樣。現在，當頁面加載時，圖像截圖現在將在腳本標籤的相同位置創建，該腳本標籤將包含features div的所有內容，而不包含其他內容。

的其他配置和定製，你可以做的DIV-截圖機制，請檢查出來here

來源

2017-07-01 18:53:39 Stas

我認爲你只能獲得1,000次免費捕獲和100次免費「抓取」與grabz.it。因此，除非您願意爲此付費，否則不是永久的解決方案。 – BrettC

使用javascript下載HTML頁面中的div作爲pdf

回答

相關問題