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

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

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

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

服务器托管海外云主机 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
菜鸟笔记(一) - Java常见的乱码问题

摘要：本文将介绍一种开发常见的乱码问题。前提摘要在学习的过程中，乱码问题是经常遇到的，无论是页面乱码还是数据库乱码。本文将罗列笔者在开发过程中常常遇到几种乱码场景。菜鸟笔记下周不见不散本文将介绍一种Java Web/Api 开发常见的乱码问题。前提摘要：在学习Java Web的过程中，乱码问题是经常遇到的，无论是页面乱码还是数据库乱码。本文将罗列笔者在开发过程中常常遇到几种乱码场景。一...

ixlei 2019-08-14 14:38 评论0 收藏0