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

Как мы уже упоминали в статье Создание HTML-документа, реализация HTMLDocument, а также вся модель документа DOM основаны на стандарте WHATWG DOM. Таким образом, Aspose.HTML легко использовать, имея базовые знания языков HTML и JavaScript.

Пространство имен DOM – DOM namespace

Дерево DOM – это представление документа в памяти. DOM – это API для доступа к содержимому документов и управления им. Документы HTML состоят из дерева, содержащего несколько типов узлов, корнем которых является Document. DOM namespace представлено следующими основными типами данных:

Data type	Description
Document	The Document class represents the entire HTML, XML or SVG document. Conceptually, it is the root of the document tree and provides the primary access to the document’s data.
EventTarget	The EventTarget class is implemented by all Nodes in an implementation that supports the DOM Event Model. An EventTarget object represents a target to which an event can be dispatched when something has occurred.
Node	The Node class is the primary datatype for the entire Document Object Model. It represents a single node in the document tree.
Element	The element type is based on node and represents a base class for HTML, XML or SVG DOM.
Attr	The Attr class represents an attribute in an Element object. Typically the allowable values for the attribute are defined in a schema associated with the document.

Ниже приведен краткий список полезных методов API, предоставляемых основными типами данных:

Method	Description
Document.GetElementById(`elementId`)	The method, when invoked, must return the first element whose ID is elementId and null if there is no such element otherwise.
Document.GetElementsByTagName(`tagname`)	The method must return the list of elements with the given name.
Document.CreateElement(`localname`)	The method creates an element of the type specified, or an HTMLUnknownElement if tagname isn’t recognized.
Node.AppendChild(`node`)	The method adds a node to the end of the list of children of a specified parent node.
Element.SetAttribute(`name, value`)	Sets the value of an attribute on the specified element.
Element.GetAttribute(`name`)	The method returns the value of a specified attribute on the element.
Element.innerHTML	The property returns a fragment of markup contained within the element.

Полный список интерфейсов и методов, представленных в пространстве имен DOM, см. в Справочнике API.

Редактировать HTML

Существует множество способов редактирования HTML с помощью нашей библиотеки. Вы можете изменить документ, вставив новые узлы, удалив или отредактировав содержимое существующих узлов. Если вам нужно создать новый узел, необходимо вызвать следующие методы:

Method	Description
Document.CreateCDATASection(`data`)	Creates a CDATASection node whose value is the specified string.
Document.CreateComment(`data`)	Creates a Comment node given the specified string.
Document.CreateDocumentFragment()	Creates an empty DocumentFragment object.
Document.CreateElement(`localname`)	Creates an element of the type specified.
Document.CreateEntityReference(`name`)	Creates an EntityReference object.
Document.CreateProcessingInstruction(`target, data`)	Creates an ProcessingInstruction with the specified name and data.
Document.CreateTextNode(`data`)	Creates a Text node given the specified string.

После создания новых узлов в DOM есть несколько методов, которые могут помочь вам вставить узлы в дерево документа. В следующем списке описывается наиболее распространенный способ вставки узлов:

Method	Description
Node.InsertBefore(`node, child`)	Inserts the node before the reference child node.
Node.AppendChild(`node`)	Adds the node to the list of children of the current node.
Node.RemoveChild(`child`)	Removes the child node from the list of children.
Element.Remove()	Removes this instance from the HTML DOM tree.

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

Редактировать дерево документов

Документы HTML состоят из дерева элементов. Каждый элемент обозначается в исходном коде начальным тегом, таким как <body>, и конечным тегом, таким как </body>. Элементы могут иметь атрибуты, управляющие работой элементов. Aspose.HTML API поддерживает набор элементов HTML, определенных в стандарте HTML, а также правила вложения элементов.

Рассмотрим простые шаги по созданию и редактированию HTML. Документ будет содержать текстовый абзац с атрибутом id:

