Votre outil est un image (PNG/JPEG/WebP) au lieu d’une vue PDF ou de page, quelques modèles CSS ciblés font une grande différence: évoluer les images en toute sécurité, garder les tables ordonnées et définir une typographie qui reste lisible après la rasterisation. Aspose.HTML for .NET,Vous pouvez contrôler le CSS et le pipeline de rendu via ImageSaveOptions pour des résultats fiables.

Traitement des clés

  • préfère CSS réactif: img{max-width:100%;height:auto} et table{table-layout:fixed} avec des épaisseurs explicites.
  • Utilisez ImageSaveOptions deux séances DPI, Taille de page / Marges, Type médiatique (Screen vs Print(et la production Formats.
  • Pour les tables dense, appliquer border-collapse,- Enveloppement et enveloppement de mots pour éviter le clipping.
  • Gardez les polices cohérentes et testez-les sur le Le DPI final Vous souhaitez exporter.

Guide étape par étape

1) Load the HTML document

Charger à partir d’un fichier pour la production, ou composer à partir d’une chaîne pour des tests rapides. Base URI Les ressources relatives (CSS / images) sont donc résolues.

// Load an HTML file
using var document = new Aspose.Html.HTMLDocument("./sample.html");

// Or create from a string with a base URI
string html = "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>Styled Render</title>" +
              "<style>/* minimal defaults for image rendering */" +
              "html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;color:#222}" +
              "img{max-width:100%;height:auto;display:block}" +
              "table{width:100%;border-collapse:collapse;table-layout:fixed}" +
              "th,td{border:1px solid #ddd;padding:6px 8px;vertical-align:top;word-wrap:break-word}" +
              "caption{caption-side:top;font-weight:bold;margin:6px 0}" +
              "@media print{body{font-size:12pt}}" +
              "</style></head><body>" +
              "<h1>Invoice</h1>" +
              "<img src=\"./assets/logo.png\" alt=\"Company logo\" style=\"width:240px\">" +
              "<table><caption>Items</caption><tr><th>Item</th><th>Qty</th><th>Price</th></tr>" +
              "<tr><td>Widget A very long text that will wrap</td><td>5</td><td>$12.00</td></tr>" +
              "<tr><td>Widget B</td><td>2</td><td>$9.50</td></tr></table>" +
              "</body></html>";
using var inlineDoc = new Aspose.Html.HTMLDocument(html, ".");

2) Configure rendering for images

Définissez le DPI, la géométrie de la page, les médias CSS et le format d’image cible via ImageSaveOptions.

using Aspose.Html.Drawing;
using Aspose.Html.Rendering;
using Aspose.Html.Rendering.Image;
var options = new Aspose.Html.Saving.ImageSaveOptions(Aspose.Html.Rendering.Image.ImageFormat.Png)
{
    UseAntialiasing = true
};
options.HorizontalResolution = 300; // print-quality DPI
options.VerticalResolution   = 300;
options.Css.MediaType        = Aspose.Html.Rendering.MediaType.Screen; // or Print

// Page setup — render as A4 with 10 mm margins
var mm = Aspose.Html.Drawing.Length.FromMillimeters;
options.PageSetup.AnyPage = new Aspose.Html.Drawing.Page(
    new Aspose.Html.Drawing.Size(mm(210), mm(297)),
    new Aspose.Html.Drawing.Margin(mm(10), mm(10), mm(10), mm(10))
);

3) Render to an image file

Aspose.Html.Converters.Converter.ConvertHTML(inlineDoc, options, "out/styled.png");

