• 关于我用xhtmlrenderer将html转换img结果样式飞了的这档事

    项目有个业务需求，就是客户需要我们提供一个可以导出企业各项数据的word平台，数据是从企通查和天眼查查过来的，其中有个表是企业的发展历程数据，需要我们将各大模块数据从第三方查询出来然后导出word

    根据我们课题研究，最后决定用Freemarker模板引擎画发展历程页面(要图片显示的)，然后将发展历程的ftl文件转化成html再转成img，然后将发展历程的img转成base64再引入进word页面的ftl最后导出word。这样word里不但有图片也有自己画的表格。然后转图片这块出现了问题

    由于项目原因不能公开页面截图了

    首先在网上找解决办法，大多数都是用的xhtmlrenderer包

    这个包我亲测了，现在是2022年，我试了，很多样式直接导出来不显示，尤其是CSS3的，像我们页面用的flex啥的压根样式都不对，所以这就有问题了，毕竟工作还得给人家弄是么

    我去maven远程仓库查了下jar包

    可以看到这个jar包已经有十年没升级了，已经不维护了

    不过他还有另外一个版本

    这个flying-saucer倒是还在维护，不过也根本不好使，border-radius该不好使还不好使。

    后来看到CSDN有个老哥同样也遇到个这个问题 https://blog.csdn.net/xcc_2269861428/article/details/85246815

    他想实现的功能跟我们差不多，我就试了一下，果真好用，而且还简单

    工具下载地址

    https://wkhtmltopdf.org/downloads.html

    最后附上我们的转换代码

    application.yml

    1. # FTL转ImageBase54
    2. ftlToImg:
    3.   resourcePath: "templates"
    4.   modelName: "companyInfo.ftl"
    5.   inputFileName: "E:/JianBao/"
    6.   wkhtmltopdf: "F:/wkhtmltopdf/bin/wkhtmltoimage.exe"
    7.  
    8. # WORD导出目录
    9. create:
    10.   report_createFilePath_50_folder: E://JianBao/downloadPath/
    11.  
    12. spring.freemarker.template-loader-path=classpath:/templates/

    FtlToHtmlToImg

    1. package com.cei.utils;
    2.  
    3. import freemarker.template.Configuration;
    4. import freemarker.template.Template;
    5. import freemarker.template.TemplateException;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.beans.factory.annotation.Value;
    8. import org.springframework.core.io.ClassPathResource;
    9. import org.springframework.core.io.Resource;
    10. import org.springframework.stereotype.Component;
    11. import org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer;
    12. import sun.misc.BASE64Encoder;
    13.  
    14. import javax.annotation.PostConstruct;
    15. import javax.imageio.ImageIO;
    16. import java.awt.*;
    17. import java.awt.image.BufferedImage;
    18. import java.io.*;
    19. import java.math.BigInteger;
    20. import java.nio.charset.StandardCharsets;
    21. import java.util.*;
    22. import java.util.List;
    23.  
    24. @Component
    25. public class FtlToHtmlToImg {
    26.  
    27.     private static FtlToHtmlToImg staticInstance = new FtlToHtmlToImg();
    28.     // 资源绝对路径
    29.     @Value("${ftlToImg.resourcePath}")
    30.     private String resourcePath;
    31.     // 文件ftl模板名称
    32.     @Value("${ftlToImg.modelName}")
    33.     private String modelName;
    34.     // 文件输出路径
    35.     @Value("${ftlToImg.inputFileName}")
    36.     private String inputFileName;
    37.     // wkhtmltopdf平台路径（安装本地的绝对路径，到bin里面的exe）
    38.     @Value("${ftlToImg.wkhtmltopdf}")
    39.     private String wkhtmltopdf;
    40.     @Autowired
    41.     FreeMarkerConfigurer freeMarkerConfigurer;
    42.  
    43.     @PostConstruct
    44.     public void init() {
    45.         staticInstance.resourcePath = resourcePath;
    46.         staticInstance.modelName = modelName;
    47.         staticInstance.inputFileName = inputFileName;
    48.         staticInstance.wkhtmltopdf = wkhtmltopdf;
    49.         staticInstance.freeMarkerConfigurer = freeMarkerConfigurer;
    50.     }
    51.  
    52.     /**
    53.      * 获取模板转img
    54.      *
    55.      * @param
    56.      * @return
    57.      */
    58.     public List> createImgBase64(List> dataList, BigInteger companyId, String companyName) {
    59.         File file = new File(staticInstance.inputFileName + companyId + ".html");
    60.         // 如果文件夹不存在则创建文件夹
    61.         if (!file.exists() && !file.isDirectory()) {
    62.             //创建上级目录
    63.             file.getParentFile().mkdirs();
    64.         }
    65.         //ftl转html
    66.         String ftlFile = staticInstance.modelName;
    67.         String html = null;
    68.         try {
    69.             html = ftlToString(dataList, ftlFile, companyId, companyName);
    70.         } catch (IOException e) {
    71.             throw new RuntimeException(e);
    72.         } catch (TemplateException e) {
    73.             throw new RuntimeException(e);
    74.         }
    75.         // html转图片转base64
    76.         List> ImageBase64 = new ArrayList<>();
    77.         try {
    78.             ImageBase64 = ImageRender(html, companyId, companyName);
    79.         } catch (IOException e) {
    80.             e.printStackTrace();
    81.         }
    82.         return ImageBase64;
    83.     }
    84.  
    85.     /**
    86.      * @param map          需要填充的数据集合
    87.      * @param templateName 被填充的ftl文件
    88.      * @return html数据
    89.      * @throws IOException
    90.      * @throws TemplateException
    91.      * @Description: 将ftl文件转html文件
    92.      * @Author:
    93.      * @Date:
    94.      */
    95.     public String ftlToString(List> dataList, String templateName, BigInteger companyId, String companyName) throws IOException, TemplateException {
    96.         LoggerUtil.info("开始转换企业ID【" + companyId + "】【" + companyName + "】的页面, ftl转html");
    97.         String value = "";
    98. //        Configuration configuration = new Configuration();
    99. //        Resource resource = new ClassPathResource(staticInstance.resourcePath);
    100. //        File sourceFile = resource.getFile();
    101. //        String ftlPath = sourceFile.getAbsolutePath();
    102.         String filName = templateName;
    103.         String encoding = "UTF-8";
    104.         StringWriter out = new StringWriter();
    105. //        configuration.setDirectoryForTemplateLoading(new File(ftlPath));
    106.         Template template = staticInstance.freeMarkerConfigurer.getConfiguration().getTemplate(filName, encoding);
    107.         template.setEncoding(encoding);
    108.         Map map = new HashMap<>();
    109.         map.put("historyList", dataList);
    110.         template.process(map, out);
    111.         out.flush();
    112.         out.close();
    113.         value = out.getBuffer().toString();
    114.         LoggerUtil.info("结束转换企业ID【" + companyId + "】【" + companyName + "】的页面, ftl转html");
    115.         return value;
    116.     }
    117.  
    118.     /**
    119.      * @param html html代码
    120.      * @return base64图片
    121.      * @throws IOException
    122.      * @Description: 将html转换成图片并切割
    123.      * @Author:
    124.      * @Date:
    125.      */
    126.     public List> ImageRender(String html, BigInteger companyId, String companyName) throws IOException {
    127.         LoggerUtil.info("开始输出企业ID【" + companyId + "】【" + companyName + "】的html页面临时文件");
    128.         // 将html输出为文件
    129.         BufferedWriter bufferedWriter = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(staticInstance.inputFileName + companyId + ".html"), StandardCharsets.UTF_8));
    130.         bufferedWriter.write(html);
    131.         bufferedWriter.newLine();
    132.         File source = new File(staticInstance.inputFileName + companyId + ".html");
    133.         bufferedWriter.flush();
    134.         bufferedWriter.close();
    135.         LoggerUtil.info("结束输出企业ID【" + companyId + "】【" + companyName + "】的html页面临时文件");
    136.         // 将输出的html文件转化为图片
    137.         ProcessBuilder pb = new ProcessBuilder(staticInstance.wkhtmltopdf, staticInstance.inputFileName + companyId + ".html", staticInstance.inputFileName + companyId + ".png");
    138.         Process process;
    139.         try {
    140.             LoggerUtil.info("开始转换企业ID【" + companyId + "】【" + companyName + "】的页面,html转img");
    141.             process = pb.start();
    142.             //注意，调用process.getErrorStream()而不是process.getInputStream()
    143.             BufferedReader errStreamReader = new BufferedReader(new InputStreamReader(process.getErrorStream()));
    144.             String line = null;
    145.             line = errStreamReader.readLine();
    146.             while (line != null) {
    147.                 line = errStreamReader.readLine();
    148.             }
    149.             errStreamReader.close();
    150.             process.destroy();
    151.             LoggerUtil.info("结束转换企业ID【" + companyId + "】【" + companyName + "】的页面,html转img");
    152.             LoggerUtil.info("开始切割企业ID【" + companyId + "】【" + companyName + "】的img,然后分别转换base64");
    153.             // 读入大图
    154.             File file = new File(staticInstance.inputFileName + companyId + ".png");
    155.             FileInputStream fis = new FileInputStream(file);
    156.             BufferedImage image = ImageIO.read(fis);
    157.             fis.close();
    158.             // 如果图片太大将切割图片
    159.             // word里一页需要图片多高
    160.             // 平均高度1726是算出来的，在word里一页大小是 height:697.4pt  width:413.7pt
    161.             // 工具生成的图片宽度是1024，所以缩放最终得的结果是word里一页高度需要图片高度1726
    162.             int picHeight = 1726;
    163.             int picHeightTemp = 0;
    164.             // 计算每个小图的宽度和高度
    165.             int chunkWidth = image.getWidth();
    166.             int chunkHeight = picHeight;
    167.             int rows = 1;
    168.             // 图片竖着分几块
    169.             if (image != null && image.getHeight() > 1726) {
    170.                 rows = (image.getHeight() / 1726) + 1;
    171.                 picHeightTemp = image.getHeight() % 1726;
    172.             } else {
    173.                 picHeightTemp = image.getHeight();
    174.             }
    175.             // 图片被切割成几块
    176.             int chunks = rows;
    177.             //大图中的一部分
    178.             int count = 0;
    179.             BufferedImage imgs[] = new BufferedImage[chunks];
    180.             for (int x = 0; x < rows; x++) {
    181.                 // if判断，最后一张如果固定写死高度，会导致图片有上一张图内容拼接
    182.                 // 所以最后一张切割的高度，需要取余判断图片按平均分配高度之后，最后一张是剩余了多高
    183.                 if ((x + 1) == rows) {
    184.                     //设置小图的大小和类型
    185.                     imgs[count] = new BufferedImage(chunkWidth, picHeightTemp, image.getType());
    186.                     //写入图像内容
    187.                     // drawImage的参数，自己点进去源码里看官方注释
    188.                     Graphics2D gr = imgs[count++].createGraphics();
    189.                     gr.drawImage(image, 0, 0, chunkWidth, picHeightTemp, 0, chunkHeight * x, chunkWidth, image.getHeight(), null);
    190.                     gr.dispose();
    191.                 } else {
    192.                     imgs[count] = new BufferedImage(chunkWidth, chunkHeight, image.getType());
    193.                     Graphics2D gr = imgs[count++].createGraphics();
    194.                     gr.drawImage(image, 0, 0, chunkWidth, chunkHeight, 0, chunkHeight * x, chunkWidth, chunkHeight * x + chunkHeight, null);
    195.                     gr.dispose();
    196.                 }
    197.             }
    198.             // 图片被切割的base64
    199.             List> base64List = new ArrayList<>();
    200.             // 输出小图
    201.             for (int i = 0; i < imgs.length; i++) {
    202.                 //ImageIO.write(imgs[i], "jpg", new File("C:\\img\\split\\img" + i + ".jpg"));
    203. //                ImageIO.write(imgs[i], "png", new File("C:\\Users\\87151\\Desktop\\ceshi\\" + i + ".png"));
    204.                 Map map = new HashMap<>();
    205.                 // 图片base64
    206.                 map.put("url", imageToBase64(imgs[i]));
    207.                 // 图片文件名，不能重复，要不word生成的图片也重复
    208.                 map.put("name", 10000 + i);
    209.                 // 动态高度，防止最后一张拉伸
    210.                 if (i + 1 == imgs.length) {
    211.                     map.put("myheight", picHeightTemp / 2.475);
    212.                 } else {
    213.                     map.put("myheight", "697.4");
    214.                 }
    215.                 base64List.add(map);
    216.             }
    217.             LoggerUtil.info("结束切割企业ID【" + companyId + "】【" + companyName + "】的img,然后分别转换base64");
    218.             // 删除临时文件缓存
    219.             deleteTempFile(companyId);
    220.             return base64List;
    221.         } catch (IOException e) {
    222.             e.printStackTrace();
    223.         }
    224.         return new ArrayList<>();
    225.     }
    226.  
    227.     /**
    228.      * 文件BufferedImage类型转BASE64
    229.      *
    230.      * @param bufferedImage
    231.      * @return
    232.      */
    233.     public String imageToBase64(BufferedImage bufferedImage) {
    234.         ByteArrayOutputStream baos = new ByteArrayOutputStream();//io流
    235.         try {
    236.             ImageIO.write(bufferedImage, "png", baos);//写入流中
    237.             baos.flush();
    238.             baos.close();
    239.         } catch (IOException e) {
    240.             e.printStackTrace();
    241.         }
    242.         byte[] bytes = baos.toByteArray();//转换成字节
    243.         BASE64Encoder encoder = new BASE64Encoder();
    244.         String png_base64 = encoder.encodeBuffer(bytes).trim();//转换成base64串
    245.         png_base64 = png_base64.replaceAll("\n", "").replaceAll("\r", "");//删除 \r\n
    246.         return png_base64;
    247.     }
    248.  
    249.     /**
    250.      * 删除临时文件缓存
    251.      */
    252.     public void deleteTempFile(BigInteger companyId) {
    253.         LoggerUtil.info("开始清除企业ID【" + companyId + "】的临时缓存文件成功");
    254.         // 读取临时文件
    255.         File file1 = new File(staticInstance.inputFileName + companyId + ".html");
    256.         File file2 = new File(staticInstance.inputFileName + companyId + ".png");
    257.         // 删除文件
    258.         if (file1 != null) {
    259.             file1.delete();
    260.         }
    261.         if (file2 != null) {
    262.             file2.delete();
    263.         }
    264.         LoggerUtil.info("结束清除企业ID【" + companyId + "】的临时缓存文件成功");
    265.     }
    266. }

    需要调用的类

    1. // 发展历程数据写进FTL，再把FTL转成HTML，再把HTML转成IMG，把IMG转成BASE64返回来
    2. FtlToHtmlToImg ftlToHtmlToImg = new FtlToHtmlToImg();
    3. List> devolopBase64List = ftlToHtmlToImg.createImgBase64(devolopEsResult, companyId, companyName);

            注意我们这边的参数，如果扒用的话需要酌情修改，我们参数是1.数据参数 2.企业id 3.企业名，企业ID和企业名字单纯就是为了传过去打印Log4j日志的，工具类里面的LoggerUtil是我们自己封装的Log4j的类，自己删了就行。

            工具类里面的方法大多数都是直接网上找的，不过找的帖子不是一个，太多没法发转发链接了，部分我们自己业务后补的是我自己写的。

    spring.freemarker.template-loader-path=classpath:/templates/ 

     这句配置对应工具类里的

    1. @Autowired
    2. FreeMarkerConfigurer freeMarkerConfigurer;

            必加，因为如果单纯的用 new ClassPathResource 的话打包成jar包运行会获取不到resource的资源

            这里可以参考我另一个文章 https://blog.csdn.net/qq_37241221/article/details/126048613

     

            导出word的话，里面图片太大超过了word一页内容，word可能要么压缩图片高度，要么就直接后面内容不显示了，我这里自己写了个切割方案，会根据图片的高度自己判断该不该切割，然后导入到word，1726那个数字是我根据word一页多高自己算的，亲测好用

    最后附上切割效果图 

  • 相关阅读:
    扩散模型实战（十）：Stable Diffusion文本条件生成图像大模型
    bitbucket.org 用法
    视频汇聚/视频云存储/视频监控管理平台EasyCVR部署后无法正常启用是什么问题？该如何解决？
    【鸟哥杂谈】Linux环境下解决端口占用问题 Error: listen EADDRINUSE: address already in use :::8266
    深入分析：浏览器中输入一个URL会发生什么事情呢？
    vite创建vue3项目页面引用public下js文件失败解决
    ARMday01(计算机理论、ARM理论)
    前端科举八股文-REACT篇
    FastAPI 学习之路（七）字符串的校验
    Java多并发（四）| 锁（Lock接口 & AQS & ReentrantLock）
  • 原文地址：https://blog.csdn.net/qq_37241221/article/details/126103193