Vue 如何实现下载功能。

最新推荐文章于 2024-02-29 23:31:36 发布

ZhangBin0612

最新推荐文章于 2024-02-29 23:31:36 发布

阅读量444

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ZhangBin0612/article/details/129416327

版权

Vue项目中如何实现下载功能？

1.给一个按钮绑定点击事件：

 <li v-for="item in componentData.image_path">
     <div>
        <span>{{ item.name }}</span>
        <el-button type="text" @click="downloadFile(item.path, item.name)">
			下载
	    </el-button>
     </div>
</li>

2.定义方法

 //下载文件
    downloadFile(fileUrl, fileName) {
      var baseUrl = 'http://192.168.0.70'  //接口IP地址
      //发起下载请求
      const xhr = new window.XMLHttpRequest();
      xhr.open("GET", baseUrl + "/download?url=" + fileUrl, true);
      xhr.responseType = "blob";
      xhr.onload = () => {
        const url = window.URL.createObjectURL(xhr.response);
        const link = document.createElement("a");
        link.href = url;
        link.download = fileName;
        link.click();
        //释放内存
        window.URL.revokeObjectURL(link.href);
        //移除a标签
        link.remove();
      };
      xhr.send();
    },