js blob導出文件 文件下載 中文亂碼的問題

需求:
后端文件以二進制流的形式返回給前端, 前端需要讀取流文件實現文件下載。

場景:
下載成功,文件亂碼。

原因:
與后臺交互時,若后臺返回的是二進制流數據,前端請求時要加上{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)
        })
    
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。