vue 导出excel

vue element ui 怎么导出excel 表格并且自己设置格式啊

你要么就自己写函数要么就用第三方的vue-json-excel、vue-json-to-csv这些库

不知道你这个问题是否已经解决, 如果还没有解决的话:

你看下这篇博客吧, 应该有用👉 ：vue 中 element ui 导出excel （纯前端导出）

除此之外, 这篇博客: Vue+Element ui 对excel的导入和导出中的 4.导入 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

（1）导入按钮

  <el-button type="warning" icon="el-icon-upload2" @click="uploadDialog=true">导入</el-button>

（2）导入的对话框

 <el-dialog title="上传文件" :visible.sync="uploadDialog" class="eldialog" width="30%" @close="closeDialog">
          <el-form id="addForm" ref="addForm" class="eldialogForm">
            <el-form-item label>
              <el-upload
                ref="upload"
                class="upload-demo"
                drag
                action=""
                :on-change="handleChange"
                :on-exceed="handleExceed"
                :on-remove="handleRemove"
                :file-list="fileListUpload"
                :limit="limitUpload"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                :auto-upload="false"
              >
                <i class="el-icon-upload" />
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <!-- <div slot="tip" class="el-upload__tip">只能上传Excel文件，且不超过500kb</div> -->
              </el-upload>

以下回答来自chatgpt:

我可以为您提供以下解决方案：

使用 Vue+Element UI 导出 Excel 表格并自定义表格格式的步骤如下：

安装 xlsx 和 file-saver 依赖：

npm install --save xlsx file-saver

在组件中导入相关依赖和组件：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';
import { ElTable, ElTableColumn } from 'element-ui';

在模板中使用 el-table 和 el-table-column 组件来渲染表格：

<el-table ref="table" :data="tableData" border style="width: 100%" id="download">
  <el-table-column label="列1" prop="col1"></el-table-column>
  <el-table-column label="列2" prop="col2"></el-table-column>
  <el-table-column label="列3" prop="col3"></el-table-column>
</el-table>

创建导出 Excel 表格的方法，其中用到了 XLSX 和 FileSaver 依赖：

exportExcel() {
  // 获取 el-table 的实例对象
  const table = this.$refs.table;

  // 手动清除 el-table 的筛选和排序状态
  table.clearSort();
  table.clearFilter();

  // 使用 XLSX.utils.table_to_book 方法将 el-table 转换成 Excel 文件对象
  const wb = XLSX.utils.table_to_book(table.$el);

  // 使用 XLSX.write 方法将 Excel 文件对象转换成二进制文件流（Blob 对象）
  const wbout = XLSX.write(wb, { type: 'binary' });

  // 使用 FileSaver.saveAs 方法将 Blob 对象转换成可下载的文件并下载
  FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'table.xlsx');
  // s2ab 方法将字符串转换成 ArrayBuffer 对象
  function s2ab(s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}

其中，table_to_book 方法将 el-table 转换成 Excel 文件对象，write 方法将 Excel 文件对象转换成二进制文件流，saveAs 方法将 Blob 对象转换成可下载的文件并下载。注意，在使用 table_to_book 方法时，需要传入 el-table 的 DOM 元素，而非 el-table 组件本身。

如果需要自定义 Excel 表格的样式，可以在表格渲染完成之后，手动修改 Excel 文件对象中的样式。以修改表格边框为例：

exportExcel() {
  // ...获取 Excel 文件对象的代码

  // 修改 Excel 文件对象的样式
  const sheetName = wb.SheetNames[0];
  const sheet = wb.Sheets[sheetName];
  const borderStyle = { border: { style: 'thin', color: { rgb: '000000' } } };
  const range = XLSX.utils.decode_range(sheet['!ref']);
  for (let R = range.s.r + 1; R <= range.e.r; ++R) {
    for (let C = range.s.c; C <= range.e.c; ++C) {
      const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
      if (cell) {
        cell.s = borderStyle;
      }
    }
  }

  // ...将 Excel 文件对象转换成二进制文件流的代码
}

其中，wb.SheetNames[0] 获取第一个 sheet 的名称，wb.Sheets[sheetName] 获取该 sheet 的具体内容，XLSX.utils.decode_range(sheet['!ref']) 获取该 sheet 的范围，循环遍历该范围内的每一个单元格，使用 sheet[XLSX.utils.encode_cell({ c: C, r: R })] 获取单元格对象，最后修改单元格对象的样式即可。

在模板中使用导出 Excel 表格的方法：

<el-button type="primary" @click="exportExcel">导出 Excel</el-button>

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^