vue打印自定义模板

### Vue 中实现自定义模板的打印功能 要在 Vue 中实现自定义模板的打印功能，可以通过以下方式完成： #### 1. 使用 HTML 和 CSS 构建可打印的内容 通过构建一个专门用于打印的 HTML 结构，并利用 CSS 的 `@media print` 媒体查询来控制打印样式。 ```html <template> <div> <!-- 可视化区域 --> <button @click="printTemplate">打印</button> <!-- 隐藏的打印模板 --> <div id="print-area" style="display:none;"> <h1>这是我的自定义打印模板</h1> <p>{{ content }}</p> </div> </div> </template> <script> export default { data() { return { content: "这是一个示例内容，可以动态替换。", }; }, methods: { printTemplate() { const printContents = document.getElementById("print-area").innerHTML; const originalContents = document.body.innerHTML; // 替换 body 内容为打印内容 document.body.innerHTML = printContents; // 调用浏览器打印功能 window.print(); // 还原原始内容 document.body.innerHTML = originalContents; }, }, }; </script> <style> /* 控制打印样式的 CSS */ @media print { h1 { color: blue; } p { font-size: 14px; } } </style> ``` 上述代码展示了如何创建一个隐藏的打印区域，并在触发打印按钮时显示该区域的内容[^1]。同时，CSS 的媒体查询允许开发者针对打印场景调整样式。 --- #### 2. 利用第三方库增强打印功能 如果需要更复杂的打印功能（如支持表格、图片等复杂布局），可以引入第三方库，例如 `print-js` 或者 `vue-html-to-paper`。 ##### 示例：使用 `vue-html-to-paper` 首先安装依赖： ```bash npm install vue-html-to-paper ``` 然后在项目中配置并使用它： ```javascript import VueHtmlToPaper from 'vue-html-to-paper'; const options = { name: '_blank', specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'], styles: ['/css/example.css'], // 添加额外的样式表 }; // 注册插件 Vue.use(VueHtmlToPaper, options); new Vue({ el: '#app', }); ``` 接着，在组件中调用打印功能： ```html <template> <div> <button v-print="'#print-area'">打印</button> <div id="print-area"> <h1>这里是打印内容</h1> <img src="/path/to/image.jpg" alt="Example Image" /> </div> </div> </template> ``` 此方法简化了打印逻辑，并提供了更多灵活性[^2]。 --- #### 3. 动态生成 PDF 并打印 对于更高精度的需求，可以选择将模板导出为 PDF 后再打印。这通常涉及使用 `jsPDF` 库或其他类似的工具。 以下是基于 `jsPDF` 的简单示例： ```javascript import jsPDF from 'jspdf'; import html2canvas from 'html2canvas'; methods: { generatePdf() { const element = this.$refs['print-area']; html2canvas(element).then((canvas) => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF(); pdf.addImage(imgData, 'PNG', 0, 0); pdf.save('custom-template.pdf'); // 下载 PDF 文件 }); }, }, ``` 在此基础上，用户可以直接下载 PDF 文件或将文件发送至打印机[^3]。 --- ### 总结 以上介绍了三种不同的方案来实现在 Vue 中的自定义模板打印功能。具体选择取决于实际需求和技术栈的支持情况。