I am using Aspose.PDF.Drawing to convert dynamically generated HTML content into PDF documents. This HTML is largely styled using Emotion CSS within a React application. During the HTML generation process, I am extracting the Emotion CSS and including it within a <style> tag in the <head> of the HTML string that is then passed to Aspose.PDF for conversion.
To ensure a clean PDF output, I am attempting to remove all borders from interactive elements, specifically <button> elements, within a target container identified by the ID #${exportElementId}. I have implemented several strategies to achieve this, but I am consistently encountering persistent borders on these button elements in the final PDF output, despite my efforts.
I have tried the following methods to remove the borders, none of which have been successful in the final PDF:
- Global CSS Reset: I included a CSS block in the
<head>after the extracted Emotion CSS to globally reset borders, outlines, and box-shadows forbutton,input,select,textarea, andaelements usingborder: none !important;. This successfully hides the elements ifdisplay: none !important;is also applied, indicating the basic CSS is being processed.
Targeted CSS Overrides: I have specifically targeted the <button> elements within the #${exportElementId} container with rules like:
CSS#${exportElementId} button { border: none !important; outline: none !important; box-shadow: none !important; }
-
Inline Styles via JavaScript: In my JavaScript function that prepares the HTML content for export (
preparePageContentForExport), I have iterated through all<button>elements within the cloned#${exportElementId}and directly set theirstyleattribute to includeborder: none !important; outline: none !important; box-shadow: none !important;. I have confirmed via console logging that this code is executing and applying the inline styles to the button elements in the cloned DOM. However, the borders still appear in the PDF. -
Removing All Attributes and Inline Styles via JavaScript: As an extreme diagnostic step, I modified my JavaScript to remove all attributes and any existing inline
styleattributes from the<button>elements before generating the final HTML. Despite this, the borders persisted in the PDF. -
Targeting Parent Elements via JavaScript: I attempted to remove borders from the parent elements of the buttons by traversing up the DOM tree and applying
border: none !important;to them. This also did not resolve the issue. -
Targeting Pseudo-elements via CSS: I added CSS rules to target all
::beforeand::afterpseudo-elements within#${exportElementId}withborder: none !important; background: none !important; content: none !important;, but the borders remain.
My current .NET setup
public static byte[] ConvertToPdfAspose3(PdfConversionModel model)
{
if (model == null || string.IsNullOrWhiteSpace(model.Content))
{
throw new ArgumentException("Invalid conversion request: Content is required.");
}
var sanitizedContent = SanitizeContent(model.Content);
byte[] byteArray = Encoding.UTF8.GetBytes(sanitizedContent);
using (var htmlStream = new MemoryStream(byteArray))
using (var pdfStream = new MemoryStream())
{
var htmlOptions = new HtmlLoadOptions(model.BaseUrl ?? "")
{
PageInfo = new PageInfo
{
Width = model.ContentWidth, // model.ContentWidth > 0 ? model.ContentWidth : PageSize.PageLetter.Width,
Height = model.ContentHeight, // model.ContentHeight > 0 ? model.ContentHeight : PageSize.PageLetter.Height,
Margin = new MarginInfo(18, 18, 18, 18)
},
IsEmbedFonts = true,
IsRenderToSinglePage = true,
PageLayoutOption = HtmlPageLayoutOption.None, // HtmlPageLayoutOption.ScaleToPageWidth, // model.AutoFitWidth || model.AutoFitHeight ? HtmlPageLayoutOption.ScaleToPageWidth : HtmlPageLayoutOption.None,
};
// Load HTML into the document
var pdfDoc = new Document(htmlStream, htmlOptions);
// Flatten interactive elements so they're rendered as static content
pdfDoc.Flatten();
// Save the document to the output stream
pdfDoc.Save(pdfStream);
return pdfStream.ToArray();
}
}
Code within Main
static async Task Main(string[] args)
{
Microsoft.Extensions.Configuration.IConfiguration configuration = new ConfigurationBuilder()
.SetBasePath(Directory.GetCurrentDirectory())
.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
.Build();
try
{
PdfConversionModel model = new PdfConversionModel
{
Content = htmlContent,
BaseUrl = "",
ContentWidth = 1707,
ContentHeight = 900,
//KeepImagesTogether = true,
//SelectedElement = null,
//HiddenCssSelectors = new string[0],
ContentType = "html",
};
// Perform PDF conversion
byte[] pdfBytes = ConvertToPdfAspose3(model);
string downloadPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.UserProfile), "Downloads", "Test-149-full-page-export.pdf");
File.WriteAllBytes(downloadPath, pdfBytes);
Console.WriteLine("PDF created successfully: Test.pdf");
}
catch (Exception ex)
{
Console.WriteLine($"Error: {ex.Message}");
}
Console.ReadKey();
}