vue预览excel文档_在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()