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?
问问题
458904 次
5 回答
124
你可以使用jsPDF
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：
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-25T09:56:44.497 回答
40
<div class='html-content'>....</div>可以使用jspdf和html2canvas将a 中的内容下载为带有样式的 pdf 。
您需要引用两个 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>
然后调用下面的函数，
//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();
});
}
参考：来自 html canvas 和 jspdf 的 pdf 生成。
可能这会帮助某人。
于 2019-09-26T10:33:53.807 回答
4
您的解决方案需要一些 ajax 方法将 html 传递到具有 html 到 pdf 工具的后端服务器，然后将生成的 pdf 输出返回给浏览器。
首先设置客户端代码，我们将 jquery 代码设置为
var options = {
"url": "/pdf/generate/convert_to_pdf.php",
"data": "data=" + $("#content").html(),
"type": "post",
}
$.ajax(options)
然后从 html2pdf 生成脚本（来自互联网的某个地方）截取数据。
convert_to_pdf.php（在 JQUERY 代码中作为 url 给出）看起来像这样 -
<?php
$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-25T09:07:08.013 回答
2
AFAIK 没有执行此操作的本机 jquery 函数。最好的选择是在服务器上处理转换。您如何执行此操作取决于您使用的语言（.net、php 等）。您可以将 div 的内容传递给处理转换的函数，该函数将向用户返回一个 pdf。
于 2013-06-25T09:20:29.867 回答
0
是的，可以在 JS 中将 div 捕获为 PDF。您可以查看https://grabz.it提供的解决方案。他们有漂亮而干净的 JavaScript API，可以让您捕获单个 HTML 元素的内容，例如 div 或 span。
所以，你使用它，你将需要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您的目标网址和#feature您的 CSS 选择器。
就这样。现在，当页面加载时，现在将在与 script 标签相同的位置创建图像屏幕截图，其中将包含 features div 的所有内容，仅此而已。
您可以对 div-screenshot 机制进行其他配置和自定义，请在此处查看
于 2017-07-01T18:53:39.977 回答