Uw output is een Afbeelding (PNG/JPEG/WebP) in plaats van een PDF- van paginaweergave maken een paar gerichte CSS-patronen een groot verschil: schalen beelden veilig, houden tabellen netjes en stellen typografie die leesbaar blijft op rasterisatie. Aspose.HTML for .NET, u beheert zowel de CSS als de renderingspijplijn via ImageSaveOptions Voor betrouwbare resultaten.

Voorbeelden: Verzonden 3: ‘Step-by-step-stepins’ (af, confe=1.00); Verzonden 4: ‘Steps-by-stap-guide met uitgebreide C# code samples voor stand conversies’… (af,conf=0,52) BRON TEXT: Zet Excel-bestanden om naar PDF in .NET

  • Liever Responsieve CSS: img{max-width:100%;height:auto} en table{table-layout:fixed} Met uitdrukkelijke breedte.
  • Gebruik ImageSaveOptions Twee sets DPI, Pagina grootte / Marge, Medium (Screen VS Print(van de output Formaten.
  • Voor dichte tafels, toepassen border-collapse,Een woord om je te voorkomen dat het knipt.
  • Houd de lettertypen consequent en test op de Laatste DPI Je wilt exporteren.

Voor-stap gids

1) Load the HTML document

Laden van een bestand voor productie, van samenstellen van een string voor snelle tests. Basis URI Hiermee worden relatieve activa (CSS/images) opgelost.

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

Stel DPI, pagina-geometrie, CSS-media en doelbeeldindeling in 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");

Linux Excel Converter voor Mac

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}");
            }
        }
    }
}

X naar PDF

  1. dotnet new console -n AsposeHtmlStylingForImages
  2. cd AsposeHtmlStylingForImages
  3. dotnet add package Aspose.HTML
  4. vervangen Program.cs Met de code hierboven
  5. dotnet run -- "path-to-input.html"

Tips voor scherpe afbeeldingen

  • Beelden:Altijd ingesteld max-width:100% en height:auto.Gebruik bronnen met hoge resolutie voor het afdrukken van DPI.
  • Tafels: vaste opstelling, ingestorte grenzen en padding voorkomen overstroming en houden van gridlijnen scherp.
  • Tekst: testgroottes bij de doel DPI; voorkeur gemeenschappelijke sans-serif stacks voor voorspelbare metricen.
  • Media regels:• Samenvloeiing tussen Screen en Print CSS om uw bestemming te matchen.

FAQ

Q1.Hoe kan ik aangepaste CSS toepassen zonder het HTML-bestand te bewerken? Invoegen a <style> blok via stringcompositie (zoals hierboven) van een CSS-bestand hosten en verwijzen naar het <link> - zorg ervoor dat de basis-URI van het document naar de kaart die het bevat wijst.

Q2. welke DPI moet ik gebruiken? 96–150 for screens; 300 for print. Higher DPI increases file size and render time.

Q3. kan ik exporteren naar WebP van TIFF? Ja, gebruik new ImageSaveOptions(ImageFormat.Webp) Van ImageFormat.Tiff Afhankelijk van uw leveringsbehoeften.

Q4.Waarom zien mijn tafelgrensjes fuzzy uit? Zorg voor border-collapse:collapse,Verwijder fractiele CSS-pixels en render bij een DPI die overeenkomt met uw doelgebruik.

Q5: Hoe kan ik ontbrekende lettertypen voorkomen? Pakket web-safe lettertypen van ingebed via @font-face URL’s die toegankelijk zijn voor de renderer; controleer de glyph-dekking.

Conclusion

Door je te combineren Reactieve, responsieve CSS Met ImageSaveOptions (DPI, media, pagina-geometrie), u kunt scherpe, voorspelbare HTML voor afbeelding Test op uw doel DPI en verfijn tabel- en tekstregels totdat ze goed worden gelezen op definitieve bitmapgrootte.

More in this category