js-vue使用xlsx实现导入导出

安装

npm install xlsx -S

代码内使用

import XLSX from 'xlsx'

导入导出

创建JsonToExcel.js文件模块

// 导入
function ImportExcel(files) {
  return new Promise((resolve, reject) => {
    // 通过FileReader对象读取文件
    const fileReader = new FileReader()
    fileReader.onload = event => {
      try {
        const { result } = event.target
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' })
        // 存储获取到的数据
        let data = []
        // 遍历每张工作表进行读取（这里默认只读取第一张表）
        for (const sheet in workbook.Sheets) {
          // esline-disable-next-line
          if (Object.prototype.hasOwnProperty.call(workbook.Sheets, sheet)) {
            // 利用 sheet_to_json 方法将 excel 转成 json 数据
            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
            // break; // 如果只取第一张表，就取消注释这行
          }
        }
        // 最终获取到并且格式化后的 json 数据
        // console.log(data);
        resolve({ name: files.name, data: data })
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        console.error(e)
      }
    }
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files.raw)
  })
}

// 导出
function exportExcel(data, name, sheetNames) {
  const wb = XLSX.utils.book_new()
  data.forEach((element, index) => {
    const sheet = XLSX.utils.json_to_sheet(element)
    XLSX.utils.book_append_sheet(wb, sheet, (sheetNames[index] || 'sheet' + (index + 1)))
  })
  const workbookBlob = workbook2blob(wb)
  openDownloadDialog(workbookBlob, name + '.xlsx')
}

function workbook2blob(workbook) {
  // 生成excel的配置项
  const wopts = {
    // 要生成的文件类型
    bookType: 'xlsx',
    // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    bookSST: false,
    type: 'binary'
  }
  const wbout = XLSX.write(workbook, wopts)
  // 将字符串转ArrayBuffer
  function s2ab(s) {
    const buf = new ArrayBuffer(s.length)
    const view = new Uint8Array(buf)
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
    return buf
  }
  const blob = new Blob([s2ab(wbout)], {
    type: 'application/octet-stream'
  })
  return blob
}

function openDownloadDialog(blob, fileName) {
  if (typeof blob === 'object' && blob instanceof Blob) {
    blob = URL.createObjectURL(blob) // 创建blob地址
  }
  const aLink = document.createElement('a')
  aLink.href = blob
  // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
  aLink.download = fileName || ''
  let event
  if (window.MouseEvent) event = new MouseEvent('click')
  //   移动端
  else {
    event = document.createEvent('MouseEvents')
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  }
  aLink.dispatchEvent(event)
}

export {
  exportExcel,
  ImportExcel
}

组件内使用

引入import { ImportExcel, exportExcel } from '@/utils/JsonToExcel'

<el-button @click="exportClick">导出</el-button>
<el-upload
 ref="upload"
 class="upload-demo"
 action="/"
 :auto-upload="false"
 :show-file-list="false"
 :on-change="importClick"
>
 <el-button slot="trigger" class="ml-10" size="mini" type="primary">导入</el-button>
</el-upload>

export default{
 //...
 methods:{
  // 导出
  exportClick() {
    const sheets = []
    const sheetNames = []
    const arr = [{
     '姓名'：'小胡',
     '年龄':28
    }]
    sheets.push(arr)
    sheetNames.push(`sheet1`)
    exportExcel(sheets, '文件名称', sheetNames)
  },
  // 导入
   ImportClick(file) {
     ImportExcel(file).then(res => {
       console.log(res.data)
       //执行数据渲染
     })
   },
 }
}