(一)首先安装插件
npm install vue-print-nb --save
(二)在main.js 中引入并注册
import Print from 'vue-print-nb'
Vue.use(Print)
(三)使用方法
打印测试
打印
假如我们想实现，在打印的时候改变样式，或者隐藏一些不需要打印的元素，直接使用上面的方法就不能实现
需要进行如下修改
(1)把vue-print-nb的文件夹放到自己的文件夹中，在src 下新建utils文件 里面放入src 和index.js src里面是print.js 和printarea.js
index.js和print.js是自定义指令有关的，我们需要的只是printarea.js
main.js里面修改成如下
//import Print from 'vue-print-nb'
//import Print from '@/utils/vue-print-nb'
import Print from '@/utils/vue-print-nb/src/printarea.js'
Vue.prototype.Print = Print
下面完整的打印的例子，打印echart图表，隐藏打印的内容并分页
this is the first linethis is the second linethis is the info
调整宽度
export default {
data() {
return {
widthData: "100%",
inputValue: "",
areaContent: "",
myChart1: null,
myChart2: null,
closeBtn: true,
tableData: [
{
date: "-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
containerHeight: ""
};
},
methods: {
adjustWidth() {
alert("hi");
//this.$refs.info.style.display = "none"; 这种方法可以
document.getElementById("info").style.display="none"
this.widthData = "290mm";
this.$nextTick(() => {
//console.log(this.$refs.qtable)
//this.$refs.qtable.doLayout();
this.myChart1.resize();
this.myChart2.resize();
setTimeout(() => {
if (this.closeBtn) {
this.closeBtn = false;
var that = this;
new this.Print({
ids: "#printTest", // * 局部打印必传入id
endCallback() {
// 调用打印之后的回调事件
console.log(that);
that.closeBtn = true;
}
});
}
}, 500);
});
},
drawLine() {
this.chartData = [5, 20, 36, 10, 10, 20];
this.myChart1 = this.$echarts.init(
document.getElementById("chart1"),
"shine"
);
this.myChart1.setOption({
//color:["green"],
title: {
text: "在VUE中使用Echarts1111"
// textAlign: "left",
// left: "center"
},
grid: {
left: 100
},
tooltip: {},
xAxis: {
data: ["AA", "B", "C", "D", "E", "F"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
barMaxWidth: 30,
data: this.chartData
}
]
});
},
drawLine2() {
this.chartData = [15, 20, 36, 10, 10, 20];
this.myChart2 = this.$echarts.init(
document.getElementById("chart2"),
"shine"
);
this.myChart2.setOption({
//color:["green"],
title: {
text: "在VUE中使用Echarts1111"
// textAlign: "left",
// left: "center"
},
grid: {
left: 100
},
tooltip: {},
xAxis: {
data: ["AAaa", "B", "C", "D", "E", "F"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
barMaxWidth: 30,
data: this.chartData
}
]
});
},
handleSelect(indexPath) {
console.log(indexPath);
//this.$router.push(indexPath)
},
handleClick(e) {
console.log(e.index);
//this.activeIndex=e.index
this.info = "new hi";
},
footerClick() {
alert("hi");
}
},
mounted() {
this.drawLine();
this.drawLine2();
this.containerHeight = window.innerHeight - 80 + "px";
}
};
/* #printTest{width:290mm;} */
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
background: #f2f2f2 !important;
}
.el-footer {
background: gray;
line-height: 60px;
}
.ul-wrap {
font-weight: bold;
}
@media print {
.ul-wrap {
color: red;
}
}
