Crear un documento HTML – crear o cargar HTML – C#
Este artículo ofrece una guía detallada sobre cómo crear un documento HTML. Aspose.HTML for .NET API proporciona la clase HTMLDocument que es la raíz de la jerarquía HTML y contiene todo el contenido.
Documento HTML
El HTMLDocument es un punto de partida para la biblioteca Aspose.HTML for .NET. Puede cargar la página HTML en el Modelo de objetos de documento (Document Object Model, DOM) utilizando la clase HTMLDocument y luego leer mediante programación, modificar el árbol del documento, agregar y eliminar nodos, cambiar las propiedades de los nodos en el documento como se describe en las especificaciones oficiales.
La clase HTMLDocument proporciona una representación en memoria de un HTML DOM y se basa completamente en las especificaciones W3C DOM y WHATWG DOM que son compatibles con muchos navegadores modernos. Si está familiarizado con los estándares WHATWG DOM, WHATWG HTML y JavaScript, le resultará bastante cómodo utilizar Aspose.HTML for .NET. De lo contrario, puedes visitar www.w3schools.com, donde puedes encontrar muchos ejemplos y tutoriales sobre cómo trabajar con documentos HTML.
Los documentos HTML se pueden crear desde cero como un documento vacío con estructura HTML, a partir de una cadena, desde un flujo de memoria o cargados desde un archivo o una URL. El HTMLDocument tiene varios constructores sobrecargados que le permiten crear o cargar documentos HTML.
Crear un documento HTML vacío
Una vez creado el objeto del documento, se puede rellenar posteriormente con elementos HTML. El siguiente fragmento de código muestra el uso del constructor predeterminado HTMLDocument() para crear un documento HTML vacío y guardarlo en un archivo.
1// Prepare an output path for a document saving
2string documentPath = Path.Combine(OutputDir, "create-empty-document.html");
3
4// Initialize an empty HTML Document
5using (var document = new HTMLDocument())
6{
7 // Work with the document
8
9 // Save the document to a file
10 document.Save(documentPath);
11}Después de la creación, aparece el archivo create-empty-document.html con la estructura del documento inicial: el documento vacío incluye elementos como <html> <head> y <body>. Más detalles sobre cómo guardar archivos HTML se encuentran en el artículo
Guardar documento HTML.
Crear un nuevo documento HTML
Si desea generar un documento mediante programación desde cero, utilice el constructor sin parámetros como se especifica en el siguiente fragmento de código:
1// Prepare an output path for a document saving
2string documentPath = Path.Combine(OutputDir, "create-new-document.html");
3
4// Initialize an empty HTML Document
5using (var document = new HTMLDocument())
6{
7 // Create a text node and add it to the document
8 var text = document.CreateTextNode("Hello, World!");
9 document.Body.AppendChild(text);
10
11 // Save the document to a disk
12 document.Save(documentPath);
13}En el nuevo documento, creamos un nodo de texto, dada la cadena especificada, usando el método CreateTextNode() y lo agregamos al elemento del cuerpo usando el método AppendChild().
Cómo editar un archivo HTML se describe en detalle en el artículo Editar documento HTML.
Cargar desde un archivo
El siguiente fragmento de código muestra cómo cargar el HTMLDocument desde un archivo existente:
1var htmlFile = Path.Combine(OutputDir, "load-from-file.html");
2
3// Prepare a load-from-file.html document
4File.WriteAllText(htmlFile, "Hello, World!");
5
6// Load from the load-from-file.html
7using (var document = new HTMLDocument(htmlFile))
8{
9 // Write the document content to the output stream
10 Console.WriteLine(document.DocumentElement.OuterHTML);
11}En el ejemplo anterior, el documento HTML se cargó desde un archivo usando el constructor
HTMLDocument (string). Si necesita cargar un archivo HTML existente desde un disco, trabajarlo y guardarlo, el siguiente fragmento de código le ayudará.
1// Prepare a file path
2string documentPath = Path.Combine(DataDir, "sprite.html");
3
4// Initialize an HTML document from the file
5using (var document = new HTMLDocument(documentPath))
6{
7 // Work with the document
8
9 // Save the document to a disk
10 document.Save(Path.Combine(OutputDir, "sprite_out.html"));
11}Cargar desde una URL
La capacidad de seleccionar archivos e interactuar con ellos en el dispositivo local del usuario es una de las funciones más utilizadas de Internet. En el siguiente fragmento de código, puede ver cómo cargar una página web en HTMLDocument.
En caso de que pase una URL incorrecta a la que no se pueda acceder en este momento, la biblioteca genera la DOMException con el código especializado ‘NetworkError’ para informarle que no se puede encontrar el recurso seleccionado.
1// Load a document from 'https://docs.aspose.com/html/net/creating-a-document/document.html' web page
2using (var document = new HTMLDocument("https://docs.aspose.com/html/net/creating-a-document/document.html"))
3{
4 var html = document.DocumentElement.OuterHTML;
5
6 // Write the document content to the output stream
7 Console.WriteLine(html);
8}En el ejemplo anterior, hemos especificado el archivo document.html para cargar desde la URL.
Cargar desde código HTML
Si prepara un código HTML como objetos en memoria System.String o System.IO.Stream, no necesita guardarlos en el archivo, simplemente pase su código HTML a constructores especializados.
En caso de que su código HTML tenga los recursos vinculados (estilos, scripts, imágenes, etc.), debe pasar un parámetro baseUrl válido al constructor del documento. Se utilizará para resolver la ubicación del recurso durante la carga del documento.
Cargar desde una cadena
Puede crear un documento a partir de un contenido de cadena usando el constructor
HTMLDocument (string, string). Si su caso es crear un documento a partir de una cadena de usuario directamente en su código y guardarlo en un archivo, el siguiente ejemplo podría ayudarlo: producimos un documento HTML que contiene “¡Hola, mundo!” texto.
1// Prepare HTML code
2var html_code = "<p>Hello, World!</p>";
3
4// Initialize a document from the string variable
5using (var document = new HTMLDocument(html_code, "."))
6{
7 // Save the document to a disk
8 document.Save(Path.Combine(OutputDir, "create-from-string.html"));
9}Cargar desde una secuencia
Para crear un documento HTML a partir de una secuencia, puede utilizar el constructor
HTMLDocument(stream, string):
1// Create a memory stream object
2using (var mem = new MemoryStream())
3using (var sw = new StreamWriter(mem))
4{
5 // Write the HTML Code into memory object
6 sw.Write("<p>Hello, World! I love HTML!</p>");
7
8 // It is important to set the position to the beginning, since HTMLDocument starts the reading exactly from the current position within the stream
9 sw.Flush();
10 mem.Seek(0, SeekOrigin.Begin);
11
12 // Initialize a document from the string variable
13 using (var document = new HTMLDocument(mem, "."))
14 {
15 // Save the document to disk
16 document.Save(Path.Combine(OutputDir, "load-from-stream.html"));
17 }
18}Documento SVG
Dado que los gráficos vectoriales escalables (SVG) son parte de los estándares W3C y podrían integrarse en el HTMLDocument, implementamos el SVGDocument y toda su funcionalidad. Nuestra implementación se basa en la especificación SVG2 oficial, por lo que puede cargar, leer y manipular documentos SVG como se describe oficialmente.
Dado que SVGDocument y HTMLDocument se basan en el mismo estándar WHATWG DOM, todas las operaciones como cargar, leer, editar, convertir y guardar son similares para ambos documentos. Por lo tanto, todos los ejemplos en los que puede ver manipulación con HTMLDocument también son aplicables para SVGDocument.
Puede crear un documento a partir del contenido de una cadena utilizando el constructor SVGDocument(string, string). Si desea cargar el documento SVG desde la variable en memoria
System.String y no necesita guardarlo en un archivo; el siguiente ejemplo le muestra cómo hacerlo:
1// Initialize an SVG document from a string object
2using (var document = new SVGDocument("<svg xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='40'/></svg>", "."))
3{
4 // Write the document content to the output stream
5 Console.WriteLine(document.DocumentElement.OuterHTML);
6}En el ejemplo anterior, hemos producido un documento SVG que contiene un círculo con un radio de 40 píxeles. Puede obtener más información sobre cómo trabajar con documentos SVG en el capítulo Cómo trabajar con Aspose.SVG API.
Documento MHTML
MHTML significa encapsulación MIME de documentos HTML agregados. Un archivo MHTML es un archivo que contiene todo el contenido de una página web. Almacena el HTML de una página web, así como recursos relacionados en una página web, que pueden incluir CSS, JavaScript, imágenes y archivos de audio. Es un formato especializado para crear archivos de páginas web, y los desarrolladores web utilizan principalmente archivos MHTML para guardar el estado actual de una página web con fines de archivo. La biblioteca Aspose.HTML for .NET admite este formato pero con algunas limitaciones. Solo admitimos las operaciones de renderizado desde MHTML a los formatos de salida admitidos. Para obtener más detalles, lea el artículo Conversión entre formatos.
Documento EPUB
EPUB es un formato compatible con la mayoría de los lectores electrónicos y con la mayoría de los dispositivos en los que lee: teléfonos inteligentes, tabletas y computadoras. Para el formato EPUB, que representa un formato de publicación electrónica, tenemos la misma limitación que para MHTML. Solo admitimos las operaciones de renderizado desde EPUB a los formatos de salida admitidos. Para obtener más detalles, lea el artículo Conversión entre formatos.
Operaciones asincrónicas
Nos damos cuenta de que cargar un documento puede ser una operación que consume muchos recursos, ya que es necesario cargar no solo el documento en sí, sino también todos los recursos vinculados y procesar todos los scripts. Entonces, en los siguientes fragmentos de código, le mostramos cómo usar operaciones asincrónicas y cargar el HTMLDocument sin bloquear el hilo principal:
1// Initialize an AutoResetEvent
2var resetEvent = new AutoResetEvent(false);
3
4// Create an instance of an HTML document
5var document = new HTMLDocument();
6
7// Create a string variable for the OuterHTML property reading
8var outerHTML = string.Empty;
9
10// Subscribe to ReadyStateChange event
11// This event will be fired during the document loading process
12document.OnReadyStateChange += (sender, @event) =>
13{
14 // Check the value of the ReadyState property
15 // This property is representing the status of the document. For detail information please visit https://www.w3schools.com/jsref/prop_doc_readystate.asp
16 if (document.ReadyState == "complete")
17 {
18 // Fill the outerHTML variable by value of loaded document
19 outerHTML = document.DocumentElement.OuterHTML;
20 resetEvent.Set();
21 }
22};
23
24// Navigate asynchronously at the specified Uri
25document.Navigate("https://docs.aspose.com/html/net/creating-a-document/document.html");
26
27// Here the outerHTML is empty yet
28
29Console.WriteLine($"outerHTML = {outerHTML}");
30
31// Wait 5 seconds for the file to load
32
33// Here the outerHTML is filled
34Console.WriteLine("outerHTML = {0}", outerHTML);ReadyStateChange no es el único evento que se puede utilizar para manejar una operación de carga asíncrona; también puedes suscribirte al evento Load, como se muestra a continuación:
1// Initialize an AutoResetEvent
2var resetEvent = new AutoResetEvent(false);
3
4// Initialize an HTML document
5var document = new HTMLDocument();
6var isLoading = false;
7
8// Subscribe to the OnLoad event
9// This event will be fired once the document is fully loaded
10document.OnLoad += (sender, @event) =>
11{
12 isLoading = true;
13 resetEvent.Set();
14};
15
16// Navigate asynchronously at the specified Uri
17document.Navigate("https://docs.aspose.com/html/net/creating-a-document/document.html");
18
19Console.WriteLine("outerHTML = {0}", document.DocumentElement.OuterHTML);Puede descargar los ejemplos completos y los archivos de datos desde GitHub.