百度360必应搜狗淘宝本站头条
linux文件压缩linux用户组查看linux磁盘mysql安装linuxlinux多线程
当前位置：网站首页 > 优雅编程 > 正文

踹掉后端，前端导出Excel（前后端分离导出文件）

sinye56 2024-10-25 16:23 12 浏览 0 评论

　　前言

　　导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！

　　代码实现

　　1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，Excel支持html格式，因此我们只需要将构造好的html内容放到Blob对象中，即可下载Excel表格

　　2、利用base64编码构造一个a标签的href链接，从而实现文件下载，同上，我们需要将构造好的html内容URI编码拼到base64链接，即可下载Excel表格

    //blob、base64转文件下载，通过A标签模拟点击,设置文件名
    /*
        万能流  application/octet-stream
        word文件  application/msword
        excel文件  application/vnd.ms-excel
        txt文件  text/plain
        图片文件  image/png、jpeg、gif、bmp
     */
    function downloadByBlob(fileName, text) {
        let a = document.createElement("a");
        a.href = URL.createObjectURL(new Blob([text], {type: "application/octet-stream"}));
        a.download = fileName || 'Blob导出测试.txt';
        a.click();
        a.remove();
        URL.revokeObjectURL(a.href);
    }
    function downloadByBase64(fileName, text) {
        let a = document.createElement('a');
        a.href = 'data:application/octet-stream;base64,' + window.btoa(unescape(encodeURIComponent(text)));
        a.download = fileName || 'Base64导出测试.txt';
        a.click();
        a.remove();
        URL.revokeObjectURL(a.href);
    }

　　封装导出Excel表格方法

    //踹掉后端，前端导出Excel！
    function exportExcel(fileName,columns,datas){
        //列名
        let columnHtml = "";
        columnHtml += "<tr style=\"text-align: center;\">\n";
        for (let key in columns) {
            columnHtml += "<td style=\"background-color:#bad5fd\">"+columns[key]+"</td>\n";
        }
        columnHtml += "</tr>\n";

        //数据
        let dataHtml = "";
        for (let data of datas) {
            dataHtml += "<tr style=\"text-align: center;\">\n";
            for (let key in columns) {
                dataHtml += "<td>"+data[key]+"</td>\n";
            }
            dataHtml += "</tr>\n";
        }

        //完整html
        let excelHtml = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n" +
            "      xmlns:x=\"urn:schemas-microsoft-com:office:excel\"\n" +
            "      xmlns=\"http://www.w3.org/TR/REC-html40\">\n" +
            "<head>\n" +
            "   <!-- 加这个，其他单元格带边框 -->" +
            "   <xml>\n" +
            "        <x:ExcelWorkbook>\n" +
            "            <x:ExcelWorksheets>\n" +
            "                <x:ExcelWorksheet>\n" +
            "                    <x:Name></x:Name>\n" +
            "                    <x:WorksheetOptions>\n" +
            "                        <x:DisplayGridlines/>\n" +
            "                    </x:WorksheetOptions>\n" +
            "                </x:ExcelWorksheet>\n" +
            "            </x:ExcelWorksheets>\n" +
            "        </x:ExcelWorkbook>\n" +
            "   </xml>\n" +
            "   <style>td{font-family: \"宋体\";}</style>\n" +
            "</head>\n" +
            "<body>\n" +
            "<table border=\"1\">\n" +
            "    <thead>\n" +
            columnHtml +
            "    </thead>\n" +
            "    <tbody>\n" +
            dataHtml +
            "    </tbody>\n" +
            "</table>\n" +
            "</body>\n" +
            "</html>";

        //下载
        downloadByBlob((fileName || "导出Excel")+".xls",excelHtml);
    }

　　效果演示

　　导出txt文档

downloadByBlob("downloadByBlob-导出txt文档.txt","downloadByBlob\n导出txt简单测试\n");
downloadByBase64("downloadByBase64-导出txt文档.txt","downloadByBase64\n导出txt简单测试\n");

　　导出Excel表格

exportExcel("xx业务Excel导出", {"id": "编号", "name": "名字", "age": "年龄", "time": "参加工作时间"}, [{
            "id": "A001",
            "name": "张三",
            "age": "18",
            "time": new Date().toLocaleString()
        },{
            "id": "A002",
            "name": "李四",
            "age": "20",
            "time": new Date().toLocaleString()
        }]);

