使用脚手架创建的项目,下载文件时用a标签的话,转跳的页面路由会被vue-router强行改掉,根本无法下载文件。我也是一点一点的修改才使用了iframe的方法去跳过它。
以下所有的路径都要根据自己的项目来配置,如果你不是用ElementUI,你就直接在方法里面用JS代码去创建<iframe>
标签,并且去设置style
以及src
属性,这几个是最重要的
点击部分代码
执行的方法
//下载
download(row) {
let downloadFileUrl = this.$http.defaults.baseURL + "model/download/" + row.modelUrl; //自己的路径
this.$notify({
title: `下载的文件是: ${row.name} `,
type: "success",
dangerouslyUseHTMLString: true,
duration: 3000,
offset: 60,
//主要是这句,通过ifranme跳过路由标记,这样页面就能自动跳出下载的弹窗了
message: `<iframe src='${downloadFileUrl}' style="display:none"></iframe>`
});
},
后端node代码
//文件下载
router.get('/model/download/:fileName', async (request, response) => {
response.download('uploads\\'+request.params.fileName) //按照你自己的静态目录来设置
});