专栏首页前端之攻略vue-print-nb 打印插件的使用

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • vue 中使用threejs

    tianyawhl
  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • Vue.js简介

    Vue.js 是一个基于 MVVM 模型的 web 库。通过双向数据绑定连接View和Model层。实际的 DOM 操作被封装成 Directives 和 Fi...

    IMWeb前端团队
  • Vue.js简介

    Vue.js 是一个基于 MVVM 模型的 web 库。通过双向数据绑定连接View和Model层。实际的 DOM 操作被封装成 Directives 和 Fi...

    IMWeb前端团队
  • js写插件教程

    连小壮
  • 等了那么久,终于等到新游戏啦!大炮英雄Cocos Creator实现,关注获取代码!

    摆放一个背景图,在背景图上添加背景地面、开始按钮、4个角色选择按钮、游戏logo。

    张晓衡
  • 受控组件表单&不受控组件

    表单里面的数据 根据State确定 在 HTML 中,表单元素如 <input>,<textarea> 和 <select>表单元素通常保持自己的状态,并根据...

    河湾欢儿
  • vue开发类似淘宝商品评价页面(星级,上传多张图片)

    最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示:

    honey缘木鱼
  • 「Spring源码分析」Environment

    表示当前应用系统正在运行的环境,为 profiles 和 properties 这两个重要的方面提供模型,Environment接口定义了处理profiles的...

    花言不知梦

扫码关注云+社区

领取腾讯云代金券