这次为大家分享的是，如何用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
|
function
checkXls(file) {
let reg = /\.xl(s[xmb]|t[xm]|am|s)$/g;
return
reg.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
|
function
loadModal(fileInfo) {
let previewElement;
jQuery(
".file-image-container-gaia"
).each(
function
(i, e) {
let fileName = jQuery(e).children(
"a:eq(0)"
).text();
if
(fileName == fileInfo.name && jQuery(e).children(
"button"
).length == 0) {
previewElement = jQuery(e);
return
false
;
}
});
if
(!previewElement)
return
;
let modalId =
'myModal'
+ fileInfo.fileKey;
let tabId =
'myTab'
+ fileInfo.fileKey;
let tabContentId =
'tab-content'
+ fileInfo.fileKey;
let $button = $(
'<button type="button" class="btn btn-default" data-toggle="modal" data-target="#'
+ modalId +
'"><span class="fa fa-search"></span></button>'
);
let myModal =
'<style type="text/css">td{word-break: keep-all;white-space:nowrap;}</style>'
+
'<div class="modal fade tab-pane active" id="'
+ modalId +
'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'
+
'<div class="modal-dialog modal-xl" style="border-radius:5px" role="document">'
+
'<div class="modal-content">'
+
'<div class="modal-header">'
+
'<h5 class="modal-title">'
+ fileInfo.name +
'</h5>'
+
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">'
+
'<span aria-hidden="true">×</span>'
+
'</button>'
+
'</div>'
+
'<ul class="nav nav-tabs" id='
+ tabId +
'>'
+
'</ul>'
+
'<div id='
+ tabContentId +
' class="tab-content">'
+
'<div class="d-flex justify-content-center">'
+
'<div class="spinner-border" role="status">'
+
'<span class="sr-only">Loading...</span>'
+
'</div>'
+
'</div>'
+
'</div>'
+
'<div class="modal-footer">'
+
'<button type="button" class="btn btn-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
|
function
readWorkbookFromRemoteFile(url, callback) {
let xhr =
new
XMLHttpRequest();
xhr.open(
'get'
, url,
true
);
xhr.setRequestHeader(
'X-Requested-With'
,
'XMLHttpRequest'
);
xhr.responseType =
'arraybuffer'
;
xhr.onload =
function
(e) {
if
(xhr.status == 200) {
let data =
new
Uint8Array(xhr.response)
let workbook = XLSX.read(data, { type:
'array'
});
if
(callback) callback(workbook);
}
};
xhr.send();
}
function
readWorkbook(workbook, fileInfo) {
let sheetNames = workbook.SheetNames;
let navHtml =
''
;
let tabHtml =
''
;
let myTabId =
'myTab'
+ fileInfo.fileKey;
let tabContentId =
'tab-content'
+ fileInfo.fileKey;
for
(let index = 0; index < sheetNames.length; index++) {
let sheetName = sheetNames[index];
let worksheet = workbook.Sheets[sheetName];
let sheetHtml = XLSX.utils.sheet_to_html(worksheet);
let tabid =
"tab"
+ fileInfo.fileKey +
"-"
+ index;
let xlsid =
"xlsid"
+ fileInfo.fileKey +
"-"
+ index;
let active = index == 0 ?
"active"
:
''
;
navHtml +=
'<li class="nav-item"><a class="nav-link '
+ active +
'" href="#" data-target="#'
+ tabid +
'" data-toggle="tab">'
+ sheetName +
'</a></li>'
;
tabHtml +=
'<div id="'
+ tabid +
'" class="tab-pane '
+ active +
'" style="padding:10px;overflow:auto;height:600px" >'
+
'<div id="'
+ xlsid +
'">'
+ sheetHtml +
' </div></div>'
;
}
jQuery(
"#"
+ myTabId).html(navHtml);
jQuery(
"#"
+ tabContentId).html(tabHtml);
jQuery(
"#"
+ tabContentId +
' table'
).addClass(
"table table-bordered table-hover"
);
}
function
loadRemoteFile(fileInfo) {
let fileUrl =
'/k/v1/file.json?fileKey='
+ fileInfo.fileKey;
readWorkbookFromRemoteFile(fileUrl,
function
(workbook) {
readWorkbook(workbook, fileInfo);
});
}
|
具体的mobile优化等等详细代码请参考完整文章：
更多文章和演示：Kintone demo环境