So ändern Sie die Dokumentgröße – Legen Sie die Seitengröße für PDF, Bilder und mehr fest

In der heutigen Welt haben die meisten Dokumente das Format A4, aber manchmal hat der aus HTML gerenderte Inhalt eine andere Größe. Dies führt zu viel Leerraum auf der Seite, oder der Inhalt passt einfach nicht auf die Seite! In diesem Artikel erfahren Sie, wie Sie mit Hilfe von Rendering-Optionen die Größe von Dokumentseiten an die Größe des Inhalts anpassen können und umgekehrt.

Wie man die Größe eines Dokuments mit Aspose.HTML ändert

Der Aspose.Html.Rendering Namespace bietet eine Reihe leistungsfähiger Werkzeuge wie Low-Level-Optionsklassen, Schnittstellen, Strukturen und Aufzählungen zum Rendern von HTML-, MHTML-, EPUB- und SVG-Dokumenten in verschiedene Ausgabeformate wie PDF, XPS, DOCX und Bilder. Die Klasse PageSize bietet eine Möglichkeit, die Breite, Höhe und Ausrichtung der Seiten beim Rendern von HTML-Dokumenten in Ausgabeformate anzugeben. Manchmal müssen Sie jedoch Dokumente zuschneiden, um eine kleinere Seitengröße zu erzeugen, die der Größe des Seiteninhalts entspricht. Das bedeutet, dass die äußeren Ränder, Umrandungen oder Leerräume entfernt werden.

Die Klasse PageSetup bietet eine Reihe von Eigenschaften, um die Einstellungen für die Seiteneinrichtung von HTML-Dokumenten zu verwalten, wenn diese in verschiedenen Dateiformaten wiedergegeben werden. Werfen wir einen Blick auf einige der am häufigsten verwendeten Eigenschaften:

• Seiteneinrichtung festlegen. Mit der Eigenschaft AnyPage können Sie die Seiteneinrichtung (Größe, Ränder, Ausrichtung usw.) für jede Seite eines HTML-Dokuments festlegen, das in ein mehrseitiges Format wie PDF, XPS, DOCX, PNG, JPG usw. gerendert wird.
• Dokumentgröße an Inhalt anpassen. Mit der Eigenschaft PageLayoutOptions können Sie die Seitengröße an den Inhalt anpassen und umgekehrt. Diese Eigenschaft besteht aus einer Reihe von Bit-Flags, die das Verhalten des Renderers steuern. Sie können Dokumente zuschneiden oder skalieren, um ihren Inhalt an die Seitengröße anzupassen.

Sie können die C#-Beispiele für die Konvertierung von HTML in Bilder mit einem benutzerdefinierten Seitenlayout problemlos verwenden, um HTML in PDF, XPS und DOCX zu konvertieren. Die einzigen Unterschiede bestehen in der Angabe von

• die entsprechenden Rendering-Optionen – ImageRenderingOption, PdfRenderingOption, XpsRenderingOption oder DocRenderingOption;
• das entsprechende Ausgabegerät – ImageDevice, PdfDevice, XpsDevice oder DocDevice.

HTML in PNG mit Standard-Rendering-Optionen konvertieren

Um HTML in PNG mit Standard-Rendering-Optionen zu konvertieren, sollten Sie einige Schritte befolgen:

1. Verwenden Sie einen der HTMLDocument() Konstruktoren, um eine Document-Instanz zu initialisieren. In den folgenden Beispielen laden wir die lokale Datei rendering.html.
2. Initialisieren Sie eine Instanz der Klasse ImageRenderingOption, wenn Sie HTML in ein Bilddateiformat umwandeln möchten. Standardmäßig ist ImageFormat PNG. Beachten Sie außerdem, dass die Eigenschaften HorizontalResolution und VerticalResolution standardmäßig 300 dpi betragen. Das gerenderte Bild wird also in Höhe und Breite um etwa das Dreifache gestreckt, da die Auflösung des Quellinhalts 96 dpi beträgt.
3. Erstellen Sie eine neue Instanz der Klasse ImageDevice. Verwenden Sie den ImageDevice() Konstruktor, der options und den Pfad der Ausgabedatei savePath als Parameter akzeptiert.
4. Verwenden Sie die Methode RenderTo(device), um HTML in PNG zu konvertieren, die das Objekt device als Parameter annimmt.

