vue excel下载（记一次post请求下载乱码问题）

最新推荐文章于 2024-05-16 10:48:51 发布

原创最新推荐文章于 2024-05-16 10:48:51 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

34 篇文章

订阅专栏

javascript

12 篇文章

订阅专栏

本文介绍如何使用Axios从服务器正确下载文件，避免文件内容出现乱码。关键在于设置responseType为'blob'，并展示了如何通过Blob处理响应数据，生成文件链接，实现自动下载。

参数必须加responseType: ‘blob’，不然会乱码

axios.get(url, {
        params: {
          ...params
        },
        responseType: 'blob'
      })
      .then(res => {
        if (!res) return
        let url = window.URL.createObjectURL(res.data)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        //文件名加上当前时间
        let time = moment(new Date().getTime()).format('YYYYMMDDHHmmss')
        //如果请求头里返回文件名，则直接使用请求头的文件名；若没，则使用页面中设置的
        let finalFileName = res.headers['content-disposition'] ? res.headers['content-disposition'].split('=')[1]: `${fileName}_${time}.${fileTypes}`
        link.setAttribute('download', finalFileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(a)
      })
      .catch(err => {
        console.log(err)
      })