vue中使用xlsx导入导出表格的两种方法

- ## vue文件中直接写函数，完成的测试

1). 安装xlsx，

yarn add xlsx   

   
   
    
    

   
   
    
    

     
     
1
    
    

2). importExcel.vue(实现了 导入表格 )

<template>
  <div class="hello">
    <el-upload
    class="upload-demo" ref="upload" accept=".xls,.xlsx"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-change="upload"
    :show-file-list="false"
    :auto-upload="false"
    >
    <!-- 导入的excel表格和展示的表头名el-table的prop对应 -->
      <el-button slot="trigger" size="large">导入excel</el-button>
    </el-upload>
   <el-table :data="tabData" style="width: 50%">
     <el-table-column prop="姓名" label="姓名" width="100"></el-table-column>
     <el-table-column prop="年龄" label="年龄" width="100"></el-table-column>
     <el-table-column prop="性别" label="性别" width="100"></el-table-column>
   </el-table>
  </div>
</template>
<script>
import XLSX from 'xlsx'
// import Sortable from 'sortablejs' // 该插件用于实现表格可拖拽功能，可不用，它相关的都注释了; 如果将其放开，需要在项目中安装sortablejs 插件；npm install sortablejs --save
export default {
      
      
  data () {
      
      
    return {
      
      
      tabData: []
    }
  },
  mounted () {
      
      
    // this.implDropTable()
  },
  methods: {
      
      
    // implDropTable () {
      
      
    //   const table = document.querySelector('.el-table__body-wrapper tbody')
    //   const self = this
    //   Sortable.create(table, {
      
      
    //     onEnd ({ newIndex, oldIndex }) {
      
      
    //       const targetRow = self.tabData.splice(oldIndex, 1)[0]
    //       console.log(targetRow, 'targetrow')
    //       // here
    //       self.tabData.splice(newIndex, 1, targetRow)
    //     }
    //   })
    // },
    upload (file, fileList) {
      
      
      console.log(file, 'file')
      console.log(fileList, 'fileList')
      let files = {
      
       0: file.raw }// 取到File
      this.readExcel(files)
    },
    readExcel (files) {
      
       // 表格导入
      var that = this
      console.log(files)
      if (files.length <= 0) {
      
       // 如果没有文件名
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
      
      
        this.$Message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }
      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
      
      
        try {
      
      
          const data = ev.target.result
          const workbook = XLSX.read(data, {
      
      
            type: 'binary'
          })
          const wsname = workbook.SheetNames[0]// 取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])// 生成json表格内容
          console.log(ws, 'ws是表格里的数据，且是json格式')
          this.tabData = ws
          console.log(this.tabData, 'tabdata')
          // 重写数据
          this.$refs.upload.value = ''
        } catch (e) {
      
      
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
    }
  }
}
导入的表格如图（电脑上的excel文件）：
 
 导入后的效果如图：
 
 3）. exportExcel.vue （实现了导出表格）；
 可直接复制了测试，使用 的前提是安装了element.
 
<template>
  <div class="export-excel-bg">
    <h1>This is an test page</h1>
        <el-button @click="exportBtn">导出Excel</el-button> 
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
       
       
  name: 'export-excel',
  methods: {
       
       
    workbook2blob (workbook) {
       
       
    // 生成excel的配置项
      var wopts = {
       
       
        // 要生成的文件类型
        bookType: 'xlsx',
        // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        bookSST: false,
        type: 'binary'
      }
      var wbout = XLSX.write(workbook, wopts)
      // 将字符串转ArrayBuffer
      function s2ab (s) {
       
       
        var 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
      }
      let buf = s2ab(wbout)
      var blob = new Blob([buf], {
       
       
        type: 'application/octet-stream'
      })
      return blob
    },
    // 将blob对象 创建bloburl,然后用a标签实现弹出下载框
    openDownloadDialog (blob, fileName) {
       
       
      if (typeof blob === 'object' && blob instanceof Blob) {
       
       
        blob = URL.createObjectURL(blob) // 创建blob地址
      }
      var aLink = document.createElement('a')
      aLink.href = blob
      // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
      aLink.download = fileName || ''
      var 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)
    },
    exportBtn () {
       
       
      this.exportExcel()
    },
    exportExcel () {
       
       
      let sheet1data = [{
       
        department: '行政部', count: 2 }, {
       
        department: '前端部', count: 3 }]
      let sheet2data = [{
       
        name: '张三', do: '整理文件' }, {
       
        name: '李四', do: '打印' }]
      let sheet3data = [{
       
        name: '王五', do: 'Vue' }, {
       
        name: '二楞', do: 'react' }]
      var sheet1 = XLSX.utils.json_to_sheet(sheet1data)
      var sheet2 = XLSX.utils.json_to_sheet(sheet2data)
      var sheet3 = XLSX.utils.json_to_sheet(sheet3data)
      console.log(sheet1, sheet2, sheet3, 'sheet123')
      // 创建一个新的空的workbook
      var wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, sheet1, '部门统计')
      XLSX.utils.book_append_sheet(wb, sheet2, '行政部')
      XLSX.utils.book_append_sheet(wb, sheet3, '前端部')
      const workbookBlob = this.workbook2blob(wb)
      this.openDownloadDialog(workbookBlob, '部门统计.xlsx')
    }
  }
}
</script>
页面效果如图：
 
 打印结果如图：
 
 导出的数据效果：
 
 
