通用 vue 页面 js 下载任何文件的方法

FFF_634560232026-04-24 17:08

1 通用 vue 页面 js 下载任何文件的方法

2 需要文件地址可以在地址栏直接打开 file:{url:http"//xxxxx}

3 例如文件在地址直接回车打开是个文件流的形式

4 下载按钮

<el-button type="primary" link size="small" @click="downloadFile(file)">

<el-icon>

<Download />

</el-icon> 下载

</el-button>

javascript 复制代码

const downloadFile = async (file) => {
    try {
        const response = await fetch(file.url, {
            headers: headers.value, // 如果需要认证，带上 headers
        });
        if (!response.ok) throw new Error('下载失败');
        const blob = await response.blob();
        const link = document.createElement('a');
        const blobUrl = URL.createObjectURL(blob);
        link.href = blobUrl;
        link.download = file.name;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(blobUrl);
    } catch (error) {
        console.error('下载失败', error);
        ElMessage.error('下载失败');
    }
};