　　导出word文档也是一样

　　后记

　　参考上我们之前的《FreeMarker模板引擎》，先画好我们想要的文档格式然后转成xml，调用我们封装好的方法，将构造好的xml内容转成文件，实现前端导出复杂格式文档！

　　如果有复杂数据，建议还是在后端操作，当然你也可以把数据返回前端在前端导出也行

　　前端导出Excel主要是利用Bolb、base64，以及Excel支持html格式的特性，这个特性不仅前端可以利用，后端也一样可以，这里也分享一下后端工具类，原理都是一样的

package cn.huanzi.qch.util;

import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.*;

/**
 * Excel工具类
 */
public class ExcelUtil {

    /**
     * 导出
     * 无需依赖POI
     */
    /*
        示例：
        try {
            //列名
            LinkedHashMap<String, String> columns = new LinkedHashMap<>(4);
            columns.put("id","编号");
            columns.put("name","名字");
            columns.put("age","年龄");
            columns.put("time","参加工作时间");

            //数据
            List<Map<String, Object>> datas = new ArrayList<>(3);
            HashMap<String, Object> hashMap = new HashMap<>();
            hashMap.put("id","A001");
            hashMap.put("name","张三");
            hashMap.put("age",18);
            hashMap.put("time",new Date());
            datas.add(hashMap);

            //带换行符：

            HashMap<String, Object> hashMap2 = new HashMap<>();
            hashMap2.put("id","A002");
            hashMap2.put("name","李四
李四1
李四2");
            hashMap2.put("age",20);
            hashMap2.put("time",new Date());
            datas.add(hashMap2);

            HashMap<String, Object> hashMap3 = new HashMap<>();
            hashMap3.put("id","A003");
            hashMap3.put("name","王五");
            hashMap3.put("age",25);
            hashMap3.put("time",new Date());
            datas.add(hashMap3);

            //导出
            ExcelUtil.exportByResponse(this.getResponse(),"Excel导出测试",columns,datas);
            //ExcelUtil.exportByFile(new File("D:\\XFT User\\Downloads\\Excel导出测试.xls"),columns,datas);
        } catch (Exception e) {
            e.printStackTrace();
        }
     */
    public static void exportByResponse(HttpServletResponse response, String fileName, LinkedHashMap<String, String> columns, List<Map<String, Object>> datas) throws Exception {
        response.addHeader("Content-disposition", "attachment; filename=" + fileName + ".xls");
        response.setContentType("application/ms-excel");

        StringBuilder sb = exportOfData(columns, datas);

        OutputStream out = response.getOutputStream();
        out.write(sb.toString().getBytes("UTF-8"));
        out.flush();
        out.close();
    }

    public static void exportByFile(File file, LinkedHashMap<String, String> columns, List<Map<String, Object>> datas) {
        StringBuilder sb = exportOfData(columns, datas);

        try (PrintWriter myFile = new PrintWriter(file,"UTF-8")) {
            myFile.println(sb);
        } catch (Exception e) {
            System.err.println("exportByFile()，操作出错...");
            e.printStackTrace();
        }
        System.out.println(file.getName() + "，操作完成！");
    }

    //其他单元格无边框
    private static StringBuilder exportOfData(LinkedHashMap<String, String> columns, List<Map<String, Object>> datas) {
        StringBuilder sb = new StringBuilder("<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"" +
                "      xmlns:x=\"urn:schemas-microsoft-com:office:excel\"" +
                "      xmlns=\"http://www.w3.org/TR/REC-html40\">");

        //加这个，其他单元格带边框
        sb.append("<head>" +
                "    <xml>" +
                "        <x:ExcelWorkbook>" +
                "            <x:ExcelWorksheets>" +
                "                <x:ExcelWorksheet>" +
                "                    <x:Name></x:Name>" +
                "                    <x:WorksheetOptions>" +
                "                        <x:DisplayGridlines/>" +
                "                    </x:WorksheetOptions>" +
                "                </x:ExcelWorksheet>" +
                "            </x:ExcelWorksheets>" +
                "        </x:ExcelWorkbook>" +
                "    </xml>" +
                "   <style>td{font-family: \"宋体\";}</style>" +
                "</head>");

        sb.append("<body>");

        sb.append("<table border=\"1\">");

        //列名
        sb.append("<tr style=\"text-align: center;\">");
        for (Map.Entry<String, String> entry : columns.entrySet()) {
            sb.append("<td style=\"background-color:#bad5fd\">" + entry.getValue() + "</td>");
        }
        sb.append("</tr>");

        //数据
        for (Map<String, Object> data : datas) {
            sb.append("<tr style=\"text-align: center;\">");
            for (Map.Entry<String, String> entry : columns.entrySet()) {
                Object dataValue = data.get(entry.getKey());

                //如果是日期类型
                if (dataValue instanceof java.util.Date) {
                    dataValue = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(dataValue);
                }
                sb.append("<td>" + dataValue.toString() + "</td>");
            }
            sb.append("</tr>");
        }

        sb.append("</table>");

        sb.append("</body>");

        sb.append("</html>");

        return sb;
    }