- ## 参考 网上的导入导出代码，示例如下：测试成功
 
1. 安装xlsx
 
yarn add xlsx

     
     
      
      

     
     
      
      

       
       
1
      
      
 
2. 封装并使用
 dealwithExcelUtil.js 在 封装在**src**下的utils文件夹下
 
dealwithExcelUtil.js
 
import XLSX from 'xlsx';
/**   注意：导出的时候，headers中的key值 与data 中每一个item的属性名一一对应，最终表格显示的是data的每一个item的属性值。
 * 导出Excel的处理函数--针对table
 * @param {Array} headers: [{key: 'name', title: '姓名'}, {key: 'grad', title: '年级'},{key:'department',title:'部门'}]
 * @param {Array} data   : [{ name: '张三', grade: '2017级',department:'前端部门'},{ name: '李四', grade: '2017级',department:'java部门'}]
 * @param {String} fileName: '导出结果.xlsx' // 默认的文件名
 * */
import XLSX from 'xlsx'
function importExcel (file) {
        
        
  // 获取上传的文件对象
  const {
        
         files } = file.target
  // 通过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) {
        
        
        if (workbook.Sheets.hasOwnProperty(sheet)) {
        
        
          // 利用 sheet_to_json 方法将 excel 转成 json 数据
          data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
          // break; // 如果只取第一张表，就取消注释这行
        }
      }
      console.log(data) // 这里拿到的是，导入的table里的数据，数组对象格式；[{姓名: "张三", 年级: "2017级", 部门: "前端部门", __rowNum__: 1},{姓名: "李四", 年级: "2017级", 部门: "程序部门", __rowNum__: 2}]
      return data
    } catch (e) {
        
        
      // 这里可以抛出文件类型错误不正确的相关提示
      console.log('文件类型不正确')
    }
  }
  // 以二进制方式打开文件
  fileReader.readAsBinaryString(files[0])
}
function exportExcel (headers, data, fileName = '导出结果.xlsx') {
        
        
  const _headers = headers
    .map((item, i) => Object.assign({
        
        }, {
        
         key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))
    .reduce((prev, next) => Object.assign({
        
        }, prev, {
        
         [next.position]: {
        
         key: next.key, v: next.title } }), {
        
        })
  const _data = data
    .map((item, i) => headers.map((key, j) => Object.assign({
        
        }, {
        
         content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) })))
  // 对刚才的结果进行降维处理（二维数组变成一维数组）
    .reduce((prev, next) => prev.concat(next))
  // 转换成 worksheet 需要的结构
    .reduce((prev, next) => Object.assign({
        
        }, prev, {
        
         [next.position]: {
        
         v: next.content } }), {
        
        })
  // 合并 headers 和 data
  const output = Object.assign({
        
        }, _headers, _data)
  // 获取所有单元格的位置
  const outputPos = Object.keys(output)
  // 计算出范围 ,["A1",..., "H2"]
  const ref = `${
          
          outputPos[0]}:${
          
          outputPos[outputPos.length - 1]}`
  // 构建 workbook 对象
  const wb = {
        
        
    SheetNames: ['mySheet'],
    Sheets: {
        
        
      mySheet: Object.assign(
        {
        
        },
        output,
        {
        
        
          '!ref': ref,
          '!cols': [{
        
         wpx: 45 }, {
        
         wpx: 100 }, {
        
         wpx: 200 }, {
        
         wpx: 80 }, {
        
         wpx: 150 }, {
        
         wpx: 100 }, {
        
         wpx: 300 }, {
        
         wpx: 300 }]
        }
      )
    }
  }
  // 导出 Excel
  XLSX.writeFile(wb, fileName)
}
export default {
        
         importExcel, exportExcel }

