网页直接转图片-CFANZ编程社区

背景

首先说说整理这个的原因：
在做网页转图片的时候，百度有很多案例，但都不完善，具体细节交代不清楚；
现在，整理这个将开发的过程中的细节交代清楚，同时如果再次遇到解决不了的问题时，给出解决思路。

话不多说，进入正题！

正题

1 引入依赖

<dependency>
    <groupId>org.xhtmlrenderer</groupId>
    <artifactId>flying-saucer-pdf</artifactId>
    <version>9.0.7</version>
</dependency>
<dependency>
    <groupId>com.openhtmltopdf</groupId>
    <artifactId>openhtmltopdf-core</artifactId>
    <version>0.0.1-RC9</version>
</dependency>

2 转换工具类

import com.openhtmltopdf.swing.Java2DRenderer;
import com.openhtmltopdf.util.FSImageWriter;
import org.w3c.dom.Document;
import org.xhtmlrenderer.resource.XMLResource;
import org.xml.sax.InputSource;
import java.awt.image.BufferedImage;
import java.io.*;
/**
* 授权书图片生成工具
* 通过openhtmltopdf工具生成图片
* 注意：网页内容的宽高与图片宽高需要一直
*/
public class HtmlToImage {
/**
    * 根据html内容生成图片，png格式
    * @param content
    * @param outPath
    * @throws IOException
*/
    public static void buildByContent(String content, String outPath)throws IOException {
        InputSource is =new InputSource(new BufferedReader(new StringReader(content)));
        Document dom = XMLResource.load(is).getDocument();
        final Java2DRenderer renderer =new Java2DRenderer(dom, 1450, 2048);
        final BufferedImage img = renderer.getImage();
        final FSImageWriter imageWriter =new FSImageWriter();//FSImageWriter.newJpegWriter(0.9f);
        imageWriter.write(img, outPath);//输出路径
    }
/**
    * 根据html路径生成图片，png格式
    * @param htmlPath
    * @param outPath
    * @throws IOException
*/
    public static void buildByPath(String htmlPath, String outPath)throws IOException {
        final Java2DRenderer renderer =new Java2DRenderer(new File(htmlPath), 1450, 2048);
        final BufferedImage img = renderer.getImage();
        final FSImageWriter imageWriter =new FSImageWriter();//FSImageWriter.newJpegWriter(0.9f);
        imageWriter.write(img, outPath);
    }
}

3 网页编辑

openhtmltopdf 对网页标签支持度比较低，建议使用table布局

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        @font-face {
            font-family: '微软雅黑';
            src: url(d:/msyh.ttf);
            font-weight: normal;
            font-style: normal;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            font-size: 34px;
        }
        .page {
            margin: 0 auto;
            background-image:url('http://localhost:8088/images/bookbj.png');
            background-size: contain;
            background-repeat: no-repeat;
            width: 1450px;
            height: 2048px;
        }
        .foot{
            border: 0;
            background-image:url('http://localhost:8088/images/picz.png');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            width: 866px;height: 296px;
        }
        table
        {
            border-collapse:collapse;
        }

        table, td, th
        {
            border:1px solid black;
        }
    </style>
</head>
<body >
<div class="page">
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <table width="80%" align="center" style="border: 0;font-size: 26px;">
        <tr align="right">
            <th style="border: 0;">
                授权书编号：XXXX-XXXX-XXXX-0001
            </th>
        </tr>
    </table>
    <br/>
    <br/>
    <br/>
    <table width="70%" align="center" cellpadding="8px"  style="border: 0; font-size: 58px">
        <tr align="center" >
            <th style="border: 0;">
                XXXX软件产品
            </th>
        </tr>
        <tr align="center" >
            <th style="border: 0;">
                授权书
            </th>
        </tr>

    </table>
    <br/>
    <br/>
    <table width="65%" align="center" cellpadding="12px" style="border: 0; font-size: 34px">
        <tr align="left">
            <th style="border: 0;"> </th>
        </tr>
        <tr align="left">
            <th style="border: 0;">授权日期： 2020年06月15日</th>
        </tr>
        <tr align="left"><th style="border: 0;">用户名称： 测试用户</th></tr>
        <tr align="left"><th style="border: 0;">项目名称： 测试项目项目</th></tr>
        <tr align="left"><th style="border: 0;">授权期限： 永久有效 </th></tr>

    </table>
    <br/>
    <br/>
    <table border="1px" width="70%" align="center" cellpadding="26px" >
        <tr align="center" style="font-size: 30px;">
            <th> 序号 </th>
            <th width="39%">货物名称</th>
            <th>版本</th>
            <th>数量</th>
            <th>单位</th>
        </tr>
        <tr align="center" style="font-size: 28px;">
            <td>1</td>
            <td>XXXX软件V2.0</td>
            <td>测试版</td>
            <td>1</td>
            <td>件</td>
        </tr>
    </table>
    <br/>
    <br/>
    <br/>
    <table  align="right" class="foot" >
        <tr align="center">
            <th style="border: 0; font-size: 30px">
                XXXXX技术有限责任公司
                <br/>
                2020年06月15日
            </th>
        </tr>
    </table>

</div>
</body>
</html>

4 常见问题

1、转图片后，字体格式不对，或者乱码
html中，用@font-face 指定字体，与字体文件路径；同时网页body指定字体，必须与@font-face指定的一致。

@font-face {           
         font-family: '微软雅黑';            
         src: url(d:/msyh.ttf);            
         font-weight: normal;           
         font-style: normal;        
}        
body {           
         margin: 0;
         padding: 0; 
         font-family: "微软雅黑";
         font-size: 34px;
}