excel预览

**后端还回的是文件流
前端调用接口需要加 responseType: ‘arraybuffer’,
**

<template>
  <div class="container">
    <el-dialog
        title="预览"
        :visible.sync="dialogVisible"
        @open="see"
        lock-scroll
        :close-on-click-modal="false"
        :before-close="handleClose"
        width="60%"
    >
      <div v-loading="loading"
           class="excel-view-container">
        <div
            id="excelView"
            v-html="excelView"
        ></div>
      </div>
      <span slot="footer">
    <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
import {pbocbdmsReportView, } from "../../utils/api";

export default {
  name: "ExcelRead",
  props: {
    id: {type: String, require: true},
    dialogVisible: {type: Boolean, require: true},
    isshow: {type: Function, require: true},
    sheetName: {type: String, require: true}
  },
  data() {
    return {
      workbook: "",
      loading: false,
      excelView: ''
    }
  },
  created() {
  },
  methods: {
    handleClose() {
      this.isshow(false)
      this.excelView = ''
    },
    sure() {
      this.isshow(false)
    },
    see() {
      this.flieRead()
    },
    readWorkbookFromRemoteFile(callback) {
      this.loading = true
      pbocbdmsReportView({id: this.id}).then(res => {
        const data = new Uint8Array(res)
        this.workbook = XLSX.read(data, {type: 'array'});
        if (callback) callback(this.workbook);
        this.loading = false
      })
    },
    readWorkbook(workbook) {
      let worksheet = null
      if (this.sheetName) {
        worksheet = workbook.Sheets[this.sheetName]
      } else {
        worksheet = workbook.Sheets[workbook.SheetNames[0]];// 这里我们只读取第一张sheet
      }
      this.excelView = XLSX.utils.sheet_to_html(worksheet);
      this.$nextTick(function () { // DOM加载完毕后执行，解决HTMLConnection有内容但是length为0问题。
        this.setStyle4ExcelHtml()
      })
    },
    flieRead() {
      this.loadRemoteFile()
    },
    loadRemoteFile() {
      this.readWorkbookFromRemoteFile(() => {
        this.readWorkbook(this.workbook);
      });
    },
    // 设置Excel转成HTML后的样式
    setStyle4ExcelHtml() {
      const excelViewDOM = document.getElementById('excelView')
      if (excelViewDOM) {
        const excelViewTDNodes = excelViewDOM.getElementsByTagName('td')// 获取的是HTMLConnection
        if (excelViewTDNodes) {
          const excelViewTDArr = Array.prototype.slice.call(excelViewTDNodes)
          for (const i in excelViewTDArr) {
            const id = excelViewTDArr[i].id// 默认生成的id格式为sjs-A1、sjs-A2......
            console.log(id)
            if (id) {
              const idNum = id.replace(/[^0-9]/ig, '')// 提取id中的数字，即行号
              if (idNum && (idNum === '1' || idNum === 1)) { // 第一行标题行
                excelViewTDArr[i].classList.add('class4Title')
              }
              // if (idNum && (idNum === '2' || idNum === 2)) { // 第二行表头行
              //   excelViewTDArr[i].classList.add('class4TableTh')
              // }
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>
/deep/ table {
  max-width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  text-align: left !important;

  border: 0px !important;
}

/deep/ table tr td {
  padding-left: 8px;
  border: 1px solid gray !important;
}

/**整体样式 */
/deep/ .excel-view-container {
  background-color: #FFFFFF;
}

/**标题样式 */
/deep/ .class4Title {
  font-size: 22px !important;
  font-weight: bold !important;
  padding: 10px !important;
  color: black !important;
  text-align: center !important;
  /*background-color: gainsboro !important;*/
}

/**表格表头样式 */
/deep/ .class4TableTh {
  /* font-size: 14px !important; */
  font-weight: bold !important;
  padding: 5px !important;
  color: black !important;
  text-align: center !important;
  background-color: gainsboro !important;
}
</style>