flyingsaucer进行html文件转图片和pdf

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

目录

一、前言

二、html转图片

1、添加依赖

2、代码示例

(1)测试html文件

(2)代码示例

3、演示结果

三、html转pdf

1、添加依赖

2、代码示例

3、演示结果

四、注意点

1、html转图片的源url

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

五、Linux上安装字体

1、拷贝字体

2、赋予权限

3、建立字体缓存

4、查看安装的字体

一、前言


20210508170027873.png

二、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>

2021050817301426.png

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);
    }
  }
}


20210508173840460.png

3、演示结果20210508181108917.png

四、注意点



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、查看安装的字体

20210508180814952.png

相关文章
|
10天前
|
IDE Java 编译器
使用Java分割PDF文件
使用Java分割PDF文件
17 1
|
4天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
13天前
|
JavaScript 前端开发 API
探讨JavaScript动态添加HTML文件的技术
探讨JavaScript动态添加HTML文件的技术
13 1
|
14天前
|
XML Java 数据格式
Java用xpdf库获取pdf文件的指定范围文本内容
Java用xpdf库获取pdf文件的指定范围文本内容
19 1
|
10天前
|
移动开发 JavaScript 前端开发
必知的技术知识:JqueryMedia插件使用,解决在线预览及打开PDF文件
必知的技术知识:JqueryMedia插件使用,解决在线预览及打开PDF文件
|
11天前
在线免费压缩pdf文件
在线免费压缩pdf文件
11 0
|
13天前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
28 0
|
10月前
|
JavaScript 前端开发
VSCode .vue 文件 html css 无智能提示
VSCode .vue 文件 html css 无智能提示
724 0
|
前端开发 JavaScript
|
5天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
6 0