浏览器网页操作 EXCEL 示例

在网页中利用第三方 JavaScript 插件——SheetJS，可以在浏览器中对 excel 文件进行轻量级操作，实现 excel 文件导入网页，网页表格保存为 excel 文件功能。复杂的表格样式设置需要付费的 VIP 版插件，但普通版本的功能已经足够我们使用，本文是一个入门级操作示例。

SheetJS 开源项目在 github 上地址为 https://github.com/SheetJS/sheetjs/tree/master/dist
本例主要使用了 XLSX 对象的两个 api 函数 XLSX.utils.sheet_to_html 和 XLSX.utils.table_to_sheet
HTML5 的 input-file 控件在本例中有一个 bug 百思不得其姐，希望过路高人不吝赐教，拜谢。

效果图

源代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>EXCEL 操作示例</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.core.min.js"></script><style>table, tr, td {border: 1px solid #666;border-collapse: collapse;min-width: 56px;height: 18px;text-align: center;}a.btn {text-decoration: none;padding: 0 6px;border: 1px solid #333;}a.btn:hover {font-weight: bold;cursor: pointer;}</style>
</head>
<body><button onclick="ipt.click()">导入 Excel 到网页</button><button onclick="table2excel()">网页表格保存 Excel</button><input type="file" accept=".xls,.xlsx"><span id="filesName"></span><div id="sheetName" style="padding-left:-6px;margin-top:6px;"></div><div id="sheet"></div><script>//隐藏文件控件并绑定按钮 change 事件var ipt = $('input').hide().on('change', function (e) {//input-file 控件事件传回的参数var files = event.target.files[0];if (files) {$("#filesName").text(files.name);//创建浏览器 FileReader 对象，以读入本地文件var reader = new FileReader();reader.readAsBinaryString(files);reader.onload = function (event) {//XLSX 插件二进制读入 excel 文件var workbook = XLSX.read(this.result, { type: 'binary' });var wss = workbook.SheetNames, shs = "";for (var i = 0; i < wss.length; i++)shs += '<a herf="javascript:;" class="btn">' + wss[i] + '</a>';$("#sheetName").html(shs);$("a").bind("click", function () {$("a").css('background-color', '#ddd');$(this).css('background-color', '#fff');var sht = workbook.Sheets[this.innerText];if (Object.keys(sht).length > 2) {var htm = XLSX.utils.sheet_to_html(sht);//默认输出有多余信息，以下用正则提取 table 内容，也可以直接输出 htmvar sheets = /<table>(.+?)<\/table>/gi.exec(htm);$("#sheet").html(sheets[0]);} else {$("#sheet").html('');alert(this.innerText + ' 内容为空');}});$("a:first").click();};}});//导出 html 表格为 excel 文件function table2excel() {var tbl = $('#sheetName')[0];if (!tbl) return;var sht = XLSX.utils.table_to_sheet(tbl);var blob = sheet2blob(sht);openDownloadDialog(blob, $("#filesName").text());}//将一个 sheet 转成最终的 excel 文件的 blob 对象，利用 URL.createObjectURL 下载function sheet2blob(sheet, sheetName) {sheetName = sheetName || 'sheet1';//生成 excel 的配置项var workbook = {SheetNames: [sheetName],Sheets: {}};workbook.Sheets[sheetName] = sheet;var wopts = {bookType: 'xlsx', //要生成的文件类型bookSST: false,  //是否生成 Shared String Tabletype: '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;}//生成下载连接 downloadfunction openDownloadDialog(url, saveName) {if (typeof url == 'object' && url instanceof Blob) url = URL.createObjectURL(url);var aLink = document.createElement('a');aLink.href = url;aLink.download = saveName || '';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);}</script>
</body>
</html>

浏览器网页操作 EXCEL 示例相关推荐

浏览器页面操作——实时监控网页变化，读取网页内容
浏览器页面操作功能介绍浏览器页面操作是集简云的一款免费内置应用,它可以定时监控网页变化,精准捕捉所需信息.一键设置指定网页与元素,全自动监测并即时推送通知,助您在第一时间了解网页最新情况,让您更高效 ...
【SpringBoot】SpringBoot 操作 Excel 完整示例（含源码GitHub）
参考博客:博客园 - Spring Boot 操作 Excel 示例GitHub:spring-boot-study/spring-boot-study-excel/ 1.新建 Spring Boot ...
【转】用VB操作Excel详解
用VB操作Excel详解一. VB读写EXCEL表: VB本身提自动化功能可以读写EXCEL表,其方法如下: 1.在工程中引用MicrosoftExcel 类型库: 从"工程"菜 ...
Qt Xlsx使用教程、Qt操作Excel、Qt生成Excel图表、跨平台不依赖Office
文章目录 1.Qt Xlsx库简介 2. 用法①:使用Xlsx作为Qt5的附加模块 2.1 构建模块 2.2 下载QtXlsx源代码 2.3 为编译器安装Xlsx模块 2.3.1 打开 MinGW 7 ...
用VB操作Excel（VB6.0）（整理）
用VB操作Excel(VB6.0)(整理). 一. VB读写EXCEL表: VB本身提自动化功能可以读写EXCEL表,其方法如下: 1.在工程中引用Microsoft Excel类型库: 从" ...
用VB操作Excel
用VB操作Excel 全面控制Excel: 首先创建Excel对象,使用ComObj: Dim ExcelID as Excel.Application Set ExcelID as new Exce ...
python能实现excel什么功能_Python pandas对excel的操作实现示例
最近经常看到各平台里都有Python的广告,都是对excel的操作,这里明哥收集整理了一下pandas对excel的操作方法和使用过程.本篇介绍 pandas 的 DataFrame 对列 (Colu ...
python pandas excel 排序_Python pandas对excel的操作实现示例
最近经常看到各平台里都有Python的广告,都是对excel的操作,这里明哥收集整理了一下pandas对excel的操作方法和使用过程.本篇介绍 pandas 的 DataFrame 对列 (Colu ...
python抓取网页内容到excel_Python实现抓取网页生成Excel文件的方法示例
本文实例讲述了Python实现抓取网页生成Excel文件的方法.分享给大家供大家参考,具体如下: Python抓网页,主要用到了PyQuery,这个跟jQuery用法一样,超级给力示例代码如下: # ...
Python操作Excel工作簿的示例代码(.xlsx)
前言 Excel 作为流行的个人计算机数据处理软件,混迹于各个领域,在程序员这里也是常常被处理的对象,可以处理 Excel 格式文件的 Python 库还是挺多的,比如 xlrd.xlwt.xluti ...

浏览器网页操作 EXCEL 示例

效果图

源代码

浏览器网页操作 EXCEL 示例相关推荐

最新文章

热门文章