文件下载方案

<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 类型响应。
支持自定义文件名和类型。

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); // 释放内存
}

async function downloadFileFromAPI(url, filename, mimeType = "application/octet-stream") {
    const response = await axios.get(url, {
        responseType: "blob"
    });
    const blobUrl = URL.createObjectURL(new Blob([response.data], { 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); // 释放内存
}

使用 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');