Создание HTML-документа – Создать или загрузить HTML на С#

Эта статья предлагает подробное руководство по созданию HTML-документа. Aspose.HTML for .NET API предоставляет класс HTMLDocument, который является корнем иерархии HTML и содержит все содержимое.

HTML-документ

HTMLDocument является отправной точкой для библиотеки классов Aspose.HTML. Вы можете загрузить HTML-страницу в объектную модель документа (DOM) с помощью класса HTMLDocument, а затем программно читать, изменять дерево документа, добавлять и удалять узлы, изменять свойства узла в документе, как это описано в официальных спецификациях.

Класс HTMLDocument обеспечивает представление в памяти HTML DOM и полностью основан на W3C DOM и WHATWG DOM, которые поддерживаются многими современными браузерами. Если вы знакомы с WHATWG DOM, WHATWG HTML и JavaScript, вам будет очень удобно использовать библиотеку Aspose.HTML. В противном случае вы можете посетить www.w3schools.com, где вы можете найти множество примеров и учебных пособий по работе с HTML-документами.

HTML-документы могут быть созданы с нуля как пустой документ со структурой HTML, из строки, из потока памяти или загружены из файла или URL-адреса. HTMLDocument имеет несколько перегруженных конструкторов, позволяющих создавать или загружать HTML-документы.

Создайте пустой HTML-документ

После создания объекта документа его можно позже заполнить элементами HTML. В следующем фрагменте кода показано использование конструктора HTMLDocument() по умолчанию для создания пустого HTML-документа и его сохранения в файл.

 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}

view raw Example-CreateEmptyDocument hosted with ❤ by GitHub

После создания появляется файл create-empty-document.html с исходной структурой документа: пустой документ включает такие элементы, как <html>, <head> и <body>. Подробнее о сохранении HTML-файлов читайте в статье Сохранить HTML-документ.

Создать новый HTML-документ

Если вы хотите сгенерировать документ программно с нуля, используйте конструктор без параметров, как указано в следующем фрагменте кода:

 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}

view raw Example-CreateNewDocument hosted with ❤ by GitHub

В новом документе мы создали текстовый узел, учитывая указанную строку, используя CreateTextNode() метод и добавил его в элемент body с помощью метода AppendChild(). Как редактировать HTML-файл, подробно описано в статье Редактировать HTML-документ.

Загрузить из файла

Следующий фрагмент кода показывает, как загрузить HTMLDocument из существующего файла:

 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}

view raw Example-LoadDocumentFromFile hosted with ❤ by GitHub

В приведенном выше примере HTML-документ загружается из файла с помощью конструктора HTMLDocument(string). Если вам требуется загрузить существующий HTML-файл с диска, обработать и сохранить его, то вам поможет следующий фрагмент кода.

 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}

view raw Example-LoadDocumentFromExistingFile hosted with ❤ by GitHub

Загрузить с URL-адреса

Возможность выбирать файлы и взаимодействовать с ними на локальном устройстве пользователя – одна из наиболее часто используемых функций Интернета. В следующем фрагменте кода показано, как загрузить веб-страницу в HTMLDocument.

В случае, если вы передадите неправильный URL-адрес, который недоступен в данный момент, библиотека выдает DOMException со специализированным код «NetworkError», чтобы сообщить вам, что выбранный ресурс не может быть найден.

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}

view raw Example-LoadDocumentFromUrl hosted with ❤ by GitHub

В приведенном выше примере мы указали файл document.html для загрузки с URL-адреса.

Загрузить из HTML-кода

