1.
vue2安装 npm install vue-print-nb --save
vue3安装 npm install vue3-print-nb --save
2.
//vue2 引入方式 全局 main.js
import Print from 'vue-print-nb'
Vue.use(Print)
------------------------------------------------------------------------------------
//vue2 引入方式 按需
import print from 'vue-print-nb'
directives: { print} //自定义指令中注册
------------------------------------------------------------------------------------
//vue3 引入方式 全局 main.js
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')
------------------------------------------------------------------------------------
//vue3 引入方式 按需
import print from 'vue3-print-nb'
directives: { print } //自定义指令中注册
//html<el-button @click="clickPrint(form)">打印</el-button><el-drawer title="图片打印" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="80%"><div style="position: absolute;right: 110px;top: 15px;padding-left: 30px;"><!-- <el-button @click="drawer = false">取消</el-button> --><el-button type="primary" v-print="print">打印</el-button></div><div id="printView"><div class="img-content-first" :class=" index >= 5?'img-content':'img-content-first'" v-for="(item,index) in erwmList" :key="index"><img :src=item.imgBase class="img" /><div class="text">{{ item.connectorCode }}</div></div></div></el-drawer>//script
// 单组件引用打印插件
import print from 'vue-print-nb'
import {getxxxx} from "../../api/xxxx/xxxx.js" // 二维码接口//data
// 抽屉 批量打印
data() {return {//表单筛选条件form:{status:'',name:'',//....},drawer: false,direction: 'rtl',erwmList:[], //二维码列表erweimaImg: '',// 打印插件print: {id: "printView", //打印的区域的id名popTitle: "管理平台", // 打印配置页上方标题extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔extraCss: "",},}
}//js// 批量打印 点击事件 clickPrint (item) {// console.log(item,'ss');if ((item.status=== "" || null || undefined) &&(item.name === ""||null||undefined)) {this.drawer = falsethis.$alert('', '请选择筛选条件！', {confirmButtonText: '确定',});} else {getxxxx(item).then(res => {//console.log(res);this.erwmList= resif (res) {this.drawer = true}})}},// 批量打印 抽屉关闭事件handleClose (done) {this.drawer = false// this.$confirm('确认关闭？')// .then(_ => {// done();// })// .catch(_ => {});},//css
<style scoped lang="less">
.......img-content-first{display: inline-block;border: 2px solid #000;margin: 0 0 0 30px;.text{margin: 0 auto;text-align: center;color: #000;font-size: 18px;margin-top: -24px;}}.img-content{display: inline-block;border: 2px solid #000;margin: 50px 0 0 30px;.text{margin: 0 auto;text-align: center;color: #000;font-size: 18px;margin-top: -24px;}}// @media print {// #print .img-content {// width: 150px;// height: 150px;// }// }
</style><!-- 添加独立style标签 -->
<style media="print" lang="less">@page {size: auto;}@media print {// html {// zoom: 70%; //设置打印页面的缩放，大小// margin: 0 auto;// }#printView .img-content-first{border: 2px solid #000;// width: 190px;height: 185px;margin: 10px 0 0 15px;}#printView .img-content{border: 2px solid #000;// width: 190px;height: 185px;margin: 30px 0 0 15px;}#printView .img{// width: 190px;height: 180px;}#printView .text{margin: 0 auto;text-align: center;color: #000;font-size: 18px;margin-top: -24px;}
}上一篇文章，
vue2踩坑之项目：yarn无法加载文件 C:UsersAdministratorAppDataRoaming pmyarn.ps1，因为在此系统上禁止运行脚本_意初的博客-CSDN博客yarn:无法加载文件 C:UsersAdministratorAppDataRoaming pmyarn.ps1，因为在此系统上禁止运行脚本。2.执行：set-ExecutionPolicy RemoteSigned 选择Y后进行回车。3.查看执行策略：get-ExecutionPolicy 查看是否为RemoteSigned。1.开始菜单中搜索PowerShell以管理员身份打开。4.关闭窗口报错解决。https://blog.csdn.net/weixin_43928112/article/details/132488190?spm=1001.2014.3001.5502
)
