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

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('本地下载失败!');}
};

2、浏览器效果：