testExcel.vue

<template>
   <div>
        <el-button @click="useExportUtil">用封装的导出工具导出excel</el-button>
        <el-button > 导入Excel<input type="file" accept=".xlsx,.xls" @change="useImportUtil"></el-button>
   </div>
</template>
<script>
import excelUtil from '@/utils/dealwithExcelUtil.js' // *** 引入 刚刚的封装的dealwithExcelUtil.js文件。
export default {
    
    
  methods: {
    
    
    useImportUtil (e) {
    
    
      excelUtil.importExcel(e)
    },
    useExportUtil () {
    
    
      const initColumn = [{
    
    
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        className: 'text-monospace'
      }, {
    
    
        title: '年级',
        dataIndex: 'grade',
        key: 'grade'
      }, {
    
    
        title: '部门',
        dataIndex: 'department',
        key: 'department'
      }]
      let attendanceInfoList = [
        {
    
    
          name: '张三',
          grade: '2017级',
          department: '前端部门'
        },
        {
    
    
          name: '李四',
          grade: '2017级',
          department: '程序部门'
        }]
      excelUtil.exportExcel(initColumn, attendanceInfoList, '最新人员名单.xlsx')
    }
  }
}
</script>

页面效果如图：

导出的表格，效果、数据如图：

（ 将导出的表格直接导入后 ）导入的表格，打印如下：

参考了：https://www.cnblogs.com/MrZhujl/p/11720923.html 和 https://blog.csdn.net/qq_33603809/article/details/91880948

- ## vue文件中直接写函数，完成的测试

1). 安装xlsx，

yarn add xlsx   

   
   
  
  

   
   
  
  

   
   
1
  
  

2). importExcel.vue(实现了 导入表格 )

扫描二维码关注公众号，回复： 17093928 查看本文章

<template>
  <div class="hello">
    <el-upload
    class="upload-demo" ref="upload" accept=".xls,.xlsx"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-change="upload"
    :show-file-list="false"
    :auto-upload="false"
    >
    <!-- 导入的excel表格和展示的表头名el-table的prop对应 -->
      <el-button slot="trigger" size="large">导入excel</el-button>
    </el-upload>
   <el-table :data="tabData" style="width: 50%">
     <el-table-column prop="姓名" label="姓名" width="100"></el-table-column>
     <el-table-column prop="年龄" label="年龄" width="100"></el-table-column>
     <el-table-column prop="性别" label="性别" width="100"></el-table-column>
   </el-table>
  </div>
