vue--前端接收后台传过来的excel文件数据,并在前端做下载_vue vnd.ms-excel格式数据下载

一.思路:

1.利用Bold接收数据

2.利用a标签做文件下载

二.相关代码

axios.post(url, queryParams, { responseType: 'arraybuffer' }).then((_res) => {
         const blob = new Blob([_res.data], { type: 'application/vnd.ms-excel;' })
        const a = document.createElement('a')
        // 生成文件路径
        let href = window.URL.createObjectURL(blob)
        a.href = href
        let _fileName = _res.headers['content-disposition'].split(';')[1].split('=')[1].split('.')[0]
        // 文件名中有中文 则对文件名进行转码
        a.download = decodeURIComponent(_fileName)
        // 利用a标签做下载
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(href)
      })

三 .代码要点:

1.设置responseType: 'arraybuffer': 解决下载下来的文件乱码问题

2.设置type: 'application/vnd.ms-excel;:设置excel文件的格式.(该格式需要与后台确认)

office中后缀对应的content-type在office 所有后缀对应的 content-type中可以查看

3.若后台传过来的文件名中有中文,则需要对该文件名进行转码