¿Cómo cambiar el tamaño del documento durante la conversión desde HTML? – C#

En el mundo actual, la mayoría de los documentos están en formato A4, pero a veces el contenido renderizado desde HTML tiene un tamaño diferente. Esto da como resultado una gran cantidad de espacio en blanco en la página o el contenido simplemente no cabe en la página. En este artículo, consideraremos cómo utilizar las opciones de representación para cambiar el tamaño de las páginas del documento al tamaño del contenido y viceversa.

Cómo cambiar el tamaño del documento usando Aspose.HTML

El espacio de nombres Aspose.Html.Rendering proporciona un potente conjunto de herramientas, como clases de opciones de bajo nivel, interfaces, estructuras y enumeraciones para representar documentos HTML, MHTML, EPUB y SVG en diferentes formatos de salida, como PDF. , XPS, DOCX e imágenes. La clase PageSize proporciona una forma de especificar el ancho, el alto y la orientación de las páginas al representar documentos HTML en formatos de salida. Pero a veces, es posible que necesites recortar documentos para crear un tamaño de página más pequeño que se ajuste al tamaño del contenido de la página. Esto significa que se eliminarán los márgenes exteriores, los bordes o los espacios vacíos.

La clase PageSetup proporciona un conjunto de propiedades para administrar la configuración de configuración de página para documentos HTML al representarlos en diferentes formatos de archivo. Echemos un vistazo a algunos de los más utilizados:

• Establecer configuración de página. La propiedad AnyPage le permite configurar la configuración de página (tamaño, márgenes, orientación, etc.) para cualquier página de un documento HTML que se represente en un formato de varias páginas, como PDF, XPS, DOCX, PNG, JPG, etc.
• Cambiar el tamaño del documento para ajustarlo al tamaño del contenido. Puede ajustar el tamaño de la página al contenido y viceversa utilizando la propiedad PageLayoutOptions. Esta propiedad es un conjunto de indicadores de bits que controlan el comportamiento del renderizador. Puede recortar documentos o escalarlos para que su contenido coincida con el tamaño de la página.

Puede utilizar fácilmente ejemplos de C# para convertir HTML a imágenes con un diseño de página personalizado para convertir HTML a PDF, XPS y DOCX. Las únicas diferencias están en especificar

• las opciones de renderizado apropiadas: ImageRenderingOption, PdfRenderingOption, XpsRenderingOption o DocRenderingOption;
• el dispositivo de salida apropiado: ImageDevice, PdfDevice, XpsDevice o DocDevice.

Convierta HTML a PNG con opciones de renderizado predeterminadas

Para convertir HTML a PNG con opciones de renderizado predeterminadas, debes seguir algunos pasos:

1. Utilice uno de los constructores HTMLDocument() para inicializar una instancia de document. En los siguientes ejemplos, cargamos el archivo local rendering.html.
2. Inicialice una instancia de la clase ImageRenderingOption si desea convertir HTML a un formato de archivo de imagen. Por defecto, ImageFormat es PNG. Además, tenga en cuenta que, de forma predeterminada, las propiedades HorizontalResolution y VerticalResolution son 300 ppp. Por lo tanto, la imagen renderizada se ampliará en alto y ancho aproximadamente 3 veces, ya que la resolución del contenido original es de 96 ppp.
3. Cree una nueva instancia de la clase ImageDevice. Utilice el constructor ImageDevice() que toma options y la ruta del archivo de salida savePath como parámetros.
4. Utilice el método RenderTo(device) para convertir HTML a PNG, que toma el objeto device como parámetro.

Además, el fragmento de código C# muestra un ejemplo de cómo convertir un documento HTML en una imagen sin opciones adicionales, es decir, con opciones de representación predeterminadas. Como resultado de la conversión, se obtuvo un documento PNG A4 con mucho espacio vacío (ver ilustraciones de los resultados de la conversión (a).)

// 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 var document = new HTMLDocument(documentPath);

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

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

Opciones de renderizado

La enumeración PageLayoutOptions del espacio de nombres Aspose.Html.Rendering especifica indicadores que, junto con otras opciones PageSetup, determinan los tamaños y diseños de las páginas. Estas banderas se pueden combinar entre sí según sus descripciones.

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.

Ajustar la página al ancho al convertir HTML a JPG

Para ajustar el ancho de la página de la imagen de salida al ancho del contenido, necesita usar el indicador FitToContentWidth o el indicador FitToWidestContentWidth, que ajustará el ancho del documento resultante al ancho de la página más ancha. Veamos los pasos que debes seguir:

1. Cargue un archivo HTML. En el ejemplo, el constructor HTMLDocument(documentPath) carga el documento HTML desde un sistema de archivos local.
2. Cree una instancia de la clase ImageRenderingOption. En este ejemplo, configuramos la propiedad PageLayoutOptions en FitToWidestContentWidth, lo que significa que el ancho de la página del documento de salida se ajustará al ancho de la página de contenido más ancho.
3. Cree una nueva instancia de la clase ImageDevice y pásela al método RenderTo(device) para convertir HTML a JPG.

    // 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 var document = new HTMLDocument(documentPath);

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

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

    

La conversión de HTML a JPG dio como resultado un documento JPG con un ancho de página que se ajusta al ancho del contenido, pero con una altura de página que coincide con la altura del formato A4 (ver ilustraciones de los resultados de la conversión (b)) .

