将html网页展示的图表，下载到PPT文档内，以图片的形式展示在PPT内

news2024/11/28 17:42:09

使用到的工具有：
开发工具：IDEA
报表开发工具：帆软10.0.19
1、针对帆软报表[普通报表]的设置
1.1首先选中在帆软里制作好的报表，选择模板web属性
在这里插入图片描述
1.2.选择数据分析模式，添加一个事件设置，该事件应该设置“加载结束”
在这里插入图片描述
1.3.在Js脚本里写这段代码：

var node = document.getElementsByClassName('x-table')[0].parentElement;
var message = {
	nodeId: '自定义一个别名',
	nodeInnerHTML: node.innerHTML
};
window.parent.postMessage(message, '*');

在这里插入图片描述
–绘制表格及如何将帆软报表展示到html不做过多赘述

给生成PPT方法添加一个按钮事件：

$("#DOWNLOAD").on("click", function () {
        
        //给每个表格设置一个新的ID
        updateTableId();

        var timeBucket = $("#inqu_status-0-timeBucket").val();
        let orderYear = timeBucket.substring(0, 4)
        let orderMonth = timeBucket.substring(4, 6)
        let orderYearC = orderYear + '年'
        let orderMonthC = orderMonth + '月'

        var inInfo = new EiInfo();
        var promises = []; // 存储生成图片的 Promise

		//确保每个table都生成了BASE64编码
        document.querySelectorAll(".html2canvas table").forEach((v, k, p) => {
            var promise = html2canvas(document.querySelector('#' + v.id), {}).then((canvas) => {

                //根据当前id获取tr的数量。1tr假设等于11PX 从而计算出数据表格的高度
                let tableHeight = v.querySelectorAll("tr").length * 11;
                let src = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 将canvas转换成img的src流
                console.log(v.id, k)
                inInfo.set(v.id, src)
                inInfo.set(v.id + 'Height', tableHeight.toString())
                
            });
            promises.push(promise);
        })


		//所有报表的base64编码都在promises里后，调用后台服务
        Promise.all(promises).then(() => {
            inInfo.set("{{Year}}", `${orderYear}`)
            inInfo.set("{{Month}}", `${orderMonth}`)
            inInfo.set("{{YearC}}", `${orderYearC}`)
            inInfo.set("{{MonthC}}", `${orderMonthC}`)
            inInfo.set("{{YearMonth}}", `${orderYear}${orderMonth}`)
            inInfo.set("{{YearMonthC}}", `${orderYearC}${orderMonthC}`)

            var jsonEi = inInfo.toJSONString(true);
            console.log(jsonEi)
            post(IPLATUI.CONTEXT_PATH + "/DownloadAgree", {"temporaryId": "PM15", "jsonEi": jsonEi});

            // IPLAT.progress($("#result"), false);
        });

        IPLAT.progress($("#result"), false);

        

    })

function updateTableId() {
    var tables = document.querySelectorAll("table[class^='x-table']");
    for (var i = 0; i < tables.length; i++) {
        tables[i].setAttribute("id", "newTableId" + i);
        num = i;
    }
}

调用后台：DownloadAgree，通过该服务，去调用具体实现方法

package com.baosight.bgdsp.rp.pm;

import com.baosight.iplat4j.core.ei.EiConstant;
import com.baosight.iplat4j.core.ei.EiInfo;
import com.baosight.iplat4j.core.service.soa.XLocalManager;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class DownloadAgree extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) {
		EiInfo eiInfo = EiInfo.parseJSONString(request.getParameter("jsonEi"));
		String temporaryId = request.getParameter("temporaryId");
		if (temporaryId.equals("PM")) {
			eiInfo.set("response", response);
			eiInfo.set(EiConstant.serviceName, "RPPM07");
			eiInfo.set(EiConstant.methodName, "exportPPT");
			eiInfo = XLocalManager.callNewTx(eiInfo);

		}if (temporaryId.equals("PM15")) {
			eiInfo.set("response", response);
			eiInfo.set(EiConstant.serviceName, "RPPM15");
			eiInfo.set(EiConstant.methodName, "exportPPT");
			eiInfo = XLocalManager.callNewTx(eiInfo);

		}

	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
		doGet(request, response);
	}
}

