前端实现文件下载常见方案​

示例代码js下载 PDF

1234567891011适用场景

下载静态资源（如图片、PDF、ZIP）链接为同源或已设置跨域资源共享（CORS）需要注意

download 对跨域资源无效，除非设置了 Access-Control-Allow-Origin不支持文件 POST 下载不兼容 IE 浏览器⚽ 前端生成内容后再下载 ​前端生成内容后下载 （Blob + URL.createObjectURL）

示例代码jsfunction downloadJsonFile() {

const data = { name: '张三', age: 28 };

const blob = new Blob([JSON.stringify(data, null, 2)], {

type: 'application/json',

});

const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;

a.download = '用户数据.json';

a.click();

URL.revokeObjectURL(url);

}

downloadJsonFile();123456789101112131415适用场景

导出前端生成的内容（如 CSV、JSON、文本、图片）⚽ 获取二进制文件流下载 ​通过 Fetch 下载二进制文件流, 常见于导出接口

示例代码jsasync function downloadExcel() {

const response = await fetch('/api/export', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

Authorization: 'Bearer xxx', // 如果有 token

},

body: JSON.stringify({ type: 'user-list' }),

});

const blob = await response.blob();

const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;

a.download = '用户列表.xlsx';

a.click();

URL.revokeObjectURL(url);

}

downloadExcel();1234567891011121314151617181920适用场景

后端导出文件接口（如 Excel、PDF、ZIP）需要携带参数的 POST 请求需要权限认证（cookie、token）需要注意

后端需返回正确的文件类型（如 application/vnd.ms-excel）和 Content-Disposition 响应头。⚽ 使用 fileSaver 库 ​file-saver 是一个广泛使用的下载库，兼容性好，封装了底层处理。

示例代码jsimport { saveAs } from 'file-saver';

const blob = new Blob(['Hello, FileSaver!'], {

type: 'text/plain;charset=utf-8',

});

saveAs(blob, 'hello.txt');123456⚽ 下载 Excel 文件 ​结合 xlsx + file-saver 来下载 Excel 文件

示例代码jsimport * as XLSX from 'xlsx';

import { saveAs } from 'file-saver';

function exportExcel() {

const data = [

{ 姓名: '张三', 年龄: 18 },

{ 姓名: '李四', 年龄: 22 },

];

const worksheet = XLSX.utils.json_to_sheet(data);

const workbook = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(workbook, worksheet, '用户列表');

const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

const blob = new Blob([excelBuffer], {

type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

});

saveAs(blob, '用户列表.xlsx');

}123456789101112131415161718适用场景

前端生成 Excel 而非后端生成导出复杂表格 多 Sheet 导出⚽ 几种方案对比 ​在实际开发中，选择哪种下载方案，主要取决于你的资源来源、浏览器兼容性需求、文件类型以及是否需要权限控制。推荐前端开发者根据场景灵活选择，同时注意使用 Content-Type、Content-Disposition 等响应头来确保文件正确下载。

微信小程序/浏览器不支持 download 属性建议跳转外部浏览器或使用后端二维码下载方案安卓/iOS 系统限制多，建议用户手动长按保存