文件链接下载

April_zk

已于 2024-04-22 15:43:01 修改

阅读量495

点赞数 9

文章标签：前端

于 2024-04-22 15:41:44 首次发布

本文链接：https://blog.csdn.net/qq_45747074/article/details/138079387

版权

1.文件返回地址转换为文件流并下载

const downloadTargetFile = debounce((row) => {
  if (row.id) {
    activeItem.value = []
    activeItem.value = [row]
  }
  if (activeItem.value.length === 0) {
    ElMessage.warning("请选择文件");
    return
  } else if (activeItem.value.filter(_ => _.isFolder === 2).length >= 1) {
    ElMessage.warning("文件夹不支持下载")
  } else if (activeItem.value.length === 1) {
    fetch(activeItem.value[0].fileExtendPath.replace(/^http/, "https"))
        .then((res) => res.blob())
        .then((blob) => {
          downloadFile(blob, activeItem.value[0].fileName);
        })
        .catch((error) => {
          ElMessage.error('下载失败');
        });
  } else if (activeItem.value.length > 1) {
    //   多文件打包下载
    alert('多文件打包下载')
  }
}, TIME_DELAY)

其中 downloadFile 方法中在页面中创建 a 标签，并开启 download 模式

function downloadFile(blob, filename) {
    let url = window.URL.createObjectURL(blob);
    // 创建隐藏的可下载链接
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
};