VUE element-ui 之table表格导出Excel功能封装（纯前端实现）_使用vue封装一个table标签的excel

2401_84447417

已于 2024-05-08 16:47:40 修改

阅读量648

点赞数 10

分类专栏：程序员文章标签：前端 vue.js ui

于 2024-05-08 16:47:38 首次发布

本文链接：https://blog.csdn.net/2401_84447417/article/details/138578047

版权

程序员专栏收录该内容

151 篇文章 0 订阅

订阅专栏

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer，也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容

需求：导出当前页面所有数据
步骤：
下载所需依赖：

npm install --save xlsx file-saver

引入依赖：
这里我进行了封装，由于很多页面都需要导出excel功能
js文件中引入依赖,进行导出方法封装：

import FileSaver from 'file-saver'
import XLSX from 'xlsx'
const utilWay = {
	 // 导出excel
  exportExcel(id, excelName) { //方法接收两个参数：table表格的id, 导出的excel命名
    // 生成Excel工作簿对象
    var xlsxParam = { raw: true } // 只导出不解析
    var wb = XLSX.utils.table\_to\_book(document.querySelector('#' + id), xlsxParam )
    // 获取二进制字符串作为输出
    var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    book: true,
    type: 'array'
    })
    try {
      FileSaver.saveAs(
      // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
      // File: 基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
        new Blob([wbout], { type: 'appliction/octet-stream' }),
        // 设置导出的文件名称
        `${excelName}` + '.xlsx'
      )
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, wbout)
    }
    // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
    return wbout
  }
}
export default utilWay

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道