vue3点击下载图片，以及文件流的下载

最新推荐文章于 2024-07-09 15:15:21 发布

一个热爱前端的小胖子

最新推荐文章于 2024-07-09 15:15:21 发布

阅读量3.2k

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_70243424/article/details/130919235

版权

该文章介绍了在Vue3应用中如何处理文件下载，特别是针对有文件流的情况。它展示了两个函数，一个用于下载图片（如果存在），另一个用于处理后端返回的文件流进行下载。这两个函数都涉及到创建隐藏的``标签，设置href属性以触发下载，并在下载完成后清理元素。

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

// row是当前行的数据
const downloadImg = (row) => {
          if(row.lqiPhoto !== null) {
            let link = document.createElement("a")
            link.style.display = 'none'
            link.href = row.lqiPhoto
            link.setAttribute('download', '导出img')
            document.body.appendChild(link)
            link.click()
            console.log("🚀 ~ file: index.vue:213 ~ downloadImg ~ link:", link)
          } else {
                message.warning('该行没有附件')
          }
        }

vue3下载文件流

// 后端返回的

const download = async (row) => {
  // 接口数据，返回的文件流
  const {data} = await downloadcode(row.bucketName,row.fileName)
  
  let blob = new Blob([data]);
  let downloadElement = document.createElement("a");
  let href = window.URL.createObjectURL(blob); //创建下载的链接
  downloadElement.href = href;
  downloadElement.download = row.original; //下载后文件名
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载
  document.body.removeChild(downloadElement); //下载完成移除元素
  window.URL.revokeObjectURL(href); //释放掉blob对象
}