我有以下html代码:
<!DOCTYPE html>
<html>
<body>
<p>don't print this to pdf</p>
<div id="pdf">
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
所有我想做的是打印到pdf，无论在div中找到一个id为“pdf”。这必须使用JavaScript来完成。"pdf"文件会自动下载，文件名为"foobar.pdf"
我一直在使用jspdf来做到这一点，但它唯一的功能是“文本”，只接受字符串值。我想提交HTML到jspdf，而不是文本。
当前回答
不满意html2canvas的渲染和缺乏现代CSS3/JS和打印特定的CSS支持pdfMake的过时版本的WebKit…
这是一个理论上的解决方案，它是无头的，可以忠实地渲染页面，支持分页符，页边距，不同的页面大小，并且可以自动化。你甚至可以把WebGl渲染成PDF。
Chrome有一个devtools协议…它有printtoPDF函数 摘录:https://gitlab.com/-/snippets/new 官方20k-SLOC规范:https://github.com/ChromeDevTools/devtools-protocol/blob/master/json/browser_protocol.json 你可以使用节点和https://github.com/GoogleChrome/chrome-launcher运行chrome无头…等待它渲染。 利润
在chrome_devtools协议上执行printToPDF命令:
printToPDF({
printBackground: false,
pageWidth: 8.5,
pageHeight: 11,
transferMode: "ReturnAsStream" // or ReturnAsBase64
})
其他回答
如果你需要下载一个特定页面的PDF文件，只需添加这样的按钮
<h4 onclick="window.print();"> Print </h4>
使用window.print()打印整个页面，而不仅仅是一个div
一种方法是使用window.print()函数。哪个不需要任何库
Pros
1.不需要外部库。
2.我们也可以只打印选定的身体部位。
3.没有css冲突和js问题。
4.html/js核心功能
简单地添加下面的代码
CSS
@media print {
body * {
visibility: hidden; // part to hide at the time of print
-webkit-print-color-adjust: exact !important; // not necessary use
if colors not visible
}
#printBtn {
visibility: hidden !important; // To hide
}
#page-wrapper * {
visibility: visible; // Print only required part
text-align: left;
-webkit-print-color-adjust: exact !important;
}
}
JS代码-调用btn点击下函数
$scope.printWindow = function () {
window.print()
}
注意:在每个css对象中使用!important
的例子,
.legend {
background: #9DD2E2 !important;
}
有人试过吗
(function () {
var
form = $('.form'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Bhavdip-html-to-pdf.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
}());
要将div捕获为PDF，您可以使用https://grabz.it解决方案。它有一个简单而灵活的JavaScript API，允许您捕获单个HTML元素(如div或span)的内容
为了实现它，你首先需要获得应用密钥和秘密，并下载(免费的)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>
请注意目标:#feature。#feature是你的CSS选择器，就像前面的例子一样。现在，当页面加载时，将在脚本标记的相同位置创建图像截图，其中将包含所有的功能div的内容，没有其他内容。
你还可以对div-截图机制进行其他配置和自定义，请在这里查看
2022答:
从HTML元素生成PDF并提示保存文件:
import { jsPDF } from "jsPDF"
function generatePDF() {
const doc = new jsPDF({ unit: 'pt' }) // create jsPDF object
const pdfElement = document.getElementById('pdf') // HTML element to be converted to PDF
doc.html(pdfElement, {
callback: (pdf) => {
pdf.save('MyPdfFile.pdf')
},
margin: 32, // optional: page margin
// optional: other HTMLOptions
})
}
<button onclick="generatePDF()">Save PDF</button>
...
不打印预览PDF文件:
doc.html(pdfElement, {
callback: (pdf) => {
const myPdfData = pdf.output('datauristring')
}
})
<embed type="application/pdf" src={myPdfData} />
.．. 更多的html: https://github.com/parallax/jsPDF/blob/master/types/index.d.ts
