前端vue3下载文件

 

 

 

注意   API 请求的默认前缀根据实际情况获取   import.meta.env.VITE_pan_H5

 

 

 

1.html下载组件

 <el-link class="hangtext" v-show="item.IsFile == 1" @click="handDownload(item.Path)">下载</el-link> 

 

2.ts脚本函数

//点击下载
  const handDownload = async (path: string) => {
    await downloadFile(`${import.meta.env.VITE_pan_H5}${path}`);
  }

 

 

3.下载方法

//下载文件
export async function downloadFile(filepath: string) {

    const response = await axios({
        url: filepath,
        responseType: 'blob'
    });

    // 生成文件流的URL
    const url = window.URL.createObjectURL(new Blob([response.data]));

    // 创建一个<a>标签并设置相关属性
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute('download', 'file.txt');

    // 将<a>标签添加到文档中，并触发点击事件来开始下载
    document.body.appendChild(link);
    link.click();

    // 下载完成后移除<a>标签及URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

 

 

 注意 ：上方15行代码file.txt  可以换成你传来的文件名字 这样就会根据你的文件名字的格式下载文件格式