用JS實現excel預覽
阿新 • • 發佈：2020-08-06
這次為大家分享的是，如何用js寫出excel檔案的預覽。
他方便了pc使用者和手機端使用者可以無需下載，並且直接線上預覽excel檔案。
因為excel轉html的顯示用的是第三方開源庫的程式碼，所以實現上有所限制。具體請參見所用到開源的庫這些庫的說明。
| 支援 | 不支援 |
|---|---|
| 多sheet顯示 | 圖片顯示 |
| 合併後的單元格顯示 | 連結，文字樣式等 |
| 手機畫面優化 |
效果圖
PC：
手機：
示例程式碼
所用到開源的庫
js:
jQuery：https://js.cybozu.cn/jquery/3.4.1/jquery.min.js
sheetjs (js-xlsx)：https://github.com/SheetJS/sheetjs
bootstrap：https://github.com/twbs/bootstrap
css:
https://github.com/FortAwesome/Font-Awesome
https://github.com/keaukraine/bootstrap4-fs-modal（mobile端）
程式碼
判斷是否為excel檔案
| 1 2 3 4 |
functioncheckXls(file){
letreg=/\.xl(s[xmb]|t[xm]|am|s)$/g;
returnreg.test(file);
}
|
載入模態框，顯示載入畫面，新增預覽圖示
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
functionloadModal(fileInfo){
letpreviewElement;
jQuery(".file-image-container-gaia").each(function(i,e){
letfileName=jQuery(e).children("a:eq(0)").text();
if(fileName==fileInfo.name&&jQuery(e).children("button").length==0){
previewElement=jQuery(e);
returnfalse;
}
});
if(!previewElement)return;
letmodalId='myModal'+fileInfo.fileKey;
lettabId='myTab'+fileInfo.fileKey;
lettabContentId='tab-content'+fileInfo.fileKey;
let$button=$('<buttontype="button"class="btnbtn-default"data-toggle="modal"data-target="#'+modalId+'"><spanclass="fafa-search"></span></button>');
letmyModal=
'<styletype="text/css">td{word-break:keep-all;white-space:nowrap;}</style>'+
'<divclass="modalfadetab-paneactive"id="'+modalId+'"tabindex="-1"role="dialog"aria-labelledby="myModalLabel">'+
'<divclass="modal-dialogmodal-xl"style="border-radius:5px"role="document">'+
'<divclass="modal-content">'+
'<divclass="modal-header">'+
'<h5class="modal-title">'+fileInfo.name+'</h5>'+
'<buttontype="button"class="close"data-dismiss="modal"aria-label="Close">'+
'<spanaria-hidden="true">×</span>'+
'</button>'+
'</div>'+
'<ulclass="navnav-tabs"id='+tabId+'>'+
'</ul>'+
'<divid='+tabContentId+'class="tab-content">'+
'<divclass="d-flexjustify-content-center">'+
'<divclass="spinner-border"role="status">'+
'<spanclass="sr-only">Loading...</span>'+
'</div>'+
'</div>'+
'</div>'+
'<divclass="modal-footer">'+
'<buttontype="button"class="btnbtn-secondary"data-dismiss="modal">關閉</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
previewElement.append($button);
$('body').prepend(myModal);
$('#'+modalId).on('shown.bs.modal',function(e){
loadRemoteFile(fileInfo);
})
}
|
下載檔案並載入到模態框中
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
functionreadWorkbookFromRemoteFile(url,callback){
letxhr=newXMLHttpRequest();
xhr.open('get',url,true);
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.responseType='arraybuffer';
xhr.onload=function(e){
if(xhr.status==200){
letdata=newUint8Array(xhr.response)
letworkbook=XLSX.read(data,{type:'array'});
if(callback)callback(workbook);
}
};
xhr.send();
}
functionreadWorkbook(workbook,fileInfo){
letsheetNames=workbook.SheetNames;
letnavHtml='';
lettabHtml='';
letmyTabId='myTab'+fileInfo.fileKey;
lettabContentId='tab-content'+fileInfo.fileKey;
for(letindex=0;index<sheetNames.length;index++){
letsheetName=sheetNames[index];
letworksheet=workbook.Sheets[sheetName];
letsheetHtml=XLSX.utils.sheet_to_html(worksheet);
lettabid="tab"+fileInfo.fileKey+"-"+index;
letxlsid="xlsid"+fileInfo.fileKey+"-"+index;
letactive=index==0?"active":'';
navHtml+='<liclass="nav-item"><aclass="nav-link'+active+'"href="#"data-target="#'+tabid+'"data-toggle="tab">'+sheetName+'</a></li>';
tabHtml+='<divid="'+tabid+'"class="tab-pane'+active+'"style="padding:10px;overflow:auto;height:600px">'+
'<divid="'+xlsid+'">'+sheetHtml+'</div></div>';
}
jQuery("#"+myTabId).html(navHtml);
jQuery("#"+tabContentId).html(tabHtml);
jQuery("#"+tabContentId+'table').addClass("tabletable-borderedtable-hover");
}
functionloadRemoteFile(fileInfo){
letfileUrl='/k/v1/file.json?fileKey='+fileInfo.fileKey;
readWorkbookFromRemoteFile(fileUrl,function(workbook){
readWorkbook(workbook,fileInfo);
});
}
|
具體的mobile優化等等詳細程式碼請參考完整文章：
更多文章和演示：Kintone demo環境