美文网首页
js blob导出文件 文件下载 中文乱码的问题

js blob导出文件 文件下载 中文乱码的问题

作者: 前端青音 | 来源:发表于2021-08-09 18:28 被阅读0次

    需求:
    后端文件以二进制流的形式返回给前端, 前端需要读取流文件实现文件下载。

    场景:
    下载成功,文件乱码。

    原因:
    与后台交互时,若后台返回的是二进制流数据,前端请求时要加上{responseType:‘blob’}或者是{responseType: ‘arraybuffer’},这样数据就不是乱码了。

    eg:

    // 发送请求
    export function reqFuc(params) {
      return request({
        url: '/xxxxx/down', // 接口
        method: 'post',  // 看后端设计的是什么类型
        responseType: 'blob', // 注意:这里必须指定返回类型,否则打不开文件
        params
      })
    }
    
      // 数据处理
       downloadFn(params) {
          reqFuc(params)
            .then(res => {
              console.log(res)
               var content = res.data // 后端返回的流
                var data = new Blob([content], {
                  type: 'application/x-download;charset=UTF-8'
                })
                var downloadUrl = window.URL.createObjectURL(data)
                var anchor = document.createElement('a')
                anchor.href = downloadUrl 
                anchor.setAttribute('download', _fileName)
                anchor.click()
            })
            .catch(err => {
              console.log(err)
            })
        
    

    相关文章

      网友评论

          本文标题:js blob导出文件 文件下载 中文乱码的问题

          本文链接:https://www.haomeiwen.com/subject/oszzvltx.html