    //前端导出Excel
    /*
        示例：
         exportExcel("xx业务Excel导出", {"id": "编号", "name": "名字", "age": "年龄", "time": "参加工作时间"}, [{
            "id": "A001",
            "name": "张三",
            "age": "18",
            "time": new Date().toLocaleString()
        },{
            "id": "A002",
            "name": "李四",
            "age": "20",
            "time": new Date().toLocaleString()
        }]);
     */
    /*
        //blob、base64转文件下载，通过A标签模拟点击,设置文件名
        //万能流  application/octet-stream
        //word文件  application/msword
        //excel文件  application/vnd.ms-excel
        //txt文件  text/plain
        //图片文件  image/png、jpeg、gif、bmp
        function downloadByBlob(fileName, text) {
            let a = document.createElement("a");
            a.href = URL.createObjectURL(new Blob([text], {type: "application/octet-stream"}));
            a.download = fileName || 'Blob导出测试.txt';
            a.click();
            a.remove();
            URL.revokeObjectURL(a.href);
        }
        function downloadByBase64(fileName, text) {
            let a = document.createElement('a');
            a.href = 'data:application/octet-stream;base64,' + window.btoa(unescape(encodeURIComponent(text)));
            a.download = fileName || 'Base64导出测试.txt';
            a.click();
            a.remove();
            URL.revokeObjectURL(a.href);
        }
    
        //踹掉后端，前端导出Excel！
        function exportExcel(fileName,columns,datas){
            //列名
            let columnHtml = "";
            columnHtml += "<tr style=\"text-align: center;\">\n";
            for (let key in columns) {
                columnHtml += "<td style=\"background-color:#bad5fd\">"+columns[key]+"</td>\n";
            }
            columnHtml += "</tr>\n";
    
            //数据
            let dataHtml = "";
            for (let data of datas) {
                dataHtml += "<tr style=\"text-align: center;\">\n";
                for (let key in columns) {
                    dataHtml += "<td>"+data[key]+"</td>\n";
                }
                dataHtml += "</tr>\n";
            }
    
            //完整html
            let excelHtml = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n" +
                    "      xmlns:x=\"urn:schemas-microsoft-com:office:excel\"\n" +
                    "      xmlns=\"http://www.w3.org/TR/REC-html40\">\n" +
                    "<head>\n" +
                    "   <!-- 加这个，其他单元格带边框 -->" +
                    "   <xml>\n" +
                    "        <x:ExcelWorkbook>\n" +
                    "            <x:ExcelWorksheets>\n" +
                    "                <x:ExcelWorksheet>\n" +
                    "                    <x:Name></x:Name>\n" +
                    "                    <x:WorksheetOptions>\n" +
                    "                        <x:DisplayGridlines/>\n" +
                    "                    </x:WorksheetOptions>\n" +
                    "                </x:ExcelWorksheet>\n" +
                    "            </x:ExcelWorksheets>\n" +
                    "        </x:ExcelWorkbook>\n" +
                    "   </xml>\n" +
                    "   <style>td{font-family: \"宋体\";}</style>\n" +
                    "</head>\n" +
                    "<body>\n" +
                    "<table border=\"1\">\n" +
                    "    <thead>\n" +
                    columnHtml +
                    "    </thead>\n" +
                    "    <tbody>\n" +
                    dataHtml +
                    "    </tbody>\n" +
                    "</table>\n" +
                    "</body>\n" +
                    "</html>";
    
            //下载
            downloadByBlob((fileName || "导出Excel")+".xls",excelHtml);
        }
     */
}

版权声明

作者：huanzi-qch

出处：https://www.cnblogs.com/huanzi-qch

若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利.

相关推荐

