<!DOCTYPE html> <html> <head lang='zh'> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="renderer" content="webkit" /> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" /> <title>数据表格</title> <link rel='stylesheet' href='./plugins/css/pluginsCss.css' /> <link rel='stylesheet' href='./plugins/plugins.css' /> <link rel='stylesheet' href='./css/luckysheet.css' /> <link rel='stylesheet' href='./assets/iconfont/iconfont.css' /> <script src="./plugins/js/plugin.js"></script> <!-- rollup luckysheet.js --> <script src="./luckysheet.umd.js"></script> </head> <body> <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"> </div> <!-- demo feature, non-production use --> <script src="./demoData/demoFeature.js"></script> <script src="./demoData/sheetCell.js"></script> <script src="./expendPlugins/luckyexcel.js"></script> <script src="./expendPlugins/exceljs.js"></script> <script src="./expendPlugins/filesaver.js"></script> <script src="./expendPlugins/export.js"></script> <script> $(function () { luckysheet.create(); function createFile(file) { const reader = new FileReader(); reader.addEventListener('load', function () { LuckyExcel.transformExcelToLucky( reader.result, function (exportJson, luckysheetfile) { luckysheet.create({ container: 'luckysheet', // luckysheet is the container id data: exportJson.sheets, title: file.name.split(".").shift(), // userInfo: exportJson.info.name.creator }); setEvent() }, function (err) { logger.error('Import failed. Is your fail a valid xlsx?'); } ); }) reader.readAsBinaryString(file); } window.uploadFile = (input) =>{ let file = input.files[0]; createFile(file); } function importData() { $("#uploadbtn").click() } async function exportData() { let title = $('#luckysheet_info_detail_input').val(); exportExcel(luckysheet).then((buffer) => { SaveExcel(buffer, title) }) } function saveData() { let title = $('#luckysheet_info_detail_input').val(); luckysheet.exitEditMode() let content = luckysheet.getAllSheets(); //去除临时数据,减小体积 for (let i in content) content[i].data = undefined exportExcel(luckysheet).then((buffer) => { // 直接发送ArrayBuffer到后端 const save = { data: JSON.stringify({ content: buffer, title }), type: 'exportExcel' } //console.log(save) window.parent.postMessage(save, '*') }) } function setEvent(){ $("#saveData").click("click", saveData) $("#exportData").click("click", exportData) $("#importData").click("click", importData) } setEvent() function arrayBufferToBase64(buffer) { let binary = ''; const bytes = new Uint8Array(buffer); const len = bytes.byteLength; for (let i = 0; i < len; i += 1) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); //base64 }; const base64ToFile = (code, fileName) => { //console.log(code) let raw; let contentType; if(code.indexOf(";base64,") > -1) { let parts = code.split(";base64,"); contentType = parts[0].split(":")[1]; let fileExt = contentType.split("/")[1]; raw = window.atob(parts[1]); }else{ raw = window.atob(code); //console.log(raw) contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" } const rawLength = raw.length; const uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new File([uInt8Array], `${fileName}`, { "type": contentType }); } function binaryToBase64(data) { let binary = ""; const bytes = new Uint8Array(data); for (let i = 0; i < bytes.length; i++) { binary += String.fromCharCode(bytes[i]); } return btoa(binary); } const eventHandler = (e) => { const eventData = e.data if (eventData.type === 'init') { //const data = JSON.parse(eventData.data) const data = eventData.data //console.log(data) if(!data || !data.title){ return; } //console.log(data) luckysheet.destroy(); if (data.content) { //console.log(data.content) if(data.content.type && data.content.type == "Buffer"){ const base64 = binaryToBase64(data.content.data) //console.log(base64) let file = base64ToFile(base64, data.title) createFile(file); }else{ let file = base64ToFile(data.content, data.title) createFile(file); } }else{ luckysheet.create({ title: data.title }) } } } window.addEventListener('load', () => { window.parent.postMessage({ type: 'initSuccess' }, '*') window.addEventListener('message', eventHandler) }) window.addEventListener('unload', () => { window.removeEventListener('message', eventHandler) }) }) </script> <style> /* 自定义loading演示样式 */ @keyframes loading-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loading-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40px; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120px; } } .loadingAnimation { width: 3em; height: 3em; animation: loading-rotate 2s linear infinite; } .loadingAnimation circle { animation: loading-dash 1.5s ease-in-out infinite; stroke-dasharray: 90, 150; stroke-dashoffset: 0; stroke-width: 2; stroke: currentColor; stroke-linecap: round; } </style> </body> </html>