快捷導航

Vue中xlsx的使用方法指南

更新時間：2023年07月28日 08:33:23 作者：落魄實習生

這篇文章主要給大家介紹了關(guān)于Vue中xlsx的使用方法指南,有很多辦法都可以實現(xiàn),其中最簡單的還是使用插件xlsx,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

一.安裝xlsx插件

npm install xlsx -S

二.導入excel(excel轉(zhuǎn)換為json)

1.創(chuàng)建工具類

utils文件夾下創(chuàng)建xlsx.js

/* 讀取文件 */
export const readFile = (file) => {
  return new Promise(resolve => {
    let reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = ev => {
      resolve(ev.target.result)
    }
  })
}

2.頁面中使用

值得注意的是再引用xlsx的時候vue3和vue2寫法不同

vue2：import xlsx from ‘xlsx’
vue3：import * as XLSX from ‘xlsx’

<template>
 <el-upload
            ref="uploadRef"
            class="upload-demo"
            action=""
            accept=".csv"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleUploadChange"
        >
          <el-button round icon="upload" type="primary" >Import</el-button>
        </el-upload>
</template>
<script>
import * as XLSX from 'xlsx'
import { readFile } from '../../utils/xlsx'
export default {
  data() {
    return {
    }
  },
  methods: {
    async handleUploadChange(file) {
      let dataBinary = await readFile(file.raw);
      let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
      let workSheet = workBook.Sheets[workBook.SheetNames[0]]
      const data = XLSX.utils.sheet_to_json(workSheet)
      console.log(data)//這里已經(jīng)能拿到轉(zhuǎn)換后的json
}
</script>```

三、導出excel(json轉(zhuǎn)excel格式導出)

1.安裝依賴

npm install xlsx@0.17.0 file-saver@2.0.5 --save

2.封裝工具類

值得注意的是再引用xlsx的時候vue3和vue2寫法不同

vue2：import xlsx from ‘xlsx’
vue3：import * as XLSX from ‘xlsx’

import fs from 'file-saver'
import * as XLSX from 'xlsx'
export function xlsx(json, fields, filename = '.xlsx') {//導出xlsx
  json.forEach(item => {
    for (let i in item) {
      if (fields.hasOwnProperty(i)) {
        item[fields[i]] = item[i];
      }
      delete item[i]; //刪除原先的對象屬性
    }
  })
  let sheetName = filename //excel的文件名稱
  let wb = XLSX.utils.book_new()  //工作簿對象包含一SheetNames數(shù)組，以及一個表對象映射表名稱到表對象。XLSX.utils.book_new實用函數(shù)創(chuàng)建一個新的工作簿對象。
  let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //將JS對象數(shù)組轉(zhuǎn)換為工作表。
  wb.SheetNames.push(sheetName)
  wb.Sheets[sheetName] = ws
  const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//設(shè)置表格的樣式
  let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //寫入的樣式
  let wbout = XLSX.write(wb, wopts)
  let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename + '.xlsx')
}
const s2ab = s => {
  var buf;
  if (typeof ArrayBuffer !== 'undefined') {
    buf = new ArrayBuffer(s.length)
    var view = new Uint8Array(buf)
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
    return buf
  } else {
    buf = new Array(s.length);
    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}

3.頁面中使用

<template>
  <div id="app">
    <div><el-button type="success" @click="outExcel">導出excel</el-button></div>
    <el-table
    :data="jsonData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="學號"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年齡">
    </el-table-column>
      <el-table-column
      prop="classes"
      label="學院">
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
import {xlsx} from './utils/xlsx'
export default {
  data() {
    return {
      jsonData:[{
        id:'1',
        name:'小智',
        age:18,
        classes:'商學院'
      },
      {
        id:'2',
        name:'小白',
        age:19,
        classes:'商學院'
      },
      {
        id:'3',
        name:'小藍',
        age:12,
        classes:'商學院'
      },
      {
        id:'4',
        name:'小花',
        age:14,
        classes:'商學院'
      },
      {
        id:'5',
        name:'小粉',
        age:15,
        classes:'商學院'
      },
      {
        id:'6',
        name:'小黃',
        age:16,
        classes:'商學院'
      },
      {
        id:'7',
        name:'小紅',
        age:17,
        classes:'商學院'
      },
      {
        id:'8',
        name:'小黑',
        age:19,
        classes:'商學院'
      },
      ],
      listHander:{
        id:'學號',
        name:'姓名',
        age:'年齡',
        classes:'學院'
      }
    }
  },
  methods: {
    outExcel(){
        // this.jsonData是要導出的數(shù)據(jù)內(nèi)容（表格里的內(nèi)容），
        // this.listHander對應(yīng)要導出內(nèi)容的表頭
        // 學生：指向的是excel文件名
      xlsx(this.jsonData,this.listHander,'學生')
    }
  },
}
</script>
<style>
</style>