Vue PC端项目,使用组件vue-print-nb,实现打印功能
实现效果
1. package.json 文件中,dependencies 中增加组件
"vue-print-nb": "^1.7.5"
2. main.js中全局注册,若不需要全局注册可省略
//打印组件
import Print from 'vue-print-nb'
Vue.use(Print)
3. 在需要使用的地方增加打印按钮
<el-button
size="mini"
class="bp-primary-plain"
type="primary"
plain
icon="el-icon-printer"
@click="printDeliver"
>打印
</el-button>
4. 打印组件
<template>
<el-dialog
title="标题"
:visible.sync="visible"
width="900px"
>
<div id="printArea">
<div style="width:100%;height:auto;">
<div class="titleBoxOne">表单名称</div>
<div class="headBox">
<table class="gridtable">
<tr>
<!-- colspan:行合并 rowspan:列合并 -->
<td colspan="2">列1:{{ reportData.column1 }}</td>
<td colspan="2"> 列2:{{ reportData.column2 }}</td>
<td rowspan="3">二维码</td>
</tr>
<tr>
<td colspan="2">打印时间:{{ reportData.printTime }}</td>
<td colspan="2">XXX:</td>
</tr>
<tr>
<td colspan="2">XXX:</td>
<td colspan="2">XXX:</td>
</tr>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
<th colspan="2">备注</th>
</tr>
<!-- 循环渲染列表数据 -->
<template v-for="data in reportData.list">
<tr>
<td>{{ data.1 }}</td>
<td>{{ data.2 }}</td>
<td>{{ data.3 }}</td>
<td colspan="2">{{ data.4 }}</td>
</tr>
</template>
</table>
</div>
<div class="footerBox">
<span>合计数:{{ reportData.1 }} </span>
<span>合计数:{{ reportData.1 }} </span>
<span>合计数:{{ reportData.1 }} </span>
</div>
</div>
</div>
<template slot="footer">
<el-button type="primary" v-print="print">打印</el-button>
<el-button @click="handleCancel()">关闭</el-button>
</template>
</el-dialog>
</template>
import QRCode from "qrcodejs2";
<script>
export default {
name: 'printModal',
data() {
return {
exportData: "",
reportData: '',
visible: false,
title: '表头',
print: {
id: 'printArea',
// popTitle: '配置页眉标题', // 打印配置页上方的标题
// extraHead: '打印', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
preview: false, // 是否启动预览模式,默认是false
previewTitle: '标题', // 打印预览的标题
previewPrintBtnLabel: '预览完毕,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
standard: '',
extarCss: ''
}
};
},
methods: {
show(data) {
this.visible = true;
this.loadData(data);
this.creatQrCode(data);
},
close() {
this.visible = false;
},
handleCancel() {
this.close();
},
loadData(data) {
//加载数据,注意换接口
this.$get('xxxxx?no=' + data).then(res => {
if (res.success) {
this.reportData = res.result;
}
});
}
}
};
</script>
<style scoped lang='scss'>
@media print {
table {
height: inherit;
}
}
.titleBoxOne {
font-size: 22px;
font-weight: 500;
text-align: center;
margin-bottom: 20px;
color: #000;
}
.footerBox {
margin-top: 10px;
width: 90%;
text-align: right;
color: #000;
}
table.gridtable {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
width: 95%;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
width: 15%;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
width: 10%;
}
</style>
5. 引打印组件,并注册
需要注意的地方,代码如下:
<template>
<div class="app-container">
<el-row :gutter="10" class="mb10">
<el-col :span="1.5">
<el-button
size="mini"
class="bp-primary-plain"
type="primary"
plain
icon="el-icon-printer"
@click="printDeliver(111)"
>打印
</el-button>
</el-col>
</el-row>
<!-- 打印 -->
<printModal ref="printModal"></printModal>
</div>
</template>
<script>
import printModal from "./printModal";
export default {
components: {
printModal
},
data() {
return {
},
methods: {
//打印
print(data) {
this.$refs.printModal.show(data);
},
},
};
</script>
<style lang="scss" scoped>
</style>
6. 大功告成,庆祝一下,对自己说声辛苦啦
.*. /~ .~\ /~ ~\ /~ .~\ /~ ~\
*** ' `\/' * ' `\/' *
V ( .*)( . *)
/\|/\ \ . *./ \ . *./
| `\ . . .*/' `\ . . .*/'
| `\ * .*. */' _ _ `\ * .*. */'
`\ * */' ( `\/'*) `\ * */'
`\/' \ */' `\/'
`\/'