使用vue实现导出Excel功能【纯前端】

这篇具有很好参考价值的文章主要介绍了使用vue实现导出Excel功能【纯前端】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

最近接手一个项目,其中一个需求是将查询出来table中的数据导出为Excel文件,并下载到本地。
问题来了,这种东西,不是应该后端去实现更好一些吗?如果放在前端做,要拿到全部数据,然后把这些数据进行解析,再进行一系列的骚操作转化成Excel文件,假如数据量少还好,万一数据量庞大,给我整个几万条,那浏览器岂不是卡死??(当然这只是我这枚小菜鸟的个人见解,如果有路过的大神有好的建议或者经验,还请赐教一下~~)

----------------------------------------------------废话分割线 -------------------------------------------------------------
言归正传,当我查了一些资料的时候,发现实现起来其实还是挺简单的,老规矩,不废话了,直接上代码!

解决方案:

1、装包:npm install xlsx file-saver --save
2、引入:import XLSX from ‘xlsx’

3、template中写一个button,doExport为点击事件,触发导出功能

<el-button
	type="primary"
	size="small"
	:loading="exportLoading"
	icon="el-icon-document"
	@click="doExport"
>导出Excel</el-button>

界面样式如下:
vue 前端导出excel,前端,vue.js,excel

4、methods代码如下:

	doExport() {
	  // 开始生成文件时,添加一个loading让它一直转,待生成excel完毕之后再关掉
      this.exportLoading = true
      // 关键函数
      function exportToExcel(fileName, tableData) {
        const worksheet = XLSX.utils.json_to_sheet(tableData)
        const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] }
        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
        const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
        FileSaver.saveAs(data, `${fileName}.xlsx`)
      }
      // fileName 为生成的 Excel 文件名称,为避免重复,这里使用时间戳作为前缀
      const fileName = moment().format('YYYY-MM-DD hh:mm:ss') + ' xxx信息数据'
	  // perPageSize 为请求数据的数量,由于需求方想要全部的数据,而前端又要分页,所以只能把这个参数设置成很大喽,如果出问题我也没办法~
      const params = {
        page: this.currentPage - 1,
        size: 100000,
        queryCondition: {
          area: this.searchForm.area,
          deviceType: this.searchForm.deviceType,
          hospitalName: this.searchForm.deviceCustomer,
          erpMaterialDescription: this.searchForm.erpMaterialDescription,
          deviceSerialNumber: this.searchForm.deviceSerialNumber,
          materialNumber: this.searchForm.materialNumber,
          workOrderCreatedTimeStart: this.searchForm.workOrderCreatedTime,
          workOrderCreatedTimeEnd: this.searchForm.workOrderCreatedTime,
          workOrderClosedTimeStart: this.searchForm.workOrderClosedTime,
          workOrderClosedTimeEnd: this.searchForm.workOrderClosedTime,
          workOrderNumber: this.searchForm.workOrderNumber,
          engineerName: this.searchForm.engineerName,
          warrantyStatus: this.searchForm.warrantyStatus,
          materialReplaceTimesLow: this.searchForm.materialReplaceTimesLow,
          materialReplaceTimesHigh: this.searchForm.materialReplaceTimesHigh
        }
      }
      console.log(params)
      const self = this
      ibMaterialApi.getIBMaterialTableData(params).then(res => {
        if (res.code === 200) {
          // 解析excel文件
          const excelData = []
          for (let i = 0; i < res.data.length; i++) {
            const excelObj = {}
            excelObj.序列号 = (i + 1).toString()
            excelObj.创建时间 = res.data[i].createTime === '0' ? '暂无数据' : res.data[i].createTime
            excelObj.物料号 = res.data[i].materialNumber
            excelObj.物料描述 = res.data[i].erpMaterialDescription
            excelObj.客户名称 = res.data[i].hospitalName
            excelObj.省份 = res.data[i].area
            excelObj.机型 = res.data[i].deviceType
            excelObj.整机序列号 = res.data[i].deviceSerialNumber
            excelObj.故障时间 = res.data[i].equipmentDowntime
            excelObj.故障描述 = res.data[i].diagnose
            excelObj.解决方案 = res.data[i].suggestionSolution ? res.data[i].suggestionSolution : '暂无数据'
            excelObj.旧件序列号 = res.data[i].oldSerialNumber ? res.data[i].oldSerialNumber : 'N.A'
            excelObj.保修状态 = res.data[i].warrantyStatus
            excelObj.工单号 = res.data[i].caseId
            excelData.push(excelObj)
          }
          console.log(excelData)
          exportToExcel(fileName, excelData)
          self.exportLoading = false
        } else {
          self.exportLoading = false
        }
      }).catch(() => {
        self.exportLoading = false
      })
	}

