js 导入、导出CSV文件、处理中文乱码

最新推荐文章于 2024-06-18 10:49:09 发布

原创最新推荐文章于 2024-06-18 10:49:09 发布 · 3.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js 导入导出文件

本文介绍了一种使用JavaScript实现的CSV文件导出和导入的方法。导出功能将网页表格数据转换为CSV格式并下载，导入功能则读取CSV文件内容，将其解析为JavaScript对象数组。文章详细解释了代码实现过程，包括如何处理特殊字符和中文乱码问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//简要代码 
download: function() {
		//把页面上的一行行数据导出成csv格式文件
        let fileName = `(${new Date().getTime()}).csv`;
        let content = []; //\r\n 每行内容的分隔符
        //.exportTR需要导出的行
        [...this.$el.querySelectorAll(".exportTR")].forEach((item, index) => {
          let tr = []; //, 每列内容的分隔符
          //.exportTD 需要导出的列
          [...item.querySelectorAll(".exportTD")].forEach((item1, index1) => {
            tr.push('\t' + ('value' in item1 ? item1.value : item1.innerText).replace(/,/g, "").trim());//去除多余的逗号
          });
          content.push(tr.join(','));
        });
        var blob = new Blob(["\ufeff" + content.join('\r\n')], {
          type: 'application/vnd.ms-excel'
        }); //new Blob(["\ufeff"+content],{ type: 'application/vnd.ms-excel;charset=UTF-8'});"\ufeff"防止Excel打开时乱码， type 目前发现如果不指定，在ie裡面下載到的文件是無類型的
        var link = document.createElement("a");
        link.innerHTML = fileName;
        link.download = fileName;
        link.href = URL.createObjectURL(blob);
        let evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, true);
        link.dispatchEvent(evt);
      }
      loadFile: function() {
        var files = document.querySelector('#myfile').files;
        if(files.length) {
          let that = this;
          //csv每列对应的字段名
          let modelKey = ['goods_sn', 'product_sn_code', 'goods_name', 'areaname', 'able_number'];
          let file = files[0];
          let [extension] = file.name.split('.').reverse();//拿到文件的后缀名
          if(/excel+/.test(file.type) && /csv+/.test(extension)) { //判断文件类型
            var reader = new FileReader(); //new一个FileReader实例
            reader.onerror = function(data) {
                //"文件加載出錯，請檢查文件是否存在,並且正確"
            };
            reader.onload = function() {
              let tempList = [];
              let offest = 2; //跳過多少條開頭無用數據
              let tempArray1 = this.result.split('\r\n');
              tempArray1.slice(offest, tempArray1.length).forEach((item, index) => {
                let tempArray = item.replace(/\"/g, "").split(",");
                if(tempArray.length == modelKey.length) {
                  let tempOjb = {};
                  modelKey.forEach((item, index) => {
                  //index 对应CSV每列的下标
                    if(index < tempArray.length) tempOjb[item] = tempArray[index].trim();
                  });
                  tempList.push(tempOjb);
                }
              });
              if(tempList.length > 0) {
                  // "導入成功" 把CSV转成了数组tempList
              } else {
                 //"文件里沒有符合格式的內容"
              }
            };
            reader.readAsText(file, 'gb2312');//指定读取编码，防止中文乱码
          } else {
              // "文件類型錯誤，請選擇CSV文件"
          }
        }
      }