{{format('0')}} {{format('566')}} {{format('1094')}}

Vue + ElementUI 导出Excel表格数据 [ 技术杂谈 ]

九叶的小窝 文章 正文

As Long As You Love Me.
分享

九叶

{{nature("2021-05-28 12:41:49")}}更新
  1. 安装两个依赖
npm install --save xlsx file-saver

2.给需要导出的表格添加

id="out-table"

image.png

3.组件里头引入插件

import FileSaver from "file-saver";
import XLSX from "xlsx";

image.png

4.编写导出方法

    /** 导出为Excel */
    exportExcel() {
      /* 导出时使用原始格式,解决身份证手机号导出时变为科学计数法 */
      let xlsxParam = {raw:true}
      /* out-table关联表生成工作簿对象  */
      let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb,
        { bookType: 'xlsx',
          bookSST: true,
          type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }),
          //设置导出文件名称
          '卸点统计结算.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },
评论 0
0
{{userInfo.data?.nickname}}
{{userInfo.data?.email}}
TOP 2
Minecraft | [1.12.2] 核电工艺模拟器 1.2.25 —— 汉化版

{{nature('2021-12-07 15:29:00')}} {{format('2573')}}人已阅读

TOP 3
SSM搭建Spring单元测试环境

{{nature('2021-01-31 20:01:00')}} {{format('1111')}}人已阅读

TOP 4
dispatcher-servlet.xml文件配置模板

{{nature('2020-12-11 21:17:00')}} {{format('1023')}}人已阅读

TOP 5
Windows平台Nacos启动报错无法创建Bean实例

{{nature('2021-04-22 15:16:00')}} {{format('999')}}人已阅读

目录

标签云

Vue ElementUI

一言

# {{hitokoto.data.from || '来自'}} #
{{hitokoto.data.hitokoto || '内容'}}
作者:{{hitokoto.data.from_who || '作者'}}
自定义UI
配色方案

侧边栏