背景
我們用了一個(gè)開源的測試管理平臺(tái)空郊，但是這個(gè)平臺(tái)只支持用例用XML導(dǎo)入，用XML來寫測試用例那簡直就是反人類切揭，因此狞甚，我要寫一個(gè)腳本來把Excel轉(zhuǎn)成XML格式。然而廓旬，腳本要給大家用的哼审，因此要放在WEB上，功能就是上傳寫好的測試用例孕豹，然后腳本轉(zhuǎn)成XML之后下載到用戶本地涩盾。
結(jié)論
先說結(jié)論。
ajax并不支持下載文件励背！
ajax并不支持下載文件春霍！
ajax并不支持下載文件！
過程
項(xiàng)目結(jié)構(gòu)是Flask+Vue.js叶眉。首先需要做一個(gè)下載模板的功能址儒，我的第一想法就是發(fā)一個(gè)ajax請求到后臺(tái)芹枷，然后后臺(tái)把文件返回給前端，前端來下載這個(gè)文件莲趣。
實(shí)施起來難度也并不大鸳慈，但是執(zhí)行之后發(fā)現(xiàn)，通訊是正常的妖爷，但是后臺(tái)返回的是一個(gè)流文件內(nèi)容蝶涩。如下圖所示
但是如果是同樣的地址（localhost:5000/download?filename=test.xls）理朋，在瀏覽器訪問絮识，就能正常的下載文件。
后臺(tái)代碼都是同一個(gè)：
@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)
正確的姿勢
正確的實(shí)現(xiàn)方式就是后臺(tái)返回一個(gè)url地址嗽上，然后用js直接執(zhí)行window.location.href=url次舌。如果實(shí)在想用ajax來實(shí)現(xiàn)流文件內(nèi)容的下載，可以去Github找找有沒有大神來解決兽愤。
另外記一個(gè)
在開發(fā)的過程中用ajax來上傳附件彼念，需要使用FormData這個(gè)對象。
下面是一個(gè)用Vue.js實(shí)現(xiàn)上傳文件的代碼：
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>
