vue 实现点击下载文件

最新推荐文章于 2024-07-23 20:33:37 发布

HouMengFei_

最新推荐文章于 2024-07-23 20:33:37 发布

阅读量6.7k

点赞数 2

文章标签： javascript html html5

本文链接：https://blog.csdn.net/HouMengFei_/article/details/120043574

版权

这篇博客介绍了如何在Vue项目中实现点击按钮下载文件的功能。通过创建并隐藏一个`<a>`标签，设置其`href`为下载接口，并利用`download`属性指定文件名，最后触发点击事件来实现无刷新下载。这种方法适用于前端直接调用后端接口下载文件的场景。

摘要由CSDN通过智能技术生成

vue实现点击下载文件或文档

1.代码如下

    //导出事件
    Export() {
      let link = document.createElement("a"); 
      //创建一个a标签
      link.style.display = "none"; 
      //将a标签隐藏
      link.href = safe + "/work/plan/exportJobPlanExcel"; 
      //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
      link.setAttribute("download", name); 
      // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
      document.body.appendChild(link);
      //将上面创建的a标签加入到body的尾部
      link.click(); 
      //执行a标签
    },