jQuery 使用javascript将HTML页面中的div下载为pdf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17293135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Download a div in a HTML page as pdf using javascript
提问by Midhun Mathew
I have a content div with the id as "content". In the content div I have some graphs and some tables. I want to download that div as a pdf when user click on download button. Is there a way to do that using javascript or jQuery?
我有一个 ID 为“内容”的内容 div。在内容 div 中，我有一些图表和一些表格。当用户单击下载按钮时，我想将该 div 下载为 pdf。有没有办法使用 javascript 或 jQuery 来做到这一点？
回答by ilyes kooli
You can do it using jsPDF
你可以使用jsPDF
HTML:
HTML：
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
JavaScript:
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');
});
回答by Vishnu S
Content inside a <div class='html-content'>....</div>can be downloaded as pdf with styles using jspdf& html2canvas.
<div class='html-content'>....</div>可以使用jspdf和html2canvas将a 中的内容下载为 pdf 样式。
You need to refer both js libraries,
你需要参考两个js库，
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
Then call below function,
然后调用下面的函数，
//Create PDf from HTML...
function CreatePDFfromHTML() {
var HTML_Width = $(".html-content").width();
var HTML_Height = $(".html-content").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width + (top_left_margin * 2);
var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
html2canvas($(".html-content")[0]).then(function (canvas) {
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
}
pdf.save("Your_PDF_Name.pdf");
$(".html-content").hide();
});
}
Ref: pdf genration from html canvas and jspdf.
参考：来自 html canvas 和 jspdf 的 pdf 生成。
May be this will help someone.
可能这会帮助某人。
回答by DevZer0
Your solution requires some ajax method to pass the html to a back-end server that has a html to pdf facility and then returning the pdf output generated back to the browser.
您的解决方案需要一些 ajax 方法将 html 传递到具有 html 到 pdf 工具的后端服务器，然后将生成的 pdf 输出返回到浏览器。
First setting up the client side code, we will setup the jquery code as
首先设置客户端代码，我们将设置jquery代码为
var options = {
"url": "/pdf/generate",
"data": "data=" + $("#content").html(),
"type": "post",
}
$.ajax(options)
Then intercept the data from the html2pdf generation script as follows
然后从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;
回答by reggaemahn
AFAIK there is no native jquery function that does this. Best option would be to process the conversion on the server. How you do this depends on what language you are using (.net, php etc.). You can pass the content of the div to the function that handles the conversion, which would return a pdf to the user.
AFAIK 没有执行此操作的本机 jquery 函数。最好的选择是在服务器上处理转换。您如何执行此操作取决于您使用的语言（.net、php 等）。您可以将 div 的内容传递给处理转换的函数，该函数将向用户返回 pdf。
回答by Johnny
Yes, it's possible to To capture div as PDFs in JS. You can can check the solution provided by https://grabz.it. They have nice and clean JavaScript API which will allow you to capture the content of a single HTML element such as a div or a span.
是的，可以在 JS 中将 div 捕获为 PDF。您可以查看https://grabz.it提供的解决方案。它们有漂亮而干净的 JavaScript API，可以让您捕获单个 HTML 元素（例如 div 或 span）的内容。
So, yo use it you will need and app+keyand the free SDK. The usage of it is as following:
所以，你使用它你将需要app+key和免费的SDK。它的用法如下：
Let's say you have a HTML:
假设您有一个 HTML：
<div id="features">
<h4>Acme Camera</h4>
<label>Price</label>9<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>
To capture what is under the features id you will need to:
要捕获功能 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>
You need to replace the http://www.example.com/my-page.htmlwith your target url and #featureper your CSS selector.
您需要将 替换为http://www.example.com/my-page.html您的目标 url 和#feature每个 CSS 选择器。
That's all. Now, when the page is loaded an image screenshot will now be created in the same location as the script tag, which will contain all of the contents of the features div and nothing else.
就这样。现在，当页面加载时，现在将在与脚本标记相同的位置创建一个图像截图，其中将包含功能 div 的所有内容，而没有其他内容。
The are other configuration and customization you can do to the div-screenshot mechanism, please check them out here
您可以对 div-screenshot 机制进行其他配置和自定义，请在此处查看
