文件下载

1.简便方式

<a :href="文件地址" :download="文件名称" target="_blank">
Download
</a>

示例：
<a href="http://127.0.0.1:4000/pdf/2-1.png" download="文档.pdf">下载</a>

a标签的target属性有五个特殊值

• target="_self" 内容在当前页面显示。
• target="_blank" 内容在新页面显示。
• target=“three” 内容在对应窗口显示
• target="_top" 在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架
• target="_parent" 在父窗体中打开链接，在窗口与顶级框架中，等同于_self

注意：上面的方式只适用于 同源 URL

如果是非同源进行下载会出现跨域问题：
Access to XMLHttpRequest at 'https://pmccapi.wsandos.com/uploads/20230627/89a63e3678572df862b3e9b8cc9509c9.pdf' 
from origin 
'https://pmcc.wsandos.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

JS实现文件下载

// 有两种方式，第一种不能满足就试试第二种
	function onDownload(fileUrl,fileName) {
		const element = document.createElement('a');
		element.style.display = 'none';
		element.href = fileUrl;
		element.download = fileName || '下载文件';
		document.body.appendChild(element);
		element.click();
		document.body.removeChild(element);
	}
	async function onDownload(fileUrl,fileName) {
		try {
			const response = await fetch(fileUrl);
			const data = await response.blob();
			const downloadUrl = URL.createObjectURL(data);
			const a = document.createElement('a');
			a.style.display = 'none';
			a.href = downloadUrl;
			a.download = fileName || '下载文件';
			document.body.appendChild(a);
			a.click();
			window.URL.revokeObjectURL(a.href);
			document.body.removeChild(a);
		} catch (error) {
			console.error('下载文件失败:', error);
		}
	}