Excel打印封装

准备部分

1、安装依赖 npm install vue-print-nb --save 

2、main.js全局安装 
import Print from 'vue-print-nb'
Vue.use(Print);

组件部分 /components/ExcelForm.vue

<template>
  <div>
    <div class="btn">
      <el-button size="mini" type="primary" v-print="'#preview-table'"
        >打 印</el-button
      >
      <el-button size="mini" type="primary" @click="handleClose"
        >返 回</el-button
      >
    </div>
    <div v-html="tableau" class="tableau" id="preview-table"></div>
  </div>
</template>

<script>
import xlsx from 'xlsx'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      tableau: null
    }
  },
  props: ['fileData'],
  computed: {},
  watch: {
    fileData(blob) {
      let data = new Uint8Array(blob) //
      let workbook = xlsx.read(data, { type: 'array' })
      let sheetNames = workbook.SheetNames // 工作表名称集合
      this.workbook = workbook
      this.cardActive = sheetNames[0]
      var worksheet = this.workbook.Sheets[sheetNames[0]]
      this.tableau = xlsx.utils.sheet_to_html(worksheet)
    }
  },
  methods: {
    handleClose() {
      window.location.href = 'about:blank'
      window.close()
    }
  },
  created() {},
  mounted() {},
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
.btn {
  margin-left: 80%;
  margin-top: 30px;
}
.tableau {
  height: 100%;
  overflow: auto;
  margin-top: 30px;

  /deep/ table {
    width: 80%;

    border-collapse: collapse;
    table-layout: fixed;
    margin: 0px auto;
    tr {
      td {
        background: #ffffff;
        text-align: center;
        padding: 15px 0;
        border: 1px solid #e8e8e8;
        vertical-align: middle;
      }
    }
  }
}
</style>

页面部分 /preview.vue

<template>
  <div>
    <ExcelForm :fileData="fileData"></ExcelForm>
  </div>
</template>
<script>
import ExcelForm from '@/components/ExcelForm'
// import apis from '@/apis'
import axios from 'axios'
export default {
  components: { ExcelForm },
  data() {
    return {
      fileData: null
    }
  },
  props: {},
  methods: {
    getExcelData() {
      let apis = this.$route.query.apis
      delete this.$route.query.apis
      axios({
        method: 'post',
        responseType: 'arraybuffer', // 预览arraybuffer，下载：blob
        url: apis,
        data: {
          ...this.$route.query
        }
      })
        .then(res => {
          this.fileData = res.data
        })
        .catch(error => {
          this.$message.error(error, '预览失败')
        })
    }
  },
  mounted() {
    this.getExcelData()
  }
}
</script>

<style lang="scss" scoped>
.searchBar {
  padding: 0 24px;
}
.content-page {
  margin-top: 20px;
  text-align: right;
}
/deep/ .el-dialog__body {
  padding: 10px 20px;
}
</style>

使用部分

methods: {
    //打印
    printing() {
      const { href } = this.$router.resolve({
        name: 'preview',
        query: {
          apis: apis._api_signAduit_export,
          unitId: this.unitId,
          matchId: this.matchId
        }
      })
      window.open(href, '_blank')
    }
}