带有openpdf的FlyingSaucer不能正确渲染flex box
基础概念
FlyingSaucer 是一个基于 iText 的 Java 库，用于将 HTML 和 CSS 转换为 PDF。它支持大部分 CSS 2.1 规范，但在某些高级 CSS 特性上可能存在限制。
Flexbox 是 CSS3 中的一个布局模块，用于创建灵活的布局结构。它允许开发者通过简单的属性设置来控制容器内元素的排列方式。
相关优势
- FlyingSaucer: 能够将 HTML 和 CSS 转换为高质量的 PDF 文件，适用于需要生成复杂文档的场景。
- Flexbox: 提供了强大的布局能力，能够轻松实现响应式设计和复杂的多方向布局。
类型
- FlyingSaucer: Java 库
- Flexbox: CSS 布局模块
应用场景
- FlyingSaucer: 适用于需要将网页内容转换为 PDF 的应用，如报告生成、电子发票等。
- Flexbox: 适用于需要灵活布局的网页设计，如响应式网站、仪表板等。
问题原因及解决方法
问题原因: FlyingSaucer 对 Flexbox 的支持有限，尤其是在处理某些复杂的 Flexbox 布局时可能会出现渲染问题。
解决方法:
- 简化 Flexbox 布局: 尝试简化 Flexbox 布局，避免使用过于复杂或高级的 Flexbox 属性。
- 使用 CSS Grid: 如果 Flexbox 布局无法满足需求，可以考虑使用 CSS Grid 布局，它在 FlyingSaucer 中的支持相对较好。
- 自定义渲染逻辑: 如果上述方法都无法解决问题，可以考虑在生成 PDF 之前，通过自定义的 Java 代码对 HTML 进行预处理，手动调整布局。
- 寻找替代方案: 如果 FlyingSaucer 无法满足需求，可以考虑使用其他支持更好 CSS 渲染的库，如 Puppeteer（Node.js）或 wkhtmltopdf（基于 WebKit）。
示例代码
以下是一个简单的示例，展示如何使用 FlyingSaucer 将 HTML 转换为 PDF：
import org.xhtmlrenderer.pdf.ITextRenderer;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
public class HtmlToPdfConverter {
public static void main(String[] args) throws Exception {
String html = "<html><head><title>Test</title></head><body>" +
"<div style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\">" +
"<p>Hello, World!</p>" +
"</div></body></html>";
try (OutputStream outputStream = new FileOutputStream(new File("output.pdf"))) {
ITextRenderer renderer = new ITextRenderer();
renderer.setDocumentFromString(html);
renderer.layout();
renderer.createPDF(outputStream);
}
}
}参考链接
通过上述方法和建议，您应该能够解决 FlyingSaucer 在渲染 Flexbox 布局时遇到的问题。
相关·内容
我想使用latest FLyingSaucer呈现PDF文档。build.gradle:
<html><style> display: flex;
background-color: DodgerB
浏览 156提问于2021-11-08得票数 1
回答已采纳
我正试图使用FlyingSaucer将带有居中图像的xhtml解析为PDF。问题是，当我尝试使用相同的xhtml文件和FlyingSaucer库创建PDF时:图像不再以中心为中心。唯一对我有效的方法是向img添加一个宽度属性。您知道如何在不更改html或css<e
浏览 2提问于2019-08-07得票数 1
我有下面的css属性，它可以在这里工作，但我不能让它在生产环境中工作。这迫使我添加'flex: 0 0 100%‘。现在我的解决方案是设置*{flex: 0 0 100%}，我的假设是它与flex-basis有关。有人有更好的解决方案吗？ 使用我的全局解决方案进行屏幕截图渲染 ? 使用我的全局解决方案进行屏幕截图渲染 ? <style>
.flex
浏览 103提问于2019-03-08得票数 0
回答已采纳
1回答
我认为会是一个简单的布局，结果证明我还无法完成。
flex-wrap: wrap; flex-wrap: wrap; <div class="box"><
浏览 0提问于2018-02-26得票数 1
回答已采纳
1回答
我第一次在css中使用flex box模型。在Chrome和Safari中一切都渲染得很好，但Firefox就是一大堆乱七八糟的东西，而且我还没有找到一台可以在IE中测试的PC。我是否为flex box模型使用了正确的属性？请访问查看我的样式表
谢谢:)
浏览 2提问于2012-07-26得票数 0
1回答
所以我把codepen的代码简化如下：
<div class="input-group-item"> </label> </div>
@import "
浏览 2提问于2015-08-04得票数 0
2回答
我的意思是这个组件可能无法完成，但我不知道我想要的组件是如何调用的。我想实现一个列表，但有一种“图标外观”。你可以说是某种跳板导航。如果有人能理解我的意思，那真的会对我很有帮助。这只是Photoshop中的一个快速草图，它应该是什么样子：我将感谢每一个答案和可能的解决方案，谢谢。
浏览 2提问于2011-08-07得票数 0
回答已采纳
当我使用带有flex的内容的ScrollView时，它们不会显示，flex似乎不能工作。如何让flex在ScrollView中工作？const App = (props) => {
<ScrollView style={styles.body}> <View style={style
浏览 16提问于2020-05-30得票数 0
3回答
我基本上想使用css和html来定位元素，使它们占据合适的空间。所以我有一个网格状的结构，元素堆叠得很好。问题是我不能让小盒子在大盒子旁边装满。inline-block;width:160px;overflow:hidden;我意识到有一些方法可以命名特定的元素，并使用绝对定位将它们放在适当的位置，但理想情况下，我希望只使用css和html就能使它们垂直和水平地放置在适当的位置。
浏览 0提问于2013-06-04得票数 3
回答已采纳
1回答
当有带有display: flex的外部div，带有flex: 1 0 auto的内部div，以及带有width: 100%的内部div时，输入会以一定的大小从容器中分离出来。这很可能是输入的默认最小大小，但是设置min-size: 0并不能修复它。删除flex确实解决了这个问题，但是我想知道为什么(因为默认的flex基值是auto )，以及如何
浏览 1提问于2019-06-20得票数 2
回答已采纳
我在css中有一个导航条，在父级和子级上分别使用display: flex;和display: box;。第一个html元素使用flex，其中：
导航栏以Chrome、Safari和IE为核心进行渲染。但是Firefox没有正确地呈现它。它是如
浏览 0提问于2014-03-10得票数 0
回答已采纳
1回答
我正在创建一个元素列表，并使用带有方向行的flex框将它们平均间隔为4行。我还需要一个周围的容器与灵活的方向列，有更多的元素以下。问题是，当我使用flex属性时，我会看到flex框的高度有时会发生变化。
有两个选项的Flex基础(行为不正确
浏览 1提问于2019-07-02得票数 1
我是一个交互设计师，偶尔会尝试一些前沿实验，但我绝对不是一个开发人员，所以很抱歉，这个问题的措辞和相关性都不太好。我最近一直喜欢按照中的建议重新设置盒子大小，但也将开始使用柔性盒属性。正如我所读到的，柔性盒是一个完全不同的盒子模型，我想知道它是否使重新设置盒子大小的概念不相关，还是一个坏主意？
浏览 2提问于2015-08-14得票数 1
回答已采纳
3回答
我尝试每行显示2列，但目前似乎不能正确完成。我想要复制的是：
但是我不知道如何使用flexbox来处理这个问题.flex { flex-direction: row; flex: 1; padding: 20px; width: 100px;
height:
浏览 11提问于2019-12-03得票数 1
回答已采纳
3回答
据我所知，如果使用IE10 / IE11，我应该能够使用标准化的flex术语。我希望第一个孩子一直在顶部，第二个孩子一直在底部。<div style="display: flex; flex-direction: column; justify-content: space-between; min
浏览 2提问于2016-11-08得票数 11
回答已采纳
这是我的菜单的CSS的一部分： text-align: left; margin: auto;这是我对上面菜单下的主要‘框’所做的事情。.box { width: 50%; background-color: #FFFFFF;
wor
浏览 2提问于2018-09-25得票数 1
1回答
早上好, -webkit-box-align: center; /* Vertically center elements within LI */.reference {
-webkit-box-
浏览 1提问于2012-05-08得票数 1
为此，我使用了一个PDF渲染库(FlyingSaucer)，它可以正确地完成大部分工作。然而，有一个问题:当我在页面上有"href“标记时，当PDF呈现器试图呈现HTML时，它们不能正确解析。例如，如果我有以下代码：它可以在浏览器中正确<
浏览 21提问于2017-01-12得票数 0
回答已采纳
2回答
我正在尝试实现像这里的一样的转换，但使用的是Vuetify。<v-container> <!-- is transition group -->
<transition-group name="car
浏览 1提问于2018-05-04得票数 7
我有装有物品的柔性箱容器。它们是水平的和垂直的中心对齐。这通常是在一个实时网站上呈现的。然而，我需要对齐字体可怕的图标与文字以这样的方式: 1)。所有图标都在左角对齐。这是一个带有草稿的 -webkit-box-orient: horizontal;
-webkit-box</
浏览 0提问于2018-06-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
