Question

我正在开发一个需要将HTML转换为PDF的项目。我正在使用Maven Central的Flying Saucer 9.1.6。下面的PDF生成库是IText 2.1.7。

虽然Flying Saucer Git repo表示它支持CSS3 border-radius语法，但我无法使用border-radius实现圆角。

以下是示例代码

ITextRenderer pdfRenderer = new ITextRenderer();
String resumeHTML = "<html>\n" +
            "<head>\n" +
            "  <title>JS Bin</title>\n" +
            "    <style>\n" +
            "  .circle{\n" +
            "    border-radius: 50%;\n" +
            "  }\n" +
            "</style>\n" +
            "</head>\n" +
            "<body>\n" +
            "  <img src='https://fiverr-res.cloudinary.com/t_profile_original,q_auto,f_auto/profile/photos/3864710/original/isurunix.png'\n" +
            "       class='circle'\n" +
            "       >\n" +
            "  </img>\n" +
            "</body>\n" +
            "</html>";
    pdfRenderer.setDocumentFromString(resumeHTML);
    pdfRenderer.layout();
    FileOutputStream fos = new FileOutputStream("sample.pdf");
    pdfRenderer.createPDF(fos);
    fos.flush();
    fos.close();

上述示例中使用的有效HTML代码段

＆＃13;

<html>
<head>
  <title>JS Bin</title>
    <style>
  .circle{
    border-radius: 50%;
  }
</style>
</head>
<body>
  <img src='https://fiverr-res.cloudinary.com/t_profile_original,q_auto,f_auto/profile/photos/3864710/original/isurunix.png'
       class='circle'
       >
  </img>
</body>
</html>

＆＃13;

使用飞碟时，有人能提出一种圆角的方法吗？

Answer 1

border-radius可以正常使用div，因此您可以使用div，并使用background-image添加图片：

<html>
<head>
<title>JS Bin</title>
<style>
  .circle {
    border-radius: 50%;
    width: 250px;height: 250px;
    background-image:url("https://fiverr-res.cloudinary.com/t_profile_original,q_auto,f_auto/profile/photos/3864710/original/isurunix.png")
  }
</style>
</head>
<body>
  <div class='circle'></div>
</body>
</html>

不能在Flying Saucer中使用border-radius CSS3属性

1 个答案: