关于javascript:用JS实现excel预览

概要

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

他不便了 pc 用户和手机端用户能够无需下载，并且间接在线预览 excel 文件。

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

效果图

PC：

手机：

示例代码

所用到开源的库

js:

jQuery：https://js.cybozu.cn/jquery/3.4.1/jquery.min.js

sheetjs (js-xlsx)：[](https://cdn.bootcdn.net/ajax/…https://github.com/SheetJS/sheetjs

bootstrap：[](https://cdn.bootcdn.net/ajax/…https://github.com/twbs/bootstrap

css:

[](https://js.cybozu.cn/font-awe…https://github.com/FortAwesome/Font-Awesome

https://github.com/keaukraine/bootstrap4-fs-modal（mobile 端）

代码

判断是否为 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 = $('<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">&times;</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);
        })
    }

下载文件并加载到模态框中

 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 excel 预览插件
更多文章和演示：Kintone demo 环境