提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

Xlsx结合File-Saver实现前端页面表格导出Excel为文件

Excel文件导出前端 实现 页面 File 结合
2023-06-13 09:12:33 时间

大家好，又见面了，我是你们的朋友全栈君。

前言：在我们的前端网页页面中如果遇到一些表格存储的数据性问题，我们可以将它们存储为excel形式，那么我们今天来看看该如何实现…

目录

一、XLSX是什么？

XLSX:由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式

1.npm下载

代码如下:

npm i xlsx

2.引入库

代码如下:

 import XLSX from "xlsx";

二、FileSaver是什么？

FileSaver：实现浏览器端生成并保存文件的 JavaScript 库 FileSaver.js

1.npm下载：

代码如下:

npm i file-saver

2.引入库：

代码如下:

import FileSaver from "file-saver";

三、结合使用

1.导入：

代码如下:

import FileSaver from "file-saver";
import XLSX from "xlsx";

2.HTML代码：

代码如下:

需要给要导出的表格加上专有标记（ID）

ps:本文采用的是element-ui的表格

<el-table ref="multipleTable" :data="taskData.slice((currentPage-1)*page,currentPage*page)" tooltip-effect="dark" style="width: 100%;overflow:auto;height: 50%;margin-left: 50px" @selection-change="handleSelectionChange" align="center" id="taskTable" >
            .....
</el-table>

3.JS代码：

代码如下:

 var that = this;
 //这只是显示提示信息，可容易忽略不计
 that.$message({ 
   
       type: 'success',
       message: `数据导出中...`
   });
   // 导出的内容只做解析，不进行格式转换
   let xlsxParam = { 
   raw: true};
   //#taskTable为我们表格的ID
   let wb = XLSX.utils.table_to_book(document.querySelector("#taskTable"), xlsxParam);
  //下面代码阐明了保存的类型为什么
   const wbout = XLSX.write(wb, { 
   
       bookType: "xlsx",
       bookSST: true,
       type: "array"
   });
   try { 
   
       FileSaver.saveAs(new Blob([wbout], { 
   type: "application/octet-stream"}), 'file-name.xlsx');
       //file-name为保存的文件的名称
   } catch (e) { 
   
       if (typeof console !== "undefined") console.log(e, wbout);
   }
   return wbout;

这样就可以实现简单的前端页面表格导出为excel格式的文件了，你可以将其封装在一个方法里面在需要实现导出功能的按钮上进行绑定即可。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/154146.html原文链接：https://javaforall.cn

相关文章