后端返回可下载的xlsx文件,但是前端接收下载后为乱码

我的接收数据进行处理的代码为:

javascript 复制代码
 download_signal_list() {
   return new Promise((resolve, reject) => {
     get_download_signal({
       project_id: this.projectId,
       version_id: this.versionId
     }).then(response => {
       const url = window.URL.createObjectURL(new Blob([response.data]))
       const link = document.createElement('a')
       link.href = url
       const timestamp = this.gettimestamp(new Date().getTime() / 1000)
       const filename = timestamp + '-信号对接表.xlsx'
       link.setAttribute('download', filename)
       document.body.appendChild(link)
       link.click()
     }).catch(error => {
       reject(error)
     })
   })
 },

确实可以下载下来,但是打开后为乱码。

解决办法:

后端传的是blob类型文件,所以前端接收时也要限制一下类型,

接收的请求代码配置为:

javascript 复制代码
export function get_download_signal(data) {
  return request({
    url: baseURL + 'mf_project/signal_docking/download_signals',
    method: 'get',
    params: data,
    responseType: 'blob'		// 一定一定要加上
  })
}

之后再下载就可以正确显示啦

相关推荐
深海鱼在掘金几秒前
Next.js从入门到实战保姆级教程(第八章):图像、字体与媒体优化
前端·typescript·next.js
英俊潇洒美少年几秒前
Vue2 高德地图地址选择器完整实战(组件抽离+高并发优化+@amap/amap-jsapi-loader最佳实践)
前端·javascript·vue.js
深海鱼在掘金3 分钟前
Next.js从入门到实战保姆级教程(第七章):样式方案与 UI 优化
前端·typescript·next.js
晴天丨10 分钟前
🛡️ Vue 3 错误处理完全指南:全局异常捕获、前端监控、用户反馈
前端·vue.js
孙凯亮10 分钟前
Electron 接口请求全解析:从疑问到落地(真实开发对话整理)
前端·electron
闲坐含香咀翠10 分钟前
Electron 桌面端多语言优化实战:从静态全量加载到懒加载与用户自定义
前端·electron·客户端
Wect11 分钟前
HTML5 原生拖拽 API 实战案例与拓展避坑
前端·面试·浏览器
踩着两条虫19 分钟前
VTJ:项目模型系统
前端·低代码·ai编程
李剑一22 分钟前
别再写易破解的Canvas水印了!MutationObserver防篡改水印,从原理到完整代码(直接复制)
前端
Beginner x_u32 分钟前
前端八股整理(工程化 01)|Git 常见命令、rebase/merge、pull/fetch 与前端性能优化
前端·性能优化·git 常见命令