vue2 前端导出el-table表格为Excel文件 (自带样式)

这篇博客介绍了一个使用Vue.js和相关插件实现从Element-UI表格导出带有样式的Excel文件的方法。作者分享了详细的代码实现,包括设置表格宽度、字体样式、边框以及行列合并。对于Vue-cli5版本,由于webpack5移除了部分Node.js内置模块的polyfill,需要额外配置`node-polyfill-webpack-plugin`来解决依赖问题。
摘要由CSDN通过智能技术生成

前话:我只是个自学到工作的小菜鸟,如果有大佬有更好的方法,希望不吝赐教。

1.电脑环境

node版本 14.20.0   

 vue-cli 4.4.0 (如果你的项目是vue-cli 5 版本(即webpack5)的会有很多问题,解决办法写在后边)

这是我用到的三个插件的版本,自行安装,版本请保持和我一致。

【我发布了 oh-my-tools npm包,也可以直接下载包使用,npm i oh-my-tools,然后使用】

    "file-saver": "^2.0.5",

    "xlsx": "^0.16.9",

    "xlsx-style-medalsoft": "^0.8.13"

2.下边直接贴代码,复制能直接使用。我使用的相对路径,可能需要你们修改下。

<template>
  <div class="toEXCEL">
    <el-table :data="tableData" style="width: 100%" id="stationTable">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="资料" width="180">
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <el-button type="primary" @click="down"> 导出</el-button>
  </div>
</template>

<script>
import OMS from "../utils/tools";
export default {
  name: "toEXCEL",
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    down() {
      OMS.downLoadXlsx({
        dom: "stationTable",    //获取表格dom,然后拿出数据,所以我需要知道解析哪一个表格
        name: "预报计算结果表",  //excel名字
        ColumnWdth: [12, 12, 20, 20, 20, 20], //每一列的宽度,需要直接指定,接受数字
      });
    },
  },
};
</script>

<style scoped lang="less"></style>

3.创建一个js文件,放入工具函数

src/utils/tools.js

import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import XLSXStyle from 'xlsx-style-medalsoft';

let OMS = {};

// 导出Excel-单表格Excel  带样式
OMS.downLoadXlsx = ({ dom = 'el-table', name = '文件', ColumnWdth = [] }) => {
  let table = document.getElementById(dom);
  // 因为element-ui的表格的fixed属性导致多出一个table,会下载重复内容,这里删除掉
  if (table.querySelector('.el-table__fixed')) {
    table.removeChild(table.querySelector('.el-table__fixed'));
  }
  if (table.querySelector('.el-table__fixed-right')) {
    table.removeChild(table.querySelector('.el-table__fixed-right'));
  }

  let et = XLSX.utils.table_to_book(table, { raw: true }); //此处传入table的DOM节点,raw为true表示单元格为文本格式(未加工)
  debugger;
  let wbs = et.Sheets.Sheet1;
  // 删掉末尾空行
  Object.keys(wbs).forEach((item, index) => {
    if (!item.startsWith('!') && wbs[item].v == '') {
      delete wbs[item];
    }
  });

  //设置表格列宽度
  if (ColumnWdth.length === 0) {
    for (let i = 0; i < 30; i++) {
      wbs['!cols'][i] = { wch: 12.5 };
    }
  } else {
    ColumnWdth.forEach((item, i) => {
      wbs['!cols'][i] = { wch: item };
    });
  }

  //循环遍历每一个表格,设置样式
  for (const key in wbs) {
    if (!key.startsWith('!')) {
      wbs[key].s = {
        font: {
          sz: 11, //字体大小
          bold: false, //加粗
          name: '宋体', //字体
          color: {
            rgb: '000000', //十六进制,不带#
          },
        },
        alignment: {
          //文字居中
          horizontal: 'center',
          vertical: 'center',
          wrapText: false, //文本自动换行
        },
        border: {
          // 设置边框
          top: { style: 'thin' },
          bottom: { style: 'thin' },
          left: { style: 'thin' },
          right: { style: 'thin' },
        },
      };
    }
  }

  const arr = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z',
  ];

  // 行列合并
  let range = wbs['!merges'];
  if (range) {
    range.forEach((item) => {
      let startColNumber = Number(item.s.r),
        endColNumber = Number(item.e.r);
      let startRowNumber = Number(item.s.c),
        endRowNumber = Number(item.e.c);
      const test = wbs[arr[startRowNumber] + (startColNumber + 1)];
      for (let col = startColNumber; col <= endColNumber; col++) {
        for (let row = startRowNumber; row <= endRowNumber; row++) {
          wbs[arr[row] + (col + 1)] = test;
        }
      }
    });
  }

  let etout = XLSXStyle.write(et, {
    bookType: 'xlsx',
    type: 'buffer',
  });
  try {
    FileSaver.saveAs(new Blob([etout], { type: 'application/octet-stream' }), `${name}.xlsx`); //导出的文件名
  } catch (e) {
    throw e;
  }
};

export default OMS;

4.结果

补充:vue-cli 5  的同学看这里

安装下边三个插件,其实就是版本不同罢了。

   "xlsx": "^0.18.5",

    "xlsx-style-medalsoft": "^0.8.13",

    "file-saver": "^2.0.5"

    "node-polyfill-webpack-plugin": "^2.0.1",   这个插件就是关键

重要:在webpack5中移除了nodejs核心模块的polyfill自动引入,所以fs模块,path模块等nodejs内置模块被移除了,所以项目报错,启动不起来。

webpack配置 

在vue.config.js中添加如下配置

const { defineConfig } = require("@vue/cli-service");

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = defineConfig({

  publicPath: process.env.NODE_ENV == "production" ? "./" : "/",

  configureWebpack: {

    plugins: [new NodePolyfillPlugin()],

    externals: {

      fs: require("fs"),   //如果缺少其他模块就在下边加

    },

  },

});

 修改 tools.js文件中 XLSX库的引用方式

import XLSX from "xlsx"; 改为 import * as XLSX from "xlsx/xlsx.mjs";

好了 大问题就没有了。可以愉快的导出了。

要将Vue 3中的el-table导出Excel,你可以使用以下步骤: 1. 首先,你需要安装`xlsx`和`file-saver`包。在终端中运行以下命令: ``` npm install xlsx file-saver ``` 2. 在你的Vue组件中,导入所需的库: ```javascript import XLSX from 'xlsx'; import { saveAs } from 'file-saver'; ``` 3. 创建一个方法来导出表格数据为Excel文件: ```javascript exportData() { // 获取表格数据 const tableData = this.$refs.table.data; // 创建一个工作簿 const workbook = XLSX.utils.book_new(); // 创建一个工作表 const worksheet = XLSX.utils.json_to_sheet(tableData); // 将工作表添加到工作簿中 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 将工作簿转换为Excel文件的二进制数据 const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 创建一个Blob对象,并保存为Excel文件 const blob = new Blob([excelData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); saveAs(blob, 'table_data.xlsx'); } ``` 4. 在el-table组件上添加一个导出按钮,并调用`exportData`方法: ```html <el-table ref="table"> <!-- 表格内容 --> </el-table> <el-button @click="exportData">导出Excel</el-button> ``` 以上代码将会将el-table中的数据导出为名为`table_data.xlsx`的Excel文件。请确保在`<el-table>`标签上设置了ref属性,以便在`exportData`方法中引用表格数据。 这是使用Vue 3和Element Plus的示例,如果你在项目中使用了其他UI库或版本,请相应地调整代码。
评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值