宣化网站制作公司,南京网站建设企业,世界杯观看入口,大学生创业做网站的筹资方式需求
将表格数据或者其他形式的数据下载为excel文件
技术栈
Vue3、ElementPlus、
实现
1、安装相关的库
下载xlsx 和 file-saver 库
npm install -S file-saver
npm install -S xlsx引入XLSX库和FileSaver库
import XLSX from xlsx;
import FileSaver from file-saver;…需求
将表格数据或者其他形式的数据下载为excel文件
技术栈
Vue3、ElementPlus、
实现
1、安装相关的库
下载xlsx 和 file-saver 库
npm install -S file-saver
npm install -S xlsx引入XLSX库和FileSaver库
import XLSX from xlsx;
import FileSaver from file-saver;2、添加导出按钮
需要一个“导出”按钮并给它绑定一个点击事件 1点击该按钮可以将表格的数据下载为excel文件 2关于按钮的图标可以引用elementplus里的下载图标另外可以添加触发提示告知用户可以进行数据下载 关于触发提示可以引用elementplus里面的el-tooltip组件大致效果如下 导出按钮、触发提示、表格的包含关系如下 相关代码:
!-- 表格 --
div classTopCoursediv classnavTop!-- 触发提示 --el-tooltipclassbox-itemeffectdarkcontent下载全部数据placementtop-start!-- 下载按钮 --el-button typeprimary :iconDownload clickuserExport //el-tooltip/div!-- 表格 --el-tableidmyTable:datatableDatastylewidth: 95%:header-cell-style{ text-align: center }:cell-style{ text-align: center }el-table-column propindex labelNo. /el-table-column propID labelID //el-table
/div
3、函数将数据下载为excel文件
使用 SheetJS 库将表格数据转换为 Excel 文件格式;使用 file-saver 库将生成的 Excel 文件保存到本地
// tableDataAllL:指excel数据的全部汇总根据实际情况自己去补充
var tableDataAll [];
// 将数据下载为excel文件
function userExport() {const worksheet XLSX.utils.json_to_sheet(tableDataAll);const workbook XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, Sheet1);const excelBuffer XLSX.write(workbook, {bookType: xlsx,type: array,});const blob new Blob([excelBuffer], {type: application/vnd.ms-excel,});FileSaver.saveAs(blob, tableDataAll); // 下载文件 文件名
}以上函数可以直接引用修改对应的部分即可
