jianKongXiTong/node_modules/vue-print-nb/src/App.vue

<template>
  <div id="app">
    <div id="loading"></div>

    <h3 style="text-align: left;margin-left: 30px;">支持的打印方式:</h3>
    <el-divider><i class="el-icon-printer"></i></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-printer"
                   v-print>全局打印</el-button>
        <el-card class="box-card">
          对当前页面全部进行打印
        </el-card>
      </el-col>
    </el-row>
    <el-divider><i class="el-icon-printer"></i></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-magic-stick"
                   v-print="'#printMe'">局部打印(快速)</el-button>
                   <el-card class="box-card">
          可以打印页面某部分内容，直接传入对应的唯一标识ID
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-umbrella"
                   v-print="printObj">局部打印(对象配置)</el-button>
                   <el-card class="box-card">
          也许你会需要一些配置，可接收一个对象，根据文档API进行设置
        </el-card>
      </el-col>
    </el-row>
    <el-divider><i class="el-icon-printer"></i></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-bank-card"
                   v-print="printUrl">预览网址</el-button>
                   <el-card class="box-card">
          我需要打印指定的网址(要符合同源策略) 需要传入一个对象，详细看文档API进行设置
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-wallet"
                   v-print="printAsyncUrl">预览网址(异步)</el-button>
                   <el-card class="box-card">
          你打印的网址(URL)也是可以通过异步得到的
        </el-card>
        异步获取URL:<el-progress :text-inside="true" :stroke-width="20" :percentage="times"></el-progress>
      </el-col>
    </el-row>
    <div>
<el-divider><i class="el-icon-printer"></i></el-divider>
      <div class="asyncTips">

      </div>
      <div class="box"
           v-show="printLoading">
        <div class="loader-04"></div>
        正在处理...请稍等
      </div>
      <h3  style="text-align: left;margin-left: 30px;">下面是被打印的例子:</h3>

      <div id="printMe"
           style="background: #dac9c9">
        <div ref="qrcode"></div>
        <div ref="echartMain"
             :style="{width: '300px', height: '300px'}"></div>
        <input type="number" />
        <input type="time" />
        <input type="checkbox" />
        <input type="radio" />
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>

        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        <textarea name=""
                  id=""
                  cols="30"
                  rows="10"></textarea>
        <p>葫芦娃，葫芦娃</p>
        <p style="background: yellow">一根藤上七朵花</p>
        <p>小小树藤是我家 啦啦啦啦</p>
        <p>叮当当咚咚当当 浇不大</p>
        <p>叮当当咚咚当当 是我家</p>
        <p>啦啦啦啦</p>
        <p>...</p>
      </div>
      <p>叮当当咚咚当当 浇不大</p>
    </div>
  </div>
</template>
<style type="text/css">
p {
  color: blue;
}
</style>
<script>
import QRCode from "qrcodejs2";
import * as echarts from "echarts";
export default {
  name: "app",
  data () {
    return {
      printLoading: false,
      times: 0,
      printAsyncUrl: {
        preview: true,
        previewTitle: 'Test Title',
        previewPrintBtnLabel: 'Print',
        asyncUrl (reslove, vue) {
          const _set = setInterval(() => {
            vue.times += 20
          }, 1000)
          setTimeout(() => {
            reslove(process.env.NODE_ENV === 'production' ? 'https://power-kxlee.github.io/' : 'http://localhost:8080/')
            clearInterval(_set)
          }, 5000)
        },
        previewBeforeOpenCallback: this.previewBeforeOpenCallback ,
        previewOpenCallback:this.previewOpenCallback,
        beforeOpenCallback: this.beforeOpenCallback,
        openCallback: this.openCallback,
        closeCallback: this.closeCallback,
        clickMounted: this.clickMounted
      },
      printUrl: {
        url: process.env.NODE_ENV === 'production' ? 'https://power-kxlee.github.io/' : 'http://localhost:8080/',
        preview: true,
        previewTitle: 'Test Title',
        previewPrintBtnLabel: 'Print',
        previewBeforeOpenCallback: this.previewBeforeOpenCallback ,
        previewOpenCallback:this.previewOpenCallback,
        beforeOpenCallback: this.beforeOpenCallback,
        openCallback: this.openCallback,
        closeCallback: this.closeCallback,
        clickMounted: this.clickMounted
      },
      printObj: {
        id: "printMe",
        popTitle: "good print",
        extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        beforeOpenCallback: this.beforeOpenCallback,
        openCallback: this.openCallback,
        closeCallback: this.closeCallback,
        clickMounted: this.clickMounted

      },
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.echart();
      new QRCode(this.$refs.qrcode, {
        width: 100,
        height: 100,
        text: "https://www.baidu.com/",
      });
    });
  },
  methods: {
    clickMounted(vue) {
      vue.$notify({
        title: '消息',
        message: '点击按钮的回调事件',
      });
    },
    previewBeforeOpenCallback(vue) {
      vue.$notify({
        title: '消息',
        message: '正在加载预览窗口',
      });
    },
    previewOpenCallback(vue) {
      vue.times = 0
      vue.$notify({
            title: '消息',
            message: '已经加载完预览窗口',
            type: 'success'
          });
    },
    beforeOpenCallback(vue) {
      vue.printLoading = true
      vue.$notify({
        title: '消息',
        message: '正在准备打印控件',
      });
    },
    openCallback(vue) {
      vue.printLoading = false
      vue.$notify({
        title: '消息',
        message: '已经打开了 打印控件',
      });
    },
    closeCallback(vue) {
      vue.$notify({
        title: '消息',
        message: '关闭了打印工具',
      });
    },
    beforeOpen () {
      this.printLoading = true
      console.log('准备打开')
    },
    echart () {
      let myChart = echarts.init(this.$refs.echartMain);
      myChart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
#app::v-deep {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
      width: 800px;
    margin: 0 auto;
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .box-card {
      margin-top: 10px;
    }
  }
}
[class*="loader-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: inherit;
  vertical-align: middle;
  pointer-events: none;
}
.loader-04 {
  border: 1px solid currentcolor;
  border-radius: 50%;
  -webkit-animation: 1s loader-04 linear infinite;
  animation: 1s loader-04 linear infinite;
  position: relative;
}
.loader-04:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -0.2em;
  left: 50%;
  border: 0.2em solid currentcolor;
  border-radius: 50%;
}
@-webkit-keyframes loader-04 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loader-04 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>