Das Fragment des C#-Codes zeigt ein Beispiel für die Konvertierung eines HTML-Dokuments in ein Bild ohne zusätzliche Optionen, d. h. mit Standard-Rendering-Optionen. Das Ergebnis der Konvertierung ist ein A4-PNG-Dokument mit viel leerem Platz (siehe Abbildungen der Konvertierungsergebnisse (a))

// Render HTML to PDF with default RenderingOptions

// Prepare path to a source HTML file
string documentPath = Path.Combine(DataDir, "rendering.html");

// Prepare path for converted file saving 
string savePath = Path.Combine(OutputDir, "a4.png");

// Create an instance of the HTMLDocument class
using HTMLDocument document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object with default options
ImageRenderingOptions opt = new ImageRenderingOptions();

// Create an output rendering device and convert HTML
using ImageDevice device = new ImageDevice(opt, savePath);
document.RenderTo(device);

Rendering-Optionen

die Aufzählung PageLayoutOptions des Aspose.Html.Rendering-Namensraumes spezifiziert Flags, die zusammen mit anderen PageSetup-Optionen die Größe und das Layout von Seiten bestimmen. Diese Flags können entsprechend ihrer Beschreibungen miteinander kombiniert werden.

Name	Description
FitToContentWidth	This flag specifies that the width of pages is determined by the size of the content itself and not by the set page width. Instead, content width is calculated individually for each page.
UseWidestPage	When combined with FitToContentWidth, it specifies that the width of each page will be the same and equal to the widest content size of all pages.
FitToWidestContentWidth	This flag specifies that the width of each page will be the same and equal to the widest content size among all pages.
FitToContentHeight	This flag specifies that the page height is determined by the content’s size, not by the specified page height. If this flag is set, all document content will be placed on one page.
ScaleToPageWidth	This flag indicates that the document’s content will be scaled to fit the page. It collides with the FitToContentWidth flag, and if both flags are specified, only ScaleToPageWidth will take effect.
ScaleToPageHeight	This flag indicates that the document’s content will be scaled to fit the height of the first page. It collides with the FitToContentHeight flag, and if both flags are specified, only ScaleToPageHeight will take effect. All document content will be placed on a single page only.

Seite bei der Konvertierung von HTML in JPG an die Breite anpassen

Um die Seitenbreite des ausgegebenen Bildes an die Breite des Inhalts anzupassen, müssen Sie das Flag FitToContentWidth oder das Flag FitToWidestContentWidth verwenden, das die Breite des resultierenden Dokuments an die Breite der breitesten Seite anpasst. Schauen wir uns die Schritte an, die Sie befolgen sollten:

1. Laden einer HTML-Datei. Im Beispiel lädt der Konstruktor HTMLDocument(documentPath) das HTML-Dokument aus einem lokalen Dateisystem.
2. Erstellen Sie eine Instanz der Klasse ImageRenderingOption. In diesem Beispiel setzen wir die Eigenschaft PageLayoutOptions auf FitToWidestContentWidth, was bedeutet, dass die Seitenbreite des Ausgabedokuments an die Breite der breitesten Inhaltsseite angepasst wird.
3. Erstellen Sie eine neue Instanz der Klasse ImageDevice und übergeben Sie sie an die Methode RenderTo(device), um HTML in JPG zu konvertieren.

// Render HTML to image with width fitting in C#

// Prepare path to a source HTML file
string documentPath = Path.Combine(DataDir, "rendering.html");

// Prepare path for converted file saving 
string savePath = Path.Combine(OutputDir, "FitWidth.jpg");

// Create an instance of HTMLDocument class
using HTMLDocument document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object with custom options. Use the FitToWidestContentWidth flag
ImageRenderingOptions opt = new ImageRenderingOptions(ImageFormat.Jpeg)
{
    PageSetup =
    {
        PageLayoutOptions = PageLayoutOptions.FitToWidestContentWidth
    }
};

// Create an output rendering device and convert HTML
using ImageDevice device = new ImageDevice(opt, savePath);
document.RenderTo(device);

