前端Vue下载文件

zhangyouxiu66

于 2022-03-28 21:58:07 发布

阅读量421

点赞数

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/xiaozhang9/article/details/123807373

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue.js应用程序中实现文件下载功能。通过利用HTML5的`a`标签和`download`属性，结合Vue的响应式特性，可以创建一个用户友好的文件下载接口。此外，还探讨了在处理不同类型的文件，如图片、文档等时可能遇到的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

          1. 第一种
          exportProjectListExcel(params).then((response) => { // 传参调接口获取blob文件
            if (response) { // respone为blob类型
              let exportFileName = "项目检索列表.xlsx";
              this.download(response, exportFileName);
            }
          });
          download(data, filename) {
            if (data == null) {
            } else {
              let url = window.URL.createObjectURL(new Blob([data]));
              let link = document.createElement("a");
              link.style.display = "none";
              link.href = url;
              link.setAttribute("download", filename);
              document.body.appendChild(link);
              link.click();
            }
          }

          2. 第二种 此时文件放置在public文件夹下
          <el-link href="./templateFiles/项目批量导入模板.xls">
            <el-button type="info" icon="el-icon-download">导入模版下载</el-button>
          </el-link>

          3. url下载
          downloadFile(fileId) {
              downloadFile(fileId).then((res) => {
                console.log("url", res.data);
                window.open(res.data.url, "_self");
              });
          },