嵌入式图片在飞碟渲染器中PDF页面之间断开。

4
我有一些关于图片的问题(所有图片都作为base64字符串嵌入到html中)。我使用css。
img {page-break-inside: avoid;}

它有所帮助,但并非总是如此。在某些情况下,同一图像可以在一个页面上正确处理,在其他情况下却分成几页。
这取决于许多因素,例如:
- 图像被指定为块元素 - 先前的图像是或不是块元素 - 在分割的图像之前有一些大图像
我还注意到,如果问题至少发生过一次,那么所有图像到文档结尾都可能在它们无法适应页面时被破坏。
我正在使用RepleacedElementFactory来处理嵌入式图像: http://www.intelligrape.com/blog/using-data-urls-for-embedding-images-in-flying-saucer-generated-pdfs/ 唯一的区别是我稍微改变了大小。
public ReplacedElement createReplacedElement(LayoutContext c, BlockBox box, UserAgentCallback uac, int cssWidth, int cssHeight) {
 Element e = box.getElement();
 if (e == null) {
     return null;
 }
 String nodeName = e.getNodeName();
 if (nodeName.equals("img")) {
     String attribute = e.getAttribute("src");
     FSImage fsImage;
     try {
         fsImage = buildImage(attribute, uac, cssWidth, cssHeight);
     } catch (BadElementException e1) {
         fsImage = null;
     } catch (IOException e1) {
         fsImage = null;
     }
     if (fsImage != null) {
         if(cssWidth == -1 && cssHeight == -1)
         {
            int factor = _sharedContext.getDotsPerPixel();
            int width = fsImage.getWidth();
            int fWidth =  width * factor;
            fsImage.scale(fWidth, -1);
         }
         if(cssWidth == -1 || cssHeight == -1)
         {
            fsImage.scale(cssWidth, cssHeight);
         }
         return new ITextImageElement(fsImage);
     }
 }
 return null;

区别在于我添加了这个代码块:

if(cssWidth == -1 && cssHeight == -1)
         {
            int factor = _sharedContext.getDotsPerPixel();
            int width = fsImage.getWidth();
            int fWidth =  width * factor;
            fsImage.scale(fWidth, -1);
         }

如果CSS中没有给出适当的大小,可以使用此方法来设置大小。如果不这样做,所有的图片都会非常小。

我想计算图片的真实大小(高度)可能存在问题,但是我真的不知道还能改变什么来保证图片永远不会在页面之间断开。

请帮忙解决。


1个回答

1

page-break-inside 只适用于 块级元素,但 img 是一个内联块级元素。尝试使用 img {display: block; page-break-inside: avoid;} 看看是否有效。


谢谢您的建议,但是我一开始将display:block应用于所有图像,问题仍然存在。在我的测试中,我删除了display:block,结果还不错,至少比使用display:block要好得多。不幸的是,我需要将图像显示为块,以便为它们提供正确的位置并对齐它们。 - user3333010
因为没有人能帮助我,所以我正在添加HTML代码导致问题,并附上了PDF文件,其中包含我的结果(渲染后的PDF中有图像被分割)。 [链接] https://www.dropbox.com/s/sjl2fmvlbkh9v4e/ExampleDocument.html?dl=0 [链接] https://www.dropbox.com/s/1dapzf69l7fupze/outFile1.pdf?dl=0 - user3333010

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接