exportPPT方法：

public EiInfo exportPPT(EiInfo inInfo) throws IOException {
        HttpServletResponse response = (HttpServletResponse) inInfo.get("response");
        // 创建一个空的演示文稿
        String url = "";
        String os = System.getProperty("os.name").toLowerCase();
        boolean isMacOS = os.contains("mac");
        if (isMacOS) {
            url = PlatApplicationContext.getProperty("bgdsp." + projectEnv + ".share.template.mac");
        } else {
            url = PlatApplicationContext.getProperty("bgdsp." + projectEnv + ".share.template");
        }
        String tempName = PlatApplicationContext.getProperty("bgdsp." + projectEnv + ".share.template.rppm15");
        // 读取模板文件
        //InputStream resource = new ClassPathResource("/Users/apple/Desktop/-job/2022-development/iplat4j/渠道长龄库存压降情况汇报_template.pptx").getInputStream();
        FileInputStream inputStream = new FileInputStream(url + tempName);
//        FileInputStream inputStream = new FileInputStream("E://" + tempName);
        // 根据模板，创建一个新的ppt文档
        XMLSlideShow ppt = new XMLSlideShow(inputStream);
        // 读取模板PPT
        inputStream.close();

        Map<String, String> attr = inInfo.getAttr();
        attr.put("netPrice_2", getReportsToimage());

//        List<XSLFSlide> slides = ppt.getSlides();
        // 得到每页ppt
        XSLFSlide[] slides = ppt.getSlides().toArray(new XSLFSlide[0]);
        // 遍历ppt，填充模板
        for (XSLFSlide slide : slides) {
//            List<XSLFShape> shapes = slide.getShapes();
            XSLFShape[] shapes = slide.getShapes().toArray(new XSLFShape[0]);
            // 遍历每页ppt中待填充的形状组件
            for (XSLFShape shape : shapes) {
                if (shape instanceof XSLFTextShape) {
                    // 替换文本
                    XSLFTextShape textShape = (XSLFTextShape) shape;
                    String textValue = textShape.getText();
                    String shapeName = textShape.getShapeName();
                    boolean flag = false;
                    for (String text : extractContent(textValue)) {
                        if (attr.containsKey(text)) {
                            flag = true;
                            //使用mustache语法替换文字 {{YearC}}营{{MonthC}}销预案会
                            textValue = textValue.replace(text, attr.get(text));
                        }
                    }
                    if (flag && StringUtils.isNotBlank(textValue)) {
                        List<XSLFTextParagraph> paragraphs = textShape.getTextParagraphs();
                        for (XSLFTextParagraph paragraph : paragraphs) {
                            List<XSLFTextRun> textRuns = paragraph.getTextRuns();
                            for (XSLFTextRun textRun : textRuns) {
                                textRun.setText("");
                            }
                        }
                        XSLFTextRun textRun2 = textShape.getTextParagraphs().get(0).getTextRuns().get(0);

                        textRun2.setText(textValue);
                    }
                } else if (shape instanceof XSLFPictureShape) {
                    XSLFPictureShape pictureShape = (XSLFPictureShape) shape;
                    XSLFPictureData pictureData = pictureShape.getPictureData();
                    String imageName = pictureShape.getShapeName();
                    String imageBase64 = attr.get(imageName);
                    if (imageBase64 != null) {
                        byte[] bt = Base64.getDecoder().decode(imageBase64.split(",")[1]);
                        XSLFPictureData idx = ppt.addPicture(bt, PictureData.PictureType.PNG);
                        XSLFPictureShape pic = slide.createPicture(idx);
                        Rectangle2D anchor = pictureShape.getAnchor();
                        //高度取决于数据表格的条数 宽度固定
                        pic.setAnchor(new Rectangle2D.Double(anchor.getX(), anchor.getY(), anchor.getWidth(), anchor.getHeight()));
                        pictureShape.setAnchor(new Rectangle2D.Double(10, 0, 0, 0));
                    }
                }
            }
        }
        String fileName = "PPT名字" + DateUtils.curDateTimeStr14() + ".pptx";
        // 保存PPT文件
        //设置输出文件类型为pptx文件
        response.setContentType(CONTENT_TYPE_OF_PPT);
        response.setHeader("Content-Disposition", "attachment;fileName=" + URLEncoder.encode(fileName, CHARSET_OF_UTF8));
        response.setHeader("Pragma", URLEncoder.encode(fileName, CHARSET_OF_UTF8));
        ServletOutputStream outputStream = response.getOutputStream();
        ppt.write(outputStream);
        outputStream.flush();
        outputStream.close();
        return new EiInfo();

    }

