vue 在线预览 docx，excel

1.docx

<a-modal title="预览" v-model="modal2.visible" width="42%">
  <div ref="word"></div>
  <template v-slot:footer>
    <a-button key="back" type="primary" @click="modal2.visible = false">取消</a-button>
    <a-button v-if="modal2.uid === 1" key="submit" type="primary" @click="exportData('exportEntryRegister', '入场信息登记表')">下载</a-button>
    <a-button v-if="modal2.uid === 2" key="submit" type="primary" @click="exportData('exportExitUndertaking', '离场承诺书')">下载</a-button>
  </template>
</a-modal>

const docx = require('docx-preview')
window.JSZip = require('jszip')

this.modal2.visible = true
setTimeout(() => {
  docx.renderAsync(data, this.$refs.word)
}, 0)

2.excel

<a-modal title="预览" v-model="modal2.visible" width="80%">
  <div class="excel-view-container">
    <div id="excelView" v-html="excelView"></div>
  </div>
  <template v-slot:footer>
    <a-button key="back" type="primary" @click="modal2.visible = false">取消</a-button>
    <a-button key="submit" type="primary" @click="exportList">下载</a-button>
  </template>
</a-modal>

import * as XLSX from 'xlsx'

const workbook = XLSX.read(new Uint8Array(data), {
  type: 'array'
}) // 解析数据
const worksheet = workbook.Sheets[workbook.SheetNames[0]]
this.excelView = XLSX.utils.sheet_to_html(worksheet)
this.$nextTick(() => {
  this.setStyle4ExcelHtml()
})

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......
        if (id) {
          const idNum = id.replace(/[^0-9]/gi, '') // 提取id中的数字，即行号
          if (idNum && (idNum === '1' || idNum === 1)) {
            // 第一行标题行
            excelViewTDArr[i].classList.add('class4Title')
          }
          if (idNum && (idNum === '2' || idNum === 2)) {
            // 第二行表头行
            excelViewTDArr[i].classList.add('class4TableTh')
          }
        }
      }
    }
  }
},

调接口时，headers添加 'responseType': 'arraybuffer'