浏览器网页操作 EXCEL 示例
生活随笔
收集整理的這篇文章主要介紹了
浏览器网页操作 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 示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 并查集做题总结
- 下一篇： 前端预览excel插件_网页实现Exce