extractContent方法：

public static List<String> extractContent(String input) {
        List<String> contents = new ArrayList<>();
        int startIndex = input.indexOf("{{");
        while (startIndex != -1) {
            int endIndex = input.indexOf("}}", startIndex);
            if (endIndex != -1) {
                String content = input.substring(startIndex, endIndex + 2);
                contents.add(content);
                startIndex = input.indexOf("{{", endIndex);
            } else {
                break;
            }
        }
        return contents;
    }

getReportsToimage()方法：该方法针对的是：帆软报表的普通报表中，出现非表格报表的处理方法[即：柱状图、折线图等]，通过直接访问帆软链接的方式去获取表格的base64编码。

private String getReportsToimage() throws IOException {
        String reportAddress = PlatApplicationContext.getProperty("bgdsp." + projectEnv + ".report.address");
        // 创建HttpClient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();

        try {
            // 构造请求URL
            String apiUrl = reportAddress + "/rp/pm/netPrice_2.cpt&format=image&extype=JPG";
            // 创建HttpGet请求
            //HttpPost request = new HttpPost(apiUrl);
            System.out.println("apiUrl");
            System.out.println(apiUrl);
            HttpGet httpGet = new HttpGet(apiUrl);
            // 设置请求头部
            httpGet.addHeader("Content-Type", "text/html; charset=utf-8");
            // 发送请求并获取响应
            HttpResponse responsed = httpClient.execute(httpGet);
            // 解析响应数据
            HttpEntity entity = responsed.getEntity();
            // 检查响应是否成功
            if (responsed.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
                // 获取Content-Type头部信息
                Header contentTypeHeader = entity.getContentType();
                String contentType = contentTypeHeader.getValue();
                // 获取输入流
                InputStream inStream = entity.getContent();
                ByteArrayOutputStream outputStream_u = new ByteArrayOutputStream();

                // 将图片裁剪为宽60px，高60px
                BufferedImage originalImage = ImageIO.read(inStream);
                BufferedImage croppedImage = originalImage.getSubimage(0, 0, 3560, 1560);

                // 将裁剪后的图片转换成字节数组
                ByteArrayOutputStream outputStream_c = new ByteArrayOutputStream();
                ImageIO.write(croppedImage, "png", outputStream_c);
                byte[] croppedImageBytes = outputStream_c.toByteArray();

                // 将图片数据编码为base64格式
                String base64Image = Base64.getEncoder().encodeToString(croppedImageBytes);
                System.out.println(base64Image);
                String responseBody = EntityUtils.toString(entity);
                // 处理响应数据
                System.out.println(responseBody);
                // 关闭输入流和输出流
                inStream.close();
                outputStream_u.close();
                return "data:image/png;base64," + base64Image;
            } else {
                System.out.println("HTTP请求失败！");
            }


        } catch (PlatException e) {

        }
        return "";
    }

最后，在设置PPT模板的时候，将模板内的图片设置为修改后的别名：newTableIdi

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1530120.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

抖音视频爬虫工具安装|视频无水印批量下载软件

抖音视频爬虫工具安装|视频无水印批量下载软件

抖音视频批量下载工具安装教程 想要快速、便捷地批量下载抖音视频吗&#xff1f;不用担心&#xff0c;我们为您提供了简单易行的安装教程&#xff0c;让您轻松体验抖音视频的下载乐趣。q1977470120跟随以下步骤&#xff0c;一起来安装抖音视频批量提取工具吧&#xff01; 步骤…
阅读更多...
Android 系统源码中添加可执行程序

Android 系统源码中添加可执行程序

Android 系统源码中添加可执行程序 本文基本Android 10的源码环境 android 添加的可执行程序&#xff0c;可以分为两类&#xff1a; * C/C 可执行程序 * Java 可执行程序 &#xff08;jar&#xff09;在了解如何给 android 添加可执行程序前&#xff0c;我们需要了解一下ARM…
阅读更多...
云原生相关知识

