vue-print-nb 打印插件的使用

（一）首先安装插件

npm install vue-print-nb --save

（二）在main.js 中引入并注册

import Print from 'vue-print-nb'
Vue.use(Print)

（三）使用方法

<div id="printTest">
   打印测试
</div>
<el-button v-print="'#printTest'">打印</el-button>

假如我们想实现，在打印的时候改变样式，或者隐藏一些不需要打印的元素，直接使用上面的方法就不能实现

需要进行如下修改

（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图表，隐藏打印的内容并分页

<template>
  <div>
    <div id="printTest" :style="{width: widthData,margin:'0 auto'}">
      <el-table :data="tableData" border>
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
      <ul class="ul-wrap">
        <li>this is the first line</li>
        <li>this is the second line</li>
      </ul>
      <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
      <el-input type="textarea" v-model="areaContent"></el-input>
      <div id="chart1" :style="{width:'100%',height:'300px'}"></div>
      <div ref="info" id="info">this is the info</div>
      <div style="page-break-after:always"></div>
      <img src="../assets/imgs/logo.png" style="width:85px;">
      <div id="chart2" :style="{height:'300px'}"></div>
    </div>

    <!-- <el-button v-print="'#printTest'">打印</el-button> -->
    <el-button @click="adjustWidth">调整宽度</el-button>
  </div>
</template>

<script>
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";
  }
};
</script>

<style scoped>
/* #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;
  }
}
</style>

 

来源：oschina

链接：https://my.oschina.net/u/2612473/blog/4310030