js实现下载excel

excel是常见的表格处理工具,那么前端怎么实现excel生成与下载呢?我们利用xlsx.js来实现

一. 安装js-xlsx

npm install xlsx

二. 文档简介
完成的XLSX对象:

需要理解的术语:
1 workbook是xlsx读取excel内容后的js对象,读取到内容后可以对表格进行操作;同样的也可以创建一个空的workbook,往其中写入内容
完整的workbook对象:
(其中最重要的是两个属性,SheetNames(表名)以及Sheets(数据))
2. XLSX.utils是XLSX重要的一个对象,可以实现读取其他文件格式如: 数组/json/html为workbook形式;同时也可以导出

2.1 数组转为表格并下载

// 1. 准备js数组
const arr = [["序号", "姓名", "公证编号", "手机号", "房号", "身份证号", "类型", "备注"],[1, "刘备", "a1234", "13548182222", "", "1111", "户口入学", "aaa"],[2, "张飞", "b1234", "13548182223", "", "222", "随迁入学", "bbb"],[3, "关羽", "c1234", "13548182224", "", "33333", "户口入学", "ccc"]
];
// 将数组转为sheet
const sheet = XLSX.utils.aoa_to_sheet(arr);// 先组装wookbook数据格式
let workbook = {SheetNames: ['test'], // 总表名Sheets: {test: sheet}, // test是表名
};
// 下载表格
XLSX.writeFile(workbook, 'test.xlsx');

3.2 导入excel并转为数组格式

// 1. 查看workbook对象
function handleFile(e) {var files = e.target.files, f = files[0];var reader = new FileReader();reader.onload = function(e) {var data = new Uint8Array(e.target.result);var workbook = XLSX.read(data, {type: 'array'});/* DO SOMETHING WITH workbook HERE */console.log(workbook)/* 其中workbook.SheetNames[0]是表名下对应的数据 sheet数据 */let arr = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]))};reader.readAsArrayBuffer(f);
}
document.querySelector('#file').addEventListener('change', handleFile, false);

js实现下载excel相关推荐

js vue 下载excel(.xls)文件
@[TOC](js vue 下载excel(.xls)文件) 先看下载下来的excel文件 1.首先,后端给到的是一个文件在服务器中的存储地址 D:\MaxSecFile\Export\Alarm_2 ...
java使用jxl生成excel表格,jsp使用js下载excel文件xls
java使用jxl生成excel表格,jsp使用js下载excel文件后端代码 maven jar包主体代码逻辑引入的jar包具体代码段重点详解表头和表格内容两种格式直接将 HttpSe ...
js下载excel表格,下载pdf
常见我们会遇到下载一个excel表格模板或者下载一个可以查看的PDF文档. 下载excel表格或者下载一个pdf文档,主要是通过两点来实现的: 1- 在webpack里面配置loader 2- 设置下 ...
js使用js-xlsx插件下载excel
本文主要是下载excel,上传可以参考原生js使用js-xlsx插件 html <a href="" download="下载文件的名字.xlsx" id ...
Vue.js + axios 实现excel下载
在以前实现的下载excel功能中,都是用 <a href="xxx">DOWNLOAD</a> 来实现的. 但是由于项目中采用了token验证,上述的做法就 ...
Koa实现下载excel
Koa实现下载excel #安装 node-xlsx npm install node-xlsx --save 实现思路:将生成的excel文件流返回到前端 routes router.get('/m ...
【翻译】将Ext JS Grid转换为Excel表格
原文:Converting an Ext 5 Grid to Excel Spreadsheet 稍微迟来的礼物--Ext JS Grid转为Excel代码,现在支持Ext JS 5! 功能包括: - ...
element-ui上传下载excel（超详细der）
1. 上传 EXCEL Upload组件点击跳转到该组件官方文档用到的upload组件参数参数说明类型可选默认值 action 必选参数,上传的地址 string --- --- fil ...
利用js-xlsx.js插件实现Excel文件导入并解析Excel数据成json数据格式
<!DOCTYPE html><html lang= ...
php通过ajax下载文件,PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...

js实现下载excel

js实现下载excel相关推荐

最新文章

热门文章