JS 前端模擬數據生成xlsx文件

可用於純前端數據導出

例子：上傳大量圖片，獲取其圖片名稱，拼接成網絡的URL路徑，然後轉成URL編碼，文件不過只有一列。

 

下載按鈕點擊事件爲創建文件

 

    <el-dialog
      class="importDialog"
      title="導入"
      :visible.sync="dialogImportVisible"
      @closed="closeImportDialog"
    >
      <div class="uploadDialog">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreviewq"
          :on-remove="handleRemoveq"
          :before-upload="beforeUploadq"
          :before-remove="beforeRemoveq"
          :on-change="changeq"
          multiple
          :on-exceed="handleExceedq"
          :on-success="handleSuccessq"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">點擊上傳</el-button>
          <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeImportDialog">取消</el-button>
        <el-button type="primary" @click="upload">下載</el-button>
      </div>
    </el-dialog>

 

  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);
    }
}