Die Umwandlung von HTML in JPG ergab ein JPG-Dokument mit einer Seitenbreite, die der Breite des Inhalts entspricht, aber mit einer Seitenhöhe, die der Höhe des Formats A4 entspricht (siehe Abbildungen der Umwandlungsergebnisse (b)).

Beschneiden von HTML in PNG gerendertes Ergebnis

Damit die Größe der Ausgabeseite mit der Höhe des Bildes in der Quelldatei übereinstimmt, müssen Sie das Flag FitToContentHeight in der Eigenschaft PageLayoutOptions setzen. Das folgende Beispiel zeigt eine Kombination aus zwei Flags, FitToContentHeight und FitToContentWidth.

// Fit HTML to content size when rendering to image in C#

// Prepare path to a source HTML file
string documentPath = Path.Combine(DataDir, "rendering.html");

// Prepare path for converted file saving 
string savePath = Path.Combine(OutputDir, "FitPage.png");

// Create an instance of the HTMLDocument class
using HTMLDocument document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object with custom options. Use FitToContentWidth and FitToContentHeight flags
ImageRenderingOptions opt = new ImageRenderingOptions()
{
    PageSetup =
    {
        PageLayoutOptions = PageLayoutOptions.FitToContentWidth | PageLayoutOptions.FitToContentHeight
    },
    HorizontalResolution=96,
    VerticalResolution=96
};

// Create an output rendering device and convert HTML
using ImageDevice device = new ImageDevice(opt, savePath);
document.RenderTo(device);

Anpassung der Seitengröße an den Inhalt beim Rendern von HTML in JPG

Im folgenden Beispiel setzt die Eigenschaft AnyPage die Seitengröße auf 20x20 px, was nicht groß genug ist, um den Inhalt des HTML-Dokuments anzupassen, wenn es als Bild gerendert wird. Die Verwendung von PageLayoutOptions mit den Flags FitToWidestContentWidth und FitToContentHeight bewirkt, dass die Seite an den Inhalt angepasst wird.

1. Erstellen Sie eine HTMLDocument-Instanz. In den folgenden Beispielen laden wir die lokale Datei rendering.html.
2. Initialisieren Sie eine Instanz der Klasse ImageRenderingOption, wenn Sie HTML in das JPG-Dateiformat konvertieren möchten.
   • Specify the ImageFormat as Jpeg.
   • Create a PageSetup object with the PageLayoutOptions property with the FitToWidestContentWidth and FitToContentHeight flags set. This ensures that the output image will fit the width and height of the content without any empty space.
3. Erstellen Sie eine neue Instanz der Klasse ImageDevice.
4. Verwenden Sie die Methode RenderTo(device), um HTML in JPG zu konvertieren, die das Objekt device als Parameter annimmt.

// Render HTML to image with small custom page size

// Prepare path to a source HTML file
string documentPath = Path.Combine(DataDir, "rendering.html");

// Prepare path for converted file saving 
string savePath = Path.Combine(OutputDir, "FitSmallPage.jpg");

// Initialize HTMLDocument
using HTMLDocument document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object with custom options. Use FitToWidestContentWidth and FitToContentHeight flags
ImageRenderingOptions opt = new ImageRenderingOptions(ImageFormat.Jpeg)
{
    PageSetup =
    {
        PageLayoutOptions = PageLayoutOptions.FitToWidestContentWidth | PageLayoutOptions.FitToContentHeight,
        AnyPage = new Page(new Size(20,20))
    }
};

// Create an output rendering device and convert HTML
using ImageDevice device = new ImageDevice(opt, savePath);
document.RenderTo(device);

Obwohl die Seitengröße auf 20x20 Pixel festgelegt wurde, können wir mit den Flags FitToWidestContentWidth und FitToContentHeight die Seitengröße des resultierenden JPG-Dokuments an die Größe des Inhalts anpassen (siehe die Abbildung der Konvertierungsergebnisse (d)).

Skalierung der Seitengröße bei der Konvertierung von HTML in PNG

Analog zu den FitTo*-Flags, die die Seitengröße steuern, gibt es eine Reihe von ScaleTo*-Flags, die die Größe des Inhalts steuern und dessen Skalierung ermöglichen. Wenn die Größe des Inhalts die Seitengröße übersteigt, wird der Inhalt mit dem Seitenverhältnis skaliert, bis er in der Breite und/oder Höhe auf die Seite passt, abhängig von der Kombination der Flags. Das folgende Beispiel zeigt, wie die Skalierung des Inhalts in Breite und Höhe eingestellt werden kann:

