java中printnb方法_vue-print-nb 打印插件的使用

(一)首先安装插件

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 line
• this is the second line

this is the info

调整宽度

export default {

data() {

return {

widthData: "100%",

inputValue: "",

areaContent: "",

myChart1: null,

myChart2: null,

closeBtn: true,

tableData: [

{

date: "2016-05-02",

name: "王小虎",

address: "上海市普陀区金沙江路 1518 弄"

},

{

date: "2016-05-04",

name: "王小虎",

address: "上海市普陀区金沙江路 1517 弄"

},

{

date: "2016-05-01",

name: "王小虎",

address: "上海市普陀区金沙江路 1519 弄"

},

{

date: "2016-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;

}

}