<?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;
?>
<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>
字符串 要捕获features 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>
// SEE: https://www.npmjs.com/package/html-to-image
import { toJpeg } from "html-to-image";
// The dimensions of a single A4 page; what we're basing the PDF document on.
const A4_MARGIN_PX = 40;
const A4_CONTENT_WIDTH_PX = 640;
const A4_CONTENT_HEIGHT_PX = A4_CONTENT_WIDTH_PX * A4_PORTRAIT_RATIO;
const A4_TOTAL_WIDTH_PX = A4_CONTENT_WIDTH_PX + (A4_MARGIN_PX * 2);
const A4_TOTAL_HEIGHT_PX = A4_CONTENT_HEIGHT_PX + (A4_MARGIN_PX * 2);
// Will return a data URI string.
const htmlToPdf = async (element: HTMLElement): Promise<string> => {
const elementBounds = element.getBoundingClientRect();
const pdfBounds = [A4_TOTAL_WIDTH_PX, A4_TOTAL_HEIGHT_PX];
const pdf = new jsPDF("portrait", "px", pdfBounds);
// These settings are optional, but I've found they help with file size and retina display support.
const pdfAsImage = await toJpeg(element, {
quality: 0.95,
pixelRatio: 2,
});
const totalPages = Math.ceil(elementBounds.height / A4_CONTENT_HEIGHT_PX);
for(let pageNum = 0; pageNum < totalPages; pageNum++){
// Add a page as long as it's not the first page, as jsPDF does this automatically.
// This will focus the added page, as a side-effect.
if(pageNum > 0) pdf.addPage(pdfBounds);
pdf.addImage(
pdfAsImage,
"jpg",
// Reposition the image based on the page number.
A4_MARGIN_PX,
A4_MARGIN_PX - (pageNum * (A4_CONTENT_HEIGHT_PX + (A4_MARGIN_PX * 2))),
A4_CONTENT_WIDTH_PX,
elementBounds.height
);
}
return pdf.output("datauristring");
};
6条答案
按热度按时间olmpazwi1#
您可以使用jsPDF来执行此操作
HTML:
字符串
JavaScript:
型
mxg2im7a2#
<div class='html-content'>....</div>
中的内容可以下载为pdf格式,样式使用jspdf和html2canvas。您需要同时引用这两个js库,
字符串
然后调用下面的函数,
型
参考:pdf genration from html canvas and jspdf。
也许这会帮助某人。
6tqwzwtp3#
您的解决方案需要一些Ajax方法来将html传递给具有html to pdf工具的后端服务器,然后将生成的pdf输出返回给浏览器。
首先设置客户端代码,我们将jQuery代码设置为
字符串
然后从html2pdf生成脚本中截取数据(来自互联网的某个地方)。
convert_to_pdf.php
看起来像这样:型
sqserrrh4#
AFAIK没有原生的jquery函数可以完成此操作。最好的选择是在服务器上处理转换。如何执行此操作取决于您使用的语言(.net,php等)。您可以将div的内容传递给处理转换的函数,该函数将向用户返回PDF。
3phpmpom5#
是的,可以在JS中将div捕获为PDF。您可以检查https://grabz.it提供的解决方案。他们有漂亮而干净的JavaScript API,可以让您捕获单个HTML元素的内容,例如div或span。
所以,哟使用它,你将需要和应用程序+密钥和免费的SDK .它的用法如下:
假设你有一个HTML:
字符串
要捕获features id下的内容,您需要:
型
您需要将
http://www.example.com/my-page.html
替换为您的目标URL和#feature
。现在,当页面加载时,一个图像截图将在与脚本标签相同的位置创建,它将包含features div的所有内容,而没有其他内容。
还有其他配置和定制你可以做的div截图机制,请检查出来here
5cnsuln76#
我想我会补充我的两分钱,因为这里的一些答案已经超过10年了,并且有一些显著的性能瓶颈。
使用@Vishnu S的答案并进行一些小的修改,我们从每页
910.52 ms
减少到每页112.49 ms
。减少了超过87%!字符串