导出文件时,loading样式如下:
vue 前端导出excel,前端,vue.js,excel
文件下载成功!
vue 前端导出excel,前端,vue.js,excel
ok!至此就结束了,代码非常简单,亲测可用,cv即可~~
如果大家有什么更好的意见,欢迎批评指正!
文章来源地址https://www.toymoban.com/news/detail-695690.html

到了这里,关于使用vue实现导出Excel功能【纯前端】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue + js 实现导出excel

    下面是具体的步骤: **注意:**安装的时候注意版本号

    2024年02月12日
    浏览(36)
  • js 实现纯前端将数据导出excel两种方式

    将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下 通过将json遍历进行字符串拼接,将字符串输出到csv文件,代码如下

    2024年02月15日
    浏览(31)
  • vue 实现前端处理 “数组数据“ 转excel格式文件,并导出excel表格

    一、安装插件 XLSX 二、页面引入        希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

    2024年01月18日
    浏览(57)
  • 纯前端 —— 200行JS代码、实现导出Excel、支持DIY样式,纵横合并

    前期回顾 Vue3 + TS + Element-Plus 封装Tree组件 《亲测可用》_vue3+ts 组件封装-CSDN博客 https://blog.csdn.net/m0_57904695/article/details/131664157?spm=1001.2014.3001.5501 目录 具体思路: 1. 准备HTML结构 2. 定义CSS样式 3. 初始化表格数据 4. 创建表格函数createTable 5. 将表格添加到页面中 6. 导出表格为E

    2024年02月02日
    浏览(39)
  • Vue3 exceljs库实现前端导入导出Excel

    最近在开发项目时需要批量导入和导出Excel数据,在实现这个需求时,我们既可以在前端完成数据解析和文件生成工作,也可以通过前端发起导入以及导出请求后,后端实现解析文件流解析文件内容以及生成文件并提供下载链接的功能。 相较于后端处理Excel数据而言,使用前

    2024年03月14日
    浏览(46)
  • vue+xlsx实现前端模版下载、导入和导出excel文件

    产品需求:后端不想写下载,导入和导出的接口,让我们前端自己实现。 这里我们就可以用xlsx插件来实现,我们不多说了,先放一下实现的图片,下面我们分别把模版下载、导入和导出的代码放上来,想用的话,直接复制粘贴即可! 模版下载图片 导出图片: 好了,下面我

    2024年02月13日
    浏览(61)
  • 前端结合xlsx.js+xlsx-style.js源码实现自定义excel文件导出

          js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。 创建一个excel会经历以下过程: 创建一个工作薄 创建一个sheet 创建表格行列等

    2024年03月10日
    浏览(73)
  • 前端使用xlsx-js-style导出Excel文件并修饰单元格样式

    安装 导出 excel 较常见的 js 库是之一是 xlsx, xlsx 算是基础版本,不能对单元格进行样式(对齐方式、文字颜色、背景颜色等)的修饰,如果需要修饰单元格,可使用 xlsx-js-style 引入 需要导出的数据源 将数据源转成需要的二维数组 定义 Excel 表头 将定义好的表头添加到 body

    2023年04月08日
    浏览(46)
  • 后端接口返回文件流,前端实现docx/pdf/excel等类型文件的导出功能

    最近遇到一个需求,在后端返回文件流后前端需要实现导出docx类型的文件。在网上查看了一些资料总结了两种比较常用的方法。 1、封装接口 注意:接口需要添加 responseType: “blob”,否则会出现文件下载后无法打开或者损坏的情况。 2、转换数据格式 导出word文件,需要在创

    2024年01月21日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包