vue实现打印指定页面内容

vue-print-nb

使用 vue-print-nb 这个插件能够实现打印

安装

// 安装 打印组件
npm install vue-print-nb --save

引用

vue2引入

javascript">import Print from 'vue-print-nb'
// 全局引用
Vue.use(Print);// 或者// 单组件引用
import print from 'vue-print-nb'
// 在自定义指令中注册
directives: {print   
}

vue3引入

javascript">// 全局引用
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')// 或者// 单组件引用
import print from 'vue3-print-nb'
// 在自定义指令中注册
directives: {print   
}

API

属性	类型	默认值	必要	可选值	描述
id	String	-	是	-	范围打印 ID（如果设置url则可以不设置id）
url	String	-	否	-	打印指定的 URL。（不允许同时设置ID
popTitle	String	-	否	-	默认使用浏览器标签名，为空时为undefined
standard	String	HTML5	否	html5，loose，strict	打印的文档类型
extraHead	String	-	否	-	在节点中添加 DOM 节点，并用,(Print local range only)分隔多个节点
extraCss	String	-	否	-	新的 CSS 样式表，并使用,（仅打印本地范围）分隔多个节点
openCallback	Function	-	否	-	调用打印工具成功回调函数
closeCallback	Function	-	否	-	关闭打印工具成功回调函数
beforeOpenCallback	Function	-	否	-	调用打印工具前的回调函数
preview	Boolean	false	否	true,false	预览工具
previewTitle String	-	否	-	‘打印预览’
previewPrintBtnLabel	String	打印	否	-	打印按钮名称
previewBeforeOpenCallback	Function	-	否	-	预览打开前回调函数
previewOpenCallback	Function	-	否	-	预览打开回调函数
clickMounted	Function	-	否	-	点击打印按钮回调函

代码展示

        <el-button type="primary" v-print="printOption">打印</el-button><div id="nbprint"><div class="flex align_end justify_center" style="margin-bottom: 10px;"><div class="center font_22" v-if="showStatus">{{ schoolName }}</div><div class="font_16" style="margin-left: 20px;">{{ displayName }}</div></div><table class="cs_table" id="table" v-if="showStatus"><tr><td class="grayStyle" rowspan="2">卡　　号</td><td class="grayStyle" rowspan="2">姓　　名</td><td class="grayStyle" colspan="2">消　　费</td><td class="grayStyle" colspan="2">充　　值</td><td class="grayStyle" colspan="2">减　　款</td><td class="grayStyle" rowspan="2">签　　字</td></tr><tr><td class="grayStyle">金　　额</td><td class="grayStyle">次　　数</td><td class="grayStyle">金　　额</td><td class="grayStyle">次　　数</td><td class="grayStyle">金　　额</td><td class="grayStyle">次　　数</td></tr><tr v-for="(item, index) in cashierList" :key="index"><td>{{ cashierList[index].cardNo }}</td><td>{{ cashierList[index].userName }}</td><td>{{ cashierList[index].consumeAmount }}</td><td>{{ cashierList[index].consumeTimes }}</td><td>{{ cashierList[index].rechargeAmount }}</td><td>{{ cashierList[index].rechargeTimes }}</td><td>{{ cashierList[index].deductionAmount }}</td><td>{{ cashierList[index].deductionTimes }}</td><td></td></tr><tr><td colspan="2">合　　计</td><td>{{ totalConsumeAmount }}</td><td>{{ totalConsumeTimes }}</td><td>{{ totalRechargeAmount }}</td><td>{{ totalRechargeTimes }}</td><td>{{ totalDeductionAmount }}</td><td>{{ totalDeductionTimes }}</td><td></td></tr></table></div>

javascript">export default {data() {return {printOption: {id: "nbprint", // 打印元素的id 不需要携带#号preview: false, // 开启打印预览previewTitle: "打印预览", // 打印预览标题popTitle: "部门消费情况表", // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言// 头部文字 默认空 在节点中添加 DOM 节点， 并用,(Print local range only)分隔多个节点// extraHead: "https://***/***.css, https://***/***.css",// 新的 CSS 样式表， 并使用,（仅打印本地范围）分隔多个节点// extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>',previewBeforeOpenCallback: () => {console.log("触发打印预览打开前回调");},previewOpenCallback: () => {console.log("触发打开打印预览回调");},beforeOpenCallback: () => {console.log("触发打印工具打开前回调");},openCallback: () => {console.log("触发打开打印工具回调");},closeCallback: () => {console.log("触发关闭打印工具回调");},clickMounted: () => {console.log("触发点击打印回调");},},}},methods: {//调用打印工具前的回调函数beforeOpenCallback(vue) {vue.printLoading = true;console.log("打开之前");},//调用打印工具成功回调函数openCallback(vue) {vue.printLoading = false;console.log("执行了打印");},//关闭打印机的回调closeCallback(vue) {console.log("关闭了打印工具");},}
}