这其实是一个小工具的实现。
前言：虽然前端js不能直接操作或编辑本地文件，但完全可以操作通过表单上传的文件，即本篇文章就用到了这部分的知识点H5 fileAPI。
背景：如下图。
生成链接
经常会有直接给一个表格让自己整合成链接的格式来用，如果每次都让人一个一个整合的话会很浪费时间，因此，要着做一个小工具，来主动进行整合，并且重新生成csv格式，这样就很方便了。
用到的知识（供参考）：
- H5 file API；
- js导出csv
- 利用HTML/HTML5中的download属性来实现数据csv文件导出
- 填坑:前端导出csv文件
实现一共分为三个部分，如下;
一、读取原始csv文件及内容
在这个部分，用到了fileAPI的知识，主要是用fileReader这个构造器来实现，如下代码。
function showDataByText() { //获取文件里面的内容
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
reader.readAsText(resultFile,'gb2312');
reader.onload = function (e) {
var text = this.result;
document.getElementById("initial").innerHTML = "原始数据："+text;
这就实现了第一部分读取csv文件并获取文件内容，文件内容是通过构造器的内置属性result来获取的。因此如果用reader.readAsText读取到文件后，直接打印查看console.log(this.result)就可看到打印出来的csv文件里面的内容了。
二、数据格式整合
这个部分就是将获取到的csv文件里面的数据内容进行整合，整合过程逻辑如下，比较麻烦，要仔细，认真，多调试，一步一步就能达到最后的结果。
var arr = text.split('\r\n'); //读取完文件后，对文件内容进行操作，将字符串转换成数组
var nullStr = arr.splice(arr.length - 1, 1); //去掉分割出来的空字符串
console.log(arr);
var now = [];
for (var i = 0; i < arr.length; i++) { //对每一行数据增加一项--新链接
var ss = arr[i].split(',');
ss[ss.length] = ss[0] + '?' + 'channelSource=' + ss[1] + '&channelBusiness=' + ss[2] + '&createFrom=tpa' + new Date().getTime();
now.push(ss);
}
console.log(now);
var urlData = now.join('\r\n'); //数组转换成字符串
document.getElementById("final").innerHTML = "最终数据：" + urlData;
console.log(urlData)
好了，代码里面的注释都写得清清楚楚，不用再多做解释了。
三、将整合后的内容放进新生成的csv文件
这个部分就要了解blob对象，\ufeff+数据，以及a标签的download属性、click属性。
blob：是一种JavaScript的对象类型,具体查看此链接： [JS进阶] JS 之Blob 对象类型
a标签的两个属性：link.download的用法
link.click()的用法
通过这几个内容就可以实现新下载并保存一个文件，并将数据存入文件里。
代码如下：
var filename = 'info.csv'; //利用a标签的download属性来下载并保存csv文件
var compatible = "\uFEFF";
var blob = new Blob([compatible + urlData], {
type: 'text/csv;charset=utf-8;'
});
console.log(blob);
if (navigator.msSaveBlob) { // IE 10+ *** 保存下载文件
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement("a");
if (link.download !== undefined) {
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden'; //兼容火狐，即可触发保存操作
document.body.appendChild(link);
link.click(); //触发保存操作
document.body.removeChild(link);
}
}
以上，就将这个小工具实现完成，结果如下：
原始文件数据
生成链接后
同时此csv文件也可以用excel来打开。
excel打开结果
