Vue下载本地文件路由被vue-router修改问题解决方法（基于ElementUI框架）

最新推荐文章于 2023-08-07 10:43:23 发布

ldz_miantiao

最新推荐文章于 2023-08-07 10:43:23 发布

阅读量1.7k

点赞数

分类专栏： Vue学习记录文章标签： Vue下载文件

本文链接：https://blog.csdn.net/qq_40282732/article/details/102529039

版权

Vue学习记录专栏收录该内容

42 篇文章 24 订阅

订阅专栏

使用脚手架创建的项目，下载文件时用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) //按照你自己的静态目录来设置
});