flyingsaucer进行html文件转图片和pdf

水深无声 2023-01-19 07:23 37阅读 0赞

### 目录 ###

*  一、前言
 *  二、html转图片
 *   *  1、添加依赖
     *  2、代码示例
     *   *  (1)测试html文件
         *  (2)代码示例
     *  3、演示结果
 *  三、html转pdf
 *   *  1、添加依赖
     *  2、代码示例
     *  3、演示结果
 *  四、注意点
 *   *  1、html转图片的源url
     *  2、部署到linux上后中文乱码
 *  五、Linux上安装字体
 *   *  1、拷贝字体
     *  2、赋予权限
     *  3、建立字体缓存
     *  4、查看安装的字体

# 一、前言 #

> 之前听到公司同事在讨论用jdk原生api生成图片，但是awt原生api操作比较麻烦，样式也不好控制，因此想到了根据html文件转，搜罗了一番，发现了[flyingsaucer][]。介绍如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70]

# 二、html转图片 #

## 1、添加依赖 ##

<dependency>
                <groupId>org.xhtmlrenderer</groupId>
                <artifactId>flying-saucer-core</artifactId>
                <version>9.1.22</version>
            </dependency>

## 2、代码示例 ##

### (1)测试html文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Title</title>
        <style> body { font-family: SimSun; background: aliceblue; margin: 0px; padding: 0px; } div{ margin: 20px 0px; } </style>
    </head>
    <body>
        <div>
            <a href="https://test-img.yudhabhakti.co.id/bnc-public-bucket/bnc/file/xC3ABZ5mJv28iP_1KaB8Abb6BDOArvPeX-ijVpbjlms.pdf" download="fileName">
                点击下载
            </a>
        </div>
        <div style="color:burlywood">
            首页内容
        </div>
        <div>
            <table border="1px" cellspacing="0px">
                <tr>
                    <th>姓名</th>
                    <th>电话</th>
                </tr>
                <tr>
                    <td>刘亚楼</td>
                    <td>13347293021</td>
                </tr>
            </table>
        </div>
    
    <script> </script>
    </body>
    </html>

> 注意：这里我们设置了字体为宋体。

### (2)代码示例 ###

import org.xhtmlrenderer.simple.Graphics2DRenderer;
    import org.xhtmlrenderer.swing.Java2DRenderer;
    import org.xhtmlrenderer.util.FSImageWriter;
    
    import javax.imageio.ImageIO;
    import java.awt.image.BufferedImage;
    import java.io.File;
    import java.io.IOException;
    
    
    public class ImageRender { 
    
    	public static void main(String[] args) throws IOException { 
    		String basePath = System.getProperty("user.home") + File.separator + "flyingsaucer";
    		File source = new File(basePath, "test.html");
    		File orginalDest = new File(basePath, "original.png");
    		File g2drDest = new File(basePath, "G2DR.png");
    
    		// 有些css样式不支持，如背景颜色
    		Java2DRenderer renderer = new Java2DRenderer(source, 1024);
    		renderer.setBufferedImageType(BufferedImage.TYPE_INT_RGB);
    		BufferedImage java2dImage = renderer.getImage();
    		new FSImageWriter().write(java2dImage, orginalDest.toString());
    		
    		// 支持css样式，如背景颜色
    		BufferedImage g2drImage = Graphics2DRenderer.renderToImageAutoSize(source.toURI().toURL().toExternalForm(), 1024, BufferedImage.TYPE_INT_ARGB);
    		ImageIO.write(g2drImage, "png", g2drDest);
    	}
    }

## 3、演示结果 ##

*  使用Java2DRenderer渲染的`original.png`，可以看到渲染的图片是没有背景颜色的。如下：  
    ![在这里插入图片描述][2021050817272179.png]
 *  使用Graphics2DRenderer渲染的`G2DR.png`，是有背景颜色的，如下：  
    ![在这里插入图片描述][20210508172615223.png]

# 三、html转pdf #

## 1、添加依赖 ##

