Váš výstup je image → (PNG/JPEG/WebP) Místo PDF nebo zobrazení stránky, několik cílených CSS vzory dělají velký rozdíl: škálovat obrázky bezpečně, udržovat tabulky v pořádku, a nastavit typografie, která zůstává čitelná po rasterizaci. Aspose.HTML for .NET, ovládáte jak CSS, tak renderovací potrubí prostřednictvím ImageSaveOptions Pro spolehlivé výsledky.

Key Takeaways

  • Raději Reagující CSS: img{max-width:100%;height:auto} a table{table-layout:fixed} s výslovnými rozměry.
  • Použijte ImageSaveOptions 2 set DPI, Velikost stránky / Margin, Mediální typ (Screen vs Printa výstupu Formátování.
  • Pro husté stoly, použijte border-collapse, padding, a slovo zabalení, aby se zabránilo klipování.
  • Udržujte písma konzistentní a testujte na Poslední DPI Plánujete exportovat.

Průvodce krok za krokem

1) Load the HTML document

Stahujte z souboru pro výrobu nebo sestavit ze sloupce pro rychlé testování. Základna URI To je způsob, jakým se relativní aktiva (CSS/obrazy) vyřeší.

// 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

Nastavte DPI, geometrii stránky, CSS média a formát cílového obrazu pomocí 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");

Kompletní, kompilovatelný příklad (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}");
            }
        }
    }
}

Jak běhat

  1. dotnet new console -n AsposeHtmlStylingForImages
  2. cd AsposeHtmlStylingForImages
  3. dotnet add package Aspose.HTML
  4. nahradit Program.cs S výše uvedeným kódem
  5. dotnet run -- "path-to-input.html"

Styling tips for crisp images

  • obrázky:Vždy nastavené max-width:100% a height:auto.Používejte zdroje s vysokým rozlišením pro tisk DPI.
  • stoly: pevné rozložení, zhroucené hranice a padding zabraňují přetoku a udržují čáry sítě ostré.
  • Texty: testovací velikosti na cílovém DPI; upřednostňují společné sans-serif stohy pro předvídatelné metriky.
  • Pravidla médií:• Přepínání mezi Screen a Print CSS, aby se přizpůsobil vašemu cíli.

FAQ

Q1.Jak mohu použít vlastní CSS bez úpravy HTML souboru? Vložte A <style> blokovat pomocí kompozice řetězců (jako je uvedeno výše) nebo hostit soubor CSS a odkazovat na něj pomocí <link> tag; zajistěte, aby základní URI dokumentu odkazoval na složku, která jej obsahuje.

Q2. jaký DPI bych měl použít? 96–150 for screens; 300 for print. Higher DPI increases file size and render time.

Q3.Mohu exportovat do WebP nebo TIFF? Ano, použijte new ImageSaveOptions(ImageFormat.Webp) nebo ImageFormat.Tiff V závislosti na vašich potřebách dodání.

Q4.Proč jsou mé hranice stolů rozmazané? Zajištění border-collapse:collapse,Vyhněte se frakčním pixelům CSS a zobrazte na DPI, které odpovídá vašemu cílovému použití.

Q5: Jak se vyhnout chybějícímu písmu? balíček web-safe fontů nebo vložením prostřednictvím @font-face URL, které jsou přístupné rendererovi; ověřte pokrytí glyphem.

Závěr

Kombinací Čistý a responzivní CSS s ImageSaveOptions (DPI, média, geometrie stránek), můžete generovat ostré, předvídatelné HTML obrázek Testujte na cílovém DPI a zdokonalujte tabulkové a textové pravidla, dokud se nedočtou dobře na konečné velikosti bitmapů.

More in this category