Xfce桌面环境升级截图工具，支持AVIF和JPEG XL格式

IT之家5月20日消息，Xfce团队近日将屏幕截图工具xfce4-screenshooter更新至1.10.4版本，允许用户将截图保存为AVIF和JPEGXL两种无损图像格...

pyautogui:截图及定位功能_如何截图定位

截图函数PyAutoGUI可以截取屏幕截图，将其保存到文件中，并在屏幕中查找图像。如果您有一个小图像，例如需要单击并希望在屏幕上找到它的按钮，这将非常有用。这些功能由PyScreeze模块提供，该模块...

如何在Ubuntu上释放/boot分区的空间?

前几天，我收到一个警告，/boot分区已经几乎满了，没有剩余空间了。?来源：linux.cn?作者：AnkushDas?译者：郑?（本文字数：2868，阅读时长大约：4分钟）前几天，...

新Linux木马发现:每30秒截图并用麦克风录音

近期在Linux平台发现的木马程序能够定期截图，并可通过已连接的麦克风来录音，不同于通常设计用来攻击Linux端服务器的恶意程序。该木马程序最早被俄罗斯安全公司DoctorWeb发现，他们将其称之为...

使用 Rust 实现屏幕截图功能_rust怎么设置快捷键

前言在一些网安产品应用程序中，屏幕截图是常见的需求。对于想要使用Rust来进行屏幕截图的开发者，今天我们将介绍如何使用Rust实现屏幕截图功能，捕获屏幕内容并保存为图像文件。本文的目标本文件将...

Linux中的截图工具 - Flameshot_linux里面比较好的截图工具

Flameshot[1]是一款功能强大但易于使用的屏幕截图软件，中文名称火焰截图。Flameshot简单易用并有一个CLI版本，所以你也可以从命令行来进行截图。Flameshot是一个Lin...

linux/unix中如何使用sed一次替换多个模式

文本处理是我们使用linux/unix必须掌握的一项技能。前两篇文章介绍了如何删除文本文件中的空行以及如何删除文本文件中包含指定字符串的行。本文主要介绍如何使用sed命令一次替换多个模式。以下是测试中...

Linux环境中的shell echo命令使用技巧

简介：在平常编写LinuxShell脚本的时候，常常会用到echo命令。这echo命令的作用呢，就是在显示器上显示出一段文字。这个命令挺简单的，可它在脚本编程还有日常的系统管理里，那可是...

7 个有趣的 Linux 命令，我10年linux经验都没见过一个

Linux命令行可以是高级用户和系统管理员的法宝，Linux不仅仅是枯燥乏味的系统，Linux是由喜欢玩乐的人开发的，他们创建了一系列好玩的命令，当你想要微笑时，试着自己玩这些。1、蒸汽机车（s...

Linux文本处理三剑客之sed命令全面解析，一文就够了

作用sed命令是一个非交互式的行文本编辑器，它能对文件内容进行编辑，默认每次处理文本文件中所匹配到一行内容到模式空间，然后用后面的命令进行操作，操作完成之后，会把模式空间里面的内容输出到屏幕上，然后把...

Linux下常用命令及使用方法详解(可收藏!!!)

总结有哦福利哦ls文件属性：-：普通文件d：目录文件b：块设备c：字符设备文件l：符号连接文件p:命...

Python也有“管道”操作，你知道吗?

在编程世界中，"管道"是一项充满魅力的功能。像Unix和Linux中的管道一样，Python也有“管道”操作。本文将深入研究Python的管道操作，提供一些示例来帮助你理解和掌握它。什么是管...

运维人员常用的 Linux 命令汇总_运维人员常用的 linux 命令汇总表

作为运维人员，这些常用命令不得不会，掌握这些命令，工作上会事半功倍，提供工作效率。一.文件和目录1.cd命令，用于切换当前目录，它的参数是要切换到的目录的路径，可以是绝对路径，也可以是相对路径。cd...

Linux sed 命令详解_linux教程:sed命令的用法

简介sed的全称是：StreamEditor流编辑器，在Linux中是一个强大的文本处理工具，可以处理文件或标准输入流。基本语法sed[options]'command'file通过...

Linux tail命令用法_tail在linux

tail命令是Linux/Unix中的一个命令行工具，用于查看文件的最后几行或动态实时查看文件（tail-f）。语法tail[option(s)][file(s)]主要选项--n:指定显示文...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表