Comment redimensionner un document – Définir la taille de la page pour les PDF, les images et plus encore

Aujourd’hui, la plupart des documents sont au format A4, mais il arrive que le contenu rendu à partir de HTML soit d’une taille différente. Il en résulte beaucoup d’espace blanc sur la page, ou le contenu ne tient tout simplement pas sur la page ! Dans cet article, nous verrons comment utiliser les options de rendu pour redimensionner les pages d’un document en fonction de la taille du contenu et vice versa.

Comment redimensionner un document avec Aspose.HTML

L’espace de noms Aspose.Html.Rendering fournit un ensemble puissant d’outils tels que des classes d’options de bas niveau, des interfaces, des structures et des énumérations pour le rendu de documents HTML, MHTML, EPUB et SVG vers différents formats de sortie tels que PDF, XPS, DOCX et des images. La classe PageSize permet de spécifier la largeur, la hauteur et l’orientation des pages lors du rendu de documents HTML vers des formats de sortie. Mais il peut arriver que vous deviez rogner des documents pour créer une page plus petite qui corresponde à la taille du contenu de la page. Cela signifie que les marges extérieures, les bordures ou les espaces vides seront supprimés.

La classe PageSetup fournit un ensemble de propriétés permettant de gérer les paramètres de mise en page des documents HTML lors de leur rendu dans différents formats de fichiers. Examinons quelques-unes des propriétés les plus utilisées :

• **La propriété AnyPage vous permet de définir la mise en page (taille, marges, orientation, etc.) pour n’importe quelle page d’un document HTML rendu dans un format multipage, tel que PDF, XPS, DOCX, PNG, JPG, etc.
• **Vous pouvez adapter la taille de la page au contenu et vice versa en utilisant la propriété PageLayoutOptions. Cette propriété est un ensemble de drapeaux qui contrôlent le comportement du moteur de rendu. Vous pouvez recadrer les documents ou les mettre à l’échelle pour adapter leur contenu à la taille de la page.

Vous pouvez facilement utiliser les exemples C# de conversion de HTML en images avec une mise en page personnalisée pour convertir HTML en PDF, XPS et DOCX. Les seules différences résident dans la spécification de

• les options de rendu appropriées – ImageRenderingOption, PdfRenderingOption, XpsRenderingOption ou DocRenderingOption ;
• le périphérique de sortie approprié – ImageDevice, PdfDevice, XpsDevice ou DocDevice.

Convertir HTML en PNG avec les options de rendu par défaut

Pour convertir HTML en PNG avec les options de rendu par défaut, vous devez suivre quelques étapes :

1. Utilisez l’un des constructeurs HTMLDocument() pour initialiser une instance de document. Dans les exemples suivants, nous chargeons le fichier local rendering.html.
2. Initialiser une instance de la classe ImageRenderingOption si vous voulez convertir HTML en un format de fichier image. Par défaut, ImageFormat est PNG. De plus, note que par défaut les propriétés HorizontalResolution et VerticalResolution sont de 300 dpi. Ainsi, l’image rendue sera étirée en hauteur et en largeur d’environ 3 fois puisque la résolution du contenu source est de 96 dpi.
3. Créez une nouvelle instance de la classe ImageDevice. Utilisez le constructeur ImageDevice() qui prend en paramètre options et le chemin du fichier de sortie savePath.
4. Utilisez la méthode RenderTo(device) pour convertir HTML en PNG, qui prend l’objet device en paramètre.

Par ailleurs, le fragment de code C# montre un exemple de conversion d’un document HTML en image sans options supplémentaires, c’est-à-dire avec les options de rendu par défaut. La conversion a permis d’obtenir un document PNG A4 avec beaucoup d’espaces vides (voir illustrations des résultats de la conversion (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);

Options de rendu

l’énumération PageLayoutOptions de l’espace de noms Aspose.Html.Rendering spécifie des drapeaux qui, avec d’autres options PageSetup, déterminent la taille et la disposition des pages. Ces options peuvent être combinées entre elles conformément à leur description.

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.

Adapter la page à la largeur lors de la conversion de HTML en JPG

Afin d’ajuster la largeur de l’image de sortie à la largeur du contenu, vous devez utiliser le drapeau FitToContentWidth, ou le drapeau FitToWidestContentWidth, qui ajustera la largeur du document résultant à la largeur de la page la plus large. Voyons les étapes à suivre :

1. Charger un fichier HTML. Dans l’exemple, le constructeur HTMLDocument(documentPath) charge le document HTML à partir d’un système de fichiers local.
2. Créez une instance de la classe ImageRenderingOption. Dans cet exemple, nous fixons la propriété PageLayoutOptions à FitToWidestContentWidth, ce qui signifie que la largeur de page du document de sortie correspondra à la largeur de la page de contenu la plus large.
3. Créez une nouvelle instance de la classe ImageDevice et passez-la à la méthode RenderTo(device) pour convertir HTML en JPG.

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

