如何在前端实现如下图方式的导出功能?

2021-02-19 14:33发布

问题:

如下图所示,有一个导出需求,但是不是用的浏览器,用的客户端,不过客户端通过配置文件引用的浏览器页面。 普通的导出方法是点击导出,会在浏览器执行下载文件,然后我希望实现如下图所示,点击导出,会弹出路径进行选择,默认展示的数据文件名。js有没有可能实现?

回答1:

var rows = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];

var csvContent = "data:text/csv;charset=utf-8," 
    + rows.map(e => e.join(",")).join("\n");

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF

link.click(); // This will download the data file named "my_data.csv".

給你參考
替換資料內容及檔名即可



标签: js html 前端