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()