云原生相关知识

一、kubernetes 1 概述 Kubernetes&#xff08;也称 k8s 或 “kube”&#xff09;是一 个​​开源​​的容器编排平台&#xff0c;可以自动完成在部署、管理和扩展容器化应用过程中涉及的许多手动操作。 我们常说的编排的英文单词为 “Orchestration”&#xff0c;它常被解释…
阅读更多...
Linux中，黑窗口使用vi编辑文件

Linux中，黑窗口使用vi编辑文件

linux用的比较少&#xff0c;一般我只用来部署项目的时候安装环境和传文件&#xff0c;好多乱七八糟的命令&#xff0c;好多东西&#xff0c;不会啊啊啊啊啊啊啊。 这个改文件几百年才用一次,我只想编辑一下文件&#xff0c;百度搜出来一大堆命令&#xff0c;各种模式什么的&am…
阅读更多...
【JVM】如何判断堆上的对象没有被引用？

【JVM】如何判断堆上的对象没有被引用？

如何判断堆上的对象没有被引用&#xff1f; 常见的有两种判断方法&#xff1a;引用计数法和可达性分析法。 引用计数法会为每个对象维护一个引用计数器&#xff0c;当对象被引用时加1&#xff0c;取消引用时减1。 引用计数法的缺点-循环引用 引用计数法的优点是实现简单&…
阅读更多...
qt-pdf-viewer-library 编译过程记录

qt-pdf-viewer-library 编译过程记录

1.qtpdfviewerinitializer.h 中 类模板问题需要修改为下面代码: https://github.com/develtar/qt-pdf-viewer-library 下载代码&#xff1a; 编译出现错误 修改代码&#xff0c;如下: 2.无法触发onViewerLoaded 事件&#xff0c;就是界面无法显示PDF文件 修改下面代码&#…
阅读更多...
MySQL 搭建双主复制服务 并 通过 HAProxy 负载均衡

MySQL 搭建双主复制服务 并 通过 HAProxy 负载均衡

一、MySQL 搭建双主复制高可用服务 在数据库管理中&#xff0c;数据的备份和同步是至关重要的环节&#xff0c;而双主复制&#xff08;Dual Master Replication&#xff09;作为一种高可用性和数据同步的解决方案&#xff0c;通过让两个数据库实例同时充当主服务器和从服务器&…
阅读更多...
WiFi是可以连接网络，但是在Pixel 手机上就连接提示受阻，无法上网-解决方法

WiFi是可以连接网络，但是在Pixel 手机上就连接提示受阻，无法上网-解决方法

1&#xff0c;通过USB连接手机&#xff0c;然后通过adb命令执行 adb shell settings delete global captive_portal_mode adb shell settings put global captive_portal_mode 0 adb shell settings get global captive_portal_mode adb shell settings delete global capti…
阅读更多...
Java 设计模式系列：行为型-状态模式

Java 设计模式系列：行为型-状态模式

简介 状态模式&#xff08;State Pattern&#xff09;是一种行为型设计模式&#xff0c;允许一个对象在其内部状态改变时改变其行为。状态模式中类的行为是由状态决定的&#xff0c;在不同的状态下有不同的行为。 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂…
阅读更多...
【鸿蒙系统】 ---Harmony 鸿蒙编译构建指导（一）

【鸿蒙系统】 ---Harmony 鸿蒙编译构建指导（一）

&#x1f48c; 所属专栏&#xff1a;【鸿蒙系统】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢…
阅读更多...
基于Lealfet.js展示Turf.js生成的平滑曲线实践

基于Lealfet.js展示Turf.js生成的平滑曲线实践

目录 前言 一、问题的由来 1、创建网页框架 2、创建map对象 3、构建点位&#xff0c;生成路线 二、Turf.js平滑曲线改造 1、官网方法介绍 2、0.4弯曲度曲线 3、0.85弯曲度曲线 4、0.1度弯曲曲线 5、综合对比 总结 前言 在很多的关于路线的gis应用中&#xff0c;我们…
阅读更多...
使用甘特图实现高效时间规划