La conversion de HTML en JPG a produit un document JPG dont la largeur de page correspond à la largeur du contenu, mais dont la hauteur de page correspond à la hauteur du format A4 (voir illustrations des résultats de la conversion (b)).

Recadrer HTML en PNG Résultat rendu

Pour que la taille de la page de sortie corresponde à la hauteur de l’image dans le fichier source, vous devez définir le drapeau FitToContentHeight dans la propriété PageLayoutOptions. L’exemple suivant montre une combinaison de deux drapeaux, FitToContentHeight et 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);

Adapter la taille de la page au contenu du rendu HTML en JPG

Dans l’exemple suivant, la propriété AnyPage fixe la taille de la page à 20x20 px, ce qui n’est pas assez grand pour contenir le contenu du document HTML lorsqu’il est rendu sous forme d’image. L’utilisation de PageLayoutOptions avec les options FitToWidestContentWidth et FitToContentHeight permet à la page de s’agrandir pour s’adapter au contenu.

1. Créer une instance HTMLDocument. Dans les exemples suivants, nous chargeons le fichier local rendering.html.
2. Initialiser une instance de la classe ImageRenderingOption si vous souhaitez convertir HTML au format JPG.
3. Créez une nouvelle instance de la classe ImageDevice.
4. Utilisez la méthode RenderTo(device) pour convertir HTML en JPG, qui prend l’objet device en paramètre.

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

Bien que la taille de la page soit de 20x20 pixels, les drapeaux FitToWidestContentWidth et FitToContentHeight nous permettent d’ajuster le document JPG résultant à une taille de page correspondant à la taille du contenu (voir l’ illustration des résultats de la conversion (d)).

Adapter la taille de la page lors de la conversion de HTML en PNG

Par analogie avec les indicateurs FitTo* qui contrôlent la taille des pages, il existe un ensemble d’indicateurs ScaleTo* qui contrôlent la taille des contenus et permettent de les mettre à l’échelle. Si la taille du contenu dépasse la taille de la page, le contenu est mis à l’échelle avec le ratio d’aspect jusqu’à ce qu’il tienne sur la page en largeur et/ou en hauteur, en fonction de la combinaison des drapeaux. L’exemple suivant montre comment définir la mise à l’échelle du contenu en largeur et en hauteur :

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

Dans l’exemple, la propriété AnyPage du PageSetup définit un nouvel objet Page avec une Size de 200x200 pixels. Ceci définit la taille de la page à 200x200 pixels. Ensuite, nous définissons la propriété PageLayoutOptions de l’objet PageSetup pour inclure les drapeaux ScaleToPageWidth et ScaleToPageHeight. Cela signifie que le contenu du document de sortie sera mis à l’échelle pour s’adapter à la largeur et/ou à la hauteur de la page (voir l’ illustration des résultats de la conversion (e))

Figures des résultats de la conversion avec recadrage et redimensionnement

La figure montre les résultats de la conversion du fichier rendering.html aux formats PNG, JPG et PDF à l’aide de la méthode RenderTo() et de diverses options de rendu qui contrôlent la taille de la page du document de sortie.

Note: La taille de l’image source dans le fichier rendering.html est de 404x303, avec une résolution de 96 dpi.

a) Le résultat de la conversion HTML vers PNG avec les options de rendu par défaut est un document PNG de la taille d’une page A4 avec beaucoup d’espace vide. L’image rendue sur la page A4 est étirée en hauteur et en largeur d’environ 3 fois puisque la résolution par défaut est de 300 dpi.

b) La conversion de HTML en JPG a produit un document JPG dont la largeur de page correspond à la largeur du contenu, mais dont la hauteur de page correspond à la hauteur du format A4. L’image rendue sur la page A4 est étirée en hauteur et en largeur d’environ 3 fois puisque la résolution par défaut est de 300 dpi.

c) Le résultat de la conversion de HTML en PNG avec recadrage du document de sortie pour adapter la taille de la page à la taille du contenu.

d) Même si la taille de la page était fixée à 20x20 px, l’utilisation des drapeaux FitToWidestContentWidth et FitToContentHeight a permis d’obtenir le document JPG résultant avec une taille de page adaptée à la taille du contenu.

e) Résultat de la conversion du code HTML en image lorsque la taille du contenu est supérieure à celle de la page. Nous avons réduit le contenu pour l’adapter à la taille de la page de 200x200 px.

Vous pouvez télécharger les exemples C# complets et les fichiers de données sur GitHub.

Aspose.HTML propose des Convertisseurs gratuits en ligne pour convertir des fichiers HTML, XHTML, MHTML, EPUB, XML et Markdown dans divers formats populaires. Par exemple, vous pouvez facilement convertir HTML en PDF, HTML en JPG, HTML en XHTML, SVG en PDF, MHTML en PDF, MD en HTML, etc. Il suffit de sélectionner un fichier, de choisir le format à convertir et le tour est joué. C’est rapide et entièrement gratuit !