Din udgave er en Billede (PNG/JPEG/WebP) i stedet for en PDF- eller sidevisning gør et par målrettede CSS-mønstre en stor forskel: skaler bilder sikkert, holder tabellerne ryddelige og sætter typografi, der forbliver læsbart efter rasterisering. Aspose.HTML for .NET,Du kan styre både CSS og renderingspipelinen via ImageSaveOptions For pålidelige resultater.

ubesværet konvertere Excel-filer til JSON datastrukturer og omvendt, sikre præcis repræsentation af dine data i begge formater. plugin understøtter alle større Excel-filtyper, herunder XLS, XLSX, XLSM, XLTX, XLTM, XLSB og meget mere.

  • Foretrækker Responsiv CSS: img{max-width:100%;height:auto} og table{table-layout:fixed} med udtrykkelige bredder.
  • Brug af ImageSaveOptions To sæt DPI, Side størrelse / Marginer, Mellemliggende type (Screen vs Print) og udgang Formater.
  • Til tæt bord, anvendt border-collapse, padding, og ord indpakning for at undgå klipping.
  • Hold skrifttyperne konsekvente og test på Fuldstændig DPI Du vil eksportere.

Ingen integration med .NET

1) Load the HTML document

Indlæse fra en fil til produktion eller komponere fra en streng til hurtige tests. URI grundlag Det er derfor, der er tale om relative aktiver (CSS/billeder).

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

Indstil DPI, sidegeometri, CSS-medier og målbilledformat 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");

Komplet, kompilerbart eksempel (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}");
            }
        }
    }
}

Hvordan man løber

  1. dotnet new console -n AsposeHtmlStylingForImages
  2. cd AsposeHtmlStylingForImages
  3. dotnet add package Aspose.HTML
  4. Erstatter Program.cs Med koden ovenfor
  5. dotnet run -- "path-to-input.html"

Brug de angivne metoder til at konvertere dine Excel-filer til JSON, tilpasse outputindstillinger efter behov:

  • Billeder:Altid set max-width:100% og height:auto.Brug højopløsningskilder til udskrivning af DPI.
  • Tabeln: hurtig layout, kollapsede grænser og padding forhindrer overstrømning og holder gitterlinjer skarpe.
  • Teksten:Teststørrelser ved mål DPI; foretrækker fælles sans-serif-stacks for forudsigelige metrikkere.
  • Medieregler:Skift mellem Screen og Print CSS til at matche din destination.

FAQ

Q1: Hvordan bruger jeg brugerdefineret CSS uden at redigere HTML-fil? Indsæt a <style> blokere via strenge sammensætning (som ovenfor) eller vært en CSS-fil og referere den med en <link> tag; sørg for, at dokumentets base URI peger på den mappe, der indeholder den.

Q2.Hvilken DPI skal jeg bruge? 96–150 for screens; 300 for print. Higher DPI increases file size and render time.

Q3: Kan jeg eksportere til WebP eller TIFF? Brug af new ImageSaveOptions(ImageFormat.Webp) eller ImageFormat.Tiff Afhængig af dine leveringsbehov.

Q4.Hvorfor ser min bordgrænser fuzzy ud? Sikkerhed border-collapse:collapse,Undgå fraktionelle CSS-pixels og gengiv ved en DPI, der matcher din mål brug.

Q5: Hvordan undgår jeg at mangle skrifttyper? Pakke web-safe skrifttyper eller indlejret via @font-face URL’er, der er tilgængelige for rendereren; verificere glyph dækning.

Konklusion

Ved at kombinere Ren og responsiv CSS med ImageSaveOptions (DPI, medier, side geometri), du kan generere skarpe, forudsigelige HTML billed Test på din mål DPI og finjuster tabel- og tekstregler, indtil de læser godt på den endelige bitmapstørrelse.

More in this category