1.
vue2 インストール npm install vue-print-nb --save
vue3 インストール npm install vue3-print-nb --save
2.
//vue2導入方法 global main.js
「vue-print-nb」から印刷をインポートします
Vue.use(印刷)
-------------------------------------------------- ----------------------------------
//vue2導入方法オンデマンド
「vue-print-nb」から印刷をインポートします
directives: { print} //カスタムディレクティブに登録
-------------------------------------------------- ----------------------------------
//vue3導入方法 global main.js
「vue」から { createApp } をインポートします
「./App.vue」からアプリをインポート
「vue3-print-nb」から印刷をインポートします
const app = createApp(App)app.use(print)app.mount('#app')
-------------------------------------------------- ----------------------------------
//vue3導入方法オンデマンド
「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 = false
this.$alert('', '请选择筛选条件！', {
confirmButtonText: '确定',
});
} else {
getxxxx(item).then(res => {
//console.log(res);
this.erwmList= res
if (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;
}
}前回の記事、