<dependency>
                <groupId>org.xhtmlrenderer</groupId>
                <artifactId>flying-saucer-pdf-itext5</artifactId>
                <version>9.1.22</version>
            </dependency>

> 备注：官方有标注说iText 2.x版本有尚未解决的安全bug，所以我们这里引入flying-saucer-pdf-itext5。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70 1]

## 2、代码示例 ##

import com.itextpdf.text.pdf.BaseFont;
    import org.xhtmlrenderer.pdf.ITextFontResolver;
    import org.xhtmlrenderer.pdf.ITextRenderer;
    
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.OutputStream;
    import java.nio.file.Paths;
    
    
    public class PDFRender { 
    
    	public static void main(String[] args) throws Exception { 
    		String basePath = System.getProperty("user.home") + File.separator + "flyingsaucer";
    		String source = Paths.get(basePath, "test.html").toString();
    		File dest = Paths.get(basePath, "saucer.pdf").toFile();
    
    		try (OutputStream os = new FileOutputStream(dest)) { 
    			ITextRenderer renderer = new ITextRenderer();
    			ITextFontResolver fontResolver = renderer.getFontResolver();
    			// 必须添加能支持中文的字体，否则html内容有中文会不显示，同时body标签要设置font-family: SimSun
    			String fontPath = PDFRender.class.getResource("/font/simsun.ttc").getPath();
    			fontResolver.addFont(fontPath, BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
    
    			renderer.setDocument(new File(source));
    			renderer.layout();
    			renderer.createPDF(os);
    		}
    	}
    }

> 备注：  
> 1、html文件内容和转图片的一致。  
> 2、html转pdf时，如果html文件内容有中文，则必须设置能支持中文的字体，否则转pdf后中文不会显示。这里我们用的是宋体，字体`simsun.ttc`文件可以直接在`C:\Windows\Fonts`目录下找到，复制即可，如下：
> 
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70 2]

## 3、演示结果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70 3]

# 四、注意点 #

## 1、html转图片的源url ##

> html转图片时，Graphics2DRenderer\#renderToImageAutoSize方法的第一个参数为url，即`java.net.URL`实例的字符串形式，如：`file:/C:/Users/liuyl1/flyingsaucer/test.html`。

## 2、部署到linux上后中文乱码 ##

> 无论是html转图片还是html转pdf，如果服务器上没有支持中文的字体，就会出现中文乱码或者不显示问题，下面会介绍如何在Linux上安装字体。

# 五、Linux上安装字体 #

## 1、拷贝字体 ##

> 上面我们说过在`C:\Windows\Fonts`目录下能找到`simsun.ttc(宋体)`，创建目录将字体复制到下面目录：  
> `mkdir -pv /usr/share/fonts/chinese/TrueType`

## 2、赋予权限 ##

> `chmod 755 /usr/share/fonts/chinese/TrueType`

## 3、建立字体缓存 ##

> `mkfontscale`(如果没有该命令需要安装一下：yum install mkfontscale)  
> `fc-cache -fv`(如果没有该命令需要安装一下：yum install fontconfig)

## 4、查看安装的字体 ##

> `fc-list`查看当前安装的字体，如下：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70 4]

[flyingsaucer]: https://github.com/flyingsaucerproject/flyingsaucer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70]: /images/20221021/7c40f35a15c74f09b92c8caf0ccfb7a5.png
[2021050817272179.png]: /images/20221021/311aa746fafb49a38b8f7ce19b59f90b.png
[20210508172615223.png]: /images/20221021/63725ff7aed548e1b856d877ae6e2571.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70 1]: /images/20221021/6aa617adae7e431093746344dd2ac9ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70 2]: /images/20221021/14946c86df8f40dca696ae0dcf91182a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70 3]: /images/20221021/7f3a3ad61fe749099ba2d3f1d0740863.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmdib21hbmJ1X2x5bA_size_16_color_FFFFFF_t_70 4]: /images/20221021/fbef9acfed534ffaa719e93d8e9a0c8d.png