【开发实践】网页预览excel表格原版样式

一、需求分析

由于业务部门需要,在导出excel表格页面,不需要先下载,就可以直接在页面上预览该表格文件。

二、代码实现

使用Luckysheet实现:

什么是Luckysheet

Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

Luckysheet官网:Luckysheet官方在线文档

引入cdn:

javascript 复制代码
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

【前后端数据处理】:

后端返回给前端的数据,需要时流数据:

java 复制代码
 /**
     * 下载文件
     *
     * @param filePath 目标路径
     * @param response 响应请求
     */
    public static void downloadExcelFiles(String filePath, String fileName, HttpServletResponse response, boolean delete) {
        try {
            // 读到流中
            File file = new File(filePath);
            // 设置输出的格式
            //设置中文文件名称
            fileName = URLEncoder.encode(fileName, "UTF-8");
            //浏览器默认服务器传过去的是html,不是excel文件
            //设置响应类型:传输内容是流,并支持中文
            response.setContentType("application/octet-stream;charset=UTF-8");
            //设置响应头信息header,下载时以文件附件下载
            response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
            // 循环取出流中的数据
            if (file.exists()) {
                InputStream inStream = new FileInputStream(filePath);
                byte[] b = new byte[100];
                int len;
                while ((len = inStream.read(b)) > 0) {
                    response.getOutputStream().write(b, 0, len);
                }
                inStream.close();
                if (delete) {
                    deleteDir(new File(filePath).getParentFile().getParentFile());
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        }

前端请求:

javascript 复制代码
axios({
                        method: "post",
                        url: url,
                        responseType:'arraybuffer', //告诉服务器想到的响应格式
                        headers: {}
                    }).then(res => {
                        that.getShowData(res)
                    }).catch(function (error) {
                        $.Notification.autoHideNotify('error', 'top right', '错误提示', '抱歉,服务器错误!');
                    })

        //方法
        getShowData(res) {
                const data = res.data
                var blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
                // console.log("====blob====", blob)
                if (blob.size === 0) {
                    return alert("数据不存在!");
                }
                const file = new window.File(
                    [blob], // blob
                    'Filename.xlsx',
                    {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}
                );
                // console.log("====file====", file)
                this.loadExcel(file)
                $('#full-width-modal').modal('show');
            },

        //加载方法
        loadExcel(files) {
                LuckyExcel.transformExcelToLucky(files, function (exportJson, luckysheetfile) {
                    // console.log("transformExcelToLucky", files, exportJson)
                    if (exportJson.sheets === null || exportJson.sheets.length === 0) {
                        alert("读取excel文件内容失败,目前不支持xls文件!");
                        return;
                    }
                    window.luckysheet.destroy();
                    window.luckysheet.create({
                        container: 'luckysheet', //luckysheet is the container id
                        showinfobar: false,
                        data: exportJson.sheets,
                        title: exportJson.info.name,
                        userInfo: exportJson.info.name.creator,
                        lang: 'zh', // 设定表格语言
                        showinfobar: false,//是否显示顶部信息栏
                        showtoolbar: false,//是否显示工具栏
                        // showsheetbar: false,//是否显示底部sheet页按钮
                        enableAddRow: false,//允许添加行
                        // 自定义配置底部sheet页按钮
                        showsheetbarConfig: {
                            add: false,
                            menu: false,
                        },
                        //自定义底部sheet页右击菜单
                        sheetRightClickConfig: {
                            delete: false, // 删除
                            copy: false, // 复制
                            rename: false, //重命名
                            color: false, //更改颜色
                            hide: false, //隐藏,取消隐藏
                            move: false, //向左移,向右移
                        },
                        //自定义单元格右键菜单
                        cellRightClickConfig: {
                            copy: false, // 复制
                            copyAs: false, // 复制为
                            paste: false, // 粘贴
                            insertRow: false, // 插入行
                            insertColumn: false, // 插入列
                            deleteRow: false, // 删除选中行
                            deleteColumn: false, // 删除选中列
                            deleteCell: false, // 删除单元格
                            hideRow: false, // 隐藏选中行和显示选中行
                            hideColumn: false, // 隐藏选中列和显示选中列
                            rowHeight: false, // 行高
                            columnWidth: false, // 列宽
                            clear: false, // 清除内容
                            matrix: false, // 矩阵操作选区
                            sort: false, // 排序选区
                            filter: false, // 筛选选区
                            chart: false, // 图表生成
                            image: false, // 插入图片
                            link: false, // 插入链接
                            data: false, // 数据验证
                            cellFormat: false // 设置单元格格式
                        }
                    });
                });
            },

【效果图】


如果文章对您有帮助的话,点赞支持一下吧!

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
魔道不误砍柴功2 小时前
Java 中如何巧妙应用 Function 让方法复用性更强
java·开发语言·python
NiNg_1_2342 小时前
SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能
java·spring boot·后端
闲晨2 小时前
C++ 继承:代码传承的魔法棒,开启奇幻编程之旅
java·c语言·开发语言·c++·经验分享
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
测开小菜鸟3 小时前
使用python向钉钉群聊发送消息
java·python·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
P.H. Infinity4 小时前
【RabbitMQ】04-发送者可靠性
java·rabbitmq·java-rabbitmq