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

callmewhy 发布于2019-08-26 11:40 / 3588人阅读

最近看到很多前端的小伙伴们，需要从服务器端下载诸如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;

重点就是，不要直接返回文件，而是通过访问文件路径的方式进行下载；** 如果你还有什么疑问，或者更好的办法，可以留言互相学习交流。

GPU云服务器云服务器 Ajax乱码问题整理关于javascript的问题关于php的问题关于系统错误的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107337.html

ajax post导出excel小结(解决乱码问题)

摘要：当前有一个需求前端对当前页面的数据做筛选之后需要将其导出至文件且发送的请求需传入需验证的参数如页面信息尝试了提交及其他方法后出现乱码等问题最后用成功完成了导出。直接贴代码下面是解释这段代码不加会导致导出的出现乱码问题。当前有一个需求前端对当前页面的数据做筛选之后需要将其导出至excel文件且发送的请求需传入需验证的参数如页面token信息尝试了form提交及其他方法后出现excel...

tanglijun 2019-08-26 10:24 评论0 收藏0
nodejs(officegen)+vue(axios)在客户端导出word文档

摘要：方式请求的数据只能存放在内存空间，可以通过访问，但是无法保存到硬盘，因为不能直接和硬盘交互，否则将是一个安全问题。是第一个第三方的库，所以同理。这里是返回的对象这里表示类型创建下载的链接下载后文件名点击下载下载完成移除元素释放掉对象前言我的项目中有一个需求：点击按钮生成可编辑的word文档订单详情的信息我使用的前端框架是Vue.js、后台使用的是node.jsnode.js生成和导...

Julylovin 2019-08-22 15:24 评论0 收藏0
AJAX入门这一篇就够了

摘要：性能会有所降低一点内容，刷新整个页面用户的操作页面会中断整个页面被刷新了就是能够做到局部刷新三对象是中最重要的一个对象。头信息已经接收，响应数据尚未接收。一、什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合： (1)XHTML和CSS的基于标准的表示技术 (2)DOM进...

tunny 2019-08-19 10:41 评论0 收藏0
前端下载二进制流文件

摘要：更多文章平时在前端下载文件有两种方式，一种是后台提供一个，然后用下载，另一种就是后台直接返回文件的二进制内容，然后前端转化一下再下载。假设是返回来的二进制数据这次没有问题，文件能正常打开，内容也是正常的，不再是乱码。更多文章平时在前端下载文件有两种方式，一种是后台提供一个 URL，然后用 window.open(URL) 下载，另一种就是后台直接返回文件的二进制内容，然后前端转化一...

lidashuang 2019-08-26 10:25 评论0 收藏0
20K前端大佬面试(关于如何回答ajax跨域问题)

摘要：在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。关于跨域，有N种类型，现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍)，内容...

Yangyang 2019-08-02 16:09 评论0 收藏0