使用xlsx.utils.js前端导出excel

前端使用的是vue框架，所以首先需要在项目中使用npm install

npm install --save xlsx file-saver

在main.js中引入

 import FileSaver from 'file-saver'import XLSX from 'xlsx'

这里一般我们使用的都是json格式的数据，所以导出的方法如下：

 let sheet = XLSX.utils.aoa_to_sheet(names);let cols = []cloumns.forEach(v => {cols.push({wpx: 150})})sheet["!cols"] = cols//调整列宽sheet['!merges'] = [// 设置A1-C1的单元格合并// {s: {r: 0, c: 0}, e: {r: 0, c: 2}}];let url = sheet2blob(sheet)if (typeof url == 'object' && url instanceof Blob) {url = URL.createObjectURL(url); // 创建blob地址}var aLink = document.createElement('a');let now = new Date()let fileName = JSON.parse(sessionStorage.getItem('projectInfo')).sname + "项目--任务计划" + now.getFullYear() + (now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1) + now.getDate() + now.getHours().toString() + now.getMinutes().toString() + now.getSeconds().toString()aLink.href = url;aLink.download = fileName + '.xlsx' || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效var event;if (window.MouseEvent) event = new MouseEvent('click');else {event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);}aLink.dispatchEvent(event);},

  // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载function sheet2blob(sheet, sheetName) {sheetName = sheetName || 'sheet1';var workbook = {SheetNames: [sheetName],Sheets: {}};workbook.Sheets[sheetName] = sheet;// 生成excel的配置项var wopts = {bookType: 'xlsx', // 要生成的文件类型bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性type: 'binary'};var wbout = XLSX.write(workbook, wopts);var blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"});// 字符串转ArrayBufferfunction s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}return blob;}

使用xlsx.utils.js前端导出excel相关推荐

js前端导出Excel（可自定义文件名称，后缀，有边框样式）
需求: 要求把项目中的table表格导出Excel 需求分析及解决: 既然需要导出,是报表的可能性比较大,我的项目中就是这样,那既然是报表导出,可以是前端导出,也可以是后端导出(技术包括POI或者报表 ...
js前端导出excel：json形式的导出
第一中形式的导出:主要是表头对应主体数据,json形式的导出 js库文件名称 : table2excel.js这个js库文件是网上找的,并且自己根据自己业务需求把内容改了一下复制到 table2exc ...
js 使用前端导出excel,设置标题和页脚,实现特殊表格需求
js前端导出excel,网上的例子很多,大部分都是使用如下代码: //统计导出$scope.statisExport=function(){toOutPutExcel('statisTable', ' ...
前端导出excel(element+xlsx+filesaver插件),表格数据重复问题解决
纯前端导出excel,表格数据渲染重复业务需求页面有table表格里的多条数据,并且没有分页.需求希望不调用接口,纯前端生成excel文件实现导出功能. 效果图 1.安装依赖(xlsx 和 fil ...
js vue 设置excel单元格样式_vue项目使用xlsx-style实现前端导出Excel样式修改（添加标题，边框等），并且上传npm踩坑记录...
前段时间,我们项目提出一个前端导出Excel表格的需求, 这个很简单,利用xlsx,file-saver很容易实现(网上很多教程). 后来需要加入标题,标题居中显示,加入边框等等样式需求,这就给我很多 ...
xlsx模块前端_利用xlsx-syle前端导出excel且支持自定义样式
利用xlsx-syle前端导出excel且支持自定义样式前言本文的代码是基于react的. 本文仅用于记录我在前端导出excel遇到的问题的笔记整理. 需求描述需要前端来实现对数据的导出,导出成 ...
vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格 1.安装依赖 npm install xlsx --save 2.导入依赖 import * as XLSX from 'xlsx' // V ...
前端导出excel自定义样式(行高除外)
前端导出excel需要用到的依赖有xlsx.xlsx-style import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; npm in ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...

使用xlsx.utils.js前端导出excel

使用xlsx.utils.js前端导出excel相关推荐

最新文章

热门文章