Vue 自定义打印模板设置 - 轻松实现个性化打印页面
<p>"Vue 自定义打印模板设置 - 轻松实现个性化打印页面"\n在 Vue 中，可以通过自定义打印模板来设置打印页面的样式和内容。以下是一种常用的方法：\n\n1. 创建一个打印模板组件，例如 `PrintTemplate.vue`。\n\n`vue\n<template>\n <div class="print-template">\n <!-- 打印内容 -->\n <slot></slot>\n </div>\n</template>\n\n<style scoped>\n.print-template {\n /* 打印页面样式 <em>/\n}\n</style>\n`\n\n2. 在需要打印的组件中，引入并使用打印模板组件。\n\n`vue\n<template>\n <div>\n <!-- 页面内容 -->\n <div class="page-content">\n <!-- 页面内容 -->\n </div>\n\n <!-- 打印按钮 -->\n <button @click="print">打印</button>\n\n <!-- 打印模板 -->\n <print-template ref="printTemplate">\n <!-- 打印内容 -->\n <div class="print-content">\n <!-- 打印内容 -->\n </div>\n </print-template>\n </div>\n</template>\n\n<script>\nimport PrintTemplate from "./PrintTemplate.vue"\n\nexport default {\n components: {\n PrintTemplate,\n },\n methods: {\n print() {\n // 获取打印模板组件实例\n const printTemplate = this.$refs.printTemplate;\n\n // 打印内容\n const printContent = printTemplate.$el.innerHTML;\n\n // 创建一个新的窗口\n const win = window.open("", "_blank");\n\n // 在新窗口中写入打印内容\n win.document.write(`\n <html>\n <head>\n <!-- 引入打印页面所需的样式文件 -->\n </head>\n <body>\n ${printContent}\n </body>\n </html>\n `\n );\n\n // 打印\n win.print();\n\n // 关闭新窗口\n win.close();\n },\n },\n};\n</script>\n`\n\n在上述代码中，我们创建了一个 `PrintTemplate` 组件作为打印页面的模板，其中的 `<slot></slot>` 标签用于插入打印内容。在需要打印的组件中，我们通过 `ref` 属性引用了 `PrintTemplate` 组件，并在打印按钮的点击事件中获取了打印内容，并将其写入新窗口中进行打印。\n\n请注意替换注释部分的代码，以适应你的实际需求，例如引入打印页面所需的样式文件等。\n\n同时，我们还可以使用 CSS 的 `@media print` 媒体查询来设置打印页面的样式。例如，可以在打印模板组件的样式中添加以下代码：\n\n`css\n@media print {\n /</em> 打印页面样式 */\n}\n`\n\n这样，当打印页面时，将应用 `@media print` 媒体查询中的样式。\n</p>
原文地址: https://www.cveoy.top/t/topic/pBFg 著作权归作者所有。请勿转载和采集!