</template>
<script>
import XLSX from 'xlsx'
// import Sortable from 'sortablejs' // 该插件用于实现表格可拖拽功能，可不用，它相关的都注释了; 如果将其放开，需要在项目中安装sortablejs 插件；npm install sortablejs --save
export default {
    
    
  data () {
    
    
    return {
    
    
      tabData: []
    }
  },
  mounted () {
    
    
    // this.implDropTable()
  },
  methods: {
    
    
    // implDropTable () {
    
    
    //   const table = document.querySelector('.el-table__body-wrapper tbody')
    //   const self = this
    //   Sortable.create(table, {
    
    
    //     onEnd ({ newIndex, oldIndex }) {
    
    
    //       const targetRow = self.tabData.splice(oldIndex, 1)[0]
    //       console.log(targetRow, 'targetrow')
    //       // here
    //       self.tabData.splice(newIndex, 1, targetRow)
    //     }
    //   })
    // },
    upload (file, fileList) {
    
    
      console.log(file, 'file')
      console.log(fileList, 'fileList')
      let files = {
    
     0: file.raw }// 取到File
      this.readExcel(files)
    },
    readExcel (files) {
    
     // 表格导入
      var that = this
      console.log(files)
      if (files.length <= 0) {
    
     // 如果没有文件名
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
    
    
        this.$Message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }
      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
    
    
        try {
    
    
          const data = ev.target.result
          const workbook = XLSX.read(data, {
    
    
            type: 'binary'
          })
          const wsname = workbook.SheetNames[0]// 取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])// 生成json表格内容
          console.log(ws, 'ws是表格里的数据，且是json格式')
          this.tabData = ws
          console.log(this.tabData, 'tabdata')
          // 重写数据
          this.$refs.upload.value = ''
        } catch (e) {
    
    
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
    }
  }
}
导入的表格如图（电脑上的excel文件）：
 
 导入后的效果如图：
 
 3）. exportExcel.vue （实现了导出表格）；
 可直接复制了测试，使用 的前提是安装了element.
 
<template>
  <div class="export-excel-bg">
    <h1>This is an test page</h1>
        <el-button @click="exportBtn">导出Excel</el-button> 
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
     
     
  name: 'export-excel',
  methods: {
     
     
    workbook2blob (workbook) {
     
     
    // 生成excel的配置项
      var wopts = {
     
     
        // 要生成的文件类型
        bookType: 'xlsx',
        // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        bookSST: false,
        type: 'binary'
      }
      var wbout = XLSX.write(workbook, wopts)
      // 将字符串转ArrayBuffer
      function s2ab (s) {
     
     
        var 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
      }
      let buf = s2ab(wbout)
      var blob = new Blob([buf], {
     
     
        type: 'application/octet-stream'
      })
      return blob
    },
    // 将blob对象 创建bloburl,然后用a标签实现弹出下载框
    openDownloadDialog (blob, fileName) {
     
     
      if (typeof blob === 'object' && blob instanceof Blob) {
     
     
        blob = URL.createObjectURL(blob) // 创建blob地址
      }
      var aLink = document.createElement('a')
      aLink.href = blob
      // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
      aLink.download = fileName || ''
      var 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)
    },
    exportBtn () {
     
     
      this.exportExcel()
    },
    exportExcel () {
     
     
      let sheet1data = [{
     
      department: '行政部', count: 2 }, {
     
      department: '前端部', count: 3 }]
      let sheet2data = [{
     
      name: '张三', do: '整理文件' }, {
     
      name: '李四', do: '打印' }]
      let sheet3data = [{
     
      name: '王五', do: 'Vue' }, {
     
      name: '二楞', do: 'react' }]
      var sheet1 = XLSX.utils.json_to_sheet(sheet1data)
      var sheet2 = XLSX.utils.json_to_sheet(sheet2data)
      var sheet3 = XLSX.utils.json_to_sheet(sheet3data)
      console.log(sheet1, sheet2, sheet3, 'sheet123')
      // 创建一个新的空的workbook
      var wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, sheet1, '部门统计')
      XLSX.utils.book_append_sheet(wb, sheet2, '行政部')
      XLSX.utils.book_append_sheet(wb, sheet3, '前端部')
      const workbookBlob = this.workbook2blob(wb)
      this.openDownloadDialog(workbookBlob, '部门统计.xlsx')
    }
  }
}
</script>
页面效果如图：
 
 打印结果如图：
 
 导出的数据效果：
 
 
