整合到新的csv（逗号分隔值）文件

这其实是一个小工具的实现。
前言：虽然前端js不能直接操作或编辑本地文件，但完全可以操作通过表单上传的文件，即本篇文章就用到了这部分的知识点H5 fileAPI。

背景：如下图。

生成链接

经常会有直接给一个表格让自己整合成链接的格式来用，如果每次都让人一个一个整合的话会很浪费时间，因此，要着做一个小工具，来主动进行整合，并且重新生成csv格式，这样就很方便了。

用到的知识（供参考）：

1. H5 file API；
2. js导出csv
3. 利用HTML/HTML5中的download属性来实现数据csv文件导出
4. 填坑:前端导出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打开结果