Recortar HTML a PNG resultado renderizado

Para que el tamaño de la página de salida coincida con la altura de la imagen en el archivo fuente, debe configurar el indicador FitToContentHeight en la propiedad PageLayoutOptions. El siguiente ejemplo muestra una combinación de dos indicadores, FitToContentHeight y FitToContentWidth.

// 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 var document = new HTMLDocument(documentPath);

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

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

Ajustar el tamaño de página al contenido de renderizar HTML a JPG

En el siguiente ejemplo, la propiedad AnyPage establece el tamaño de la página en 20x20 px, que no es lo suficientemente grande como para caber en el contenido del documento HTML cuando se representa en una imagen. El uso de PageLayoutOptions con los indicadores FitToWidestContentWidth y FitToContentHeight hace que la página crezca en tamaño para ajustarse al contenido.

1. Cree una instancia HTMLDocument. En los siguientes ejemplos, cargamos el archivo local rendering.html.
2. Inicialice una instancia de la clase ImageRenderingOption si desea convertir HTML al formato de archivo JPG.
   • Especifique el ImageFormat como Jpeg.
   • Cree un objeto PageSetup con la propiedad PageLayoutOptions con los indicadores FitToWidestContentWidth y FitToContentHeight establecidos. Esto garantiza que la imagen de salida se ajustará al ancho y alto del contenido sin ningún espacio vacío.
3. Cree una nueva instancia de la clase ImageDevice.
4. Utilice el método RenderTo(device) para convertir HTML a JPG, que toma el objeto device como parámetro.

// 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 var document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object with custom options. Use FitToWidestContentWidth and FitToContentHeight flags
var 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 var device = new ImageDevice(opt, savePath);
document.RenderTo(device);

A pesar de configurar el tamaño de la página en 20x20 píxeles, los indicadores FitToWidestContentWidth y FitToContentHeight nos permiten ajustar el documento JPG resultante y tendría un tamaño de página que se ajuste al tamaño del contenido (consulte la ilustración de los resultados de la conversión (d)).

Escalar el tamaño de la página durante la conversión de HTML a PNG

Por analogía con las banderas FitTo* que controlan el tamaño de las páginas, existe un conjunto de banderas ScaleTo* que controlan el tamaño del contenido y permiten escalarlo. Si el tamaño del contenido excede el tamaño de la página, el contenido se escala con la relación de aspecto hasta que se ajuste a la página en ancho y/o alto, dependiendo de la combinación de banderas. El siguiente ejemplo muestra cómo establecer la escala de ancho y alto del contenido:

// 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 var document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object and use ScaleToPageWidth and ScaleToPageHeight flags
var 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 var device = new ImageDevice(opt, savePath);
document.RenderTo(device);

En el ejemplo, la propiedad AnyPage de PageSetup establece un nuevo objeto Page con un Size de 200x200 píxeles. Esto establece el tamaño de la página en 200x200 píxeles. Luego configuramos la propiedad PageLayoutOptions del objeto PageSetup para incluir los indicadores ScaleToPageWidth y ScaleToPageHeight. Esto significa que el contenido del documento de salida se escalará para ajustarse al ancho y/o alto de la página (consulte la ilustración de los resultados de la conversión (e).)

Cifras de los resultados de la conversión con Recortar y Cambiar tamaño

La figura muestra los resultados de convertir el archivo render.html a formatos PNG, JPG y PDF usando el método RenderTo() y varias opciones de renderizado que controlan el tamaño de página del documento de salida.

Nota: El tamaño de la imagen de origen en el archivo rendering.html es 404x303, con una resolución de 96 ppp.

a) El resultado de la conversión de HTML a PNG con opciones de representación predeterminadas es un documento PNG de tamaño de página A4 con mucho espacio vacío. La imagen renderizada en la página A4 se amplía en alto y ancho aproximadamente 3 veces, ya que la resolución predeterminada es 300 ppp.

b) La conversión de HTML a JPG dio como resultado un documento JPG con un ancho de página que se ajusta al ancho del contenido, pero con una altura de página que coincide con la altura del formato A4. La imagen renderizada en la página A4 se amplía en alto y ancho aproximadamente 3 veces, ya que la resolución predeterminada es 300 ppp.

c) El resultado de convertir HTML a PNG recortando el documento de salida para ajustar el tamaño de la página al tamaño del contenido.

d) Aunque el tamaño de la página se estableció en 20x20 px, el uso de los indicadores FitToWidestContentWidth y FitToContentHeight hizo posible obtener el documento JPG resultante con un tamaño de página que se ajusta al tamaño del contenido.

e) El resultado de representar HTML en imagen cuando el tamaño del contenido es mayor que el tamaño de la página. Redujimos el contenido para que se ajuste al tamaño de página de 200x200 px.

Puede descargar los ejemplos completos de C# y los archivos de datos desde GitHub.

Aspose.HTML ofrece Convertidores gratuitos en línea para convertir archivos HTML, XHTML, MHTML, EPUB, XML y Markdown a varios formatos populares. Por ejemplo, puede convertir fácilmente HTML a PDF, HTML a JPG, HTML a XHTML, SVG a PDF, MHTML a PDF, MD a HTML, etc. Simplemente seleccione un archivo, elija el formato a convertir y listo. ¡Es rápido y completamente gratis!