这里贴出 JavaScript 导出 CSV 文件 (Excel) 的代码.
- /**
- * 导出 Excel
- * @param {Object} title 标题列 key-val
- * @param {Object} data 值列 key-val
- * @param {Object} fileName 文件名称
- */
- function JSONToExcelConvertor(title, data, fileName) {
- var CSV = '';
- var row = "";
- for (var i = 0; i <title.length; i++) {
- if(title[i].title){
- row += title[i].title + ',';
- }
- }
- row = row.slice(0, -1);
- CSV += row + '\r\n';
- for (var i = 0; i < data.length; i++) {
- var row = "";
- for (var j = 0; j < title.length; j++) {
- if(title[j].title){
- row += '"'+ (data[i][title[j].field] ? data[i][title[j].field] :"") + '"\t,';
- }
- }
- row.slice(0, row.length - 1);
- CSV += row + '\r\n';
- }
- if (CSV == '') {
- alert("Invalid data");
- return;
- }
- var fileName = fileName;
- var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURI(CSV);
- var link = document.createElement("a");
- link.href = uri;
- link.style = "visibility:hidden";
- link.download = fileName + ".csv";
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- }
上面的写法, 如果 Excel 中的数据太多, 就会导致无法导出的结果, 原因是浏览器对 URL 的长度有限制, 因此要使用 Blob 对象和 Windows.URL.createObjectURL()方法做一下改造.
Windows.URL.createObjectURL()方法可以直接生成 blob: 开头的链接, 该链接产生于浏览器端, 不会占用服务器资源.
- /**
- * 导出 Excel
- * @param {Object} title 标题列 key-val
- * @param {Object} data 值列 key-val
- * @param {Object} fileName 文件名称
- */
- function JSONToExcelConvertor(title, data, fileName) {
- var CSV = '';
- var row = "";
- for (var i = 0; i < title.length; i++) {
- if(title[i].title){
- row += title[i].title + ',';
- }
- }
- row = row.slice(0, -1);
- CSV += row + '\r\n';
- for (var i = 0; i < data.length; i++) {
- var row = "";
- for (var j = 0; j < title.length; j++) {
- if(title[j].title){
- row += '"'+ (data[i][title[j].field] ? data[i][title[j].field] :"") + '"\t,';
- }
- }
- row.slice(0, row.length - 1);
- CSV += row + '\r\n';
- }
- if (CSV == '') {
- alert("Invalid data");
- return;
- }
- var fileName = fileName;
- var uri = new Blob(['\ufeff' + CSV], {type:"text/csv"});
- var link = document.createElement("a");
- link.href = URL.createObjectURL(uri);
- link.style = "visibility:hidden";
- link.download = fileName + ".csv";
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- }
然而, 虽然 Windows.URL.createObjectURL()方法在 IE10, IE11 以及 Microsoft Edge 中能生成的 blob: 链接, 但是却不能把它加到一个 < a > 节点上, 也不能直接在浏览器地址栏打开访问, 否则会得到 [SCRIPT5: 拒绝访问.] 错误. 甚至, IE9 根本不支持调用 Windows.URL.createObjectURL() 方法创建 Blob URLs.
Microsoft Internet Explorer / Microsoft Edge 和高大上的 Google Chrome / Mozilla Firefox 对于 Windows.URL.createObjectURL()方法创建 Blob 链接最直观的区别在于得到的 blob: 链接形式不一样, 分别在微软浏览器和标准浏览器中运行 new Blob()代码, 会得到两种 Blob 链接形式, 第一种为 Chrome 和 Firefox 生成的带有当前域名的标准 blob: 链接形式, 第二种为 Microsoft IE 和 Microsoft Edge 生成的不带域名的 blob: 链接. 那么我们就可以通过 Windows.URL.createObjectURL(new Blob()) . indexOf(location.host) < 0 表达式来检测是否是 IE 或早期生成 Object URL 不带域名的 Edge, 如果表达式返回 true 则是 IE 或 Edge 旧版本.
事实上, Blob URL 不被支持是出于 IE 浏览器对安全性的考虑(IE 浏览器真安全啊, 牛逼), 然后它自己提供了一套 API 用来创建或下载 Blob 文件: msSaveOrOpenBlob.
- /**
- * 导出 Excel
- * @param {Object} title 标题列 key-val
- * @param {Object} data 值列 key-val
- * @param {Object} fileName 文件名称
- */
- function JSONToExcelConvertor(title, data, fileName) {
- var CSV = '';
- var row = "";
- for (var i = 0; i < title.length; i++) {
- if(title[i].title){
- row += title[i].title + ',';
- }
- }
- row = row.slice(0, -1);
- CSV += row + '\r\n';
- for (var i = 0; i < data.length; i++) {
- var row = "";
- for (var j = 0; j < title.length; j++) {
- if(title[j].title){
- row += '"'+ (data[i][title[j].field] ? data[i][title[j].field] :"") + '"\t,';
- }
- }
- row.slice(0, row.length - 1);
- CSV += row + '\r\n';
- }
- if (CSV == '') {
- alert("Invalid data");
- return;
- }
- var fileName = fileName;
- var uri = new Blob(['\ufeff' + CSV], {type:"text/csv"});
- if (Windows.navigator && Windows.navigator.msSaveOrOpenBlob) { // for IE
- Windows.navigator.msSaveOrOpenBlob(CSV, fileName + ".csv");
- } else { // for Non-IE(Chrome,Firefox etc.)
- var link = document.createElement("a");
- link.href = URL.createObjectURL(uri);
- link.style = "visibility:hidden";
- link.download = fileName + ".csv";
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- }
- }
因此就得出上面最终的代码.
"就算临别也要通电话."
来源: https://www.cnblogs.com/yanggb/p/11387661.html