使用javascript下载PDF格式的HTML格式的PDF
我有一个内容的ID与“内容”的ID。 在内容div中，我有一些图表和一些表格。 当用户点击下载button时，我想下载这个div。 有没有办法做到这一点使用JavaScript或jQuery？
你可以用jsPDF来做
DEMO
示例用法：
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'); });
DEMO
您的解决scheme需要一些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;
在jQuery中没有这样的机制，但你可以使用像http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/
也检查这个post是否有可能使用jQuery生成PDF？
AFAIK没有原生的jQuery的function，这样做。 最好的select是在服务器上处理转换。 你如何做到这一点取决于你正在使用什么语言（.NET，PHP等）。 您可以将div的内容传递给处理转换的函数，这会将pdf返回给用户。
是的，可以在JS中捕获div作为PDF。 您可以查看https://grabz.it提供的解决scheme。; 他们有很好的和干净的JavaScript API，这将允许您捕捉单个HTML元素（如div或跨度）的内容。
所以，哟使用它，你将需要和应用程序+键和免费的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>
要捕捉functionID下的内容，您需要：
//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.htmlreplace为您的目标url和每个CSSselect器的#feature 。
就这样。 现在，当页面加载时，图像截图现在将在脚本标签的相同位置创build，其中将包含functiondiv的所有内容，而不包含其他内容。
您可以对div-screenshot机制进行其他configuration和定制，请在这里查看
