JS 前端模拟数据生成xlsx文件

可用于纯前端数据导出

例子：上传大量图片，获取其图片名称，拼接成网络的URL路径，然后转成URL编码，文件不过只有一列。

 

下载按钮点击事件为创建文件

 

    
      

        
          点击上传
          
只能上传jpg/png文件，且不超过500kb
        
      
      

        取消
        下载
      
    

 

  methods: {
// 文件全部上传成功
    handleSuccessq(response, file, fileList) {
      let nameArr = [];
      fileList.forEach(item => {
// 拼接网络url
        let filename = "http://10.10.20.95:9000/myavatar/" + item.name;
//转换成URL编码
        let avatar = encodeURI(filename);
//以对象形式添加到数组中
        nameArr.push({ avatar });
      });
      this.jsonData = nameArr;
    },
// 点击按钮生成并下载文件
    upload() {
      var jsonData = this.jsonData;
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格 let str = `avatar,name,sex,age\n`;
      let str = `avatar\n`;
      //增加\t为了不让表格显示科学计数法或者其他格式
      for (let i = 0; i < jsonData.length; i++) {
        for (let item in jsonData[i]) {
          str += `${jsonData[i][item] + "\t"},`;
        }
        str += "\n";
      }
      //encodeURIComponent解决中文乱码
      let uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
      //通过创建a标签实现
      var link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download = "json数据表.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
}