LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【JavaScript】X-Spreadsheet基于canvas 构建的轻量级 Excel 开发库

admin
2024年6月12日 8:43 本文热度 828

作者:myliang

这是一个基于 Web(es6)canvas 构建的轻量级 Excel 开发库,像这样:

或者查看 demo

 

 

 以下修改自sheetjs demos

sheetjs/demos/xspreadsheet at master · SheetJS/sheetjs · GitHub

<!DOCTYPE html>

<!-- xlsx.js (C) 2013-present  SheetJS http://sheetjs.com -->

<!-- vim: set ts=2: -->

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>SheetJS + x-spreadsheet Live Demo</title>

<style>

#drop{

border:2px dashed #bbb;

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

padding:25px;

text-align:center;

font:20pt bold,"Vollkorn";color:#bbb

}

#b64data{

width:100%;

}

a { text-decoration: none }

</style>

<!-- x-spreadsheet stylesheet -->

<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css"/>

</head>

<body>

<pre>

<b><a href="http://sheetjs.com">SheetJS Data Preview Live Demo</a></b>

 

<a href="https://github.com/myliang/x-spreadsheet">x-spreadsheet component library</a>

 

<a href="https://github.com/SheetJS/sheetjs">Source Code Repo</a>

<a href="https://github.com/SheetJS/sheetjs/issues">Issues?  Something look weird?  Click here and report an issue</a>

 

<div id="drop">Drop a spreadsheet file here to see sheet data</div>

<input type="file" name="xlfile" id="xlf" /> ... or click here to select a file

<textarea id="b64data">... or paste a base64-encoding here</textarea>

</pre>

<p><input type="submit" value="Export to XLSX!" id="xport" onclick="export_xlsx();" disabled="true"></p>

<div id="htmlout"></div>

<br />

<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>

<script src="shim.js"></script>

<script src="xlsx.full.min.js"></script>

<script src="xlsxspread.js"></script>

<script src="zh-cn.js"></script>

<script>

/*jshint browser:true */

/* eslint-env browser */

/* eslint no-use-before-define:0 */

/*global Uint8Array, Uint16Array, ArrayBuffer */

/*global XLSX */

x_spreadsheet.locale('zh-cn');

var HTMLOUT = document.getElementById('htmlout');

var xspr = x_spreadsheet(HTMLOUT);

HTMLOUT.style.height = (window.innerHeight - 400) + "px";

HTMLOUT.style.width = (window.innerWidth - 50) + "px";

 

var process_wb = (function() {

var XPORT = document.getElementById('xport');

 

return function process_wb(wb) {

/* convert to x-spreadsheet form */

var data = stox(wb);

 

/* update x-spreadsheet */

xspr.loadData(data);

XPORT.disabled = false;

 

if(typeof console !== 'undefined') console.log("output", new Date());

};

})();

 

var do_file = (function() {

return function do_file(files) {

var f = files[0];

var reader = new FileReader();

reader.onload = function(e) {

if(typeof console !== 'undefined') console.log("onload", new Date());

var data = e.target.result;

data = new Uint8Array(data);

process_wb(XLSX.read(data, {type: 'array'}));

};

reader.readAsArrayBuffer(f);

};

})();

 

(function() {

var drop = document.getElementById('drop');

if(!drop.addEventListener) return;

 

function handleDrop(e) {

e.stopPropagation();

e.preventDefault();

do_file(e.dataTransfer.files);

}

 

function handleDragover(e) {

e.stopPropagation();

e.preventDefault();

e.dataTransfer.dropEffect = 'copy';

}

 

drop.addEventListener('dragenter', handleDragover, false);

drop.addEventListener('dragover', handleDragover, false);

drop.addEventListener('drop', handleDrop, false);

})();

 

(function() {

var xlf = document.getElementById('xlf');

if(!xlf.addEventListener) return;

function handleFile(e) { do_file(e.target.files); }

xlf.addEventListener('change', handleFile, false);

})();

 

function export_xlsx() {

var new_wb = xtos(xspr.getData());

 

/* write file and trigger a download */

XLSX.writeFile(new_wb, 'sheetjs.xlsx', {});

}

</script>

<script type="text/javascript">

/* eslint no-use-before-define:0 */

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-36810333-1']);

_gaq.push(['_trackPageview']);

 

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

</body>

</html>


该文章在 2024/6/12 9:14:34 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved