首页 > 文章列表 > 前端如何实现自定义路径导出功能?

前端如何实现自定义路径导出功能?

430 2024-11-12

前端如何实现自定义路径导出功能?

如何在前端实现自定义路径导出

如何用浏览器以外的客户端在前端实现导出功能,并且能够选择导出路径和默认文件名呢?

// 假设数据用 rows 数组表示
var rows = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];

// 将数据转换为 CSV 格式
var csvContent = "data:text/csv;charset=utf-8," + rows.map(e => e.join(",")).join("n");

// 编码 URI
var encodedUri = encodeURI(csvContent);

// 创建一个 a 标签,设置下载属性
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");

// 将 a 标签添加到 body 中(仅 Firefox 需要)
document.body.appendChild(link);

// 触发下载
link.click();

// 替换 rows 内容和下载文件名,即可实现自定义路径导出功能。
来源:1731128403