js实现pdf打印
使用jsPDF库生成PDF并打印
jsPDF是一个流行的JavaScript库，用于在客户端生成PDF文件。安装后，可以通过代码创建PDF内容并触发打印。
// 引入jsPDF库
import jsPDF from 'jspdf';
// 创建PDF实例
const doc = new jsPDF();
// 添加文本内容
doc.text('Hello, this is a PDF generated by jsPDF!', 10, 10);
// 保存为PDF文件
doc.save('example.pdf');
// 直接打印（需要浏览器支持）
doc.autoPrint();
window.open(doc.output('bloburl'), '_blank');使用window.print()打印网页内容
如果目标是打印网页的特定部分，可以通过CSS隐藏不需要的内容，并调用window.print()方法。
// 打印整个页面
window.print();
// 打印特定元素
function printElement(elementId) {
const printContent = document.getElementById(elementId).innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}使用PDF.js渲染并打印PDF
PDF.js是Mozilla开发的库，用于在浏览器中渲染PDF文件。结合打印功能，可以实现PDF的预览和打印。
// 引入PDF.js库
import * as pdfjsLib from 'pdfjs-dist';
// 加载PDF文件
pdfjsLib.getDocument('example.pdf').promise.then(function(pdf) {
return pdf.getPage(1);
}).then(function(page) {
const viewport = page.getViewport({ scale: 1.0 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染PDF页面到Canvas
page.render({
canvasContext: context,
viewport: viewport
}).promise.then(function() {
// 打印Canvas内容
const dataUrl = canvas.toDataURL('image/png');
const printWindow = window.open('', '_blank');
printWindow.document.write(`<img src="${dataUrl}" onload="window.print()">`);
});
});使用html2canvas捕获DOM并生成PDF
html2canvas可以将DOM元素转换为Canvas，再结合jsPDF生成PDF并打印。
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
function printDivAsPDF(elementId) {
const element = document.getElementById(elementId);
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.autoPrint();
window.open(pdf.output('bloburl'), '_blank');
});
}以上方法适用于不同场景，可以根据需求选择合适的方式实现PDF打印功能。