// Scale HTML content to fixed page size

// Prepare path to a source HTML file
string documentPath = Path.Combine(DataDir, "rendering.html");

// Prepare path for converted file saving 
string savePath = Path.Combine(OutputDir, "ScaleSmallPage.png");

// Initialize an HTMLDocument object
using HTMLDocument document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object and use ScaleToPageWidth and ScaleToPageHeight flags
ImageRenderingOptions opt = new ImageRenderingOptions()
{
    PageSetup =
    {
        PageLayoutOptions = PageLayoutOptions.ScaleToPageWidth | PageLayoutOptions.ScaleToPageHeight,
        AnyPage = new Page(new Size(200,200))
    }
};

// Create an output rendering device and convert HTML
using ImageDevice device = new ImageDevice(opt, savePath);
document.RenderTo(device);

Im Beispiel wird mit der Eigenschaft AnyPage des PageSetup ein neues Page Objekt mit einer Size von 200x200 Pixel gesetzt. Damit wird die Seitengröße auf 200x200 Pixel festgelegt. Dann setzen wir die Eigenschaft PageLayoutOptions des PageSetup-Objekts so, dass sie die Flags ScaleToPageWidth und ScaleToPageHeight enthält. Dies bedeutet, dass der Inhalt des Ausgabedokuments so skaliert wird, dass er in die Breite und/oder Höhe der Seite passt (siehe die Abbildung der Konvertierungsergebnisse (e))

Abbildungen der Konvertierungsergebnisse mit Zuschneiden und Größenänderung

Die Abbildung zeigt die Ergebnisse der Konvertierung der Datei rendering.html in die Formate PNG, JPG und PDF unter Verwendung der Methode RenderTo() und verschiedener Rendering-Optionen, die die Seitengröße des Ausgabedokuments steuern.

Hinweis: Die Größe des Quellbildes in der Datei rendering.html beträgt 404x303, mit einer Auflösung von 96 dpi.

a) Das Ergebnis der HTML-zu-PNG-Konvertierung mit den Standard-Rendering-Optionen ist ein PNG-Dokument in der Größe einer A4-Seite mit viel leerem Platz darauf. Das gerenderte Bild auf der A4-Seite wird in Höhe und Breite um das Dreifache gestreckt, da die Standardauflösung 300 dpi beträgt.

b) Die Konvertierung von HTML in JPG führte zu einem JPG-Dokument mit einer Seitenbreite, die der Breite des Inhalts entspricht, aber mit einer Seitenhöhe, die der Höhe des Formats A4 entspricht. Das gerenderte Bild auf der A4-Seite wird in Höhe und Breite um das Dreifache gestreckt, da die Standardauflösung 300 dpi beträgt.

c) Das Ergebnis der Konvertierung von HTML in PNG mit Beschneidung des Ausgabedokuments, um die Seitengröße an die Größe des Inhalts anzupassen.

d) Obwohl die Seitengröße auf 20x20 px festgelegt war, konnte durch die Verwendung der Flags FitToWidestContentWidth und FitToContentHeight das resultierende JPG-Dokument mit einer Seitengröße erstellt werden, die der Größe des Inhalts entspricht.

e) Das Ergebnis der Umwandlung von HTML in ein Bild, wenn die Größe des Inhalts größer ist als die Seitengröße. Wir haben den Inhalt verkleinert, damit er auf die Seitengröße von 200x200 px passt.

Sie können die vollständigen C#-Beispiele und Datendateien von GitHub herunterladen.

Aspose.HTML bietet kostenlose Online- Konverter zur Konvertierung von HTML-, XHTML-, MHTML-, EPUB-, XML- und Markdown-Dateien in verschiedene gängige Formate. Zum Beispiel können Sie ganz einfach HTML in PDF, HTML in JPG, HTML in XHTML, SVG in PDF, MHTML in PDF, MD in HTML usw. konvertieren. Wählen Sie einfach eine Datei aus, wählen Sie das zu konvertierende Format, und schon sind Sie fertig. Es ist schnell und kostenlos!