Создайте экземпляр HTML-документа.
Создайте элемент абзаца <p>.
Установите атрибут id для элемента абзаца.
Создайте текстовый узел.
Добавьте текст в абзац.
Добавьте абзац в тело документа.
Сохраните документ HTML в файл.

 1using System.IO;
 2using Aspose.Html;
 3...
 4    // Create an instance of an HTML document
 5    using (var document = new HTMLDocument())
 6    {
 7        var body = document.Body;
 8
 9        // Create a paragraph element <p>
10        var p = (HTMLParagraphElement)document.CreateElement("p");
11
12        // Set a custom attribute
13        p.SetAttribute("id", "my-paragraph");
14
15        // Create a text node
16        var text = document.CreateTextNode("my first paragraph");
17
18        // Add the text to the paragraph
19        p.AppendChild(text);
20
21        // Attach paragraph to the document body
22        body.AppendChild(p);
23
24        // Save the HTML document to a file 
25        document.Save(Path.Combine(OutputDir, "edit-document-tree.html"));
26    }

Давайте рассмотрим создание более сложного HTML-документа. Каждый HTML-документ представлен в виде дерева узлов, и некоторые узлы дерева могут иметь дочерние элементы. В следующем фрагменте кода показано, как редактировать HTML-документ с помощью DOM Tree и упомянутого выше функционала:

 1using System.IO;
 2using Aspose.Html;
 3using Aspose.Html.Rendering.Pdf;
 4...
 5    // Create an instance of an HTML document
 6    using (var document = new HTMLDocument())
 7    {
 8        // Create a style element and assign the green color for all elements with class-name equals 'gr'.
 9        var style = document.CreateElement("style");
10        style.TextContent = ".gr { color: green }";
11
12        // Find the document header element and append the style element to the header
13        var head = document.GetElementsByTagName("head").First();
14        head.AppendChild(style);
15
16        // Create a paragraph element with class-name 'gr'.
17        var p = (HTMLParagraphElement)document.CreateElement("p");
18        p.ClassName = "gr";
19
20        // Create a text node
21        var text = document.CreateTextNode("Hello World!!");
22
23        // Append the text node to the paragraph
24        p.AppendChild(text);
25
26        // Append the paragraph to the document body element
27        document.Body.AppendChild(p);
28
29    	 // Save the HTML document to a file 
30         document.Save(Path.Combine(OutputDir, "using-dom.html"));
31
32        // Create an instance of the PDF output device and render the document into this device
33        using (var device = new PdfDevice(Path.Combine(OutputDir, "using-dom.pdf")))
34    	{
35            // Render HTML to PDF
36    		document.RenderTo(device);
37    	}
38    }

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

Использование свойств InnerHTML и OuterHTML

Наличие объектов DOM дает вам мощный инструмент для работы с HTML-документом. Однако иногда гораздо лучше работать только с System.String. В следующем фрагменте кода показано, как использовать файлы InnerHTML и OuterHTML для редактирования HTML.

 1using System;
 2using Aspose.Html;
 3...
 4    // Create an instance of an HTML document
 5    using (var document = new HTMLDocument())
 6    {
 7        // Write the content of the HTML document into the console output
 8        Console.WriteLine(document.DocumentElement.OuterHTML); // output: <html><head></head><body></body></html>
 9
10        // Set the content of the body element
11        document.Body.InnerHTML = "<p>HTML is the standard markup language for Web pages.</p>";
12
13        // Write the content of the HTML document into the console output
14        Console.WriteLine(document.DocumentElement.OuterHTML); // output: <html><head></head><body><p>HTML is the standard markup language for Web pages.</p></body></html>
15    }

Редактировать CSS

Каскадные таблицы стилей ( CSS) – это язык таблиц стилей, используемый для описания того, как веб-страницы выглядят в браузере. CSS можно добавлять в HTML-документы встроенным, внутренним и внешним способом. Таким образом, вы можете установить уникальный стиль для одного элемента HTML, используя встроенный CSS, или для нескольких веб-страниц, чтобы использовать общее форматирование, указав соответствующий CSS в отдельном файле .css.

Aspose.HTML не только поддерживает CSS «из коробки», но также предоставляет вам инструменты для управления стилями документа «на лету» перед преобразованием HTML-документа в другие форматы, как показано ниже:

Встроенный CSS – Inline CSS

