純JS如何實(shí)現(xiàn)的讀取excel文件內(nèi)容功能示例
這篇文章主要介紹純JS如何實(shí)現(xiàn)的讀取excel文件內(nèi)容功能示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
在成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)過程中，需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)建站還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。
JS是什么
JS是JavaScript的簡(jiǎn)稱，它是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎng)頁(yè)更加美觀。
本文實(shí)例講述了純JS實(shí)現(xiàn)的讀取excel文件內(nèi)容功能。分享給大家供大家參考，具體如下：
template.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS-XLSX Live Demo</title>
<link href="../css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<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 }
button{}
</style>
</head>
<body>
<pre>
<input type="file" name="xlfile" id="xlf">
<button type="button" class="btn btn-danger"><a href="Techrecord.html" rel="external nofollow" rel="external nofollow" >返回</a></button>
<input type="checkbox" name="useworker" checked="" >
<input type="checkbox" name="xferable" checked="" >
<input type="checkbox" name="userabs" checked="" >
</pre>
<button class="submit_all">提交</button>
<pre id="out"></pre>
<br>
<script src="../js/jquery.js"></script>
<script src="../js/common.js"></script>//這里主要封裝了一下方法，可以忽略，主要使用到以下幾個(gè)js
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="../js/shim.js"></script>
<script src="../js/xlsx.full.min.js"></script>
<script src='../js/myexcel.js'></script>
</body>
</html>myexcel.js
/*jshint browser:true */
/*global XLSX */
var X = XLSX;
var XW = {
/* worker message */
msg: 'xlsx',
/* worker scripts */
rABS: '../js/xlsxworker2.js',
norABS: '../js/xlsxworker1.js',
noxfer: '../js/xlsxworker.js'
};
function ab2str(data) {
var o = "", l = 0, w = 10240;
for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint16Array(data.slice(l*w,l*w+w)));
o+=String.fromCharCode.apply(null, new Uint16Array(data.slice(l*w)));
return o;
}
function s2ab(s) {
var b = new ArrayBuffer(s.length*2), v = new Uint16Array(b);
for (var i=0; i != s.length; ++i) v[i] = s.charCodeAt(i);
return [v, b];
}
function xw_xfer(data, cb) {
var worker = new Worker(rABS ? XW.rABS : XW.norABS);
worker.onmessage = function(e) {
switch(e.data.t) {
case 'ready': break;
case 'e': console.error(e.data.d); break;
default: xx=ab2str(e.data).replace(/\n/g,"\\n").replace(/\r/g,"\\r");cb(JSON.parse(xx)); break;
}
};
if(rABS) {
var val = s2ab(data);
worker.postMessage(val[1], [val[1]]);
} else {
worker.postMessage(data, [data]);
}
}
function xw(data, cb) {
transferable = document.getElementsByName("xferable")[0].checked;
if(transferable) xw_xfer(data, cb);
else xw_noxfer(data, cb);
}
function get_radio_value( radioName ) {
var radios = document.getElementsByName( radioName );
for( var i = 0; i < radios.length; i++ ) {
if( radios[i].checked || radios.length === 1 ) {
return radios[i].value;
}
}
}
function to_json(workbook) {
var result = {};
workbook.SheetNames.forEach(function(sheetName) {
var roa = X.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
if(roa.length > 0){
result[sheetName] = roa;
}
});
return result;
}
var tarea = document.getElementById('b64data');
function b64it() {
if(typeof console !== 'undefined') console.log("onload", new Date());
var wb = X.read(tarea.value, {type: 'base64',WTF:wtf_mode});
process_wb(wb);
}
var token=Cookies.get("token");
console.log(token);
if(token==null){
// alert("你是怎么進(jìn)來的？請(qǐng)先登錄");
// window.location.href="../login.html" rel="external nofollow" ;
}
var global_wb;
function process_wb(wb) {
global_wb = wb;
var output = "";
//這里是成績(jī)批量錄入代碼，可以忽略不計(jì)
$(".submit_all").on("click",function(){
var array=Object.values(to_json(wb))[0];
var len=array.length;
var array1="",array2="",array3="",array4="",array5="";
for(var i=0;i<len;i++){
array1+=array[i].學(xué)號(hào)+",";
array2+=array[i].成績(jī)+",";
array3+=array[i].總分+",";
array4+=array[i].時(shí)間+",";
array5+=array[i].評(píng)語(yǔ)+",";
}
array1=array1.substring(0,array1.length-1);
array2=array2.substring(0,array2.length-1);
array3=array3.substring(0,array3.length-1);
array4=array4.substring(0,array4.length-1);
array5=array5.substring(0,array5.length-1);
console.log(array1);
var url='grade/addall';
var params={
"token":token,
"gradeUserId":array1,
"gradeCourse":array2,
"gradeRank":array3,
"gradeRemark":array5,
"gradeTime":array4
};
pullData(url,params,function(res){
if(res.state==0){
alert("成績(jī)錄入成功！");
window.location.href="Techrecord.html" rel="external nofollow" rel="external nofollow" ;
}
else if(res.state==1){
alert("您輸入的學(xué)號(hào)不存在");
}
});
})
output = JSON.stringify(to_json(wb), 2, 2);
if(out.innerText === undefined) out.textContent = output;
else out.innerText = output;
if(typeof console !== 'undefined') console.log(output);
}
function setfmt() {if(global_wb) process_wb(global_wb);}
var xlf = document.getElementById('xlf');
function handleFile(e) {
rABS = document.getElementsByName("userabs")[0].checked;
use_worker = document.getElementsByName("useworker")[0].checked;
var files = e.target.files;
var f = files[0];
{
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
if(typeof console !== 'undefined')
var data = e.target.result;
if(use_worker) {
xw(data, process_wb);
} else {
var wb;
if(rABS) {
wb = X.read(data, {type: 'binary'});
} else {
var arr = fixdata(data);
wb = X.read(btoa(arr), {type: 'base64'});
}
process_wb(wb);
}
};
if(rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
}
}
if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);導(dǎo)入一個(gè)新建的excel
查看讀取到的值，以json格式顯示
以上是“純JS如何實(shí)現(xiàn)的讀取excel文件內(nèi)容功能示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文題目：純JS如何實(shí)現(xiàn)的讀取excel文件內(nèi)容功能示例
分享網(wǎng)址：http://m.rwnh.cn/article20/igjijo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、靜態(tài)網(wǎng)站、網(wǎng)站策劃、面包屑導(dǎo)航、域名注冊(cè)、響應(yīng)式網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 做好項(xiàng)目管理，才是軟件開發(fā)管理的關(guān)鍵 2016-08-30
- 作為一個(gè)軟件開發(fā)人員，謙遜的重要性 2021-05-06
- 軟件開發(fā)和網(wǎng)站開發(fā)哪種好？?jī)烧哂惺裁磪^(qū)別？ 2022-05-29
- 成都拼購(gòu)APP軟件開發(fā)，成都拼購(gòu)APP軟件制作 2022-06-09
- 教育軟件開發(fā)——現(xiàn)代教育的墊腳石 2016-08-21
- 保姆APP軟件開發(fā)，尋找保姆方便快捷 2022-06-28
- app軟件開發(fā)中的免費(fèi)通話App你了解多少? 2022-08-18
- 手機(jī)app軟件開發(fā)應(yīng)該有一個(gè)硬性的考核指標(biāo) 2016-08-23
- 免費(fèi)的軟件開發(fā)和開源軟件能不能用 2016-08-16
- 成都軟件開發(fā)解析SEO是否需要每天寫原創(chuàng)文章 2022-05-30
- 怎么來判斷一些軟件開發(fā)培訓(xùn)機(jī)構(gòu)是否靠譜？ 2016-08-25
- 虛擬試衣間軟件開發(fā)可以帶來哪些收益 2022-06-05