方法一 : 纯xlsx(不推荐)
1.安装xlsx库
cnpm install xlsx -S2.在组件中引入
import * as XLSX from 'xlsx'注意:引入一定要加上 * as ,否则汇报如下错误:
*表示导入模块的所有导出内容。as XLSX意味着将所有导出内容捆绑到名为XLSX的对象上，这个对象可以在后续的代码中使用来访问导入的内容
3.使用
import * as XLSX from 'xlsx'
//选中的表格数据
let selectTableData=[]
//当选择项发生变化时会触发该事件
let handleSelectionChange=(val)=>{
selectTableData=val
}
//导出
let exportSelectedSub=()=>{
// 创建一个XLSX工作簿（workbook）
const ws = XLSX.utils.json_to_sheet(selectTableData);
const wb = XLSX.utils.book_new();
// 将工作表（worksheet）添加到工作簿中，命名为'Sheet1'
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 使用XLSX库的writeFile函数将工作簿保存为XLSX文件并提供下载
XLSX.writeFile(wb, 'tableData.xlsx');
}<div style="margin-bottom:20px;">
<el-button type="primary" icon="Plus" @click="Add_Edit">新增科目</el-button>
<el-button icon="Printer" @click="exportSelectedSub">导出</el-button>
</div>
<el-table :data="tableData" stripe style="width: 100%" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="subjectName" label="科目名称" width="180" align='center' />
<el-table-column prop="enabled" label="科目状态" width="180" align='center'>
<template #default="scope">
<template v-for="item in subjectStatus" :key="item.id">
<el-tag v-if="item.v == scope.row.enabled">{{ item.k }}</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align='center'>
<template #default="scope">
<el-button link type="primary" size="small" @click="Add_Edit(scope.row)">编辑</el-button>
<el-button link type="danger" size="small" @click="onDelSubject(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>4.导出成功
方法二 : xlsx + file-saver
两者区别
xlsx 主要用于处理 Excel 文件的内容，包括创建、读取和导出 Excel 文件中的数据。
file-saver 主要用于保存生成的二进制数据为文件，通常用于将数据以文件形式提供给用户下载。
在导出表格数据为 Excel 文件时，通常会结合使用这两个库，使用 xlsx 创建 Excel 工作簿并将其转换为二进制数据，然后使用 file-saver 将二进制数据保存为实际的文件，以便用户下载。这样可以实现将表格数据导出为 Excel 文件的完整1.安装xlsx、file-saver
cnpm i xlsx file-saver -S2.在组件中引入
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver';
saveAs是来自file-saver库的一个函数。这个函数用于保存二进制数据为文件并触发文件下载操作。
saveAs函数接受两个参数：
blob: 一个代表要保存的二进制数据的 Blob 对象。Blob 是一种表示二进制数据的标准方式，它可以包含任何类型的二进制数据，例如文件内容。
filename: 要保存的文件的名称，通常包括文件扩展名，例如
'example.xlsx'。
3.使用
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver';
//选中的表格数据
let selectTableData=[]
//当选择项发生变化时会触发该事件
let handleSelectionChange=(val)=>{
selectTableData=val
}
//导出
let exportSelectedSub=()=>{
// 创建一个XLSX工作簿（workbook）
const ws = XLSX.utils.json_to_sheet(selectTableData);
const wb = XLSX.utils.book_new();
// 将工作表（worksheet）添加到工作簿中，命名为'Sheet1'
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 通过 XLSX.write 将工作簿转换为二进制对象
const wbout = XLSX.write(wb, { type: 'array', bookType: 'xlsx' });
// 创建 Blob 对象并保存文件
const blob = new Blob([wbout], { type: 'application/octet-stream' });
saveAs(blob, 'tableData.xlsx');
}4.导出成功
方法三 : xlsx + file-saver(结合dom) -- 推荐
1.安装xlsx、file-saver
cnpm i xlsx file-saver -S2.在组件中引入
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver';3.使用
html部分
<div style="margin-bottom: 20px">
<!--导出按钮-->
<el-button icon="Printer" @click="exportSelectedSub">导出</el-button>
</div>
<!--原始表格-->
<el-table
:data="tableData"
stripe
style="width: 100%"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="subjectName" label="科目名称" width="180" align="center" />
<el-table-column prop="enabled" label="科目状态" width="180" align="center">
<template #default="scope">
<template v-for="item in subjectStatus" :key="item.id">
<el-tag v-if="item.v == scope.row.enabled">{{ item.k }}</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center">
<template #default="scope">
<el-button link type="primary" size="small" @click="Add_Edit(scope.row)">编辑</el-button>
<el-button link type="danger" size="small" @click="onDelSubject(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--预览弹窗表格-->
<el-dialog title="表格保存预览" width="70%" v-model="selectWindow" align-center destroy-on-close>
<el-table :data="selectTableData" id="selectTable" height="500px">
<el-table-column prop="id" label="科目ID"> </el-table-column>
<el-table-column prop="subjectName" label="科目名称"> </el-table-column>
<el-table-column prop="enabled" label="科目状态"> </el-table-column>
<el-table-column prop="delFlag" label="删除标记"> </el-table-column>
<el-table-column prop="createBy" label="创建者"> </el-table-column>
<el-table-column prop="createTime" label="创建时间"> </el-table-column>
<el-table-column prop="updateBy" label="更新者"> </el-table-column>
<el-table-column prop="updateTime" label="更新时间"> </el-table-column>
</el-table>
<template #footer>
<el-button type="primary" @click="exportExcel">确定保存</el-button>
</template>
</el-dialog>js逻辑部分
import * as XLSX from 'xlsx'
import {saveAs} from 'file-saver'
//选中的表格数据
let selectTableData = []
//dialog的显示与隐藏
let selectWindow=ref(false)
//处理选中的数据
let handleSelectionChange = (val) => {
selectTableData = val
}
//显示预览弹窗
let exportSelectedSub=()=>{
if(selectTableData.length<1){
ElMessage.error('请选择要导出的数据!')
return false;
}
selectWindow.value=true
}
//将 HTML 表格转换为 Excel 文件并提供下载
let getExcel=(dom, title = '默认标题')=> {
let excelTitle = title;
//将 HTML 表格转换为 Excel 工作簿（通过指定的 dom 参数选择）
let wb = XLSX.utils.table_to_book(document.querySelector(dom));
//通过 XLSX.write 将工作簿转换为二进制对象
let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" });
try {
// 创建 Blob 对象并保存文件
const blob = new Blob([wbout], { type: 'application/octet-stream' });
saveAs(blob,excelTitle + ".xlsx");
} catch (e) {
//错误处理
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;//返回二进制对象
}
//导出
let exportExcel=() =>{
getExcel('#selectTable', '导出table')
selectWindow.value=false
ElMessage.success('导出成功')
}为什么返回二进制对象?
函数
getExcel的主要目的是将 HTML 表格转换为 Excel 文件并提供下载。在这个过程中，需要将 Excel 文件的内容以二进制形式存储，以便最终用户可以下载并保存该文件具体来说，以下是为什么要返回二进制对象的一些原因：
下载文件需要二进制数据：浏览器下载文件通常需要提供文件的二进制数据。二进制数据表示了文件的实际内容，包括字节、格式等。通过将 Excel 工作簿转换为二进制对象，我们可以将其提供给用户以进行下载。
允许更灵活的处理：返回二进制对象意味着你可以选择将其用于其他用途。例如，你可以将二进制数据存储在服务器上，以备将来的访问，或者将其传递给其他函数，以进行进一步的处理，而不仅仅是下载。
跨平台兼容性：二进制数据通常具有较好的跨平台兼容性。无论用户使用的是哪种操作系统或浏览器，都可以方便地将二进制数据转换为可用的文件格式（如.xlsx）。这增加了代码的通用性。
总之，返回二进制对象使代码更具灵活性和通用性，可以方便地进行文件下载以及其他可能的操作。
4.导出成功
2536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
