vue之Excel导出和导入

最新推荐文章于 2024-08-08 16:10:03 发布
最新推荐文章于 2024-08-08 16:10:03 发布
阅读量535 收藏 4
点赞数 1
分类专栏： Vue 文章标签： excel vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/117950769
版权
本文详细介绍了在Vue.js应用中如何实现Excel的导入和导出功能，包括封装导入Excel组件、页面中使用组件以及导出Excel的方法。同时，针对多级表头在导出时可能出现的排版错乱问题进行了分析，并给出了相应的解决方案。示例代码展示了如何处理Excel数据并展示在表格中，以及如何导出带有多级表头的Excel文件。
摘要由CSDN通过智能技术生成

vue之Excel导出和导入

vue之Excel导出和导入

Excel导入

注意：多级表头的Excel导出排版出现错乱

1、封装导入Excel组件

<template>
  <div>
    <input
      type="file"
      class="upFile"
      ref="fileExcel"
      accept=".xlsx, .xls"
      @change="uploadFile"
    />
    <el-button type="primary" @click="handleClick">导入</el-button>
  </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
  props: {
    breforeUpload: Function,
    onSuccess: Function
  },
  data() {
    return {
      excelList: {
        header: null,
        results: null
      }
    }
  },
  methods: {
    handleClick() {
      this.$refs.fileExcel.click()
    },
    generateData({ header, results }) {
      this.excelList.header = header
      this.excelList.results = results
      this.onSuccess && this.onSuccess(this.excelList)
    },
    uploadFile(e) {
      const file = e.target.files[0]
      this.$refs.fileExcel.value = null
      this.readData(file)
    },
    readData(file) {
      return new Promise(resolve => {
        const readfile = new FileReader()
        readfile.onload = e => {
          const data = e.target.result
          const workbook = XLSX.read(data, { type: 'array' })
          const firstSheetName = workbook.SheetNames[0]
          const worksheet = workbook.Sheets[firstSheetName]
          const header = this.getHeaderRow(worksheet)
          const results = XLSX.utils.sheet_to_json(worksheet)
          this.generateData({ header, results })
          resolve()
        }
        readfile.readAsArrayBuffer(file)
      })
    },
    getHeaderRow(sheet) {
      const headers = []
      const range = XLSX.utils.decode_range(sheet['!ref'])
      let C
      const R = range.s.r
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) {
        /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
        /* find the cell in the first row */
        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
      }
      return headers
    }
  }
}
</script>
<style lang="scss" scoped>
.upFile {
  display: none;
}
</style>

2、页面中使用

<template>
  <div class="excelIn">
    <el-card>
      <div slot="header">
        <span>导入表格</span>
      </div>
      <upload-excel :on-success="generateData"></upload-excel>
      <el-table
        :data="tabList"
        border
        stripe
        style="width: 100%;margin-top: 30px;"
      >
        <el-table-column
          v-for="item in tabHeader"
          :prop="item"
          :key="item"
          :label="item"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel'
export default {
  data() {
    return {
      tabList: [],
      tabHeader: []
    }
  },
  methods: {
    generateData({ header, results }) {
      this.tabHeader = header
      this.tabList = results
    }
  },
  components: {
    UploadExcel
  }
}
</script>
<style></style>

3、效果如下
在这里插入图片描述

Excel导出

