vue+file-saver+xlsx 封装导出Excel表格方法

file-saver+xlsx 封装通用导出方法

安装插件依赖

npm i xlsx@0.17.0npm i file-saver@2.0.5

2.在utils文件夹中创建ExportExcel.js文件

/* eslint-disable */
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'function datenum(v, date1904) {if (date1904) v += 1462var epoch = Date.parse(v)return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}function sheet_from_array_of_arrays(data, opts) {var ws = {}var range = {s: {c: 10000000,r: 10000000},e: {c: 0,r: 0}}for (var R = 0; R != data.length; ++R) {for (var C = 0; C != data[R].length; ++C) {if (range.s.r > R) range.s.r = Rif (range.s.c > C) range.s.c = Cif (range.e.r < R) range.e.r = Rif (range.e.c < C) range.e.c = Cvar cell = {v: data[R][C]}if (cell.v == null) continuevar cell_ref = XLSX.utils.encode_cell({c: C,r: R})if (typeof cell.v === 'number') cell.t = 'n'else if (typeof cell.v === 'boolean') cell.t = 'b'else if (cell.v instanceof Date) {cell.t = 'n'cell.z = XLSX.SSF._table[14]cell.v = datenum(cell.v)} else cell.t = 's'ws[cell_ref] = cell}}if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)return ws
}function Workbook() {if (!(this instanceof Workbook)) return new Workbook()this.SheetNames = []this.Sheets = {}
}function 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) & 0xffreturn buf
}export const export_json_to_excel = ({multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = 'xlsx'
} = {}) => {// 1. 设置文件名称filename = filename || 'excel-list'// 2. 把数据解析为数组，并把表头添加到数组的头部data = [...data]data.unshift(header)// 3. 解析多表头，把多表头的数据添加到数组头部（二维数组）for (let i = multiHeader.length - 1; i > -1; i--) {data.unshift(multiHeader[i])}// 4. 设置 Excel 表工作簿（第一张表格）名称var ws_name = 'SheetJS'// 5. 生成工作簿对象var wb = new Workbook()// 6. 将 data 数组（json格式）转化为 Excel 数据格式var ws = sheet_from_array_of_arrays(data)// 7. 合并单元格相关（['A1:A2', 'B1:D1', 'E1:E2']）if (merges.length > 0) {if (!ws['!merges']) ws['!merges'] = []merges.forEach((item) => {ws['!merges'].push(XLSX.utils.decode_range(item))})}// 8. 单元格宽度相关if (autoWidth) {/*设置 worksheet 每列的最大宽度*/const colWidth = data.map((row) =>row.map((val) => {/*先判断是否为null/undefined*/if (val == null) {return {wch: 10}} else if (val.toString().charCodeAt(0) > 255) {/*再判断是否为中文*/return {wch: val.toString().length * 2}} else {return {wch: val.toString().length}}}))/*以第一行为初始值*/let result = colWidth[0]for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j]['wch'] < colWidth[i][j]['wch']) {result[j]['wch'] = colWidth[i][j]['wch']}}}ws['!cols'] = result}// 9. 添加工作表（解析后的 excel 数据）到工作簿wb.SheetNames.push(ws_name)wb.Sheets[ws_name] = ws// 10. 写入数据var wbout = XLSX.write(wb, {bookType: bookType,bookSST: false,type: 'binary'})// 11. 下载数据saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}),`${filename}.${bookType}`)
}

3.使用


/*** 导出按钮点击事件*/
const loading = ref(false)
const onConfirm = async () => {loading.value = trueconst allUser = (await getUserManageAllList()).list// 导入工具包const excel = await import('@/utils/ExportExcel')//   export const USER_RELATIONS = {// 姓名: 'username',// 联系方式: 'mobile',// 角色: 'role',// 开通时间: 'openTime'// }// 这是数据格式处理const data = formatJson(USER_RELATIONS, allUser)excel.export_json_to_excel({// excel 表头header: Object.keys(USER_RELATIONS),// excel 数据（二维数组结构）data,// 文件名称filename: excelName.value || exportDefaultName,// 是否自动列宽autoWidth: true,// 文件类型bookType: 'xlsx'})closed()
}

vue+file-saver+xlsx 封装导出Excel表格方法相关推荐

纯前端，使用xlsx库，封装导出Excel表格方法
1.安装xlsx npm i xlsx 2.代码 const XLSX = require("xlsx")/*** @data 表格数据 data = [{}] 默认为[[]] 数 ...
用Xlsx xlsx-style 导出excel表格，附带合并单元格，文字居中，文字颜色字体大小等样式 (复制即可实现)
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一.用Xlsx xlsx-style 导出excel表格二.使用步骤 1.安装插件 2.引入总结前 ...
vue 调后台接口实现导出excel表格功能
今天遇到了一个导出excel表格的功能(如图) 实现导出分三步: 第一步:定义API接口的时候添加 responseType: "blob" // 导出策略结果downloadSt ...
前端 table 导出excel表格方法
需求:获取后台数据,动态生成table后,导出excel表格,要求格式与table格式一致直接上代码: <a id="export">导出</a> < ...
vue使用js-table2excel将数据导出Excel表格,含文字、图片类型, 设置表格样式/添加合并单元格
最近项目遇到了一个需求,在后台将学生信息以Excel表格导出,学生信息包含姓名.联系电话.照片等信息,一般情况下信息导出只需要导出字符串类型,但是现在的导出内容包含了图片,于是百度看到了js-tabl ...
前端table导出excel表格方法汇总
在做一些后台管理系统中,经常会遇到table 组件:然后需要导出excel.开发中实现方法如下: 第一类:后端来做导出功能(后端做更合适) 1. 后端生成excel,返回一个url地址:前端直接利用浏 ...
php导出excel表格例子,PHP导出excel表格示例
方法一:适合单独导出 $filename='提现列表-' . date('Ymd',time()); header("Content-type: application/vnd.ms-exc ...
vue框架使用xlsx导出excel表格
刚接手一个项目,需要做表格导出,之前没用过,特做此记录,以备下次使用.此模板适用于修改表格样式时使用,若只想简单的直接导出,可以参考另一篇:在vue中,使用xlsx配合FileSaver进行导出exc ...
vue使用xlsx、xlsx-style和fileSaver导出excel表格
本文引用 xlsx-style坑记录 Vue使用xlsx和xlsx-style纯前端导出带样式的Excel vue导出Excel表格,报错utils of undefined 是版本原因前期准备工作 ...
vue合并表格excel导出_Vue实现导出excel表格功能
引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在s ...

vue+file-saver+xlsx 封装导出Excel表格方法

file-saver+xlsx 封装通用导出方法

vue+file-saver+xlsx 封装导出Excel表格方法相关推荐

最新文章

热门文章