Когда CSS написан с использованием атрибута style внутри тега HTML, это называется «встроенным стилем CSS». Встроенный CSS позволяет применять индивидуальный стиль к одному HTML-элементу за раз. Вы устанавливаете CSS для элемента HTML, используя атрибут style с любыми свойствами CSS, определенными в нем. В следующем фрагменте кода вы можете увидеть, как указать свойства стиля CSS для элемента HTML <p>.

 1using System.IO;
 2using Aspose.Html;
 3using Aspose.Html.Rendering.Pdf;
 4...
 5    // Create an instance of an HTML document with specified content
 6    var content = "<p> Inline CSS </p>";
 7    using (var document = new HTMLDocument(content, "."))
 8    {
 9        // Find the paragraph element to set a style attribute
10        var paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
11
12        // Set the style attribute
13        paragraph.SetAttribute("style", "font-size: 250%; font-family: verdana; color: #cd66aa");
14                        
15        // Save the HTML document to a file 
16        document.Save(Path.Combine(OutputDir, "edit-inline-css.html"));
17    
18        // Create the instance of the PDF output device and render the document into this device
19        using (var device = new PdfDevice(Path.Combine(OutputDir, "edit-inline-css.pdf")))
20        {
21            // Render HTML to PDF
22    		document.RenderTo(device);
23        }
24    }

В этом конкретном примере цвет, размер шрифта и семейство шрифтов применяются к элементу <p>. Фрагмент отрендеренной pdf-страницы выглядит так:

Текст “Встроенный CSS”

Внутренний CSS – Internal CSS

Параметр внутреннего стиля CSS популярен для применения свойств к отдельным страницам путем включения всех стилей в элемент <style> , помещенный в <head> HTML-документов.

 1using System.IO;
 2using Aspose.Html;
 3using Aspose.Html.Rendering.Pdf;
 4using Aspose.Html.Dom.Css;
 5...
 6    // Create an instance of an HTML document with specified content
 7    var content = "<div><p>Internal CSS</p><p>An internal CSS is used to define a style for a single HTML page</p></div>";
 8    using (var document = new HTMLDocument(content, "."))
 9    {
10        var style = document.CreateElement("style");
11        style.TextContent = ".frame1 { margin-top:50px; margin-left:50px; padding:20px; width:360px; height:90px; background-color:#a52a2a; font-family:verdana; color:#FFF5EE;} \r\n" +
12                            ".frame2 { margin-top:-90px; margin-left:160px; text-align:center; padding:20px; width:360px; height:100px; background-color:#ADD8E6;}";
13
14        // Find the document header element and append the style element to the header
15        var head = document.GetElementsByTagName("head").First();
16        head.AppendChild(style);
17                                                      
18        // Find the first paragraph element to inspect the styles
19        var paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
20        paragraph.ClassName = "frame1";
21    
22        // Find the last paragraph element to inspect the styles
23        var lastParagraph = (HTMLElement)document.GetElementsByTagName("p").Last();
24        lastParagraph.ClassName = "frame2";
25                                                       
26        // Set a font-size to the first paragraph
27        paragraph.Style.FontSize = "250%";
28        paragraph.Style.TextAlign = "center";
29    
30        // Set a color and font-size to the last paragraph
31        lastParagraph.Style.Color = "#434343";
32        lastParagraph.Style.FontSize= "150%";
33        lastParagraph.Style.FontFamily = "verdana";
34    
35        // Save the HTML document to a file
36        document.Save(Path.Combine(OutputDir, "edit-internal-css.html"));
37    
38        // Create the instance of the PDF output device and render the document into this device
39        using (var device = new PdfDevice(Path.Combine(OutputDir, "edit-internal-css.pdf")))
40        {
41            // Render HTML to PDF
42            document.RenderTo(device);
43        }
44    }

В этом примере мы используем внутренний CSS, а также объявляем дополнительные свойства стиля для отдельных элементов, используя свойство Style элемента HTMLElement. На рисунке показан фрагмент отрендеренного файла «edit-internal-css.pdf»:

Текст “Внутренний CSS”

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

Внешний CSS – External CSS

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

Пример 1

Рассмотрим пример внешней реализации CSS, в которой мы используем ссылку на URL-адрес CSS-файла:

 1using System.IO;
 2using Aspose.Html;
 3using Aspose.Html.Rendering.Pdf;
 4...
 5   // Create an instance of an HTML document with specified content
 6   var htmlContent = "<link rel=\"stylesheet\" href=\"https://docs.aspose.com/html/net/edit-html-document/external.css\" type=\"text/css\" />\r\n" +
 7                     "<div class=\"rect1\" ></div>\r\n" +
 8                     "<div class=\"rect2\" ></div>\r\n" +
 9                     "<div class=\"frame\">\r\n" +
