js 读取CSV文件&导出CSV文件

• 导入 使用HTML5的FileReader对象
  • 要有一个input[type="file"]

    • <input id="upload_input" class="hide" type="file" accept=".csv" onchange="onUpload(this)" />

       

  • 接收文件方法

    • function onUpload(input) {
      	//	校验文件
      	var file = input.files[0];
      	var reader = new FileReader();
      	if(typeof reader == 'undefined') {
      		showTip("您的浏览器暂不支持该功能", false);
      		return;
      	}
      	var fileName = file.name;
      	var pointIndex = fileName.lastIndexOf(".");
      	var fileSuffix = fileName.substr(pointIndex);
      	if (fileSuffix == ".CSV" || fileSuffix == ".csv") {
      		try {
      			reader.readAsText(file, 'utf-8');
      			reader.onload = function(f) {
      				if (!isEmpty(this.result)) {
      					uploadContent = this.result;
      					//submit();
      				} else {
      					showTip("上传的文件为空！", false);
      				}
      				input.value='';
      			}
      		} catch (e) {
      			showTip("读取文件失败！", false);
      			console.log(e);
      		}
      	} else {
      		showTip("您选择的文件不是CSV格式", false);
      	}
      }

       

• 导出使用a标签和Blob对象
  • 添加隐藏a标签

    • <a id="export_href" style="display: none;">导出</a>

       

  • 添加导出方法

    • // content为需要导出的文本内容（需要符合csv文件格式）
      var blob = new Blob(["\uFEFF" + content], { type: 'text/csv;charset=utf-8;' });
      filename = "export_file_" + new Date().format('yyyy-MM-dd@hh:mm:ss') + ".csv";
      var link = byId("export_href");
      link.download = filename;//这里替换为你需要的文件名
      link.href = URL.createObjectURL(blob);
      link.click();