欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

通过freemarker将生成的html转为图片

程序员文章站 2024-02-16 23:27:10
...

最近做得项目中要将html转为图片，觉得下面这种方法比较适合公司需求。其中用到了org.xhtmlrenderer类库，该库网上的资料比较少，而且官网也上不去了。相比之下org.docx4j库的资料比较全，而且对于org.xhtmlrenderer也有一整套实现，可是我用org.docx4j库生成的图片是空白一片不知道什么原因，最后还是用的org.xhtmlrenderer类库。

1.freemarker模板

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
    <title>Title</title>
    <style type="text/css">
        table.reference, table.tecspec {
            border-collapse: collapse;
            width: 1500px;
            margin-bottom: 4px;
            margin-top: 4px;
        }
        table.reference tr:nth-child(even) {
            background-color: #fff;
        }
        table.reference tr:nth-child(odd) {
            background-color: #f6f4f0;
        }
        table.reference th {
            color: #fff;
            background-color: #0dcde8;
            border: 1px solid #555;
            font-size: 12px;
            padding: 3px;
            vertical-align: center;
        }
        table.reference td {
            border: 1px solid #d4d4d4;
            font-size: 16px;
            text-align: center;
        }
        .article-body h3 {
            font-size: 1.8em;
            margin: 2px 0;
            line-height: 1.8em;
        }
        .font{ color:red}
    </style>
</head>
<body>
    <table class="reference">
        <tbody>
        <tr>
            <th rowspan="2">地区</th>
            <th rowspan="2">店号</th>
            <th rowspan="2">店名</th>
            <th rowspan="2">区域</th>
            <th rowspan="2">营业督导</th>
            <th rowspan="2">来客数</th>
            <th rowspan="2">客单价</th>
            <th colspan="${num1}">加价购</th>
            <th colspan="${num2}">重点商品</th>
        </tr>
        <tr>
            <#list goodsInfoList1 as goods>
                <th>${goods.goodsName}</th>
            </#list>
            <th>客销率</th>
            <#list goodsInfoList2 as goods>
                <th>${goods.goodsName}</th>
            </#list>
        </tr>
        <#list dataList2 as element>
        <tr>
            <td>
            ${element.city}
            </td>
            <td>
            ${element.code}
            </td>
            <td>
            ${element.name}
            </td>
            <td>
            ${element.area}
            </td>
            <td>
            ${element.supervisor}
            </td>
            <td>
                <#if element.saleCountNow??>
                ${element.saleCountNow}
                <#else>
                    0
                </#if>
            </td>
            <td>
                <#if element.priceNow??>
                ${element.priceNow}
                <#else>
                    0
                </#if>
            </td>
            <#list element.promotionGoodsList as goods>
                <td>
                    <#if goods.quantity??>
                    ${goods.quantity}
                    <#else>
                        0
                    </#if>
                </td>
            </#list>
            <td>
                <#if element.goodsRate??>
                ${element.goodsRate*100}%
                <#else>
                    0
                </#if>
            </td>
            <#list element.importantGoodsList as goods>
                <td>
                    <#if goods.quantity??>
                    ${goods.quantity}
                    <#else>
                        0
                    </#if>
                </td>
            </#list>
        </tr>
        </#list>
        </tbody>
    </table>

</body>
</html>

2.加载freemarker模板，生成html


//加载邮件模板并生成邮件正文
Map<String, Object> model = new HashMap<String, Object>();
model.put("num1",num1);
model.put("num2",num2);
model.put("goodsInfoList1",goodsInfoList1);
model.put("goodsInfoList2",goodsInfoList2);
model.put("dataList",list);
model.put("dataList2",list2);

Template t2 = configuration.getTemplate("storeDataActual3.ftl"); // freeMarker template
 String content2 = FreeMarkerTemplateUtils.processTemplateIntoString(t2, model);
 int widthImage = 1600;
 int heightImage = 1000;
 String inputFileName = source.xhtml;
 String outFileName = image.jpg;
 File image=
 XhtmlToImageUtils.convertXhtmlToImage(content2,inputFileName,outFileName,widthImage,heightImage);

3.将html转成image的工具类

package com.uhome.common.utils;



import org.xhtmlrenderer.swing.Java2DRenderer;
import org.xhtmlrenderer.util.FSImageWriter;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;

/**
 * Created by uh on 2018/9/13.
 */
public class XhtmlToImageUtils {

    public static File convertXhtmlToImage(String html,String inputFilename,String outputFilename,int widthImage,int heightImage)throws IOException{
        //将html转成文件
        FileWriter writer = new FileWriter(inputFilename);
        writer.write(html);
        writer.flush();
        writer.close();
        //将xhtml文件转成图片
        final File f = new File(inputFilename);
        final Java2DRenderer renderer = new Java2DRenderer(f, widthImage, heightImage);
        final BufferedImage img = renderer.getImage();
        final FSImageWriter imageWriter = new FSImageWriter();
        imageWriter.setWriteCompressionQuality(0.9f);
        imageWriter.write(img, outputFilename);
        final File fout = new File(outputFilename);
        return fout;
    }
}

4.需要用到的库

<dependency>
    <groupId>org.xhtmlrenderer</groupId>
    <artifactId>core-renderer</artifactId>
    <version>R8</version>
</dependency>

生成图片效果

通过freemarker将生成的html转为图片

在开发中遇到的问题：

a.生成的image中有中文，在windows下部署测试没问题，在linux下汉显示为乱码。

解决办法https://blog.csdn.net/leo3070/article/details/82773405

相关标签： java html转图片 freemarker

上一篇： 微信小程序引用css字体库

下一篇：

推荐阅读