第四篇：VUE 利用 xlsx 和 file-saver 实现 Excel 表格的导入与导出

第四篇：VUE 利用 xlsx 和 file-saver 实现 Excel 表格的导入与导出

要点：本章在 xlsx 和 file-saver 基础上，简单的封装了方法，实现了 表格 Excel 的导出 与 导入。文件类型可支持 xlsx、csv 和 txt 。

页面的大致效果如下：

   

1. npm 安装 xlsx 和  file-saver

npm install xlsx --save
npm install file-saver --save

2. 封装的方法文件(可直接使用）

    2.1 工具类文件名： excel.js

import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

// 自动宽度计算
function AutoWidth(ws, arr) {
  // 设置worksheet每列的最大宽度
  const colWidth = arr.map(row =>
    row.map(val => {
      // 判断是否为null/undefined
      if (val == null) {
        return { wch: 10 }
      } else if (val.toString().charCodeAt(0) > 255) {
        // 判断是否为中文
        return { wch: val.toString().length * 2 }
      } else {
        return { wch: val.toString().length }
      }
    })
  )
  // 以第一行为初始值
  const result = colWidth[0]
  for (let i = 1; i < colWidth.length; i++) {
    for (let j = 0; j < colWidth[i].length; j++) {
      if (result[j].wch < colWidth[i][j].wch) {
        result[j].wch = colWidth[i][j].wch
      }
    }
  }
  ws['!cols'] = result
}

// 数组转换成JSON
function formatJSON(key, data) {
  return data.map(v =>
    key.map(i => {
      return v[i]
    })
  )
}

// 字符串转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
}

// 导出EXCEL表格
export function exportDataToExcel({
  header, // 表头名数组
  key, // 列对应字段数组
  data, // 需要导出数据的数组
  fileName, // 导出文件名
  autoWidth = true, // 是否自动宽度
  bookType = 'xlsx' // 导出文件格式
} = {}) {
  // 创建Workbook对象
  const wb = XLSX.utils.book_new()
  const arr = formatJSON(key, data)
  fileName = fileName || 'excel-list'
  arr.unshift(header)
  // 将数组数据转换为worksheet
  const ws = XLSX.utils.aoa_to_sheet(arr)
  if (autoWidth) {
    AutoWidth(ws, arr)
  }
  // 向Workbook对象中追加worksheet和fileName
  XLSX.utils.book_append_sheet(wb, ws, fileName)
  // 生成EXCEL的配置项
  const wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: 'binary'
  })
  // 浏览器下载
  saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream'
    }),
    `${fileName}.${bookType}`
  )
}