vue从后端下载附件

最新推荐文章于 2024-05-10 00:36:46 发布

ccjiushiwoo

最新推荐文章于 2024-05-10 00:36:46 发布

阅读量198

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ccjiushiwoo/article/details/126937821

版权

 <div class='f1' v-for="(item,index) in fileListbut" :key="index">
              <a @click='dowm(item,index)'><img src="./components/333.png">{{item}}</a>
</div>


// 下载文件
export function download(params) {
  return request2({
    url: 'file/download',
    method: 'get',
    responseType: 'blob',
    params
  })
}

    //下载附件
    dowm(item,index){
      console.log(index);
      console.log(item);
          let filePath = {
          filePath: this.fileListbut[index],
        };
        console.log(filePath);
        //download为封装的方法
         download(filePath).then(res => {
          console.log(res);
           const downloadElement = document.createElement("a");
    const href = window.URL.createObjectURL(res.data); // 创建下载的链接
    downloadElement.href = href;
    downloadElement.style.display = "none";
    downloadElement.download = `${item}`; // 下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); // 点击下载
    document.body.removeChild(downloadElement); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉blob对象
        })     
    },