关于前端使用ajax下载服务器端文件乱码的问题

  • 最近看到很多前端的小伙伴们,需要从服务器端下载诸如excel,word,pdf的文件,但是在处理时怎么也没法产生想要的效果(点击后立即下载文件),而是没有任何响应,查看控制台发现返回的数据是一片乱码,结合自己的经验,希望能给大家一些帮助。
  • 我这里ajax请求使用VUE的常用小伙伴axios,怎么用axios我就不详细介绍了,不会的小伙伴请看这里
    this.$http.post('/outputExcel',{
          //Content_Type:'Authorization',        
         // excelData:JSON.stringify(this.tableData),可以付带一些参数
           }).then((res)=> {
           console.log(res.data.filePath)
           //正常情况下返回值是excel文件的下载路径
           this.excelpath="http://127.0.0.1:3000/download/"+res.data.filePath;
           window.open(this.excelpath)
           })
  • 以上代码配合服务器端实现文件下载,但需要注意的是,服务器端不是返回文件,而是返回文件的路径res.data.filePath。比如我这里的文件存放在服务器端download文件夹下。
    取得路径后使用window.open()方法获取文件,同时服务器端应该有相应的处理程序,处理这个get请求:
    我服务器端使用的express: 代码大致如下:

           var express = require('express');
           var path= require('path') 
           var router = express.Router();
           router.get('/:filename', function(req, res, next) {
               var filename=req.params.filename;
               var file=path.join(__dirname,'../download/'+filename)
               res.download(file)
           
           })
           module.exports = router;
    
  • 重点就是,不要直接返回文件,而是通过访问文件路径的方式进行下载;** 如果你还有什么疑问,或者更好的办法,可以留言互相学习交流。

-

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值