vue 使用xlsx导出文件功能导出表格文件

最新推荐文章于 2025-07-03 17:28:59 发布

原创最新推荐文章于 2025-07-03 17:28:59 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

js 同时被 2 个专栏收录

44 篇文章

订阅专栏

vue

19 篇文章

订阅专栏

本文介绍如何在Vue项目中利用xlsx库实现表格数据导出功能。通过安装必要依赖、编写导出函数并配置样式，最终实现从JSON数据生成Excel文件。

vue 使用xlsx导出文件功能导出表格文件

1、安装

npm install xlsx@0.17.0 file-saver@2.0.5 --save

2、创建js文件

 import fs from 'file-saver'
  import XLSX from 'xlsx'
   
   
  export function xlsx(json, fields, filename = '.xlsx') {//导出xlsx
    json.forEach(item => {
      for (let i in item) {
        if (fields.hasOwnProperty(i)) {
          item[fields[i]] = item[i];
        }
        delete item[i]; //删除原先的对象属性
      }
    })
    let sheetName = filename //excel的文件名称
    let wb = XLSX.utils.book_new()  //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
    let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //将JS对象数组转换为工作表。
    wb.SheetNames.push(sheetName)
    wb.Sheets[sheetName] = ws
    const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式
    let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //写入的样式
    let wbout = XLSX.write(wb, wopts)
    let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    fs.saveAs(blob, filename + '.xlsx')
  }
   
  const s2ab = s => {
    var buf;
    if (typeof ArrayBuffer !== 'undefined') {
      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
    } else {
      buf = new Array(s.length);
      for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
  }

3、在main中引用方法

import { xlsx } from "@/libs/func"
Vue.prototype.xlsx = xlsx //导出xlsx方法

4、在使用方法下直接调用：

downMode(){
      console.log("下载新模板")
      this.xlsx(
        [{
        id:'1',
        name:'小智',
        age:18,
        classes:'商学院'
        
      },
      {
        id:'2',
        name:'小白',
        age:19,
        classes:'商学院'
        
      }],{
        id:'学号',
        name:'姓名',
        age:'年龄',
        classes:'学院'
      },'学生')
    },//导出模板

5、效果图：

在这里插入图片描述

6、参考：

https://blog.youkuaiyun.com/yangzhijie0608/article/details/124273732?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-124273732-blog-122988236.pcrelevantt0_20220926_downloadratepraise_v1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-124273732-blog-122988236.pcrelevantt0_20220926_downloadratepraise_v1&utm_relevant_index=3