快捷導(dǎo)航

vue使用xlsx導(dǎo)入到表格中示例代碼

更新時(shí)間：2023年11月25日 10:01:53 作者：song19990524

這篇文章主要介紹了vue使用xlsx導(dǎo)入到表格中代碼,具體實(shí)現(xiàn)是先通過(guò)FileReader將上傳的文件讀取為二進(jìn)制數(shù)據(jù),然后使用xlsx將它解析成JSON數(shù)據(jù),最后將JSON數(shù)據(jù)填充到表格中,需要的朋友可以參考下

vue使用xlsx導(dǎo)入到表格中代碼

以下是使用xlsx導(dǎo)入表格的代碼示例：

安裝依賴包

npm install xlsx -S

引入xlsx和vue-xlsx

import * as XLSX from "xlsx";
import VueXlsx from "vue-xlsx";

在Vue組件中使用VueXlsx

<template>
  <div>
    <input type="file" @change="uploadFile">
    <table>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="(cell, idx) in row" :key="idx">{{ cell }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import * as XLSX from "xlsx";
import VueXlsx from "vue-xlsx";
export default {
  components: {
    VueXlsx,
  },
  data() {
    return {
      rows: [],
      columns: [],
    };
  },
  methods: {
    uploadFile(event) {
      const input = event.target;
      const reader = new FileReader();
      reader.onload = async () => {
        const data = reader.result;
        const workbook = XLSX.read(data, { type: "binary" });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        this.rows = json;
      };
      reader.readAsBinaryString(input.files[0]);
    },
  },
};
</script>

這個(gè)示例代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的表格，用戶可以通過(guò)選擇Excel文件上傳，然后表格會(huì)自動(dòng)填充。具體實(shí)現(xiàn)是先通過(guò)FileReader將上傳的文件讀取為二進(jìn)制數(shù)據(jù)，然后使用xlsx將它解析成JSON數(shù)據(jù)，最后將JSON數(shù)據(jù)填充到表格中。

在vue中使用XLSX庫(kù)實(shí)現(xiàn)Excel的導(dǎo)入導(dǎo)出

XLSX庫(kù)是個(gè)十分強(qiáng)大的利用前端js處理excel文檔的庫(kù)，官網(wǎng)：https://www.sheetjs.com/

vue中安裝即使用：

安裝

pnpm install xlsx
pnpm install xlsx-style-hzx //設(shè)置邊框與格式用

使用

 <div @click="exportExcel" style="width:40px;height:40px;position: absolute;z-index: 90000;background-color: red;">導(dǎo)出</div>

import XLSX from 'xlsx'
// 導(dǎo)入Excel
function importSchools(fileInput) {
  schools = []
  var files = fileInput.files;
  var fileReader = new FileReader();
  fileReader.onload = function (ev) {
    try {
      var data = ev.target.result
      var workbook = XLSX.read(data, {
        type: 'binary'
      }) // 以二進(jìn)制流方式讀取得到整份excel表格對(duì)象
    } catch (e) {
      console.log('文件類型不正確');
      return;
    }
    // 表格的表格范圍，可用于判斷表頭是否數(shù)量是否正確
    var fromTo = '';
    // 遍歷每張表讀取
    for (var sheet in workbook.Sheets) {
      if (workbook.Sheets.hasOwnProperty(sheet)) {
        fromTo = workbook.Sheets[sheet]['!ref'];
        var rows = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
        console.log('rows', rows)
        for (var i = 0; i < rows.length; i++) {
          var row = rows[i];
          if (i === 0) {
            const title = row['界面標(biāo)題']
            if (title) {
              document.getElementById('title').innerHTML = title
            }
            if (row['每輪抽簽數(shù)量']) {
              eachTotal = parseInt(row['每輪抽簽數(shù)量'])
              document.getElementById('eachTotal').value = eachTotal
            }
          }
          var name = row['學(xué)校名稱'];
          console.log('學(xué)校名稱:', name);
          schools.push({ number: (i+1), text: name})
        }
        if (schools.length) {
          document.getElementById('schoolsContainer').innerHTML = ''
          pushRecords(schools)
        }
        // console.log('schools', schools.value)
        break; // 如果只取第一張表，就取消注釋這行
      }
    }
    // 清空input file的值，確保下次再次觸發(fā)change事件
    fileInput.value = ''
  };
  // 以二進(jìn)制方式打開(kāi)文件
  fileReader.readAsBinaryString(files[0]);
}
// 導(dǎo)出Excel
function exportExcel() {
  console.log('XLSX', XLSX)
  let data = []
  data.push(['抽簽號(hào)', '學(xué)校名稱'])
  for (let i=0; i<10; i++) {
    data.push([(i + 1) + '', '學(xué)校A'])
  }
  let WorkSheet = XLSX.utils.aoa_to_sheet(data)
  // eslint-disable-next-line camelcase
  let new_workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '抽簽結(jié)果')
  XLSX.writeFile(new_workbook, `抽簽結(jié)果.xlsx`)
}

到此這篇關(guān)于vue使用xlsx導(dǎo)入到表格中代碼的文章就介紹到這了,更多相關(guān)vue使用xlsx導(dǎo)入到表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: