文件下载方案

<a> 标签下载

• 下载图片、PDF、文本等静态资源

• 支持本地或服务器文件

• 不适合跨域且没有CORS权限的资源。

<a href="/path/to/file.pdf" download="custom-name.pdf">点击下载</a>

或者通过JS动态创建

function downloadFile(url, filename) {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

使用 Blob + ObjectURL 下载

• 从接口获取二进制数据

• 处理 Blob 类型响应。

• 支持自定义文件名和类型。

Fetch 下载

async function downloadFileFromAPI(url, filename, mimeType = "application/octet-stream") {
    const response = await fetch(url);
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob, { type: mimeType });

    const a = document.createElement("a");
    a.href = blobUrl;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(blobUrl); // 释放内存
}

Axios 下载

使用 DataURL 下载（适用于小文件或 Base64 内容）

• 下载Canvas图片

• 下载 HTML 转换为图像或 PDF 的 Base64 数据

• 小文件直接嵌入传输

function downloadBase64File(dataUrl, filename) {
  const a = document.createElement('a');
  a.href = dataUrl;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

// 示例：Canvas 导出图片
const canvas = document.getElementById('myCanvas');
const dataUrl = canvas.toDataURL('image/png');
downloadBase64File(dataUrl, 'canvas.png');

第三方库

FileSaver.js	简单封装 Blob 下载，兼容性好
jsPDF	生成 PDF 并下载
xlsx	读写 Excel 文件
downloadjs	更灵活的下载工具