h5页面如何预览excel文件_kintone excel预览插件

Index

概要

这次为大家分享的是，如何用js写出excel文件的预览。

他方便了pc用户和手机端用户可以无需下载，并且直接在线预览excel文件。

因为excel转html的显示用的是第三方开源库的代码，所以实现上有所限制。具体请参见 所用到开源的库 这些库的说明。

支持

不支持

多sheet显示

图片显示

合并后的单元格显示

链接，文字样式等

手机画面优化

效果图

PC：

手机：

示例代码

所用到开源的库

js:

css:

代码

判断是否为excel文件

function checkXls(file) {

let reg = /\.xl(s[xmb]|t[xm]|am|s)$/g;

return reg.test(file);

}

加载模态框，显示加载画面，添加预览图标

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 = $('');

let myModal =

'' +

'

' +

'

' +

'

' +

'

' +

'

' + fileInfo.name + '

' +

'' +

'×' +

'' +

'

' +

'

• '