Vue 实现 print
第一步 安装组件
//安装print-js
npm install vue-print-nb --save
第二步 在 main.js 全局引入
// 引入下载的print
import print from 'vue-print-nb'
// 全局使用
Vue.use(print);
第三步 使用
<template>
<div>
<div class="table">
<p class="title">统计图表</p>
<el-table :data="tableData" border id="printContainer">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="happy" label="爱好"></el-table-column>
</el-table>
</div>
<el-button type="primary" v-show="showbutton" v-print="printObj" @click="printButton">打印</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: "王小虎",
happy: "王小卤虎皮凤爪",
status: 0
},
{
name: "王小虎",
happy: "王小卤虎皮凤爪",
status: 1
},
{
name: "王小虎",
happy: "王小卤虎皮凤爪",
status: 0
},
{
name: "王小虎",
happy: "王小卤虎皮凤爪",
status: 1
}
],
showbutton: true, //打印按钮显示
printObj: {
printable: "printContainer", // 标签元素id
type: "html",
header: "",
targetStyles: ["*"],
style: "@page {margin:0mm 10mm};", //控制页眉页尾间距
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}
};
},
mounted() {
console.log(this.$route.params.userId);
},
methods: {
printButton() {
this.showbutton = false;
}
}
};
</script>
<style scoped>
#printContainer {
width: 100%;
}
#printContainer .el-table {
align-content: center;
}
.table {
display: flex;
justify-content: center;
flex-direction: column;
}
.title {
text-align: center;
padding: 20px 0px;
}
@page {
size: auto A4 landscape;
margin: 3mm;
}
</style>