Exemple complet (Compilable C#)

using System;
using System.IO;
using Aspose.Html;
using Aspose.Html.Converters;
using Aspose.Html.Saving;
using Aspose.Html.Rendering;        // MediaType
using Aspose.Html.Rendering.Image;  // ImageFormat
using Aspose.Html.Drawing;          // Length, Size, Margin, Page

namespace AsposeHtmlStylingForImages
{
    internal static class Program
    {
        // How to run:
        // 1) dotnet new console -n AsposeHtmlStylingForImages
        // 2) cd AsposeHtmlStylingForImages
        // 3) dotnet add package Aspose.HTML
        // 4) Replace Program.cs with this file's contents
        // 5) dotnet run -- "path-to-input.html"   (argument optional)
        private static void Main(string[] args)
        {
            string outDir = Path.Combine(Directory.GetCurrentDirectory(), "out");
            Directory.CreateDirectory(outDir);

            HTMLDocument document;
            if (args.Length > 0 && File.Exists(args[0]))
            {
                document = new HTMLDocument(args[0]);
            }
            else
            {
                // Inline demo HTML with sensible defaults for image rendering
                string html = "<!DOCTYPE html>" +
                              "<html><head><meta charset=\\\"utf-8\\\"><title>Styled Image Render</title>" +
                              "<style>html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;color:#222}" +
                              "img{max-width:100%;height:auto;display:block}" +
                              "table{width:100%;border-collapse:collapse;table-layout:fixed}" +
                              "th,td{border:1px solid #ddd;padding:6px 8px;vertical-align:top;word-wrap:break-word}" +
                              "caption{caption-side:top;font-weight:bold;margin:6px 0}" +
                              "h1{margin:12px 0}" +
                              "@media print{body{font-size:12pt}}" +
                              "</style></head><body>" +
                              "<h1>Styled Render</h1>" +
                              "<img src=\\\"./assets/photo.jpg\\\" alt=\\\"Sample photo\\\" style=\\\"width:320px\\\">" +
                              "<table><caption>Summary</caption><tr><th>Column A</th><th>Column B</th></tr>" +
                              "<tr><td>Long cell content that wraps nicely in fixed layout tables.</td><td>42</td></tr></table>" +
                              "</body></html>";
                document = new HTMLDocument(html, ".");
            }

            using (document)
            {
                // PNG at 300 DPI (screen CSS)
                var png = new ImageSaveOptions(ImageFormat.Png) { UseAntialiasing = true };
                png.HorizontalResolution = 300; png.VerticalResolution = 300; png.Css.MediaType = MediaType.Screen;
                var mm = Length.FromMillimeters;
                png.PageSetup.AnyPage = new Page(new Size(mm(210), mm(297)), new Margin(mm(10), mm(10), mm(10), mm(10)));
                string pngPath = Path.Combine(outDir, "styled.png");
                Converter.ConvertHTML(document, png, pngPath);
                Console.WriteLine($"Saved: {pngPath}");

                // JPEG at 150 DPI (print CSS)
                var jpg = new ImageSaveOptions(ImageFormat.Jpeg);
                jpg.HorizontalResolution = 150; jpg.VerticalResolution = 150; jpg.Css.MediaType = MediaType.Print;
                jpg.PageSetup.AnyPage = png.PageSetup.AnyPage; // reuse geometry
                string jpgPath = Path.Combine(outDir, "styled.jpg");
                Converter.ConvertHTML(document, jpg, jpgPath);
                Console.WriteLine($"Saved: {jpgPath}");
            }
        }
    }
}

Comment courir

  1. dotnet new console -n AsposeHtmlStylingForImages
  2. cd AsposeHtmlStylingForImages
  3. dotnet add package Aspose.HTML
  4. remplacer Program.cs Avec le code ci-dessus
  5. dotnet run -- "path-to-input.html"

Conseils pour les images croquantes

  • Images:Toujours fixé max-width:100% et height:auto.Utilisez des sources haute résolution pour l’impression DPI.
  • Tableaux: le layout fixe, les frontières s’effondrées et le padding empêchent le déversement et gardent les lignes de grille nettes.
  • Texte: tailles de test au DPI cible; préférez les pics sans-serif communs pour des mesures prévisibles.
  • Règles des médias:• Changement entre Screen et Print CSS pour correspondre à votre destination.

FAQ

Q1.Comment puis-je appliquer des CSS personnalisés sans modifier le fichier HTML? Emboîter a <style> bloc via la composition de chaîne (comme ci-dessus) ou hébergez un fichier CSS et référencez-le avec un <link> tag; assurez-vous que l’URI de base du document pointe vers le dossier qui le contient.

Q2. quel DPI dois-je utiliser? 96–150 for screens; 300 for print. Higher DPI increases file size and render time.

Q3.Posez-vous exporter vers WebP ou TIFF? Oui, utilisez new ImageSaveOptions(ImageFormat.Webp) ou ImageFormat.Tiff En fonction de vos besoins de livraison.

Q4: Pourquoi mes bords de table sont-ils flou ? assure border-collapse:collapse, évitez les pixels CSS fractionnels et rendez à un DPI qui correspond à votre utilisation cible.

Q5 : Comment éviter les lettres manquantes ? Package Web-safe fonts ou intégré via @font-face URLs accessibles au rendu; vérifier la couverture glyph.

1 du présent règlement

En combinant CSS propre et réactif avec ImageSaveOptions (DPI, médias, géométrie de page), vous pouvez générer une vue nette et prévisible HTML pour l’image rendu pour les tableaux de bord, les factures et les rapports. Testez votre DPI cible et perfectionnez les règles de table et de texte jusqu’à ce qu’elles soient bien lues à la taille finale de la bitmap.

More in this category