iText7 Html2Pdf支持的Bootstrap类及兼容问题求助

Hey there! I totally get how frustrating it is when your Bootstrap-styled HTML doesn't render right in a PDF using iText7. Let's walk through the key fixes and what CSS features iText actually supports to get your layout working as expected.

First: Why Most Bootstrap Classes Aren't Working #

The biggest culprit here is media type handling. By default, iText7's Html2Pdf parser uses the print media type, but Bootstrap's responsive classes (like col-md-*, col-sm-*) are defined for the screen media type. That's why those grid classes are ignored entirely.

Another factor: iText supports CSS 2.1 plus a subset of CSS3 features, so some newer Bootstrap CSS (like advanced grid, transforms, or interactive components) won't work since PDFs are static documents.

Step-by-Step Fixes #

1. Force iText to Use Screen Media Type #

Update your ConverterProperties to tell iText to parse the screen version of your CSS, which includes Bootstrap's responsive grid classes:

PdfWriter writer = new PdfWriter(outputDirectoryFile);
PdfDocument pdfDocument = new PdfDocument(writer);
pdfDocument.SetDefaultPageSize(PageSize.A4.Rotate());

ConverterProperties cp = new ConverterProperties()
    .SetBaseUri(resourceUri)
    // This line is critical for Bootstrap's responsive classes
    .SetMediaDeviceDescription(new MediaDeviceDescription(MediaType.SCREEN));

HtmlConverter.ConvertToPdf(new MemoryStream(Encoding.UTF8.GetBytes(htmlstring)), pdfDocument, cp);
pdfDocument.Close();

2. Ensure Bootstrap CSS is Properly Loaded #

Make sure your HTML includes a link to the Bootstrap CSS file, and that the resourceUri points to the directory containing that CSS (and your images like logo.png). Add this to the <head> of your HTML:

<link rel="stylesheet" href="bootstrap.css">

(Note: Use a local copy of Bootstrap instead of a CDN if possible—iText can sometimes struggle with remote resources.)

3. Fix Custom Classes Like hideLeftBorder #

Your custom border-hiding classes need to override Bootstrap's default table borders. Define them explicitly in your CSS (either in a <style> tag or external file) with sufficient priority:

.hideLeftBorder {
    border-left: none !important;
}
.hideBottomBorder {
    border-bottom: none !important;
}
.hideRightBorder {
    border-right: none !important;
}

4. Fallback for Unsupported Bootstrap Features #

If some Bootstrap classes still don't work, replace them with iText-friendly CSS:

• Replace img-responsive with inline or custom CSS: max-width: 100%; height: auto;
• For complex layouts, use basic flexbox (iText supports core flex properties like display: flex, flex-direction, flex-wrap) instead of relying on Bootstrap's full grid system.

What CSS Features Does iText7 Html2Pdf Support? #

Here's a quick breakdown of what works (and what doesn't):

• Supported: CSS 2.1 box model, font/text properties, basic flexbox, border-radius, background images/colors, @media queries (when media type is set)
• Partially Supported: Bootstrap core grid classes (after setting screen media), table styling
• Not Supported: CSS Grid, transforms/animations, interactive Bootstrap components (navbar, dropdowns), complex media query breakpoints, pseudo-elements like ::before/::after (limited support)

Final Notes #

• Stick to static Bootstrap components (layouts, typography, tables) since PDFs don't support interactivity
• Test your HTML in a browser first to confirm the layout works, then adjust for iText's limitations
• If you're still stuck, consider stripping out Bootstrap entirely and writing custom CSS tailored to iText's supported features

内容的提问来源于stack exchange，提问作者Subhajit Sarkar