当前位置：首页 > news >正文

Vue 实现通过URL浏览器本地下载 PDF 和图片

news 来源：原创 2025/5/9 9:49:24

1、代码实现如下：

根据自己场景判断 PDF 和图片，下载功能可按下面代码逻辑执行

const downloadFile = async (item: any) => {
    try {
        let blobUrl: any;
        // PDF本地下载
        if (item.format === 'pdf') {
            const response = await fetch(item.url); // URL传递进入
            if (!response.ok) {
                throw new Error('本地下载失败!');
            }
            const blob = await response.blob();
            blobUrl = URL.createObjectURL(blob); 
        } else { // 图片下载
            const imageUrl = item.url;
            const response = await fetch(imageUrl); // URL传递进入

            if (!response.ok) {
                throw new Error(`本地下载失败!`);
            }
            const blob = await response.blob();
            blobUrl = URL.createObjectURL(blob);
        }
        //执行下载逻辑
        if (blobUrl) {
            const link = document.createElement("a"); // 创建a标签
            link.href = blobUrl; // 下载链接
            link.download = item.name; // 下载的文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link); // 下载完成后移除a标签
            URL.revokeObjectURL(blobUrl); // 释放URL对象
        }
    } catch {
        proxy.$message.error('本地下载失败!');
    }
};