<template>
  <div class="excelOut">
    <el-card>
      <div slot="header">
        <span>导出表格</span>
      </div>
      <el-input
        type="text"
        v-model="filename"
        placeholder="输入导出的文件名称"
        clearable
        class="wid300 mtrt20"
      ></el-input>
      <el-button type="primary" @click="excelDow" class="btnStyle1">导出</el-button>
      <el-table
        :data="tabList"
        border
        stripe
        style="width: 100%;margin-top: 30px;"
      >
        <el-table-column prop="id" label="序号" width="80"> </el-table-column>
        <el-table-column prop="date" label="出生日期"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="position" label="职业"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'excel-out',
  data() {
    return {
      tabList: [
        {
          id: 1,
          date: '1992-05-02',
          name: '王小虎',
          sex: '男',
          position: '医生',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          date: '1999-05-04',
          name: '小明',
          sex: '男',
          position: '老师',
          address: '北京市朝阳区'
        },
        {
          id: 3,
          date: '1980-05-01',
          name: '小敏',
          sex: '女',
          position: '护士',
          address: '上海市浦东区 1519 弄'
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '小黑',
          sex: '男',
          position: '学者',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          date: '2016-05-03',
          name: '小虎',
          sex: '男',
          position: '运动员',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 6,
          date: '2016-05-03',
          name: '小白',
          sex: '男',
          position: 'Java开发',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 7,
          date: '2016-05-03',
          name: '小牛',
          sex: '男',
          position: '前端开发',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 8,
          date: '2016-05-03',
          name: '小辉',
          sex: '男',
          position: '大数据开发',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 9,
          date: '2016-05-03',
          name: '小龙',
          sex: '男',
          position: '全栈开发',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 10,
          date: '2016-05-03',
          name: '小敏',
          sex: '女',
          position: '前台指导',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      autoWidth: true,
      bookType: 'xlsx',
      filename: ''
    }
  },
  methods: {
    excelDow() {
      import('@/vendor/Export2Excel.js').then(moudle => {
        const tHeader = ['序号', '日期', '姓名', '性别', '职业', '地址']
        const filterVal = ['id', 'date', 'name', 'sex', 'position', 'address']
        const list = this.tabList
        const data = this.formatJson(filterVal, list)
        moudle.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename === '' ? 'filename' : this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

引入文件 vendor / Export2Excel.js

安装必要的包

npm install -S file-saver
npm install -S xlsx
npm install -D script-loader

/* eslint-disable */
require('script-loader!file-saver')
import XLSX from 'xlsx'

function generateArray(table) {
  var out = []
  var rows = table.querySelectorAll('tr')
  var ranges = []
  for (var R = 0; R < rows.length; ++R) {
    var outRow = []
    var row = rows[R]
    var columns = row.querySelectorAll('td')
    for (var C = 0; C < columns.length; ++C) {
      var cell = columns[C]
      var colspan = cell.getAttribute('colspan')
      var rowspan = cell.getAttribute('rowspan')
      var cellValue = cell.innerText
      if (cellValue !== '' && cellValue == +cellValue) cellValue = +cellValue

      //Skip ranges
      ranges.forEach(function(range) {
        if (
          R >= range.s.r &&
          R <= range.e.r &&
          outRow.length >= range.s.c &&
          outRow.length <= range.e.c
        ) {
          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null)
        }
      })

      //Handle Row Span
      if (rowspan || colspan) {
        rowspan = rowspan || 1
        colspan = colspan || 1
        ranges.push({
          s: {
            r: R,
            c: outRow.length
          },
          e: {
            r: R + rowspan - 1,
            c: outRow.length + colspan - 1
          }
        })
      }

      //Handle Value
      outRow.push(cellValue !== '' ? cellValue : null)

      //Handle Colspan
      if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null)
    }
    out.push(outRow)
  }
  return [out, ranges]
}

function datenum(v, date1904) {
  if (date1904) v += 1462
  var epoch = Date.parse(v)
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}

function sheet_from_array_of_arrays(data, opts) {
  var ws = {}
  var range = {
    s: {
      c: 10000000,
      r: 10000000
    },
    e: {
      c: 0,
      r: 0
    }
  }
  for (var R = 0; R != data.length; ++R) {
    for (var C = 0; C != data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R
      if (range.s.c > C) range.s.c = C
      if (range.e.r < R) range.e.r = R
      if (range.e.c < C) range.e.c = C
      var cell = {
        v: data[R][C]
      }
      if (cell.v == null) continue
      var cell_ref = XLSX.utils.encode_cell({
        c: C,
        r: R
      })

      if (typeof cell.v === 'number') cell.t = 'n'
      else if (typeof cell.v === 'boolean') cell.t = 'b'
      else if (cell.v instanceof Date) {
        cell.t = 'n'
        cell.z = XLSX.SSF._table[14]
        cell.v = datenum(cell.v)
      } else cell.t = 's'

      ws[cell_ref] = cell
    }
  }
  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
  return ws
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook()
  this.SheetNames = []
  this.Sheets = {}
}

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
}

export function export_table_to_excel(id) {
  var theTable = document.getElementById(id)
  var oo = generateArray(theTable)
  var ranges = oo[1]

  /* original data */
  var data = oo[0]
  var ws_name = 'SheetJS'

  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data)

  /* add ranges to worksheet */
  // ws['!cols'] = ['apple', 'banan'];
  ws['!merges'] = ranges

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name)
  wb.Sheets[ws_name] = ws

  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  })

  saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream'
    }),
    'test.xlsx'
  )
}

