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

相关文章
|
5天前
HTML图片
【10月更文挑战第4天】HTML图片。
12 2
|
7天前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
20 2
|
22天前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
32 5
|
1月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
39 13
|
20天前
|
Python
Python办公自动化:提取pdf文件中的图片
Python办公自动化:提取pdf文件中的图片
16 0
|
22天前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
24 0
|
2月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
31 0
在线将多张图片拼接起来图工具HTML源码
|
2月前
|
数据安全/隐私保护 Python Windows
三种方法,Python轻松提取PDF中全部图片
三种方法,Python轻松提取PDF中全部图片
|
2月前
写一个HTML文件
【8月更文挑战第27天】写一个HTML文件。
30 1
|
2月前
【Azure 应用服务】部署Azure Web App时,是否可以替换hostingstart.html文件呢?
【Azure 应用服务】部署Azure Web App时,是否可以替换hostingstart.html文件呢?