1.下載插件vue-print-nb

Vue2.0 版本安裝

npm install vue-print-nb --save

Vue3.0 版本安裝

npm install vue3-print-nb --save

2. 封裝打印方法

<template><el-dialogclass="bill-pring":title="title":visible.sync="dialogVisible":before-close="closeDialog":close-on-click-modal="false":append-to-body="true"width="800px"><div id="printBill"><slot name="html"></slot></div><div slot="footer" class="footer"><el-button size="small" @click="closeDialog">取 消</el-button><el-button size="small" type="primary" v-print="printBill">打 印</el-button></div></el-dialog> </template> <script> export default {props: {// 顯示隱藏dialogVisible: {type: Boolean,required: false,},// 標題title: {type: String,default: "票據打印",},},data() {return {addressList: [],printBill: {id: "printBill",popTitle: this.title, // 打印配置頁上方標題extraHead: "", //最上方的頭部文字，附加在head標簽上的額外標簽,使用逗號分隔preview: "", // 是否啟動預覽模式，默認是false（開啟預覽模式，可以先預覽后打印）previewTitle: "", // 打印預覽的標題（開啟預覽模式后出現）,previewPrintBtnLabel: "", // 打印預覽的標題的下方按鈕文本，點擊可進入打印（開啟預覽模式后出現）zIndex: "", // 預覽的窗口的z-index，默認是 20002（此值要高一些，這涉及到預覽模式是否顯示在最上面）clickMounted() {},previewBeforeOpenCallback() {}, //預覽窗口打開之前的callback（開啟預覽模式調用）previewOpenCallback() {}, // 預覽窗口打開之后的callback（開啟預覽模式調用）beforeOpenCallback() {console.log("打印前");}, // 開啟打印前的回調事件openCallback() {}, // 調用打印之后的回調事件closeCallback() {}, //關閉打印的回調事件（無法確定點擊的是確認還是取消）},};},created() {},methods: {// 關閉彈窗closeDialog() {this.$emit("update:dialogVisible", false);},async getAddressList() {this.addressList = await this.$request("getAddressList");},},watch: {}, }; </script> <style lang="scss" scoped> ::v-deep .el-dialog__body {padding: 20px; } </style>

3.使用打印功能

1.main.js引入

import Print from "vue-print-nb"; Vue.use(Print);

2.使用頁面引入/注冊

<script>import billPrint from "../operation-query/bill-print.vue";export default {components: {billPrint,},data() {return {tableDataTreat: [{pduname:"美白",user:"小小"}],}}} </script>

3.打印? ?打印不識別第三方框架? 一定要用原生table

<!-- 打印框 --><billPrint :dialogVisible.sync="printDialog" title="收據"><template #html><div class="print-flex"><div class="printDialog"><h1>治療單</h1><div class="info"><p>姓名：</p><p>年齡：</p></div></div><table><tr style="line-height: 20px"><th>名稱</th><th>數量</th></tr><trv-for="(item, index) in tableDataTreat":key="index"><td style="text-align: center; border: 1px solid #333">{{ item.name }}</td><td style="text-align: center; border: 1px solid #333">{{ item.num}}</td></tr></table></div></template></billPrint>

總結

以上是生活随笔為你收集整理的vue 实现打印功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。