export function export_json_to_excel({
  multiHeader = [],
  header,
  data,
  filename,
  merges = [],
  autoWidth = true,
  bookType = 'xlsx'
} = {}) {
  /* original data */
  filename = filename || 'excel-list'
  data = [...data]
  data.unshift(header)

  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }

  var ws_name = 'SheetJS'
  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data)

  if (merges.length > 0) {
    if (!ws['!merges']) ws['!merges'] = []
    merges.forEach(item => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }

  if (autoWidth) {
    /*设置worksheet每列的最大宽度*/
    const colWidth = data.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
          }
        }
      })
    )
    /*以第一行为初始值*/
    let 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
  }

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name)
  wb.Sheets[ws_name] = ws

  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: 'binary'
  })
  saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream'
    }),
    `${filename}.${bookType}`
  )
}

Excel多级表头导出

<template>
  <div class="excelOut">
    <el-card>
      <div slot="header">
        <span>导出表格</span>
      </div>
      <el-input
        type="text"
        v-model="filename"
        placeholder="输入导出的文件名称"
        clearable
        class="wid300 mtrt20"
      ></el-input>
      <el-button type="primary" @click="excelDow" class="btnStyle1"
        >导出</el-button
      >
      <el-table
        :data="tabList"
        border
        stripe
        style="width: 100%;margin-top: 30px;"
      >
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column label="配送信息">
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column label="地址">
            <el-table-column prop="province" label="省份"> </el-table-column>
            <el-table-column prop="city" label="市区"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="zip" label="邮编"> </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="date" label="日期"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          id: 1,
          date: '2019-06-14',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: 2,
          date: '2020-06-16',
          name: '小明',
          province: '北京',
          city: '朝阳区',
          address: '西坝河小区',
          zip: 200334
        },
        {
          id: 3,
          date: '1999-11-17',
          name: '小敏',
          province: '广东',
          city: '广州市',
          address: '天河区',
          zip: 9528012
        },
        {
          id: 4,
          date: '2021-06-16',
          name: '小黑',
          province: '广东',
          city: '深圳市',
          address: '南山区',
          zip: 9527012
        },
        {
          id: 5,
          date: '2021-06-16',
          name: '小虎',
          province: '重庆',
          city: '重庆市',
          address: '那个区',
          zip: 500567
        },
        {
          id: 6,
          date: '2021-06-16',
          name: '小牛',
          province: '河南',
          city: '商丘市',
          address: '睢阳区',
          zip: 411423
        },
        {
          id: 7,
          date: '2021-06-16',
          name: '小谭',
          province: '山东',
          city: '德州市',
          address: '德诚区',
          zip: 5115789
        },
        {
          id: 8,
          date: '2021-06-16',
          name: '小白',
          province: '云南',
          city: '大理市',
          address: '那个湾',
          zip: 985211
        }
      ],
      autoWidth: true,
      bookType: 'xlsx',
      filename: ''
    }
  },
  methods: {
    excelDow() {
      import('@/vendor/Export2Excel.js').then(moudle => {
        const multiHeader = [
          ['序号', '配送信息', '', '', '', '', '日期'],
          ['', '姓名', '地址', '', '', '', '']
        ]
        const tHeader = ['', '', '省份', '市区', '地址', '邮编', '']
        const filterVal = [
          'id',
          'name',
          'province',
          'city',
          'address',
          'zip',
          'date'
        ]
        const list = this.tabList
        const data = this.formatJson(filterVal, list)
        const merges = ['A1:A3', 'B1:F1', 'G1:G3', 'B2:B3', 'C2:F2']
        moudle.export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: this.filename === '' ? 'filename' : this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

在这里插入图片描述

效果如下
在这里插入图片描述

牛先森家的牛奶
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用xlsx读取Excel文件
灰羊驼丶的博客
03-10 1124
vue使用xlsx读取Excel文件 <template> <el-upload action="#" :auto-upload="false" :on-change="onChange" :limit="1" :show-file-list="false" accept=".xls,.xlsx"> <el-button size="medium"
Vue导出Excel表格数据
wuchenyu2的博客
12-17 546
背景：现在的项目需要做这个功能，之前没有处理过，记录下来方便查看。 第一步：安装依赖包 npm install file-saver npm install xlsx npm install script-loader 第二步：新建js文件夹，也可以命名为excel，用于存放Blob.js和Export2Excel.js两个js文件 第三步：具体的使用方法 主要是两个方法，之前我看的是...
vue3中使用xlsx库读取Excel数据
zerolea的博客
06-28 676
FileReader是一个web api（浏览器提供），用于异步读取文件内容，可以将文件内容读取为不同的格式，包括文本（readAsText）二进制字符串（readAsBinaryString）
vue中使用xlsx读取excel文件
捂耳听风的博客
01-12 4802
可以发现fileList是一个类数组，由传入的file对象组成。每个file对象包含一下属性：
vue-使用js-xlsx读取excel数据（二）
花落微凉梦清幽的博客
11-29 8654
安装：npm install xlsx --save 引入：import XLSX from 'xlsx' 布局，使用elementUI上传组件： &lt;el-upload         ref="upload"         action="/"         :show-file-list="false"         :on-change="importExcel"    ...
前端vue+xlsx读取xlsx文件并处理所得数据
DcynotFound的博客
01-04 2022
话不多说直接上代码 <input @change="getUploadFile" type="file" class="inputDevice"/> getUploadFile(e){ console.log('数据改变',e); let fileName = e.target.files[0] let reader = new Fil...
Vue结合后台导入导出Excel问题详解
10-17
在Vue.js开发中，实现Excel的导入导出功能是一项常见的需求。本文将深入探讨如何在Vue项目中结合后台服务实现这一功能，特别是针对导出Excel的实现方式。 首先，我们来看一下导出Excel的核心概念。在Java后端，通常...
vue-excel导入导出
03-27
简单的vue前端excel导入导出组件,结合element-ui.包含导出字段选择,导入字段校验。由于源码和项目结合使用，部分字典，校验工具类需要和自己项目做适配。 项目需要引入：script-loader，xlsx，file-saver，不懂可...
SpringBoot+AntDesignVue实现excel导入功能
07-20
描述： 该文章旨在介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能，该功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的功能。 标签： SpringBoot AntDesignVue excel 实现 ...
vue excel导入导出.zip
08-05
在这个压缩包中，我们可能找到了一个简单的实现示例，名为"vue excel导入导出.zip"，它可能包含了一个Vue项目，专门用于演示如何在Vue应用程序中实现Excel文件的读取和写入功能。 首先，要实现Excel文件的导入，Vue...
使用vue实现excel导入和导出功能
11-09
在Vue.js应用中，实现Excel导入和导出功能可以极大地提升用户体验，特别是在处理大量数据时。Vue本身并不直接支持Excel操作，但我们可以借助第三方库来实现这一目标。本篇文章将详细讲解如何使用Vue来实现Excel的...
vue读取excel表格内容
weixin_46058007的博客
05-15 1763
vue项目读取excel文件内容，安装xlsx第三方工具
Vue引入XLSX库，调用XLSX.read方法报错
最新发布
m0_46893049的博客
08-08 309
解决方案：将引入方式。
vue导出excel功能实现
weixin_42712370的博客
07-04 8950
vue导出excel功能实现第一步安装依赖包第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件第三步在你那个组件中使用写事件方法Export2Excel.js文件Blob.js文件 第一步安装依赖包 cnpm install file-saver cnpm install xlsx cnpm install script-loader 第二步在...
vue 导入excel插件_vue使用xlsx插件读取上传的Excel数据为json格式
weixin_29783407的博客
02-22 1367
我是借鉴使用h5的示例代码，完成这个功能的，先将h5代码奉上：var wb;//读取完成的数据var rABS = false; //是否将文件读取为二进制字符串function importf(obj) {//导入// console.log(obj)if(!obj.files) {return;}var f = obj.files[0];// console.log(obj)console.l...
vue-json-excel前端导出excel
weixin_45658885的博客
09-27 203
vue-json-excel前端导出excel 下载vue-json-excel npm install vue-json-excel -S mian.js引入 import JsonExcel from ‘vue-json-excel’ 注册组件downloadExcel Vue.component(‘downloadExcel’, JsonExcel) 页面引入 <download-excel class="export-excel-wrapper" :data="table
vue实现excel文件的导入和读取
bu_xiang_tutou的博客
03-12 5312
上传数据前上传数据后或者。
解决vue使用xlsx不能读取未编辑的Excel表格数据
qq_43557848的博客
03-11 355
最近写项目需要读取Excel表格数据，用到了xlsx，很好获取，一开始我也没注意（一直用的就是已经编辑过的表格）这个一下子就获取到了数据，然后就开始处理数据，最后部署完毕，我在其他电脑上试了一下，才发现不能读取未编辑的表格数据，当时给急死了，明天就要交项目，后来解决了这个问题，记录一下，解决方式如下：
vue excel 导入导出
05-24
Vue 中可以使用第三方库 `xlsx` 来实现 Excel 导入导出的功能。 首先，需要在项目中安装 `xlsx`： ``` npm install xlsx --save ``` 然后，在需要使用 Excel 导入导出功能的组件中，引入 `xlsx`： ```javascript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值