I have the following html code:
<!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>
jsPDF可以使用插件。为了使其能够打印HTML，您需要包含某些插件并执行以下操作:
如果您想忽略某些元素，则必须使用ID标记它们，然后在jsPDF的特殊元素处理程序中忽略它们。因此，您的HTML应如下所示:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
因此，用类选择器（如“.ignorePDF”）替换“＃ignorePDF”对我无效。相反，您必须为要忽略的每个元素添加相同的处理程序，例如：因为匹配是针对节点树中的每个元素进行的，所以我的愿望是使其尽可能快速。在这种情况下，它意味着“只匹配元素ID”。元素ID仍然以jQuery样式“#id”进行处理，但这并不意味着支持所有jQuery选择器。
var elementHandler = {
'#ignoreElement': function (element, renderer) {
return true;
},
'#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
我们支持特殊元素处理程序。使用 jQuery 风格的 ID 选择器进行注册，可用于 ID 或节点名称。（例如 "#iAmID"、"div"、"span" 等）。目前不支持任何其他类型的选择器（类或复合选择器）。
需要补充的一件非常重要的事情是，您将失去所有的样式信息（CSS）。幸运的是，jsPDF 能够很好地格式化 h1、h2、h3 等标题，这对我的目的已经足够了。此外，它只会打印文本节点中的文本，这意味着它不会打印文本区域等内容的值。例如：
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
<div>，但可能有数百个 - 所以他必须标记所有不想要的 DOM 元素吗？ - Mawg says reinstate Monicadoc.fromHTML不再受支持。 - Shardul Birjedoc.fromHTML() has been deprecated and replaced with doc.html() - ajsaule这是一个简单的解决方案。对我有效。您可以使用JavaScript打印概念并将其保存为PDF文件。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#dvContainer").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="dvContainer">
This content needs to be printed.
</div>
<input type="button" value="Print Div Contents" id="btnPrint" />
</form>
</body>
</html>
.labelPdf {
font-weight: bold;
font-size: 20px;
}
.noPrintPdf {
display: none;
}}然后根据您的需求使用这些类。2）对于我而言，“.live（“click”，...）”无法工作，所以我改用“.on（“click”，...）”。 - Davidson Limahttp://...domain.../path.css等。它会创建单独的HTML文档，并且没有主要内容的上下文。这些年来一直为我服务：
export default function printDiv({divId, title}) {
let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');
mywindow.document.write(`<html><head><title>${title}</title>`);
mywindow.document.write('</head><body >');
mywindow.document.write(document.getElementById(divId).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://your-domain.com/path-to-invoice', {
waitUntil: 'networkidle2',
});
await page.pdf({ path: 'invoice-file-path.pdf', format: 'a4' });
await browser.close();
})();
了解更多信息请点击这里：https://pptr.dev/
<body>标签中的额外空格，它需要这个 :P - phrogg如果您需要下载特定页面的PDF文件，只需添加以下按钮：
<h4 onclick="window.print();"> Print </h4>
使用window.print()来打印整个页面而不仅仅是一个div。
document.querySelector("#myIframe").contentWindow.print() - ioCron如前所述，你应该使用jsPDF和html2canvas。我还在jsPDF的问题中找到了一个函数，可以自动将你的pdf拆分成多个页面（来源）。
function makePDF() {
var quotes = document.getElementById('container-fluid');
html2canvas(quotes, {
onrendered: function(canvas) {
//! MAKE YOUR PDF
var pdf = new jsPDF('p', 'pt', 'letter');
for (var i = 0; i <= quotes.clientHeight/980; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;
var sY = 980*i; // start 980 pixels down for every new page
var sWidth = 900;
var sHeight = 980;
var dX = 0;
var dY = 0;
var dWidth = 900;
var dHeight = 980;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', 900);
onePageCanvas.setAttribute('height', 980);
var ctx = onePageCanvas.getContext('2d');
// details on this usage of this function:
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);
// document.body.appendChild(canvas);
var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
var width = onePageCanvas.width;
var height = onePageCanvas.clientHeight;
//! If we're on anything other than the first page,
// add another page
if (i > 0) {
pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
}
//! now we declare that we're working on that page
pdf.setPage(i+1);
//! now we add content to that page!
pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));
}
//! after the for loop is finished running, we save the pdf.
pdf.save('test.pdf');
}
});
}
我使用 jspdf 和 html2canvas 进行 CSS 渲染，并导出特定 div 的内容。以下是我的代码：
$(document).ready(function () {
let btn=$('#c-oreder-preview');
btn.text('download');
btn.on('click',()=> {
$('#c-invoice').modal('show');
setTimeout(function () {
html2canvas(document.querySelector("#c-print")).then(canvas => {
//$("#previewBeforeDownload").html(canvas);
var imgData = canvas.toDataURL("image/jpeg",1);
var pdf = new jsPDF("p", "mm", "a4");
var pageWidth = pdf.internal.pageSize.getWidth();
var pageHeight = pdf.internal.pageSize.getHeight();
var imageWidth = canvas.width;
var imageHeight = canvas.height;
var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
//pdf = new jsPDF(this.state.orientation, undefined, format);
pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
pdf.save("invoice.pdf");
//$("#previewBeforeDownload").hide();
$('#c-invoice').modal('hide');
});
},500);
});
});
function printPDF() {
var printDoc = new jsPDF();
printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
printDoc.autoPrint();
printDoc.output("dataurlnewwindow"); // this opens a new popup, after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}
.fromHTML() has been deprecated and replaced with .html() - ajsaule一种方法是使用window.print()函数，它不需要任何库
优点
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代码 - 在按钮点击时调用下面的函数
$scope.printWindow = function () {
window.print()
}
注：在每个CSS对象中使用!important
示例 -
.legend {
background: #9DD2E2 !important;
}
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} />
以下是更多HTMLOptions的相关信息：
https://github.com/parallax/jsPDF/blob/master/types/index.d.ts
npm install pdfmake 并将 Gist 保存在 htmlToPdf.js 中后，我这样使用它：const pdfMakeX = require('pdfmake/build/pdfmake.js');
const pdfFontsX = require('pdfmake-unicode/dist/pdfmake-unicode.js');
pdfMakeX.vfs = pdfFontsX.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';
import htmlToPdf from './htmlToPdf.js';
var docDef = htmlToPdf(`<b>Sample</b>`);
pdfMake.createPdf({content:docDef}).download('sample.pdf');
备注：
pdfMake 的 getBuffer() 函数获取)，所有这些都是在浏览器中完成的。与我尝试过的其他解决方案相比，生成的 PDF 对于此类 HTML 来说效果更好。jsPDF.fromHTML() 得到的结果不满意，因为该解决方案会被 HTML 中的特殊字符所迷惑，导致生成的 PDF 完全混乱。jsPDF.from_html() 函数，不要与接受的答案中的函数混淆) 不适用于我，因为我希望生成的 PDF 中的文本可粘贴，而基于 Canvas 的解决方案会生成基于位图的 PDF。
fromHTML函数；请参考"http://mrrio.github.io/jsPDF/"上的“HTML渲染器”示例。 - mg1075