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 实现打印功能相关推荐

vue实现打印功能的两种方法/web打印控件
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入安装好以后在main.js文件中引入 1 2 import Print fro ...
vue 批量打印功能打印自定义表格table
vue 批量打印功能打印自定义表格table 批量打印功能需求图 1.用excle先画出来 2.然后变为代码点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存然后在 ...
Vue实现打印功能最简单的方法
摘要: 今天做了一个ERP系统打印订单的功能,下面是效果图: 查了很多资料,一开始我直接用print.js这个插件,虽然能实现打印功能,但是当你需要打印的表格数据太多了,就无法实现分页打印,为了不浪费 ...
vue打印兼容xp32位系统/vue的打印功能
文章目录一.vue-print-nb 二.vuePlugs_printjs 一.vue-print-nb 这个插件很好用,也很简单,但是问题就是不兼容xp32位. 官方安装及使用文档 1.安装 np ...
Vue - 下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）
Vue 使用 vue-print-nb 插件实现打印功能一. vue-print-nb 的使用 1.1 安装 vue-print-nb 1.2. 引入vue-print-nb 二. 一个打印实例使 ...
vue实现打印功能，并多页打印
一.下载网上的源码只能打印一页,这个源码是修改过的可以直接保存使用全选复制另存为print.js // 打印类属性.方法定义 /* eslint-disable */ const Print = ...
vue实现打印功能（vue-print-nb）
一.安装vue-print-nb Vue2.0版本安装方法: npm install vue-print-nb --save Vue3.0版本安装方法: npm install vue3-print- ...
vue 实现打印功能，打印的时候加上水印图片
安装依赖 npm install print-js --save 页面引入 import print from 'print-js' 打印按钮 <el-button type="pri ...
vue 实现发票打印功能
参考资料 JS实现快递单打印功能[推荐] 原生,不用 vue实现打印功能的两种方法推荐 js 实现打印功能 jq插件原生js打印插件Print.js print插件 vue原生js打印插件 js解 ...

vue 实现打印功能

1.下载插件vue-print-nb

2. 封装打印方法

3.使用打印功能

vue 实现打印功能相关推荐

最新文章

热门文章