10                     "<p style=\"font-size:2.5em; color:#ae4566;\">External CSS</p>\r\n" +
11                     "<p class=\"rect3\">An external CSS can be created once and applied to multiple web pages</p></div>\r\n";                             
12
13   using (var document = new HTMLDocument(htmlContent, "."))
14   {          
15       // Save the HTML document to a file 
16       document.Save(Path.Combine(OutputDir, "external-css.html"));
17
18       // Create the instance of the PDF output device and render the document into this device
19       using (var device = new PdfDevice(Path.Combine(OutputDir, "external-css.pdf")))
20       {
21           // Render HTML to PDF
22           document.RenderTo(device);
23       }       
24   }

Результат применения внешнего CSS выглядит так:

Текст “Внешний CSS”

Пример 2

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

 1using System.IO;
 2using Aspose.Html;
 3...
 4    // Prepare content for a CSS file 
 5    var styleContent = ".flower1 { width:120px; height:40px; border-radius:20px; background:#4387be; margin-top:50px; } \r\n" +
 6                       ".flower2 { margin-left:0px; margin-top:-40px; background:#4387be; border-radius:20px; width:120px; height:40px; transform:rotate(60deg); } \r\n" +
 7                       ".flower3 { transform:rotate(-60deg); margin-left:0px; margin-top:-40px; width:120px; height:40px; border-radius:20px; background:#4387be; }\r\n" +
 8                       ".frame { margin-top:-50px; margin-left:310px; width:160px; height:50px; font-size:2em; font-family:Verdana; color:grey; }\r\n";
 9
10    // Prepare a linked CSS file
11    File.WriteAllText("flower.css", styleContent);
12    
13    // Create an instance of an HTML document with specified content
14    var htmlContent = "<link rel=\"stylesheet\" href=\"flower.css\" type=\"text/css\" /> \r\n" +
15                      "<div style=\"margin-top: 80px; margin-left:250px; transform: scale(1.3);\" >\r\n" +
16                      "<div class=\"flower1\" ></div>\r\n" +
17                      "<div class=\"flower2\" ></div>\r\n" +
18                      "<div class=\"flower3\" ></div></div>\r\n" +
19                      "<div style = \"margin-top: -90px; margin-left:120px; transform:scale(1);\" >\r\n" +
20                      "<div class=\"flower1\" style=\"background: #93cdea;\"></div>\r\n" +
21                      "<div class=\"flower2\" style=\"background: #93cdea;\"></div>\r\n" +
22                      "<div class=\"flower3\" style=\"background: #93cdea;\"></div></div>\r\n" +
23                      "<div style =\"margin-top: -90px; margin-left:-80px; transform: scale(0.7);\" >\r\n" +
24                      "<div class=\"flower1\" style=\"background: #d5effc;\"></div>\r\n" +
25                      "<div class=\"flower2\" style=\"background: #d5effc;\"></div>\r\n" +
26                      "<div class=\"flower3\" style=\"background: #d5effc;\"></div></div>\r\n" +
27                      "<p class=\"frame\">External</p>\r\n" +
28                      "<p class=\"frame\" style=\"letter-spacing:10px; font-size:2.5em \">  CSS </p>\r\n";
29    
30    using (var document = new HTMLDocument(htmlContent, "."))
31    {
32        // Save the HTML document to a file 
33        document.Save(Path.Combine(OutputDir, "edit-external-css.html"));                
34    }

В этом примере показано, как создать графику CSS с нуля. Визуализация файла «edit-external-css.html» представлена на рисунке:

Текст “Внешний CSS”

Как уже упоминалось, наиболее распространенным применением CSS является стилизация веб-страниц, написанных на HTML и других языках разметки. Но помимо веб-дизайна вы можете использовать CSS для создания красивой графики, подобной той, что мы показываем вам выше. Критическая концепция рисования CSS заключается в использовании радиуса границы, поворота и определения местоположения для творческого создания кривых и форм.

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

Создать HTML-документ Сохранить HTML-документ