我有一个id为"content"的内容
,其中包含一些图表和表格。当用户点击下载按钮时,我想将该
作为pdf下载。是否可以使用JavaScript或jQuery来实现这一点?
我有一个id为"content"的内容
您可以使用jsPDF来完成此操作。
<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');
});
doc
变量。 - Mahendran Sakkarai在一个<div class='html-content'>....</div>
中的内容可以使用jspdf和html2canvas以样式下载为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画布和jspdf生成多页PDF.
也许这会帮助某人。
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;
?>
据我所知,没有原生的jQuery函数可以做到这一点。最好的选择是在服务器上处理转换。如何处理取决于您使用的语言(.net、php等)。您可以将div的内容传递给处理转换的函数,该函数将返回一个pdf文件给用户。
是的,可以使用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
替换成你的目标URL,并根据你的CSS选择器替换#feature
。
就这些。现在,当页面加载时,图像屏幕截图将在与脚本标签相同的位置创建,其中包含所有特征div的内容,而没有其他内容。
还有其他配置和自定义您可以对div-screenshot机制进行,请查看此处。