记一个ajax下载的坑.md

2017-10-19 21:14:16来源:CSDN作者:wyb199026人点击

分享

背景

我们用了一个开源的测试管理平台,但是这个平台只支持用例用XML导入,用XML来写测试用例那简直就是反人类,因此,我要写一个脚本来把Excel转成XML格式。然而,脚本要给大家用的,因此要放在WEB上,功能就是上传写好的测试用例,然后脚本转成XML之后下载到用户本地。

结论

先说结论。

ajax并不支持下载文件!

ajax并不支持下载文件!

ajax并不支持下载文件!

过程

项目结构是Flask+Vue.js。首先需要做一个下载模板的功能,我的第一想法就是发一个ajax请求到后台,然后后台把文件返回给前端,前端来下载这个文件。

实施起来难度也并不大,但是执行之后发现,通讯是正常的,但是后台返回的是一个流文件内容。如下图所示

但是如果是同样的地址(localhost:5000/download?filename=test.xls),在浏览器访问,就能正常的下载文件。

后台代码都是同一个:

@BP_VIEW.route('/download', methods=["GET", "POST"])def download():    filename = request.values.get('filename')    return send_from_directory(os.path.join(os.getcwd() + '/upload/modelfile/'), filename, as_attachment=True)

正确的姿势

正确的实现方式就是后台返回一个url地址,然后用js直接执行window.location.href=url。如果实在想用ajax来实现流文件内容的下载,可以去Github找找有没有大神来解决。

另外记一个

在开发的过程中用ajax来上传附件,需要使用FormData这个对象。

下面是一个用Vue.js实现上传文件的代码:

html<label for="exampleInputFile">上传文件</label><input type="file" @change="getFile">js<script>upload: function () {                    var MyForm = new FormData();                    MyForm.append('filename', this.file, "xls");                    this.$http.post('/upload', MyForm, {emulateJSON: true}).then(function (rst) {                        console.log(rst);                        if (rst['body']['code'] === '0000') {                            var filename = rst['body']['filename'];                            window.location.href = 'downloadcase?filename=' + filename                        } else {                            alert(rst['body']['msg'])                        }                        app.button_text = '提交'                    })</script>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台