Если вы подготавливаете HTML-код в виде файла [System.String] в памяти ( https://docs.microsoft.com/en-us/dotnet/api/system.string?view=netframework-4.8) или System.IO.Stream, вам не нужно сохранять их в файл, просто передайте ваш HTML-код в специализированные конструкторы.

Если в вашем HTML-коде есть связанные ресурсы (стили, скрипты, изображения и т. д.), вам необходимо передать корректный параметр baseUrl конструктору документа. Он будет использоваться для определения местоположения ресурса во время загрузки документа.

Загрузить из строки

Вы можете создать документ из строкового содержимого, используя конструктор HTMLDocument(string, string). Если вам нужно создать документ из пользовательской строки непосредственно в вашем коде и сохранить его в файл, вам может помочь следующий пример: мы создаем HTML-документ, который содержит «Hello World!» текст.

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}

view raw Example-CreateDocumentFromContentString hosted with ❤ by GitHub

Загрузка из потока

Чтобы создать HTML-документ из потока, вы можете использовать конструктор 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}

view raw Example-LoadDocumentFromStream hosted with ❤ by GitHub

SVG-документ

Поскольку масштабируемая векторная графика (SVG) является частью стандартов W3C и может быть встроена в HTMLDocument, мы внедрили SVGDocument и все его функциональность. Наша реализация основана на официальной спецификации SVG 2, поэтому вы можете загружать, читать и манипулировать документами SVG так, как это официально описано.

Поскольку SVGDocument и HTMLDocument основаны на одном и том же стандарте WHATWG DOM, все операции, такие как загрузка, чтение, редактирование, преобразование и сохранение, аналогичны для обоих документов. Таким образом, все примеры, где вы видите манипуляции с HTMLDocument, применимы и к SVGDocument.

Вы можете создать документ из строкового содержимого, используя конструктор SVGDocument (string, string). Если вы хотите загрузить документ SVG из переменной System.String в памяти и вам не нужно сохранять его в файл; пример ниже показывает, как это сделать:

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}

view raw Example-LoadSVGDocumentFromString hosted with ❤ by GitHub

В приведенном выше примере мы создали документ SVG, содержащий круг радиусом 40 пикселей. Вы можете узнать больше о работе с документами SVG из статей главы Как работать с Aspose.SVG API.

MHTML-документ

MHTML означает MIME-инкапсуляцию совокупных документов HTML. Файл MHTML – это архив, содержащий все содержимое веб-страницы. Он хранит HTML-код веб-страницы, а также связанные ресурсы на веб-странице, которые могут включать CSS, JavaScript, изображения и аудиофайлы. Это специализированный формат для создания архивов веб-страниц, и веб-разработчики в основном используют файлы MHTML для сохранения текущего состояния веб-страницы в целях архивирования. Библиотека Aspose.HTML поддерживает этот формат, но с некоторыми ограничениями. Мы поддерживаем только операции рендеринга из MHTML в поддерживаемые форматы вывода. Дополнительные сведения вы найдете в статье Преобразование между форматами.

EPUB-документ

EPUB – это формат, поддерживаемый большинством электронных книг и совместимый с большинством устройств, на которых вы читаете: смартфонами, планшетами и компьютерами. Для формата EPUB, представляющего формат электронной публикации, действуют те же ограничения, что и для MHTML. Мы поддерживаем только операции рендеринга из EPUB в поддерживаемые выходные форматы. Дополнительные сведения вы найдете в статье Преобразование между форматами.

Асинхронные операции

Мы понимаем, что загрузка документа может быть ресурсоемкой операцией, поскольку требуется загрузка не только самого документа, но и всех связанных ресурсов и обработки всех скриптов. Итак, в следующих фрагментах кода мы покажем вам, как использовать асинхронные операции и загружать HTMLDocument, не блокируя основной поток:

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

view raw Example-UsingAsynchronousOperations hosted with ❤ by GitHub

ReadyStateChange – не единственное событие, которое может использоваться для обработки операции асинхронной загрузки, вы также можете подписаться на событие Load следующим образом:

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

view raw Example-UsingAsynchronousOperationsOnLoad hosted with ❤ by GitHub

Вы можете скачать полные примеры и файлы данных с GitHub.

Работа с HTML-документами Редактировать HTML-документ