首页 > 其他分享 >前端实现导出Excel表格数据

前端实现导出Excel表格数据

时间:2023-07-27 14:55:39浏览次数:33  
标签:表格 Excel 导出 length cell range ws var data

前端使用 ExportExce导出表格数据

步骤一、 下载依赖

cnpm install [email protected] [email protected] --save

步骤二、创建一个ExportExce.js 文件

注意: vue中的话 一般是在 util文件夹下 创建的 nuxt的话在 plugins下

ExportExce.js

/* eslint-disable */ import { saveAs } from 'file-saver' import XLSX from 'xlsx'   function generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); var ranges = []; for (var R = 0; R < rows.length; ++R) { var outRow = []; var row = rows[R]; var columns = row.querySelectorAll('td'); for (var C = 0; C < columns.length; ++C) { var cell = columns[C]; var colspan = cell.getAttribute('colspan'); var rowspan = cell.getAttribute('rowspan'); var cellValue = cell.innerText; if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;   //Skip ranges ranges.forEach(function (range) { if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) { for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null); } });   //Handle Row Span if (rowspan || colspan) { rowspan = rowspan || 1; colspan = colspan || 1; ranges.push({ s: { r: R, c: outRow.length }, e: { r: R + rowspan - 1, c: outRow.length + colspan - 1 } }); };   //Handle Value outRow.push(cellValue !== "" ? cellValue : null);   //Handle Colspan if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null); } out.push(outRow); } return [out, ranges]; };   function datenum(v, date1904) { if (date1904) v += 1462; var 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 = R; if (range.s.c > C) range.s.c = C; if (range.e.r < R) range.e.r = R; if (range.e.c < C) range.e.c = C; var cell = { v: data[R][C] }; if (cell.v == nullcontinue; var 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) & 0xFF; return buf; }   export function export_table_to_excel(id) { var theTable = document.getElementById(id); var oo = generateArray(theTable); var ranges = oo[1];   /* original data */ var data = oo[0]; var ws_name = "SheetJS";   var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);   /* add ranges to worksheet */ // ws['!cols'] = ['apple', 'banan']; ws['!merges'] = ranges;   /* add worksheet to workbook */ wb.SheetNames.push(ws_name); wb.Sheets[ws_name] = ws;   var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });   saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "test.xlsx") }   export function export_json_to_excel({ multiHeader = [], header, data, filename, merges = [], autoWidth = true, bookType = 'xlsx' } = {}) { /* original data */ filename = filename || 'excel-list' data = [...data] data.unshift(header);   for (let i = multiHeader.length - 1; i > -1; i--) { data.unshift(multiHeader[i]) }   var ws_name = "SheetJS"; var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);   if (merges.length > 0) { if (!ws['!merges']) ws['!merges'] = []; merges.forEach(item => { ws['!merges'].push(XLSX.utils.decode_range(item)) }) }   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; }   /* add worksheet to workbook */ wb.SheetNames.push(ws_name); wb.Sheets[ws_name] = ws;   var wbout = XLSX.write(wb, { bookType: bookType, bookSST: false, type: 'binary' }); saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`); }   function formatJson(jsonSource, jsonFillter) { return jsonSource.map(v => jsonFillter.map(j => { return v[j] })) }   export function export_json_to_excel2(th, jsonSource, jsonFillter, name) { const data = formatJson(jsonSource, jsonFillter) export_json_to_excel({header: th, data, filename: name}) }

步骤三、界面中使用

nuxt的话 需要在nuxt.config.js下的 plugins中引入

plugins:[ "@/plugins/ExportExce" ]

点击导出Excel的方法中代码如下

// 点击导出表格数据的方法 exportes(){ // vue 在 util中 nuxt 在 plugins中 import('@/util/ExportExcel').then(excel => { const tHeader = ['商品ID''商品编号''名称''专柜价格''当前价格''是否新品''是否热品''是否在售'] const filterVal = ['id''goodsSn''name''counterPrice''retailPrice''isNew''isHot''isOnSale'] excel.export_json_to_excel2(tHeader, this.list, filterVal, '收益数据') }) }

以上就是在 vue / nuxt 中实现导出表格的操作 希望对你们有所帮助

   

标签:表格,Excel,导出,length,cell,range,ws,var,data
From: https://www.cnblogs.com/village-chief/p/17584949.html

相关文章

  • 使用EasyExcel异步导出excel技术方案
    主线程:处理请求响应,同时开启子线程,让子线程处理导出任务子线程:将导出的文件写入到磁盘临时文件,临时文件上传到oss中获取上传文件的url路径,记录url路径到数据库中,最后再删除临时文件通过单独一个页面查询导出文件流水的列表,进行下载文件代码实现线程池配置@Componentpublic......
  • 查看oracle数据泵导入导出进度
    查找对应的job_nameQL>colOWNER_NAMEfora30SQL>colJOB_NAMEfora30SQL>colstatefora20SQL>setpagesize999linesize100SQL>selectowner_name,job_name,statefromdba_datapump_jobs;进入交互界面expdptest/testattach=SYS_EXPORT_SCHEMA_01sta......
  • 这可能是前端处理excel最好的工具了
    大家好,我是程序视点的小二哥!今天小二哥要分享的是一个纯前端实现读取和导出excel文件的工具库:ExcelJSExcelJs简介功能十分简单:读取,操作并写入电子表格数据和样式到XLSX和JSON文件。一个Excel电子表格文件逆向工程项目。在本文中,我们使用xlsx文件。xlsx是Microsoft......
  • 浅谈Excel开发:十 Excel 开发中与线程相关的若干问题
    采用VSTO或者SharedAdd-in等技术开发Excel插件,其实是在与Excel提供的API在打交道,Excel本身的组件大多数都是COM组件,也就是说通过ExcelPIA来与COM进行交互。这其中会存在一些问题,这些问题如果处理不好,通常会导致在运行的时候会抛出难以调试的COM异常,从而导致我们开发出的Excel插......
  • P3704 [SDOI2017] 数字表格 题解
    一、题目描述:用$f_i$表示斐波那契数列的第$i$项,那么有:$f_0=0,f_1=1;f_n=f_{n-1}+f_{n-2},n\ge2$现在有一个$n$行$m$列的数字表格,第$i$行第$j$列的数字是$f_{\gcd(i,j)}$。求这个表格所有数的乘积。共有$T$组数据,答案对$10^9+7$取模。......
  • 浅谈Excel开发:三 Excel 对象模型
    前一篇文章介绍了Excel中的菜单系统,在创建完菜单和工具栏之后,就要着手进行功能的开发了。不论您采用何种方式来开发Excel应用程序,了解Excel对象模型尤其重要,这些对象是您与Excel进行交互的基石。据不完全统计,Excel的对象模型中有270多个对象及超过5000多个属性和方法。通过这些对......
  • 浅谈Excel开发:六 Excel 异步自定义函数
    上文介绍了Excel中的自定义函数(UDF),它极大地扩展了Excel插件的功能,使得我们可以将业务逻辑以Excel函数的形式表示,并可以根据这些细粒度的自定义函数,构建各种复杂的分析报表。普通的UDF自定义函数的基本执行逻辑是,Excel接受用户输入的函数表达式,然后通过UDF函数的处理逻辑进行处......
  • 浅谈Excel开发:七 Excel 自定义任务窗体
    前面花了三篇文章讲解了Excel中的UDF函数,RTD函数和异步UDF函数,这些都是Excel开发中的重中之重。本文现在开始接着第二篇文章的菜单系统开始讲解Excel中可供开发的界面元素,本文要讲解的是Excel中的自定义任务面板(CustomeTaskPanel,CTP)。自定义任务面板在Office2003中就引入了......
  • 浅谈Excel开发:八 Excel 项目的安装部署
    前面几篇文章讲解了Excel开发的几个比较主要的也是比较重要的方面,比如菜单系统,Excel对象模型,自定义函数,RTD函数,异步自定义函数,用户自定义任务面板等,在实际开发中我们还会遇到各种“千奇百怪”的问题,以及开发中的一些注意事项和技巧等,后面有空我会写文介绍。当我们的Excel外接应用......
  • excel 表格操作
    1.工作簿工作表工作簿:表示整个excle文件工作表:工作簿(里面可以有很多工作表)2.3.4.5.6.7.8.......