- ## 参考 网上的导入导出代码，示例如下：测试成功
 
1. 安装xlsx
 
yarn add xlsx

     
     
    
    

     
     
    
    

     
     
1
    
    
 
2. 封装并使用
 dealwithExcelUtil.js 在 封装在**src**下的utils文件夹下
 
dealwithExcelUtil.js
 
import XLSX from 'xlsx';
/**   注意：导出的时候，headers中的key值 与data 中每一个item的属性名一一对应，最终表格显示的是data的每一个item的属性值。
 * 导出Excel的处理函数--针对table
 * @param {Array} headers: [{key: 'name', title: '姓名'}, {key: 'grad', title: '年级'},{key:'department',title:'部门'}]
 * @param {Array} data   : [{ name: '张三', grade: '2017级',department:'前端部门'},{ name: '李四', grade: '2017级',department:'java部门'}]
 * @param {String} fileName: '导出结果.xlsx' // 默认的文件名
 * */
import XLSX from 'xlsx'
function importExcel (file) {
      
      
  // 获取上传的文件对象
  const {
      
       files } = file.target
  // 通过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) {
      
      
        if (workbook.Sheets.hasOwnProperty(sheet)) {
      
      
          // 利用 sheet_to_json 方法将 excel 转成 json 数据
          data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
          // break; // 如果只取第一张表，就取消注释这行
        }
      }
      console.log(data) // 这里拿到的是，导入的table里的数据，数组对象格式；[{姓名: "张三", 年级: "2017级", 部门: "前端部门", __rowNum__: 1},{姓名: "李四", 年级: "2017级", 部门: "程序部门", __rowNum__: 2}]
      return data
    } catch (e) {
      
      
      // 这里可以抛出文件类型错误不正确的相关提示
      console.log('文件类型不正确')
    }
  }
  // 以二进制方式打开文件
  fileReader.readAsBinaryString(files[0])
}
function exportExcel (headers, data, fileName = '导出结果.xlsx') {
      
      
  const _headers = headers
    .map((item, i) => Object.assign({
      
      }, {
      
       key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))
    .reduce((prev, next) => Object.assign({
      
      }, prev, {
      
       [next.position]: {
      
       key: next.key, v: next.title } }), {
      
      })
  const _data = data
    .map((item, i) => headers.map((key, j) => Object.assign({
      
      }, {
      
       content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) })))
  // 对刚才的结果进行降维处理（二维数组变成一维数组）
    .reduce((prev, next) => prev.concat(next))
  // 转换成 worksheet 需要的结构
    .reduce((prev, next) => Object.assign({
      
      }, prev, {
      
       [next.position]: {
      
       v: next.content } }), {
      
      })
  // 合并 headers 和 data
  const output = Object.assign({
      
      }, _headers, _data)
  // 获取所有单元格的位置
  const outputPos = Object.keys(output)
  // 计算出范围 ,["A1",..., "H2"]
  const ref = `${
        
        outputPos[0]}:${
        
        outputPos[outputPos.length - 1]}`
  // 构建 workbook 对象
  const wb = {
      
      
    SheetNames: ['mySheet'],
    Sheets: {
      
      
      mySheet: Object.assign(
        {
      
      },
        output,
        {
      
      
          '!ref': ref,
          '!cols': [{
      
       wpx: 45 }, {
      
       wpx: 100 }, {
      
       wpx: 200 }, {
      
       wpx: 80 }, {
      
       wpx: 150 }, {
      
       wpx: 100 }, {
      
       wpx: 300 }, {
      
       wpx: 300 }]
        }
      )
    }
  }
  // 导出 Excel
  XLSX.writeFile(wb, fileName)
}
export default {
      
       importExcel, exportExcel }