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、浏览器效果：