VUE前端HTML静默打印（不弹出打印对话框）PDF简单方案
<!DOCTYPE html>
<html>
<head>
<title>PDF静默打印示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.4.0/dist/jspdf.min.js"></script>
</head>
<body>
<div id="app">
<button @click="printPDF">静默打印PDF</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
printPDF() {
const element = document.body; // 要转换成PDF的HTML元素
const opts = {
scale: 2, // 按比例扩大PDF内容
// 其他html2canvas选项...
};
html2canvas(element, opts).then((canvas) => {
const pdf = new jsPDF();
const imgData = canvas.toDataURL('image/png');
const imgProps= pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('print.pdf'); // 保存PDF
});
}
}
});
</script>
</body>
</html>这个示例代码展示了如何在Vue应用中静默打印PDF。它使用了html2canvas库将HTML元素转换为canvas，然后使用jsPDF将canvas保存为PDF文件。用户点击按钮后，不会弹出打印对话框，而是直接下载PDF文件。
评论已关闭