关于前端使用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;
- 重点就是,不要直接返回文件,而是通过访问文件路径的方式进行下载;** 如果你还有什么疑问,或者更好的办法,可以留言互相学习交流。
-
推荐阅读
复杂场景下的h5与小程序通信
在套壳小程序盛行的当下, h5调用小程序能力来打破业务边界已成为家常便饭,h5与小程序的结合,极大地拓展了h5的能力边界,丰富了h5的功能。使许多以往纯h5只能想想或者实现难度极大的功能变得轻松简单。但在套壳...
懒懒的技术宅赞 16阅读 3k评论 5
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json
谭光志赞 34阅读 20.7k评论 9
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 32阅读 7.3k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 24阅读 2.2k评论 3
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 2k
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...
边城赞 18阅读 7.8k评论 3
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...
原谅我一生不羁放歌搞文艺赞 14阅读 20k评论 9
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。