使用甘特图实现高效时间规划

甘特图虽然看似简单,却蕴含着规划时间的奥秘。它将复杂的工序分解成逻辑严密的任务链条,每个短小的条形图块都清晰地道出一个任务的起始、持续和终止。就像指挥家挥舞手中的棒,每个动作都精确拍着节奏,确保各个乐手分工合作、行云流水。择一个好用的甘特图制作工具,会让你事半功…
阅读更多...
web前端之不一样的下拉菜单、不选中第一个元素的样式效果、伪类排除第一个元素、符号选择器、hover、not、first、child

web前端之不一样的下拉菜单、不选中第一个元素的样式效果、伪类排除第一个元素、符号选择器、hover、not、first、child

MENU 效果图htmlcssJShtmlcss 效果图 htmlcssJS html <nav><ul><li class"navli"><h4>HTML5</h4><ul class"ulson"><li class"lison">HTML5</li></ul></li><li class"na…
阅读更多...
论文解读—— 基于边缘梯度方向插值和 Zernike 矩的亚像素边缘检测

论文解读—— 基于边缘梯度方向插值和 Zernike 矩的亚像素边缘检测

论文&#xff1a;《 Subpixel edge detection based on edge gradient directional interpolation and Zernike moment》 地址&#xff1a; http://www.dpi-proceedings.com/index.php/dtcse/article/view/24488 摘要 在本文中&#xff0c;我们提出了一种基于边缘梯度方向插值…
阅读更多...
【双指针】算法例题

【双指针】算法例题

目录 二、双指针 25. 验证回文数 ① 26. 判断子序列 ① 27. 两数之和II - 输入有序数组 ② 28. 盛最多水的容器 ② 29. 三数之和 ② 二、双指针 25. 验证回文数 ① 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一…
阅读更多...
奥特曼剧透GPT-5，将在高级推理功能上实现重大进步

奥特曼剧透GPT-5，将在高级推理功能上实现重大进步

奥特曼&#xff1a;“GPT-5的能力提升幅度将超乎人们的想象...” 自 Claude 3 发布以来&#xff0c;外界对 GPT-5 的期待越来越强。毕竟Claude 3已经全面超越了 GPT-4&#xff0c;成为迄今为止最强大模型。 而且距离 GPT-4 发布已经过去了整整一年时间&#xff0c;2023年3月1…
阅读更多...
Nebula Graph-01-Nebula Graph简介和安装以及客户端连接

Nebula Graph-01-Nebula Graph简介和安装以及客户端连接

前言 NoSQL 数据库 图数据库并不是可以克服关系型数据库缺点的唯一替代方案。现在市面上还有很多非关系型数据库的产品&#xff0c;这些产品都可以叫做 NoSQL。NoSQL 一词最早于上世纪 90 年代末提出&#xff0c;可以解释为“非 SQL” 或“不仅是 SQL”&#xff0c;具体解释要…
阅读更多...
服务器版本命令查看

服务器版本命令查看

1、# uname &#xff0d;a &#xff08;Linux查看版本当前操作系统内核信息&#xff09; 2、# cat /proc/version &#xff08;Linux查看当前操作系统版本信息&#xff09; 3、# cat /etc/issue 或 cat /etc/redhat-release &#xff08;Linux查看版本当前操作系统发行版信息&…
阅读更多...
python车辆故障管理系统的设计与实现flask-django-nodejs-php

python车辆故障管理系统的设计与实现flask-django-nodejs-php

随着时代的进步&#xff0c;信息科技的不断发展。人类的不断研究、开发&#xff0c;互联网时代已经来临。人们消费的水平也在不断的提高&#xff0c;车辆维修从无到有&#xff0c;慢慢的步入人们的生活&#xff0c;快速的发展&#xff0c;成为新型的消费。网络发展前景无限&…
阅读更多...
计算机视觉综述

计算机视觉综述

历史发展 计算机视觉是通过分析、研究让计算机的智能化达到类似人类的双眼“看”的一门科学。更直接地说&#xff0c;计算机视觉就是让摄像机、电脑这些科技设备成为计算机的“眼睛”&#xff0c;让其可以拥有人类的双眼所具有的分割、分类、识别、跟踪、判别决策等功能。   …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023