在vue中,实现纯前端展示excel文件

1.需求

后端返回数据流,前端展示列表

因为后端太菜,所以要求前端做excel展示,后端返回一个数据流

import XLSX from 'xlsx'
import axios from 'axios'

因为平时很少用到除了json之外的数据传输,所以axiso封装里面没有相关responseType,所以直接引入吧

let params ={
  aaa:'bbb'
}
let _this = this
   axios({
        method: 'get',
        url: url,
        params,
        responseType: type === 0 ? 'arraybuffer' : 'blob'
      }).then(res => {

            let data = new Uint8Array(res.data)
            let workbook = XLSX.read(data, { type: 'array' })
            let sheetNames = workbook.SheetNames // 工作表名称集合
            _this.workbook = workbook
       worksheet = _this.workbook.Sheets[0]
       dataNow = XLSX.utils.sheet_to_json(worksheet)
//dataNow 现在就是json格式的数组,里面的表头可以作为表格的表头,vue 直接使用v-for去做就好了,
})

下载的话responseType:blob,展示responseType:arraybuffer
this.workbook.Sheets[0]意思是第一个工作表。多个的话可以自己拿出来用按钮切换

  data = new Blob([data])
      let url = window.URL.createObjectURL(data)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', `excel.xlsx`)
      document.body.appendChild(link)
      link.click()

你可能感兴趣的:(在vue中,实现纯前端展示excel文件)