diff --git a/html/arabic/net/canvas-and-image-manipulation/_index.md b/html/arabic/net/canvas-and-image-manipulation/_index.md index a866f4687..dbf13c8e3 100644 --- a/html/arabic/net/canvas-and-image-manipulation/_index.md +++ b/html/arabic/net/canvas-and-image-manipulation/_index.md @@ -44,6 +44,7 @@ url: /ar/net/canvas-and-image-manipulation/ ### [تحويل SVG إلى XPS في .NET باستخدام Aspose.HTML](./convert-svg-to-xps/) تعرف على كيفية تحويل SVG إلى XPS باستخدام Aspose.HTML لـ .NET. عزز تطوير الويب لديك باستخدام هذه المكتبة القوية. ### [كيفية تمكين مضاد التعرج في C# – حواف ناعمة](./how-to-enable-antialiasing-in-c-smooth-edges/) +### [إنشاء نص على القماش – دليل كامل لتصيير النص على الصور](./create-canvas-text-full-guide-to-rendering-text-on-images/) ## خاتمة diff --git a/html/arabic/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/arabic/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..2284e75fb --- /dev/null +++ b/html/arabic/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,234 @@ +--- +category: general +date: 2026-01-03 +description: أنشئ نصًا على القماش بسرعة وتعلم كيفية عرض صورة النص، وضبط خيارات النص، + وتعبئة قماش النص مع تحسين عرض النص في لينكس. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: ar +og_description: إنشاء نص على لوحة الرسم باستخدام Aspose HTML، وتعلم كيفية عرض صورة + النص، وضبط خيارات النص، وتحسين جودة النص على لينكس في دليل واحد. +og_title: إنشاء نص على Canvas – دليل كامل للتصيير +tags: +- Aspose +- C# +- Graphics +- Canvas +title: إنشاء نص على الـ Canvas – دليل شامل لتصميم النص على الصور +url: /ar/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# إنشاء نص على القماش – دليل التقديم الكامل + +هل احتجت يوماً إلى **إنشاء نص على القماش** لكن لم تكن متأكدًا من كيفية الحصول على حروف واضحة على كل منصة؟ لست وحدك. يواجه العديد من المطورين مشكلة عندما يبدو النص غير واضح على لينكس، خاصةً عند تحويل HTML إلى صورة. + +في هذا البرنامج التعليمي سنستعرض حلاً عمليًا لا يتيح لك فقط **إنشاء صورة نصية** على قماش Aspose HTML بل يوضح لك أيضًا كيفية **تعيين خيارات النص**، واستخدام `FillText` بشكل صحيح، و**تحسين عرض النص على لينكس** باستخدام الـ hinting. في النهاية ستحصل على مقتطف مكتمل ومستقل يمكنك إدراجه في أي مشروع .NET. + +## ما ستتعلمه + +- كيفية إنشاء كائن `Canvas` وتحضيره للرسم. +- دور `TextOptions` ولماذا تفعيل الـ hinting مهم على لينكس. +- كود خطوة بخطوة **لملء القماش بالنص** بحروف ذات جودة عالية ومُنسقة. +- الأخطاء الشائعة (غياب الـ hinting، نظام إحداثيات خاطئ) والحلول السريعة. +- طرق لتوسيع المثال: خطوط مخصصة، ألوان، ونص متعدد الأسطر. + +> **المتطلبات المسبقة:** .NET 6+ (أو .NET Framework 4.7.2) وحزمة NuGet الخاصة بـ Aspose.HTML for .NET مثبتة. + +--- + +## الخطوة 1: إعداد المشروع والاستيرادات + +قبل أن نبدأ بالرسم، تأكد من أن مشروعك يشير إلى التجميعات الصحيحة. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **نصيحة احترافية:** إذا كنت تعمل على لينكس، أضف حزمة `libgdiplus` (`sudo apt-get install libgdiplus`) حتى يعمل التصيير القائم على GDI بسلاسة. + +--- + +## الخطوة 2: إنشاء قماش وتحديد حجمه + +القماش هو في الأساس صورة bitmap غير مرئية يمكنك الرسم عليها. فكر فيه كلوحة رسم رقمية لك. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **لماذا هذا مهم:** ضبط خلفية صلبة يمنع ظهور آثار شفافة عندما تقوم بتصدير الصورة لاحقًا. + +--- + +## الخطوة 3: تكوين خيارات النص – المفتاح لنص واضح على لينكس + +يمكن أن يبدو عرض الخطوط على لينكس غير واضح إذا كان الـ hinting معطلاً. `TextOptions.UseHinting` يخبر المُصوِّر بمحاذاة الحروف إلى حدود البكسل، مما يُحسّن بشكل كبير من وضوح الناتج. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **ماذا لو تخطيت هذه الخطوة؟** على معظم توزيعات لينكس سيظهر النص غير واضح قليلاً أو غير محاذٍ، خاصةً مع أحجام الخط الصغيرة. + +--- + +## الخطوة 4: ملء النص على القماش + +الآن بعد أن أصبح القماش جاهزًا وتم ضبط خيارات النص، يمكننا فعليًا **ملء القماش بالنص**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +إذا أردت تنسيقًا مخصصًا (لون، حجم الخط، محاذاة)، غلف الاستدعاء بـ `Font` و `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## الخطوة 5: تصدير القماش كملف صورة + +الخطوة الأخيرة هي كتابة الـ bitmap المُصوَّر إلى القرص لتتمكن من التحقق من النتيجة. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +افتح `canvas-output.png` وسترى نصًا حادًا ومُعَلمًا بشكل صحيح—سواء كنت على Windows أو macOS أو لينكس. + +--- + +## أسئلة شائعة وحالات خاصة + +### كيف يؤثر الـ hinting على الأداء؟ + +تفعيل الـ hinting يضيف عبئًا ضئيلًا (عادةً أقل من 2 مللي ثانية لقماش بحجم 800×600). الفائدة البصرية تفوق التكلفة، خاصةً في توليد الصور على الخادم حيث الجودة أساسية. + +### ماذا لو احتجت نصًا متعدد الأسطر؟ + +استخدم `canvas.FillText` داخل حلقة، مع تعديل إحداثي Y، أو استعن بالتحميل الزائد لـ `canvas.FillText` الذي يقبل كائن `TextLayout` لتقسيم الأسطر تلقائيًا. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### هل يمكنني استخدام خط TrueType مخصص؟ + +بالتأكيد. حمّل الخط باستخدام `FontFamily` وعيّنه إلى `TextOptions.FontFamily` أو مباشرة إلى الـ `Font` الذي تمرره إلى `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +تأكد من أن ملف الخط متاح للوقت التشغيلي (ضعه في مجلد المشروع أو سجّله على مستوى النظام). + +--- + +## مثال كامل يعمل + +فيما يلي البرنامج الكامل جاهز للنسخ واللصق والذي يدمج جميع الخطوات السابقة. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**الناتج المتوقع:** ملف PNG باسم `canvas-output.png` يحتوي على سطرين من النص—أحدهما عادي والآخر بالخط العريض الأزرق—كلاهما مُصوَّر بوضوح بفضل الـ hinting. + +--- + +## الخلاصة + +لقد **أنشأنا نصًا على القماش** من الصفر، وتعلمنا كيفية **إنشاء صورة نصية** باستخدام Aspose.HTML، واكتشفنا لماذا **تعيين خيارات النص** مثل `UseHinting` ضروري لتحسين جودة النص على لينكس. باتباع الخطوات أعلاه يمكنك بثقة **ملء القماش بالنص** في أي بيئة .NET، سواء كنت تولد صورًا مصغرة، علامات مائية، أو رسومات ديناميكية لواجهات برمجة التطبيقات. + +هل أنت مستعد للتحدي التالي؟ جرّب إضافة تدرجات خلفية، تدوير النص، أو التصدير إلى SVG للحصول على توسعة متجهية مثالية. المبادئ نفسها—`TextOptions` صحيحة، معالجة إحداثيات مدروسة، وتفريغ موارد نظيفة—تنطبق على جميع الصيغ. + +إذا واجهت أي مشاكل أو لديك أفكار لتوسعات، اترك تعليقًا. برمجة سعيدة، واستمتع بحروف حادة كالشفرة! + +--- + +*صورة توضح قماشًا بنص واضح (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/arabic/net/html-document-manipulation/_index.md b/html/arabic/net/html-document-manipulation/_index.md index 3f4a7f174..b77817324 100644 --- a/html/arabic/net/html-document-manipulation/_index.md +++ b/html/arabic/net/html-document-manipulation/_index.md @@ -52,7 +52,7 @@ url: /ar/net/html-document-manipulation/ ### [تحميل مستندات HTML بشكل غير متزامن في .NET باستخدام Aspose.HTML](./load-html-doc-asynchronously/) تعرف على كيفية استخدام Aspose.HTML for .NET للعمل مع مستندات HTML. دليل خطوة بخطوة مع أمثلة وأسئلة شائعة للمطورين. ### [تحميل مستندات HTML باستخدام بيانات الاعتماد في .NET باستخدام Aspose.HTML](./load-html-doc-with-credentials/) -تعرف على كيفية تعزيز تحسين محرك البحث الخاص بك باستخدام Aspose.HTML لـ .NET. قم بتعزيز التصنيفات وتحليل محتوى الويب وتحسينه لمحركات البحث. +تعرف على كيفية تعزيز تحسين محرك البحث الخاص بك باستخدام Aspose.HTML لـ .NET. قم بتحسين التصنيفات وتحليل محتوى الويب وتحسينه لمحركات البحث. ### [تحميل HTML باستخدام خادم بعيد في .NET مع Aspose.HTML](./load-html-using-remote-server/) اكتشف إمكانات Aspose.HTML لـ .NET من خلال دليلنا الشامل. تعرّف على كيفية استيراد مساحات الأسماء والوصول إلى مستندات HTML عن بُعد والمزيد. ### [تحميل HTML باستخدام URL في .NET مع Aspose.HTML](./load-html-using-url/) @@ -69,6 +69,8 @@ url: /ar/net/html-document-manipulation/ تعلم كيفية استخدام Aspose.HTML لـ .NET. قم باستيراد مساحة الأسماء ودمج HTML مع XML وتعزيز مهارات تطوير الويب لديك باستخدام هذا الدليل الشامل. ### [إنشاء مستندات XPS بواسطة XpsDevice في .NET باستخدام Aspose.HTML](./generate-xps-documents-by-xpsdevice/) أطلق العنان لإمكانات تطوير الويب باستخدام Aspose.HTML for .NET. أنشئ مستندات HTML وحولها وتعامل معها بسهولة. +### [إنشاء مستند HTML باستخدام Aspose.HTML – دليل خطوة بخطوة](./create-html-document-with-aspose-html-step-by-step-guide/) +تعلم كيفية إنشاء مستند HTML من الصفر باستخدام Aspose.HTML خطوة بخطوة مع أمثلة عملية. ## خاتمة @@ -78,4 +80,4 @@ url: /ar/net/html-document-manipulation/ {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/arabic/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/arabic/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..824d2eba8 --- /dev/null +++ b/html/arabic/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,239 @@ +--- +category: general +date: 2026-01-03 +description: إنشاء مستند HTML في C# باستخدام Aspose.HTML. تعلم كيفية إلحاق عنصر إلى + الـ body، وضبط نمط الخط، وتنسيق نص HTML باستخدام عنصر span بسيط. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: ar +og_description: إنشاء مستند HTML في C# ومعرفة كيفية إلحاق عنصر إلى الجسم، وتعيين نمط + الخط، وتنسيق نص HTML باستخدام Aspose.HTML. +og_title: إنشاء مستند HTML باستخدام Aspose.HTML – دليل سريع +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: إنشاء مستند HTML باستخدام Aspose.HTML – دليل خطوة بخطوة +url: /ar/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# إنشاء مستند HTML باستخدام Aspose.HTML – دليل خطوة بخطوة + +هل احتجت يوماً إلى **إنشاء مستند html** برمجياً وتساءلت لماذا يكون الناتج بسيطاً؟ لست وحدك. في العديد من المشاريع نحتاج إلى توليد مقاطع على الطاير—مثل قوالب البريد الإلكتروني، التقارير الديناميكية، أو أدوات واجهة مستخدم صغيرة. الخبر السار هو أن Aspose.HTML يجعل **إنشاء مستند html** أمرًا سهلًا، حيث يمكنك تنسيقه وإدراجه في صفحتك دون كتابة سلاسل نصية يدوية. + +في هذا البرنامج التعليمي سنستعرض مثالًا كاملاً يوضح كيفية **إضافة عنصر إلى الجسم**، **تعيين نمط الخط**، و**تنسيق نص html** باستخدام **إنشاء عنصر span**. في النهاية ستحصل على مقتطف C# قابل للتنفيذ ينتج نصًا غامقًا مائلًا داخل عنصر span، وستفهم “السبب” وراء كل استدعاء. + +> **المتطلبات المسبقة** +> • .NET 6 أو أحدث (أي بيئة تشغيل .NET حديثة) +> • حزمة NuGet Aspose.HTML for .NET (`Aspose.Html`) مثبتة +> • إلمام أساسي بـ C# ومفاهيم DOM + +لا توجد مكتبات أخرى مطلوبة، ويعمل الكود على Windows أو Linux أو macOS. + +--- + +## ما ستقوم بإنشائه + +سننشئ مستند HTML بسيط، نضيف عنصر `` يحتوي على العبارة **Bold‑Italic text**، نطبق نمطي **غامق** و**مائل**، وأخيرًا **نضيف العنصر إلى الجسم**. العلامة النهائية تبدو هكذا: + +```html + + + Bold‑Italic text + + +``` + +يمكنك نسخ المصدر الكامل في نهاية الدليل وتشغيله فورًا. + +--- + +![Create HTML document example](image.png){alt="مثال على إنشاء مستند html"} + +--- + +## الخطوة 1 – تهيئة HTMLDocument (أساس **إنشاء مستند html**) + +قبل أن نتمكن من **إضافة عنصر إلى الجسم**، نحتاج إلى كائن مستند للعمل معه. توفر Aspose.HTML الفئة `HTMLDocument` التي تمثل DOM في الذاكرة. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*لماذا هذا مهم*: إنشاء كائن `HTMLDocument` يمنحك لوحة قماش نظيفة—كأنها ورقة فارغة ستقوم لاحقًا بـ **تنسيق نص html** عليها. بدون هذه الخطوة لا يمكنك تعديل العقد أو تطبيق الأنماط. + +--- + +## الخطوة 2 – إنشاء عنصر `` (**إنشاء عنصر span**) + +الآن نحتاج إلى حاوية للنص المنسق. عنصر `` مثالي لأنه عنصر مضمن يمكنه حمل CSS دون كسر التدفق. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*نصيحة احترافية*: إذا احتجت إلى إدراج قطع نص متعددة، يمكنك إعادة استخدام نفس `spanElement` عن طريق استنساخه (`spanElement.Clone(true)`) وتغيير `InnerHtml` في كل مرة. + +--- + +## الخطوة 3 – تطبيق **تعيين نمط الخط** للغامق **و** المائل + +توفر Aspose.HTML كائن `Style` قوي النوع. لتطبيق **تعيين نمط الخط** نجمع `WebFontStyle.Bold` و `WebFontStyle.Italic` باستخدام عملية OR البتية. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*لماذا نستخدم الـ enum*: يطابق تعداد `WebFontStyle` خصائص CSS مباشرة (`font-weight` و `font-style`). استخدام الـ enum يمنع الأخطاء الإملائية ويضمن أن CSS المُولد صالح—وهو أمر أساسي للحصول على **تنسيق نص html** موثوق. + +--- + +## الخطوة 4 – **إضافة عنصر إلى الجسم** وإنهاء المستند + +مع الـ span المنسق جاهزًا، الخطوة الأخيرة هي وضعه داخل وسم ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +في هذه المرحلة يصبح شجرة DOM مطابقة تمامًا للمقتطف المعروض سابقًا. إذا فحصت `htmlDocument.InnerHtml`، سترى العلامة المكتملة. + +--- + +## الخطوة 5 – حفظ أو عرض المستند + +يمكنك إما كتابة HTML إلى ملف، أو إرساله إلى المتصفح، أو تحويله إلى PDF/صورة باستخدام محرك العرض في Aspose.HTML. إليك أبسط خيار لإخراج الملف: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +افتح `output.html` في أي متصفح وسترى **Bold‑Italic text** معروضًا كما هو مقصود. + +--- + +## مثال كامل يعمل + +بتجميع كل ما سبق، إليك البرنامج الكامل الجاهز للتنفيذ: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**الناتج المتوقع** – عند فتح `output.html` سيظهر: + +> **Bold‑Italic text** (غامق ومائل) + +إذا فحصت المصدر، ستجد الـ HTML الدقيق الذي ناقشناه، مما يؤكد نجاح خطوة **تنسيق نص html**. + +--- + +## أسئلة شائعة وحالات خاصة + +### 1. ماذا لو احتجت إلى أكثر من نمطين؟ + +تعداد `WebFontStyle` هو enum من نوع flags، لذا يمكنك دمج أي عدد من الأنماط (مثل `Underline`). استمر في استخدام عامل `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. هل يمكن تغيير اللون في الوقت نفسه؟ + +بالطبع. يحتوي كائن `Style` على خاصية `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. كيف يمكنني **إضافة عنصر إلى الجسم** عدة مرات؟ + +أنشئ حلقة، استنسخ الـ span المنسق، عدل النص، وأضف كل نسخة مستنسخة: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. ماذا لو أردت **تنسيق نص html** داخل `
` بدلاً من ذلك؟ + +نفس الـ API يعمل مع أي عنصر. فقط استبدل `CreateElement("span")` بـ `CreateElement("div")` وعدل الأنماط حسب الحاجة. + +### 5. مخاوف التوافق؟ + +يستهدف Aspose.HTML .NET Standard 2.0+، لذا يعمل الكود على .NET Core، .NET Framework، و .NET 5/6+. لا تحتاج إلى أي شيمات خاصة بالمتصفح. + +--- + +## نصائح احترافية ومخاطر محتملة + +- **نصيحة احترافية:** دائمًا اضبط `InnerHtml` *بعد* تكوين النمط. تعديل المحتوى الداخلي أولًا قد يسبب إعادة تخطيط في بعض المتصفحات؛ القيام بذلك بعد التنسيق يجنب العمل غير الضروري. +- **احذر من:** خلط `WebFontStyle` مع سلاسل CSS مضمّنة. إذا قمت يدويًا بتعيين `spanElement.SetAttribute("style", "...")` لاحقًا، ستستبدل الأنماط التي أنشأها الـ enum. التزم بطريقة واحدة. +- **ملاحظة أداء:** للمستندات الكبيرة، أنشئ جميع العقد أولًا، ثم أضفها دفعة واحدة لتقليل عدد عمليات تعديل DOM وتسريع العرض. + +--- + +## الخلاصة + +أنت الآن تعرف كيف **إنشاء مستند html** باستخدام Aspose.HTML، **إضافة عنصر إلى الجسم**، **تعيين نمط الخط**، و**تنسيق نص html** باستخدام **إنشاء عنصر span**. المثال عملي بالكامل، والشروحات تغطي كلًا من “كيفية” و“لماذا”، مما يسهل تعديل النمط لمواقف أكثر تعقيدًا. + +هل أنت مستعد للخطوة التالية؟ جرّب استبدال `` بـ `

` يحتوي على عدة فئات CSS، أو حول نفس الـ DOM إلى PDF باستخدام `Document` → `PdfSaveOptions`. المبادئ نفسها تنطبق، وستجد أن Aspose.HTML شريكًا موثوقًا لأي مهمة توليد HTML من جانب الخادم. + +هل لديك أسئلة أو اكتشفت حيلة ذكية؟ اترك تعليقًا أدناه—برمجة سعيدة! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/arabic/net/html-extensions-and-conversions/_index.md b/html/arabic/net/html-extensions-and-conversions/_index.md index 45a70dabe..ea0297678 100644 --- a/html/arabic/net/html-extensions-and-conversions/_index.md +++ b/html/arabic/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ url: /ar/net/html-extensions-and-conversions/ ## دروس حول امتدادات HTML وتحويلاتها ### [تحويل HTML إلى PDF في .NET باستخدام Aspose.HTML](./convert-html-to-pdf/) قم بتحويل HTML إلى PDF بسهولة باستخدام Aspose.HTML for .NET. اتبع دليلنا خطوة بخطوة واكتشف قوة تحويل HTML إلى PDF. +### [إنشاء PDF من URL – دليل C# كامل](./create-pdf-from-url-complete-c-guide/) +دليل شامل لإنشاء PDF من عنوان URL باستخدام C# و Aspose.HTML ### [تحويل EPUB إلى صورة في .NET باستخدام Aspose.HTML](./convert-epub-to-image/) تعرف على كيفية تحويل EPUB إلى صور باستخدام Aspose.HTML لـ .NET. برنامج تعليمي خطوة بخطوة مع أمثلة التعليمات البرمجية والخيارات القابلة للتخصيص. ### [تحويل EPUB إلى PDF في .NET باستخدام Aspose.HTML](./convert-epub-to-pdf/) @@ -74,4 +76,4 @@ url: /ar/net/html-extensions-and-conversions/ {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/arabic/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/arabic/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..769f8f6a9 --- /dev/null +++ b/html/arabic/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: إنشاء PDF من URL في C# بسرعة. تعلم كيفية تحويل HTML إلى PDF، حفظ صفحة + الويب كملف PDF، وإنشاء PDF من HTML باستخدام كود سهل. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: ar +og_description: إنشاء PDF من عنوان URL في C# بسرعة. يوضح هذا البرنامج التعليمي كيفية + تحويل HTML إلى PDF، حفظ صفحة الويب كملف PDF، وإنشاء PDF من HTML باستخدام Aspose.HTML. +og_title: إنشاء PDF من URL – دليل C# الكامل +tags: +- pdf +- csharp +- html +- conversion +title: إنشاء PDF من عنوان URL – دليل C# الكامل +url: /ar/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# إنشاء PDF من URL – دليل C# الكامل + +هل احتجت يوماً إلى **إنشاء PDF من URL** لكن لم تكن متأكدًا أي مكتبة تختار؟ لست وحدك. يواجه العديد من المطورين هذا التحدي عندما يرغبون في أرشفة صفحة ويب، أو إنشاء فواتير من قالب على الإنترنت، أو ببساطة تقديم زر “تحميل كـ PDF” على موقعهم. + +في هذا الدرس سنستعرض العملية الكاملة لـ **تحويل HTML إلى PDF** باستخدام C#. سترى كيف **تحفظ صفحة الويب كـ PDF**، وكيف **تنشئ PDF من HTML**، ولماذا تجعل مكتبة `Aspose.HTML for .NET` الأمر سهلًا. في النهاية ستحصل على مقطع جاهز للتنفيذ يجلب أي URL عام، يعرضه، ويكتب ملف PDF على القرص. + +> **نصيحة احترافية:** إذا كنت تعمل خلف بروكسي مؤسسي، تأكد من أن مُنشئ `HTMLDocument` يتلقى إعدادات `WebRequest` الصحيحة—وإلا سيفشل التحميل بصمت. + +## ما ستحتاجه + +- **.NET 6.0** أو أحدث (الكود يعمل أيضًا على .NET Framework 4.7+). +- حزمة NuGet **Aspose.HTML for .NET** (`Aspose.HTML`). +- مجلد قابل للكتابة على القرص حيث سيتم حفظ الـ PDF. +- إلمام أساسي بـ C# (لا تحتاج إلى حيل متقدمة). + +لا ملفات إعداد إضافية، ولا سحر مخفي—فقط بضع أسطر من الكود النظيف والمُعلق. + +![Create PDF from URL example](image.png){alt="إنشاء pdf من url"} + +## الخطوة 1: تثبيت حزمة Aspose.HTML عبر NuGet + +افتح الطرفية أو نافذة Package Manager Console وشغّل: + +```bash +dotnet add package Aspose.HTML +``` + +> **لماذا هذه الخطوة مهمة:** فئات `HTMLDocument` و `PdfSaveOptions` و `PdfConverter` موجودة في مساحة الاسم `Aspose.Html`. بدون الحزمة، لن يعرف المترجم ما هذه الأنواع. + +## الخطوة 2: تحميل صفحة الويب إلى `HTMLDocument` + +الإجراء الحقيقي الأول هو جلب HTML عن بُعد. يمكن لـ `HTMLDocument` أخذ URL مباشرةً، مع معالجة عمليات إعادة التوجيه واكتشاف نوع المحتوى لك. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**ماذا يحدث؟** +- يقوم `HTMLDocument` بتحليل العلامات التي تم جلبها إلى شجرة DOM، تمامًا كما يفعل المتصفح. +- أي CSS خارجي، صور، أو سكريبتات مُشار إليها عبر URLs مطلقة يتم تحميلها أيضًا، مما يضمن أن يبدو الـ PDF كصفحة الويب الحية. + +## الخطوة 3: ضبط خيارات تصدير PDF (الهوامش، حجم الصفحة، إلخ) + +قبل أن نسلم المستند إلى المحول، نقوم بضبط المخرجات بدقة. يتيح لك كائن `PdfSaveOptions` تحديد الهوامش، واتجاه الصفحة، وحتى نسخة الـ PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**لماذا نحدد الهوامش؟** +قد يؤدي PDF الضيق إلى قطع رؤوس أو تذييلات الصفحات، خاصةً على المواقع المُحسّنة للهواتف المحمولة. إضافة هامش معتدل يضمن بقاء كل شيء مقروءًا. + +## الخطوة 4: تحويل مستند HTML مباشرةً إلى PDF + +الآن يأتي الجزء الثقيل. تقوم `PdfConverter.ConvertHtml` ببث الصفحة المُعالجة مباشرةً إلى ملف PDF. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**ما يحدث في الخلفية:** +- تقوم Aspose برسم الـ DOM باستخدام محرك تخطيط خاص بها (لا حاجة لـ Chromium). +- ثم يتم تحويل الصورة المرسومة إلى متجهات PDF حيثما أمكن، مع الحفاظ على إمكانية تحديد النص. + +## الخطوة 5: التحقق من النتيجة ومعالجة الحالات الخاصة + +فحص سريع للمنطق يوفر عليك صداعًا لاحقًا. افتح الملف المُولّد؛ يجب أن ترى الصفحة الحية، مع تطبيق الهوامش، وجميع الصور سليمة. + +### الأخطاء الشائعة وكيفية تجنبها + +| Issue | Cause | Fix | +|-------|-------|-----| +| **PDF فارغ** | تم حظر URL بواسطة جدار الحماية أو يتطلب مصادقة | مرّر `WebRequest` مخصص مع بيانات الاعتماد إلى مُنشئ `HTMLDocument` | +| **CSS مفقود** | ورقة الأنماط الخارجية تستخدم URLs نسبية | تأكد من صحة URL الأساسي (Aspose يتعامل مع ذلك، لكن تحقق من عمليات إعادة التوجيه) | +| **حجم ملف كبير** | صور عالية الدقة غير مُصغرة | استخدم `PdfSaveOptions.ImageCompression` لضغط الصور المدمجة إلى JPEG | +| **تشويه أحرف Unicode** | الخط غير مدمج | عيّن `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## مثال كامل جاهز للتنفيذ (نسخ‑لصق) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +شغّل البرنامج (`dotnet run`) وستجد `example.pdf` في `C:\Temp`. افتحه بأي عارض PDF، ويجب أن ترى نسخة مطابقة تمامًا من `https://example.com` مع الهوامش التي حددتها. + +## الخاتمة + +لقد أظهرنا لك للتو **كيفية إنشاء PDF من URL** باستخدام C#. شملت الخطوات تحميل صفحة ويب، ضبط الهوامش، وتحويل الـ DOM إلى ملف PDF—كل ما تحتاجه **لتحويل HTML إلى PDF**، **لحفظ صفحة الويب كـ PDF**، و**لإنشاء PDF من HTML** بطريقة جاهزة للإنتاج. + +لا تتردد في التجربة: غيّر حجم الصفحة إلى `Letter`، أوّلد الاتجاه إلى أفقي، أو أضف رأس/تذييل باستخدام `PdfPageEventHandler`. نفس النمط يعمل مع الصفحات الديناميكية، البوابات المحمية بتسجيل الدخول (فقط زوّد الكوكيز)، أو حتى معالجة دفعة من قائمة URLs. + +**الخطوات التالية التي قد تستكشفها** + +- **HTML إلى PDF C#** مع التحويل غير المتزامن لخدمات عالية الإنتاجية. +- تضمين **البيانات الوصفية** (المؤلف، العنوان) في الـ PDF عبر `PdfDocumentInfo`. +- استخدام **Aspose.PDF** لدمج عدة ملفات PDF تم إنشاؤها من URLs مختلفة في تقرير واحد. + +هل لديك أسئلة؟ اترك تعليقًا أدناه، وبرمجة سعيدة! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/arabic/net/rendering-html-documents/_index.md b/html/arabic/net/rendering-html-documents/_index.md index f6e3bd145..fd886c1ef 100644 --- a/html/arabic/net/rendering-html-documents/_index.md +++ b/html/arabic/net/rendering-html-documents/_index.md @@ -52,9 +52,14 @@ url: /ar/net/rendering-html-documents/ تعلم كيفية عرض مستندات HTML متعددة باستخدام Aspose.HTML لـ .NET. عزز قدرات معالجة المستندات لديك باستخدام هذه المكتبة القوية. ### [عرض مستند SVG بصيغة PNG في .NET باستخدام Aspose.HTML](./render-svg-doc-as-png/) اكتشف قوة Aspose.HTML لـ .NET! تعرّف على كيفية عرض مستند SVG بتنسيق PNG بسهولة. انغمس في الأمثلة والأسئلة الشائعة خطوة بخطوة. ابدأ الآن! +### [كيفية عرض HTML – دليل كامل مع معالج موارد مخصص](./how-to-render-html-complete-guide-with-custom-resource-handl/) +تعلم كيفية عرض HTML باستخدام Aspose.HTML لـ .NET مع معالج موارد مخصص لتخصيص تحميل المحتوى وتحسين الأداء. +### [كيفية عرض HTML كـ PNG – دليل كامل خطوة بخطوة](./how-to-render-html-to-png-complete-step-by-step-guide/) +تعلم كيفية تحويل مستندات HTML إلى صور PNG خطوة بخطوة باستخدام Aspose.HTML لـ .NET. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/arabic/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/arabic/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..d992ac376 --- /dev/null +++ b/html/arabic/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: كيفية تحويل HTML إلى صور باستخدام Aspose.HTML. تعلّم تحويل HTML إلى صورة، + معالج الموارد المخصص، وتحويل HTML إلى bitmap في C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: ar +og_description: كيفية تحويل HTML إلى صور باستخدام Aspose.HTML. إتقان تحويل HTML إلى + صورة، ومعالج الموارد المخصص، وتحويل HTML إلى بت ماب في C#. +og_title: كيفية عرض HTML – دليل كامل مع معالج موارد مخصص +tags: +- C# +- Aspose.HTML +- Image Rendering +title: كيفية عرض HTML – دليل كامل مع معالج موارد مخصص +url: /ar/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# كيفية تحويل HTML إلى صورة – دليل كامل مع معالج موارد مخصص + +هل تساءلت يومًا **عن كيفية تحويل HTML** إلى صورة نقطية دون الحاجة إلى تشغيل محرك متصفح بنفسك؟ لست وحدك. يواجه العديد من المطورين صعوبة عندما يحتاجون إلى لقطة سريعة لصفحة ديناميكية لاستخدامها في رسائل البريد الإلكتروني أو التقارير أو المصغرات. الخبر السار؟ مع Aspose.HTML يمكنك تحويل أي سلسلة HTML إلى صورة—بدون واجهة مستخدم، بدون Chrome بدون رأس، فقط كود C# نقي. + +في هذا الدرس سنستعرض سيناريو عملي **لتحويل html إلى صورة**، نوضح لك **كيفية تنفيذ معالج موارد مخصص**، ونظهر سير العمل الكامل **لتحويل html إلى bitmap**. في النهاية ستحصل على طريقة قابلة لإعادة الاستخدام تقوم بتحويل HTML إلى صورة بالكامل في الذاكرة، جاهزة للمعالجة أو التخزين الإضافي. + +> **المتطلبات المسبقة** +> * .NET 6+ (أو .NET Framework 4.7.2+) +> * حزمة NuGet Aspose.HTML for .NET (`Aspose.Html`) +> * إلمام أساسي بـ C# وتدفقات البيانات + +إذا كنت قد غطيت هذه الأساسيات، فلنبدأ. + +--- + +## كيفية تحويل HTML باستخدام Aspose.HTML + +النواة لأي عملية **render html to image** هي الفئة `ImageRenderer`. تأخذ `HTMLDocument` وتنتج رسومات نقطية (PNG، JPEG، BMP، إلخ). النموذج الأساسي هو كالتالي: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +هذا المقتطف يعمل، لكنك ستحصل على ملف على القرص فقط إذا أخبرت المُصوّر إلى أين يكتب. للحفاظ على كل شيء في الذاكرة—ولاعتراض كل مورد (صور، CSS، خطوط) يطلبه HTML—سنقوم بربط **معالج موارد مخصص**. + +--- + +## تنفيذ معالج موارد مخصص + +**معالج الموارد المخصص** يمنحك السيطرة الكاملة على كيفية جلب الأصول الخارجية وتخزينها. في كثير من الحالات ستحتاج إلى التقاط هذه الأصول في الذاكرة لاستخدامها لاحقًا (مثلاً، تجميعها في ملف ZIP). يرث المعالج من `ResourceHandler` ويعيد تعريف `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**لماذا نفعل ذلك؟** +* **الأداء** – لا عمليات إدخال/إخراج على القرص، كل شيء يبقى في الذاكرة. +* **الأمان** – تتحكم في عناوين URL المسموح بجلبها. +* **القابلية للتوسيع** – يمكنك تخزين الموارد مؤقتًا، إعادة تسميتها، أو تضمينها في حاويات أخرى. + +--- + +## تحويل HTML إلى Bitmap باستخدام ImageRenderer + +الآن نجمع الأجزاء: نحمل HTML، نرفق `MyHandler`، ونصوّر. الطريقة التالية تُعيد `MemoryStream` يحتوي على صورة PNG للصفحة المصوّرة. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### النتيجة المتوقعة + +إذا استدعيت الطريقة هكذا: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +ستحصل على ملف `demo.png` يبدو تقريبًا هكذا: + +![مثال على إخراج render html](https://example.com/assets/render-html-output.png "مثال على إخراج render html") + +*النص البديل:* **مثال على إخراج render html** – صورة نقطية صغيرة تُظهر مقتطف HTML المصوّر. + +--- + +## تحويل HTML إلى صورة – المشكلات الشائعة والنصائح + +### 1. عناوين URL النسبية وعلامات Base +إذا كان HTML الخاص بك يشير إلى CSS أو صور خارجية باستخدام مسارات نسبية، لن يعرف المُصوّر المجلد الأساسي. إما أن: + +* تضيف علامة ``، أو +* تحل عناوين URL داخل `MyHandler.HandleResource` وتُقدّم التدفق الصحيح. + +### 2. توفر الخطوط +يستخدم Aspose.HTML الخطوط النظامية افتراضيًا. للخطوط الويب المخصصة (`@font-face`)، تأكد من أن ملفات الخطوط قابلة للوصول عبر المعالج، أو ضمّها كـ data URI بصيغة base64. + +### 3. الصفحات الكبيرة +تصوير صفحة طويلة جدًا قد يستهلك ذاكرة كبيرة. يمكنك تحديد حجم نافذة العرض: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. صيغ الصور +`renderer.Save(stream, ImageFormat.Jpeg)` يعمل بنفس الفعالية إذا كنت تحتاج إلى ضغط JPEG. استبدل `ImageFormat.Png` بـ `ImageFormat.Bmp` للحصول على ناتج **convert html to bitmap** حقيقي. + +--- + +## تحويل HTML إلى صورة – سيناريوهات متقدمة + +### أ. تصوير صفحات متعددة +إذا كان HTML يحتوي على فواصل صفحات (`
`)، يمكنك التكرار على الصفحات: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### ب. تضمين الصورة في PDF +استخدم `Aspose.Pdf` لتضمين PNG مباشرة: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## الخلاصة + +غطّينا **كيفية تحويل HTML** إلى bitmap بالكامل في الذاكرة، استعرضنا أساسيات **html to image conversion**، بنينا **معالج موارد مخصص**، وأظهرنا لك كيفية **convert html to bitmap** باستخدام `ImageRenderer` من Aspose.HTML. النهج سريع، آمن للعمليات المتعددة، وسهل التوسيع للمشروعات الواقعية—من توليد مصغرات البريد الإلكتروني إلى إنشاء تقارير آلية. + +هل أنت مستعد للخطوة التالية؟ جرّب استبدال إخراج PNG بـ JPEG، جرب أحجام صفحات مختلفة، أو اربط المعالج بطبقة تخزين مؤقتة بحيث تكون عمليات التصوير المتكررة فورية. السماء هي الحد عندما تتحكم في كل مورد بنفسك. + +هل لديك أسئلة أو حالة استخدام مميزة تريد مشاركتها؟ اترك تعليقًا أدناه، ورسمًا سعيدًا! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/arabic/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/arabic/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..940d339a1 --- /dev/null +++ b/html/arabic/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,227 @@ +--- +category: general +date: 2026-01-03 +description: تعلم كيفية تحويل HTML إلى PNG، وتحويل صفحة الويب إلى صورة، وحفظ HTML + كـ PNG باستخدام Aspose.HTML في C#. سريع، موثوق، وجاهز للإنتاج. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: ar +og_description: إتقان طريقة تحويل HTML إلى PNG، تحويل صفحة الويب إلى صورة، وحفظ HTML + كملف PNG مع مثال كامل بلغة C# باستخدام Aspose.HTML. +og_title: كيفية تحويل HTML إلى PNG – دليل كامل +tags: +- C# +- Aspose.HTML +- Image Rendering +title: كيفية تحويل HTML إلى PNG – دليل خطوة بخطوة كامل +url: /ar/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# كيفية تحويل HTML إلى PNG – دليل خطوة بخطوة كامل + +إذا كنت تبحث عن **how to render html** إلى صورة، فأنت في المكان الصحيح. سواء كنت بحاجة إلى **convert webpage to image** للصور المصغرة، أو أرشفة صفحة كملف PNG، أو إنشاء معاينات لوسائل التواصل الاجتماعي في الوقت الفعلي، يمكن أن تكون العملية بسيطة بشكل مفاجئ مع المكتبة المناسبة. + +في هذا الدرس سنستعرض تحويل أي عنوان URL مباشر إلى ملف PNG باستخدام Aspose.HTML for .NET. سترى مقتطف كود كامل قابل للتنفيذ، وتتعلم لماذا كل إعداد مهم، وتكتشف بعض الحيل للتعامل مع الحالات الخاصة. في النهاية ستكون قادرًا على **save html as png**, **convert html to png**, وحتى تضمين النتيجة في تقرير أو بريد إلكتروني دون عناء. + +## المتطلبات المسبقة – ما ستحتاجه + +- **.NET 6.0** أو أحدث (الكود يعمل مع .NET Core و .NET Framework أيضًا) +- حزمة NuGet **Aspose.HTML for .NET** (`Aspose.Html`) مثبتة +- بيئة تطوير متكاملة (IDE) من اختيارك (Visual Studio، Rider، أو VS Code) +- مجلد قابل للكتابة حيث سيتم حفظ ملف PNG + +لا يلزم أي إعداد إضافي—Aspose.HTML يتولى المعالجة الثقيلة لتحليل الصفحة، وتطبيق CSS، وتحويل التخطيط إلى صورة نقطية. + +## الخطوة 1: تحميل مستند HTML الذي تريد تحويله + +أول شيء تحتاجه هو كائن `HTMLDocument` يشير إلى الصفحة التي ترغب في التقاطها. يمكن لـ Aspose.HTML التحميل من عنوان URL، أو ملف محلي، أو سلسلة HTML خام. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** تحميل المستند مباشرةً من عنوان URL يضمن جلب جميع الموارد الخارجية (CSS، JavaScript، الصور) تلقائيًا، مما يمنحك تمثيلًا دقيقًا للصفحة الحية. + +## الخطوة 2: تكوين خيارات تصيير الصورة + +بعد ذلك، نقوم بإعداد `ImageRenderingOptions`. تتحكم هذه الخيارات في حجم الإخراج، الجودة، وما إذا كان يتم تطبيق مضاد التعرج (anti‑aliasing). تعديلها يتيح لك موازنة حجم الملف مقابل الدقة البصرية. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** إذا كنت بحاجة إلى صورة مصغرة ذات دقة أعلى، قم بزيادة `Width` و `Height` بنسب متناسبة. سيقوم Aspose.HTML بتكبير التخطيط وفقًا لذلك دون فقدان جودة المتجهات. + +## الخطوة 3: تهيئة مُصوّر الصورة + +الآن نقوم بإنشاء `ImageRenderer` بتمرير المستند والخيارات التي عرّفناها للتو. هذا الكائن هو المحرك الذي يرسم الصفحة فعليًا على صورة bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** يقوم المُصوّر بتحليل DOM، حساب أنماط CSS، إجراء التخطيط، وأخيرًا تحويل كل عنصر إلى لوحة بكسلية. كل ذلك يحدث في الذاكرة، لذا لا تحتاج إلى نافذة متصفح. + +## الخطوة 4: تصيير وحفظ ملف PNG + +أخيرًا، استدعِ `Render` مع المسار الكامل حيث تريد حفظ ملف PNG. تقوم الطريقة بكتابة الملف بشكل متزامن وتحرير الموارد الداخلية تلقائيًا. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** بعد تشغيل البرنامج، ستجد `example.png` داخل مجلد `output`. افتحه بأي عارض صور وسترى لقطة دقيقة لـ `https://example.com` بأبعاد 800×600 px. + +--- + +### مثال كامل وجاهز للتنفيذ + +فيما يلي البرنامج الكامل الذي يمكنك نسخه ولصقه في مشروع وحدة تحكم جديد. يتضمن جميع توجيهات `using`، معالجة الأخطاء، وتعليقات لتوضيح الأمور. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +شغّل البرنامج (`dotnet run` من مجلد المشروع) وستحصل على PNG يعكس الصفحة الحية. هذا هو **how to render html** ببضع أسطر من C#. + +--- + +## الأسئلة المتكررة والحالات الخاصة + +### هل يمكنني تصيير ملف HTML محلي بدلاً من عنوان URL؟ + +بالطبع. استبدل عنوان URL بمسار الملف: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### ماذا لو استخدمت الصفحة JavaScript لتعديل DOM بعد التحميل؟ + +يقوم Aspose.HTML بتنفيذ معظم السكريبتات من جانب العميل، لكنه لا يوفر محرك متصفح كامل. للصفحات التي تحتوي على سكريبتات كثيفة قد تحتاج إلى تصيير مسبق للـ HTML (مثلاً باستخدام نسخة Chromium بدون واجهة) ثم تمرير العلامات الناتجة إلى Aspose.HTML. + +### كيف يمكنني التحكم في مستوى ضغط PNG؟ + +`ImageRenderingOptions` يتضمن خاصية `CompressionLevel` (0–9). الأرقام الأقل تعني ملفات أكبر ولكن جودة أعلى. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### أحتاج خلفية شفافة—هل يمكنني ذلك؟ + +نعم. اضبط لون الخلفية إلى شفاف قبل التصيير: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### هل هناك طريقة لتصير عدة صفحات في صورة واحدة؟ + +يمكنك التكرار عبر مجموعة من عناوين URL أو سلاسل HTML، تصيير كل منها إلى bitmap، ثم دمجها معًا باستخدام `System.Drawing` أو `ImageSharp`. خطوة **convert html to png** الأساسية تظل كما هي. + +--- + +## إضافي: تضمين PNG في واجهة برمجة تطبيقات ويب + +إذا كنت تريد إتاحة هذه الوظيفة عبر نقطة نهاية ASP.NET Core، ببساطة أعد بايتات الملف: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +الآن يمكن لأي عميل طلب `GET /render?url=https://example.com` وتلقي PNG في الوقت الفعلي—مثالي لخدمات **convert webpage to image**. + +--- + +## الخلاصة + +لقد غطينا كل ما تحتاج معرفته حول **how to render html** إلى ملف PNG باستخدام Aspose.HTML for .NET. من تحميل صفحة عن بُعد، تكوين خيارات التصيير، ومعالجة المشكلات الشائعة، يوضح المثال الكامل لك بالضبط كيفية **convert html to png**, **save html as png**, وحتى إتاحة المنطق عبر واجهة برمجة تطبيقات ويب. + +جرّبه مع عناوين URL الخاصة بك، جرب أبعادًا مختلفة، وربما أتمتة إنشاء الصور المصغرة لكتيب منتجاتك. السماء هي الحد عندما تتقن أساسيات **render html to png**. + +*هل أنت مستعد للترقية؟* احصل على حزمة NuGet، أضف الكود إلى مشروعك، وابدأ في تحويل صفحات الويب إلى صور اليوم. إذا واجهت أي مشاكل، لا تتردد في ترك تعليق—نتمنى لك تصييرًا سعيدًا! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/net/canvas-and-image-manipulation/_index.md b/html/chinese/net/canvas-and-image-manipulation/_index.md index f827a056a..91ccc843e 100644 --- a/html/chinese/net/canvas-and-image-manipulation/_index.md +++ b/html/chinese/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aspose.HTML for .NET 简化了图像编辑。您可以加载图像、应用滤 了解如何使用 Aspose.HTML for .NET 将 SVG 转换为 XPS。使用这个强大的库来提升您的 Web 开发。 ### [在 C# 中启用抗锯齿 – 平滑边缘](./how-to-enable-antialiasing-in-c-smooth-edges/) 了解如何在 C# 中使用 Aspose.HTML 启用抗锯齿，以获得平滑的图形边缘。 +### [创建画布文本 – 渲染图像文字的完整指南](./create-canvas-text-full-guide-to-rendering-text-on-images/) +本完整指南展示如何在图像上使用 Aspose.HTML for .NET 渲染文本，包括字体、颜色和位置设置。 ## 结论 diff --git a/html/chinese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/chinese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..0416b1b9f --- /dev/null +++ b/html/chinese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,230 @@ +--- +category: general +date: 2026-01-03 +description: 快速创建画布文字，并学习如何渲染文字图像、设置文字选项以及填充文字画布，同时提升 Linux 文本渲染效果。 +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: zh +og_description: 使用 Aspose HTML 创建画布文本，学习渲染文本图像，设置文本选项，并在单个教程中提升 Linux 文本质量。 +og_title: 创建画布文本 – 完整渲染指南 +tags: +- Aspose +- C# +- Graphics +- Canvas +title: 创建画布文字 – 渲染图像文字的完整指南 +url: /zh/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 创建画布文本 – 完整渲染指南 + +是否曾经需要**创建画布文本**但不确定如何在所有平台上获得清晰的字形？你并不孤单。许多开发者在 Linux 上遇到文本模糊的问题，尤其是在将 HTML 转换为图像时。 + +在本教程中，我们将演示一种实用方案，不仅可以让你**渲染文本图像**到 Aspose HTML 画布，还会展示如何**设置文本选项**、正确使用 `FillText`，以及通过 hinting **改进 Linux 文本**渲染。完成后，你将拥有一个可直接放入任何 .NET 项目的自包含、可运行代码片段。 + +## 您将学习的内容 + +- 如何实例化 `Canvas` 对象并为绘制做好准备。 +- `TextOptions` 的作用以及在 Linux 上启用 hinting 为什么重要。 +- 步骤化代码，**填充文本画布**并呈现高质量字符。 +- 常见陷阱（缺少 hinting、坐标系错误）及快速修复方法。 +- 扩展示例的方式：自定义字体、颜色和多行文本。 + +> **前提条件：** .NET 6+（或 .NET Framework 4.7.2）以及已安装 Aspose.HTML for .NET NuGet 包。 + +--- + +## 步骤 1：设置项目和导入 + +在开始绘制之前，确保你的项目引用了正确的程序集。 + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **专业提示：** 如果你使用的是 Linux，添加 `libgdiplus` 包（`sudo apt-get install libgdiplus`），以确保基于 GDI 的渲染顺畅运行。 + +--- + +## 步骤 2：创建画布并定义其大小 + +画布本质上是一个离屏位图，你可以在其上绘制。把它想象成你的数字绘图板。 + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **为什么这很重要：** 设置实色背景可以防止在后续导出图像时出现透明伪影。 + +--- + +## 步骤 3：配置文本选项 – 清晰 Linux 文本的关键 + +如果禁用 hinting，Linux 字体渲染可能会显得模糊。`TextOptions.UseHinting` 告诉渲染器将字形对齐到像素边界，从而显著提升输出的清晰度。 + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **如果跳过此步骤会怎样？** 在许多 Linux 发行版上，文本会出现轻微模糊或错位，尤其是在小字号时。 + +--- + +## 步骤 4：在画布上填充文本 + +现在画布已准备就绪，文本选项也已调校好，我们可以真正**填充文本画布**。 + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +如果你想自定义样式（颜色、字体大小、对齐方式），可以将调用包装在 `Font` 和 `Brush` 中： + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## 步骤 5：将画布导出为图像文件 + +最后一步是将渲染好的位图写入磁盘，以便验证结果。 + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +打开 `canvas-output.png`，你应该能看到锐利且正确 hinting 的文本——无论是在 Windows、macOS 还是 Linux 上。 + +--- + +## 常见问题与边缘情况 + +### Hinting 对性能有何影响？ + +启用 hinting 会带来极小的开销（通常 < 2 ms，针对 800×600 画布）。视觉提升远大于成本，尤其是在对质量要求极高的服务器端图像生成场景。 + +### 如果需要多行文本怎么办？ + +在循环中使用 `canvas.FillText` 并调整 Y 坐标，或使用接受 `TextLayout` 对象的 `canvas.FillText` 重载来实现自动换行。 + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### 我可以使用自定义 TrueType 字体吗？ + +完全可以。使用 `FontFamily` 加载字体，然后将其分配给 `TextOptions.FontFamily` 或直接传递给 `FillText` 使用的 `Font`。 + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +确保运行时能够访问该字体文件（将其放在项目文件夹中或系统范围注册）。 + +--- + +## 完整工作示例 + +下面是完整的、可直接复制粘贴的程序，涵盖上述所有步骤。 + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**预期输出：** 一个名为 `canvas-output.png` 的 PNG 文件，包含两行文字——一行普通，一行加粗蓝色——两者都因 hinting 而呈现出清晰锐利的效果。 + +--- + +## 结论 + +我们已经从零**创建了画布文本**，学习了如何使用 Aspose.HTML **渲染文本图像**，并发现了像 `UseHinting` 这样的**设置文本选项**为何对**改进 Linux 文本**质量至关重要。按照上述步骤，你可以在任何 .NET 环境中可靠地**填充文本画布**，无论是生成缩略图、水印，还是为 Web API 动态生成图形。 + +准备好迎接下一个挑战了吗？尝试添加背景渐变、旋转文本，或导出为 SVG 以实现矢量完美缩放。相同的原则——正确的 `TextOptions`、细致的坐标处理以及干净的资源释放——在各种格式中同样适用。 + +如果你遇到任何奇怪的问题或有扩展想法，欢迎留言。祝编码愉快，尽情享受这些刀锋般锐利的字符吧！ + +*图像展示了带有清晰文本的画布（alt text：“创建画布文本示例，展示在 Linux 上的 hinting 渲染”）。* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/net/html-document-manipulation/_index.md b/html/chinese/net/html-document-manipulation/_index.md index 494fa8695..771cd1239 100644 --- a/html/chinese/net/html-document-manipulation/_index.md +++ b/html/chinese/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Aspose.HTML for .NET 以其简单性和强大性脱颖而出。它使您能够 学习使用 Aspose.HTML for .NET。通过本综合指南导入命名空间、合并 HTML 与 XML 并增强您的 Web 开发技能。 ### [使用 Aspose.HTML 在 .NET 中通过 XpsDevice 生成 XPS 文档](./generate-xps-documents-by-xpsdevice/) 使用 Aspose.HTML for .NET 释放 Web 开发的潜力。轻松创建、转换和操作 HTML 文档。 +### [使用 Aspose.HTML 创建 HTML 文档 – 步骤指南](./create-html-document-with-aspose-html-step-by-step-guide/) +了解如何使用 Aspose.HTML for .NET 创建 HTML 文档的完整步骤，帮助您快速上手并生成高质量的网页。 ## 结论 @@ -78,4 +80,4 @@ Aspose.HTML for .NET 以其简单性和强大性脱颖而出。它使您能够 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/chinese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..f3acb42b8 --- /dev/null +++ b/html/chinese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,238 @@ +--- +category: general +date: 2026-01-03 +description: 使用 Aspose.HTML 在 C# 中创建 HTML 文档。学习如何向 body 添加元素、设置字体样式，以及使用简单的 span 对文本 + HTML 进行格式化。 +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: zh +og_description: 在 C# 中创建 HTML 文档，了解如何向 body 添加元素、设置字体样式以及使用 Aspose.HTML 格式化文本 HTML。 +og_title: 使用 Aspose.HTML 创建 HTML 文档 – 快速指南 +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: 使用 Aspose.HTML 创建 HTML 文档 – 步骤指南 +url: /zh/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 使用 Aspose.HTML 创建 HTML 文档 – 步骤指南 + +是否曾经需要**以编程方式创建 html 文档**，却发现输出的页面很普通？你并不是唯一的遇到这种情况的人。在许多项目中，我们需要即时生成片段——比如邮件模板、动态报告或小型 UI 小部件。好消息是，Aspose.HTML 能让**创建 html 文档**变得轻而易举，您可以轻松**创建 html 文档**、设置样式，并将其插入页面，而无需手写原始字符串。 + +在本教程中，我们将通过完整示例演示如何**将元素追加到 body**、**设置字体样式**以及使用**创建 span 元素**来**格式化文本 html**。完成后，您将拥有一个可运行的 C# 代码片段，生成带有粗体斜体的 span 文本，并了解每个调用背后的“原因”。 + +> **先决条件** +> • .NET 6 或更高版本（任何近期的 .NET 运行时均可） +> • 已安装 Aspose.HTML for .NET NuGet 包（`Aspose.Html`） +> • 对 C# 和 DOM 概念有基本了解 + +不需要其他库，代码可在 Windows、Linux 或 macOS 上运行。 + +--- + +## 您将构建的内容 + +我们将创建一个最小的 HTML 文档，添加一个包含短语 **Bold‑Italic text** 的 ``，同时应用 **粗体** 与 **斜体** 样式，最后**将元素追加到 body**。最终的标记如下： + +```html + + + Bold‑Italic text + + +``` + +您可以在指南末尾复制完整源码并直接运行。 + +--- + +![Create HTML document example](image.png){alt="create html document example"} + +--- + +## 第 1 步 – 初始化 HTMLDocument（**创建 html 文档**的基础） + +在我们能够**将元素追加到 body**之前，需要一个文档对象来操作。Aspose.HTML 提供了表示内存中 DOM 的 `HTMLDocument` 类。 + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*为什么重要*：实例化 `HTMLDocument` 为您提供了一块干净的画布——想象成一张空白纸，稍后您将在其上**格式化文本 html**。没有这一步，您无法操作节点或应用样式。 + +--- + +## 第 2 步 – 创建 `` 元素（**创建 span 元素**） + +现在我们需要一个容器来放置样式化的文本。`` 非常合适，因为它是内联元素，能够携带 CSS 而不破坏文档流。 + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*小技巧*：如果需要插入多段文本，可以通过克隆同一个 `spanElement`（`spanElement.Clone(true)`）并在每次更改 `InnerHtml` 来复用它。 + +--- + +## 第 3 步 – 为粗体 **和** 斜体 **设置字体样式**（**set font style**） + +Aspose.HTML 暴露了强类型的 `Style` 对象。要**设置字体样式**，我们使用位运算符 OR 将 `WebFontStyle.Bold` 与 `WebFontStyle.Italic` 组合。 + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*为何使用枚举*：`WebFontStyle` 枚举直接映射到 CSS 属性（`font-weight` 与 `font-style`）。使用枚举可以避免拼写错误，并确保生成的 CSS 有效——这对可靠的**格式化文本 html**至关重要。 + +--- + +## 第 4 步 – **将元素追加到 body** 并完成文档 + +当带样式的 span 准备好后，最后一步是将其放入 `` 标签中。 + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +此时 DOM 树正好与前面展示的代码片段相同。若检查 `htmlDocument.InnerHtml`，您将看到完整的标记。 + +--- + +## 第 5 步 – 保存或渲染文档 + +您可以将 HTML 写入文件、流式传输到浏览器，或使用 Aspose.HTML 的渲染引擎将其渲染为 PDF/图片。以下是最简单的文件输出方式： + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +在任意浏览器中打开 `output.html`，您应当看到 **Bold‑Italic text** 正确显示。 + +--- + +## 完整工作示例 + +将所有步骤组合起来，以下是完整的、可直接运行的程序： + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**预期输出** – 打开 `output.html` 将显示： + +> **Bold‑Italic text**（粗体且斜体） + +若检查源代码，您会看到我们讨论的确切 HTML，证明**格式化文本 html**步骤已成功。 + +--- + +## 常见问题与边缘情况 + +### 1. 如果需要超过两种样式怎么办？ + +`WebFontStyle` 是标记枚举（flags），因此可以组合任意数量的样式（例如 `Underline`）。只需继续使用 `|` 运算符： + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. 能否同时更改颜色？ + +完全可以。`Style` 对象提供了 `Color` 属性： + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. 如何**将元素追加到 body**多次？ + +创建循环，克隆已样式化的 span，调整文本后逐个追加： + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. 如果需要在 `
` 中**格式化文本 html**怎么办？ + +同样的 API 适用于任何元素。只需将 `CreateElement("span")` 替换为 `CreateElement("div")` 并相应调整样式即可。 + +### 5. 兼容性问题？ + +Aspose.HTML 目标为 .NET Standard 2.0+，因此代码可在 .NET Core、.NET Framework 以及 .NET 5/6+ 上运行。无需额外的浏览器特定 shim。 + +--- + +## 专业提示与常见陷阱 + +- **专业提示**：始终在配置好样式后再设置 `InnerHtml`。先更改内部内容可能会在某些浏览器触发重新布局；在样式设置之后再写入内容可避免不必要的工作。 +- **注意**：避免将 `WebFontStyle` 与内联 CSS 字符串混用。如果之后手动使用 `spanElement.SetAttribute("style", "...")`，会覆盖枚举生成的样式。请坚持使用一种方式。 +- **性能提示**：对于大型文档，先批量创建所有节点，再一次性追加，可减少 DOM 变更次数并提升渲染速度。 + +--- + +## 结论 + +现在，您已经掌握了使用 Aspose.HTML **创建 html 文档**、**将元素追加到 body**、**设置字体样式**以及使用**创建 span 元素**来**格式化文本 html**的完整流程。示例代码可直接运行，解释覆盖了“如何做”以及“为何如此”，便于您将此模式扩展到更复杂的场景。 + +准备好下一步了吗？尝试将 `` 替换为带有多个 CSS 类的 `

`，或使用 `Document` → `PdfSaveOptions` 将相同的 DOM 渲染为 PDF。相同的原理同样适用，您会发现 Aspose.HTML 是任何服务器端 HTML 生成任务的可靠伙伴。 + +有问题或发现了巧妙的用法？在下方留言——祝编码愉快！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/net/html-extensions-and-conversions/_index.md b/html/chinese/net/html-extensions-and-conversions/_index.md index 8107ea750..1abafa959 100644 --- a/html/chinese/net/html-extensions-and-conversions/_index.md +++ b/html/chinese/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ Aspose.HTML for .NET 不仅仅是一个库；它是 Web 开发领域的变革者 ## HTML 扩展和转换教程 ### [使用 Aspose.HTML 在 .NET 中将 HTML 转换为 PDF](./convert-html-to-pdf/) 使用 Aspose.HTML for .NET 轻松将 HTML 转换为 PDF。按照我们的分步指南，释放 HTML 到 PDF 转换的强大功能。 +### [使用 Aspose.HTML 在 .NET 中从 URL 创建 PDF – 完整 C# 指南](./create-pdf-from-url-complete-c-guide/) +使用 Aspose.HTML for .NET 将网页 URL 转换为 PDF 的完整 C# 示例，包含代码步骤和关键设置。 ### [使用 Aspose.HTML 在 .NET 中将 EPUB 转换为图像](./convert-epub-to-image/) 了解如何使用 Aspose.HTML for .NET 将 EPUB 转换为图像。带有代码示例和可自定义选项的分步教程。 ### [使用 Aspose.HTML 在 .NET 中将 EPUB 转换为 PDF](./convert-epub-to-pdf/) @@ -74,4 +76,4 @@ Aspose.HTML for .NET 不仅仅是一个库；它是 Web 开发领域的变革者 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/chinese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..0d3fbe5ac --- /dev/null +++ b/html/chinese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: 在 C# 中快速从 URL 创建 PDF。了解如何将 HTML 转换为 PDF，将网页保存为 PDF，以及使用简易代码从 HTML 生成 + PDF。 +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: zh +og_description: 在 C# 中快速从 URL 创建 PDF。本教程展示了如何将 HTML 转换为 PDF、将网页保存为 PDF，以及使用 Aspose.HTML + 从 HTML 生成 PDF。 +og_title: 从 URL 创建 PDF – 完整 C# 指南 +tags: +- pdf +- csharp +- html +- conversion +title: 从 URL 创建 PDF – 完整 C# 指南 +url: /zh/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 从 URL 创建 PDF – 完整 C# 指南 + +是否曾经需要 **从 URL 创建 PDF**，却不确定该选哪个库？你并不孤单。许多开发者在想要归档网页、从在线模板生成发票，或仅仅在站点上提供一个 “下载为 PDF” 按钮时，都会遇到这个难题。 + +在本教程中，我们将完整演示如何使用 C# **将 HTML 转换为 PDF**。你将看到如何 **将网页保存为 PDF**，如何 **从 HTML 生成 PDF**，以及为什么 `Aspose.HTML for .NET` 库让这件事变得轻而易举。结束时，你将拥有一段可直接运行的代码片段，能够抓取任意公开的 URL，渲染后写入 PDF 文件到磁盘。 + +> **专业提示：** 如果你在公司代理后工作，请确保 `HTMLDocument` 构造函数接收到正确的 `WebRequest` 设置——否则下载会悄然失败。 + +## 你需要准备的内容 + +- **.NET 6.0** 或更高版本（代码同样适用于 .NET Framework 4.7+）。 +- **Aspose.HTML for .NET** NuGet 包（`Aspose.HTML`）。 +- 一个可写入的磁盘文件夹，用来保存生成的 PDF。 +- 对 C# 的基本了解（不需要高级技巧）。 + +无需额外的配置文件，也没有隐藏的魔法——只需几行干净、带注释的代码。 + +![Create PDF from URL example](image.png){alt="从 URL 创建 PDF 示例"} + +## 第一步：安装 Aspose.HTML NuGet 包 + +打开终端或 Package Manager Console，运行： + +```bash +dotnet add package Aspose.HTML +``` + +> **为什么这一步很重要：** `HTMLDocument`、`PdfSaveOptions` 和 `PdfConverter` 类位于 `Aspose.Html` 命名空间中。没有此包，编译器根本不知道这些类型。 + +## 第二步：将网页加载到 `HTMLDocument` 中 + +首个实际操作是获取远程 HTML。`HTMLDocument` 可以直接接受 URL，自动处理重定向和内容类型检测。 + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**发生了什么？** +- `HTMLDocument` 将获取的标记解析为 DOM 树，行为类似浏览器。 +- 任何通过绝对 URL 引用的外部 CSS、图片或脚本也会被下载，确保 PDF 与实时页面一致。 + +## 第三步：配置 PDF 导出选项（边距、页面尺寸等） + +在将文档交给转换器之前，我们先微调输出。`PdfSaveOptions` 对象让你可以设置边距、页面方向，甚至 PDF 版本。 + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**为什么要设置边距？** +紧凑的 PDF 可能会裁剪掉页眉或页脚，尤其是在移动端优化的网站上。适当的边距可以保证内容可读。 + +## 第四步：直接将 HTML 文档转换为 PDF + +现在进入核心步骤。`PdfConverter.ConvertHtml` 会把渲染后的页面直接流式写入 PDF 文件。 + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**内部实现：** +- Aspose 使用自家的布局引擎渲染 DOM（不需要 Chromium）。 +- 渲染得到的位图会在可能的情况下栅格化为 PDF 矢量，保持文本可选中。 + +## 第五步：验证结果并处理边缘情况 + +快速的完整性检查可以避免后期的头疼。打开生成的文件，你应该能看到实时页面、已应用的边距以及完整的图片。 + +### 常见陷阱及规避方法 + +| 问题 | 原因 | 解决方案 | +|-------|-------|-----| +| **空白 PDF** | 防火墙阻止 URL 或需要身份验证 | 向 `HTMLDocument` 构造函数传递带有凭据的自定义 `WebRequest` | +| **缺少 CSS** | 外部样式表使用相对 URL | 确保基准 URL 正确（Aspose 会处理，但仍需检查重定向） | +| **文件体积过大** | 高分辨率图片未降采样 | 使用 `PdfSaveOptions.ImageCompression` 将嵌入图片 JPEG‑压缩 | +| **Unicode 字符乱码** | 字体未嵌入 | 设置 `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## 完整可运行示例（复制粘贴即可） + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +运行程序（`dotnet run`），你将在 `C:\Temp` 中找到 `example.pdf`。使用任意 PDF 阅读器打开，它应当完整复现 `https://example.com`，并带有你定义的边距。 + +## 结论 + +我们已经展示了如何使用 C# **从 URL 创建 PDF**。整个过程包括加载网页、配置边距以及将 DOM 转换为 PDF 文件——这正是你在生产环境中进行 **HTML 转 PDF**、**将网页保存为 PDF**、**从 HTML 生成 PDF** 所需的全部步骤。 + +尽情尝试吧：将页面尺寸改为 `Letter`，切换为横向，或使用 `PdfPageEventHandler` 添加页眉/页脚。相同的模式同样适用于动态页面、需要登录的门户（只需提供 Cookie），甚至批量处理多个 URL。 + +**后续可探索的方向** + +- 使用异步转换实现高吞吐服务的 **HTML to PDF C#**。 +- 通过 `PdfDocumentInfo` 向 PDF 嵌入 **元数据**（作者、标题）。 +- 使用 **Aspose.PDF** 将来自不同 URL 的多个 PDF 合并为单个报告。 + +有问题吗？在下方留言吧，祝编码愉快！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/net/rendering-html-documents/_index.md b/html/chinese/net/rendering-html-documents/_index.md index 3b8173660..4d4694e81 100644 --- a/html/chinese/net/rendering-html-documents/_index.md +++ b/html/chinese/net/rendering-html-documents/_index.md @@ -42,19 +42,31 @@ Aspose.HTML for .NET 凭借其丰富的功能、出色的文档和活跃的社 ### [使用 Aspose.HTML 在 .NET 中将 HTML 渲染为 PNG](./render-html-as-png/) 学习使用 Aspose.HTML for .NET：操作 HTML、转换为各种格式等等。深入了解这个全面的教程！ + +### [如何将 HTML 渲染为 PNG – 完整分步指南](./how-to-render-html-to-png-complete-step-by-step-guide/) +学习使用 Aspose.HTML for .NET 将 HTML 渲染为 PNG 的完整分步指南，涵盖关键设置和最佳实践。 + ### [使用 Aspose.HTML 在 .NET 中将 EPUB 渲染为 XPS](./render-epub-as-xps/) 在本综合教程中学习如何使用 Aspose.HTML for .NET 创建和呈现 HTML 文档。深入了解 HTML 操作、网页抓取等世界。 + ### [使用 Aspose.HTML 在 .NET 中渲染超时](./rendering-timeout/) 了解如何在 Aspose.HTML for .NET 中有效控制渲染超时。探索渲染选项并确保流畅的 HTML 文档渲染。 + ### [使用 Aspose.HTML 在 .NET 中将 MHTML 渲染为 XPS](./render-mhtml-as-xps/) 学习使用 Aspose.HTML 在 .NET 中将 MHTML 渲染为 XPS。增强您的 HTML 操作技能并促进您的 Web 开发项目！ + ### [使用 Aspose.HTML 在 .NET 中渲染多个文档](./render-multiple-documents/) 学习使用 Aspose.HTML for .NET 渲染多个 HTML 文档。利用这个强大的库提升您的文档处理能力。 + ### [使用 Aspose.HTML 在 .NET 中将 SVG 文档渲染为 PNG](./render-svg-doc-as-png/) 解锁 Aspose.HTML for .NET 的强大功能！了解如何轻松将 SVG Doc 渲染为 PNG。深入了解分步示例和常见问题解答。立即开始！ + +### [如何渲染 HTML – 带自定义资源处理程序的完整指南](./how-to-render-html-complete-guide-with-custom-resource-handl/) +学习使用自定义资源处理程序完整渲染 HTML 的方法，提升页面加载和资源管理。 + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/chinese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..a9b4f2c3b --- /dev/null +++ b/html/chinese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: 如何使用 Aspose.HTML 将 HTML 渲染为图像。了解 HTML 转图像转换、自定义资源处理程序，以及在 C# 中将 HTML + 转换为位图。 +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: zh +og_description: 如何使用 Aspose.HTML 将 HTML 渲染为图像。掌握 HTML 到图像的转换、自定义资源处理程序，以及在 C# 中将 HTML + 转换为位图。 +og_title: 如何渲染HTML – 使用自定义资源处理器的完整指南 +tags: +- C# +- Aspose.HTML +- Image Rendering +title: 如何渲染HTML – 使用自定义资源处理程序的完整指南 +url: /zh/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 如何渲染 HTML – 使用自定义资源处理程序的完整指南 + +有没有想过 **如何渲染 HTML** 成位图，而不必自己去操控浏览器引擎？你并不孤单。许多开发者在需要为电子邮件、报告或缩略图快速获取动态页面的截图时，常常碰壁。好消息是？使用 Aspose.HTML，你可以将任何 HTML 字符串转换为图像——无需 UI、无需无头 Chrome，只需纯 C# 代码。 + +在本教程中，我们将演示一个实用的 **html to image conversion** 场景，展示如何 **实现自定义资源处理程序**，并演示完整的 **convert html to bitmap** 工作流。完成后，你将拥有一个可复用的方法，能够在内存中将 HTML 渲染为图像，便于后续处理或存储。 + +> **先决条件** +> * .NET 6+（或 .NET Framework 4.7.2+） +> * Aspose.HTML for .NET NuGet 包（`Aspose.Html`） +> * 对 C# 和流的基本了解 + +如果你已经具备上述基础，让我们开始吧。 + +--- + +## 使用 Aspose.HTML 渲染 HTML + +任何 **render html to image** 操作的核心都是 `ImageRenderer` 类。它接受一个 `HTMLDocument` 并输出光栅图形（PNG、JPEG、BMP 等）。下面是最小的骨架代码： + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +这段代码可以工作，但只有在你告诉渲染器写入位置时才会在磁盘上生成文件。为了保持全部在内存中——并拦截 HTML 请求的每个资源（图片、CSS、字体），我们将接入一个 **custom resource handler**。 + +--- + +## 实现自定义资源处理程序 + +**自定义资源处理程序** 让你完全控制外部资产的获取和存储方式。在许多情况下，你会希望将这些资产捕获到内存中以便后续使用（例如，将它们打包成 ZIP）。该处理程序继承自 `ResourceHandler` 并重写 `HandleResource`。 + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**为什么要这么做？** +* **性能** – 无磁盘 I/O，全部驻留在 RAM 中。 +* **安全性** – 你可以控制哪些 URL 被允许获取。 +* **可扩展性** – 可以缓存资源、重命名，或将其嵌入其他容器。 + +--- + +## 使用 ImageRenderer 将 HTML 转换为位图 + +现在把各个部分组合起来：加载 HTML，附加 `MyHandler`，然后渲染。下面的方法返回一个包含渲染页面 PNG 图像的 `MemoryStream`。 + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### 预期输出 + +如果你这样调用该方法： + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +你将得到一个名为 `demo.png` 的文件，大致如下所示： + +![如何渲染 html 输出示例](https://example.com/assets/render-html-output.png "如何渲染 html 输出示例") + +*Alt text:* **如何渲染 html 输出示例** – 一个展示渲染后 HTML 代码片段的微型位图。 + +--- + +## HTML 转 Image 转换 – 常见陷阱与技巧 + +### 1. 相对 URL 与 Base 标签 +如果你的 HTML 使用相对路径引用外部 CSS 或图片，渲染器将不知道基准文件夹。可以： + +* 添加 `` 标签，或 +* 在 `MyHandler.HandleResource` 中解析 URL 并返回正确的流。 + +### 2. 字体可用性 +Aspose.HTML 默认使用系统字体。对于自定义网络字体（`@font-face`），请确保通过处理程序能够访问字体文件，或将其嵌入为 base64 数据 URI。 + +### 3. 大页面 +渲染非常高的页面会消耗大量内存。你可以限制视口大小： + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. 图像格式 +如果需要 JPEG 压缩，`renderer.Save(stream, ImageFormat.Jpeg)` 同样适用。将 `ImageFormat.Png` 替换为 `ImageFormat.Bmp` 即可得到真正的 **convert html to bitmap** 输出。 + +--- + +## 渲染 HTML 为 Image – 高级场景 + +### A. 渲染多页 +如果 HTML 包含分页符（`
`），可以遍历页面： + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. 将图像嵌入 PDF +结合 `Aspose.Pdf` 可直接将 PNG 嵌入 PDF： + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## 结论 + +我们已经完整演示了 **如何渲染 HTML** 成位图并全程驻留在内存中，探讨了 **html to image conversion** 的基础，构建了 **custom resource handler**，并展示了使用 Aspose.HTML 的 `ImageRenderer` 进行 **convert html to bitmap** 的方法。该方案快速、线程安全，且易于扩展，适用于真实项目——从电子邮件缩略图生成到自动化报告制作。 + +准备好下一步了吗？尝试将 PNG 输出改为 JPEG，实验不同的页面尺寸，或将处理程序接入缓存层，使重复渲染瞬间完成。当你自行掌控每个资源时，可能性无穷。 + +有问题或想分享酷炫的使用案例？在下方留言吧，祝渲染愉快！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/chinese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..15b1c8ae4 --- /dev/null +++ b/html/chinese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,225 @@ +--- +category: general +date: 2026-01-03 +description: 学习如何使用 Aspose.HTML 在 C# 中将 HTML 渲染为 PNG、将网页转换为图像并将 HTML 保存为 PNG。快速、可靠，已准备好投入生产。 +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: zh +og_description: 掌握如何将HTML渲染为PNG、将网页转换为图像，并使用 Aspose.HTML 提供的完整 C# 示例将 HTML 保存为 PNG。 +og_title: 如何将HTML渲染为PNG – 完整指南 +tags: +- C# +- Aspose.HTML +- Image Rendering +title: 如何将HTML渲染为PNG——完整的分步指南 +url: /zh/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 如何将 HTML 渲染为 PNG – 完整分步指南 + +如果您正在寻找 **how to render html**（如何将 HTML 渲染为图像），那么您来对地方了。无论您是需要 **convert webpage to image**（将网页转换为图像）用于缩略图、将页面存档为 PNG，还是实时生成社交媒体预览，只要使用合适的库，这个过程其实出奇地简单。 + +在本教程中，我们将演示如何使用 Aspose.HTML for .NET 将任意实时 URL 转换为 PNG 文件。您将看到完整可运行的代码片段，了解每个设置为何重要，并发现处理边缘情况的一些技巧。完成后，您将能够 **save html as png**、**convert html to png**，甚至在报告或电子邮件中嵌入结果，轻松自如。 + +## 前置条件 – 您需要的东西 + +- **.NET 6.0** 或更高版本（代码同样适用于 .NET Core 和 .NET Framework） +- **Aspose.HTML for .NET** NuGet 包（已安装 `Aspose.Html`） +- 您选择的 IDE（Visual Studio、Rider 或 VS Code） +- 一个可写入的文件夹，用于保存 PNG + +无需额外配置——Aspose.HTML 负责解析页面、应用 CSS 并栅格化布局等繁重工作。 + +## 步骤 1：加载要渲染的 HTML 文档 + +您首先需要一个指向要捕获页面的 `HTMLDocument` 实例。Aspose.HTML 可以从 URL、本地文件或原始 HTML 字符串加载。 + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** 直接从 URL 加载文档可确保自动获取所有外部资源（CSS、JavaScript、图像），从而忠实渲染实时页面。 + +## 步骤 2：配置图像渲染选项 + +接下来，我们设置 `ImageRenderingOptions`。这些选项控制输出尺寸、质量以及是否应用抗锯齿。调整它们可以在文件大小和视觉保真度之间取得平衡。 + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** 如果需要更高分辨率的缩略图，请按比例增加 `Width` 和 `Height`。Aspose.HTML 将相应缩放布局，而不会失去矢量质量。 + +## 步骤 3：初始化图像渲染器 + +现在，我们通过传入文档和刚才定义的选项来创建 `ImageRenderer`。该对象是实际将页面绘制到位图上的引擎。 + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** 渲染器解析 DOM，计算 CSS 样式，执行布局，最后将每个元素栅格化到像素画布上。所有这些都在内存中完成，无需浏览器窗口。 + +## 步骤 4：渲染并保存 PNG 文件 + +最后，使用您希望保存 PNG 的完整路径调用 `Render`。该方法同步写入文件，并自动释放内部资源。 + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** 运行程序后，您将在 `output` 文件夹中找到 `example.png`。使用任意图像查看器打开，它应显示 `https://example.com` 在 800×600 px 下的忠实快照。 + +--- + +### 完整、可直接运行的示例 + +下面是完整的程序，您可以复制粘贴到新的控制台项目中。它包含所有 `using` 指令、错误处理以及用于说明的注释。 + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +运行程序（在项目文件夹中执行 `dotnet run`），您将得到一张与实时页面相同的 PNG。这就是仅用几行 C# 实现 **how to render html** 的方式。 + +--- + +## 常见问题与边缘情况 + +### 我可以渲染本地 HTML 文件而不是 URL 吗？ + +当然可以。将 URL 替换为文件路径： + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### 如果页面在加载后使用 JavaScript 修改 DOM 怎么办？ + +Aspose.HTML 能执行大多数客户端脚本，但它并未提供完整的浏览器引擎。对于脚本繁重的页面，您可能需要先预渲染 HTML（例如使用无头 Chromium 实例），然后将生成的标记提供给 Aspose.HTML。 + +### 如何控制 PNG 压缩级别？ + +`ImageRenderingOptions` 包含 `CompressionLevel` 属性（0–9）。数值越低文件越大但质量更高。 + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### 我需要透明背景——可以实现吗？ + +可以。渲染前将背景颜色设置为透明： + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### 是否有办法将多个页面渲染为单个图像？ + +您可以遍历 URL 或 HTML 字符串集合，将每个渲染为位图，然后使用 `System.Drawing` 或 `ImageSharp` 将它们拼接在一起。核心的 **convert html to png** 步骤保持不变。 + +--- + +## 额外内容：在 Web API 中嵌入 PNG + +如果您想通过 ASP.NET Core 端点公开此功能，只需返回文件字节即可： + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +现在任何客户端都可以请求 `GET /render?url=https://example.com` 并即时收到 PNG——非常适合 **convert webpage to image** 服务。 + +--- + +## 结论 + +我们已经介绍了使用 Aspose.HTML for .NET 将 **how to render html** 转换为 PNG 文件所需的全部知识。从加载远程页面、配置渲染选项到处理常见陷阱，完整示例清晰展示了如何 **convert html to png**、**save html as png**，甚至通过 Web API 暴露该逻辑。 + +尝试使用您自己的 URL，实验不同的尺寸，甚至为产品目录自动生成缩略图。一旦掌握了 **render html to png** 的基础，您就可以无限发挥想象。 + +*准备升级了吗？* 获取 NuGet 包，将代码放入项目中，立即开始将网页转换为图像。如果遇到任何问题，欢迎留言——祝渲染愉快！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/net/canvas-and-image-manipulation/_index.md b/html/czech/net/canvas-and-image-manipulation/_index.md index 0da88ad65..1773fec5e 100644 --- a/html/czech/net/canvas-and-image-manipulation/_index.md +++ b/html/czech/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Naučte se, jak převést SVG do PDF pomocí Aspose.HTML pro .NET. Vysoce kvalit Přečtěte si, jak převést SVG na XPS pomocí Aspose.HTML pro .NET. Podpořte svůj vývoj webu pomocí této výkonné knihovny. ### [Jak povolit antialiasing v C# – Hladké hrany](./how-to-enable-antialiasing-in-c-smooth-edges/) Naučte se, jak v C# povolit antialiasing pro vyhlazení hran a zlepšení kvality vykreslovaných grafických prvků. +### [Vytvoření textu na plátně – Kompletní průvodce vykreslováním textu na obrázcích](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Naučte se, jak pomocí Aspose.HTML pro .NET přidávat a stylovat text na obrázcích pomocí plátna. ## Závěr diff --git a/html/czech/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/czech/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..38b352ebd --- /dev/null +++ b/html/czech/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,231 @@ +--- +category: general +date: 2026-01-03 +description: Rychle vytvořte text na plátně a naučte se, jak vykreslit textový obrázek, + nastavit možnosti textu a vyplnit textové plátno, přičemž zlepšíte vykreslování + textu v Linuxu. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: cs +og_description: Vytvořte text na plátně pomocí Aspose HTML, naučte se renderovat textový + obrázek, nastavit možnosti textu a zlepšit kvalitu textu v Linuxu v jednom tutoriálu. +og_title: Vytvořte text na plátně – Kompletní průvodce renderováním +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Vytvoření textu na plátně – Kompletní průvodce renderováním textu na obrázcích +url: /cs/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Vytvoření textu na plátně – Kompletní průvodce renderováním + +Vždy jste potřebovali **vytvořit text na plátně**, ale nebyli jste si jisti, jak získat ostré glyfy na každé platformě? Nejste v tom sami. Mnoho vývojářů narazilo na problém, když jejich text vypadá rozmazaně na Linuxu, zejména při převodu HTML na obrázek. + +V tomto tutoriálu projdeme praktickým řešením, které vám nejen umožní **renderovat textový obrázek** na plátno Aspose HTML, ale také vám ukáže, jak **nastavit textové možnosti**, správně použít `FillText` a **zlepšit renderování textu na Linuxu** pomocí hintingu. Na konci budete mít samostatný, spustitelný úryvek, který můžete vložit do jakéhokoli .NET projektu. + +## Co se naučíte + +- Jak vytvořit objekt `Canvas` a připravit jej pro kreslení. +- Úloha `TextOptions` a proč povolení hintingu na Linuxu má význam. +- Krok‑za‑krokem kód, který **vyplní text na plátně** stylizovanými, vysoce kvalitními znaky. +- Běžné úskalí (chybějící hinting, špatný souřadnicový systém) a rychlá řešení. +- Způsoby, jak rozšířit příklad: vlastní fonty, barvy a víceřádkový text. + +> **Předpoklad:** .NET 6+ (nebo .NET Framework 4.7.2) a nainstalovaný NuGet balíček Aspose.HTML pro .NET. + +--- + +## Krok 1: Nastavení projektu a importů + +Než začneme kreslit, ujistěte se, že váš projekt odkazuje na správné sestavy. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Tip:** Pokud používáte Linux, přidejte balíček `libgdiplus` (`sudo apt-get install libgdiplus`), aby renderování založené na GDI fungovalo hladce. + +--- + +## Krok 2: Vytvoření plátna a definování jeho velikosti + +Plátno je v podstatě bitmapa mimo obrazovku, na kterou můžete kreslit. Považujte ho za vaši digitální kreslicí tabuli. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Proč je to důležité:** Nastavení pevného pozadí zabraňuje průhledným artefaktům při následném exportu obrázku. + +--- + +## Krok 3: Konfigurace textových možností – Klíč k čistému textu na Linuxu + +Renderování fontů na Linuxu může vypadat rozmazaně, pokud je hinting vypnutý. `TextOptions.UseHinting` říká rendereru, aby zarovnal glyfy k pixelovým hranám, což výrazně zaostří výstup. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Co když to přeskočíte?** Na mnoha distribucích Linuxu se text objeví mírně rozmazaně nebo nesprávně zarovnaný, zejména při malých velikostech písma. + +--- + +## Krok 4: Vyplnění textu na plátno + +Nyní, když je plátno připravené a textové možnosti nastavené, můžeme skutečně **vyplnit text na plátně**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Pokud chcete vlastní stylování (barvu, velikost písma, zarovnání), zabalte volání do `Font` a `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Krok 5: Export plátna jako soubor obrázku + +Posledním krokem je zapsat renderovanou bitmapu na disk, abyste mohli ověřit výsledek. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Otevřete `canvas-output.png` a měli byste vidět ostrý, správně hintovaný text – ať už jste na Windows, macOS nebo Linuxu. + +--- + +## Časté otázky a okrajové případy + +### Jak hinting ovlivňuje výkon? + +Povolení hintingu přidává zanedbatelnou zátěž (obvykle < 2 ms pro plátno 800×600). Vizuální přínos daleko převyšuje náklady, zejména při generování obrázků na serveru, kde je kvalita zásadní. + +### Co když potřebuji víceřádkový text? + +Použijte `canvas.FillText` v cyklu, upravujte souřadnici Y, nebo využijte přetížení `canvas.FillText`, které přijímá objekt `TextLayout` pro automatické zalamování řádků. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Můžu použít vlastní TrueType font? + +Rozhodně. Načtěte font pomocí `FontFamily` a přiřaďte jej k `TextOptions.FontFamily` nebo přímo k `Font`, který předáte do `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Ujistěte se, že soubor fontu je přístupný za běhu (umístěte jej do složky projektu nebo jej zaregistrujte systémově). + +## Kompletní funkční příklad + +Níže je kompletní program připravený ke kopírování a vložení, který zahrnuje všechny výše uvedené kroky. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Očekávaný výstup:** PNG soubor pojmenovaný `canvas-output.png` obsahující dva řádky textu – jeden obyčejný, druhý tučný modrý – oba renderované ostře díky hintingu. + +## Závěr + +Právě jsme **vytvořili text na plátně** od nuly, naučili se, jak **renderovat textový obrázek** pomocí Aspose.HTML, a zjistili, proč jsou **nastavené textové možnosti** jako `UseHinting` nezbytné pro **zlepšení kvality textu na Linuxu**. Dodržením výše uvedených kroků můžete spolehlivě **vyplnit text na plátně** v jakémkoli .NET prostředí, ať už generujete miniatury, vodoznaky nebo dynamickou grafiku pro webové API. + +Jste připraveni na další výzvu? Zkuste přidat pozadí s gradienty, otáčet text nebo exportovat do SVG pro vektorové dokonalé škálování. Stejné principy – správné `TextOptions`, promyšlené zacházení se souřadnicemi a čisté uvolňování zdrojů – platí napříč formáty. + +Pokud jste narazili na nějaké problémy nebo máte nápady na rozšíření, zanechte komentář. Šťastné programování a užívejte si ty břitko ostré znaky! + +--- + +*Obrázek ilustrující plátno s ostrým textem (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/net/html-document-manipulation/_index.md b/html/czech/net/html-document-manipulation/_index.md index 2536b8aa2..678d52fe4 100644 --- a/html/czech/net/html-document-manipulation/_index.md +++ b/html/czech/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Naučte se vytvářet dynamický a webový obsah pomocí Aspose.HTML pro .NET. P Naučte se používat Aspose.HTML pro .NET. Importujte jmenný prostor, slučujte HTML s XML a vylepšete své dovednosti v oblasti vývoje webu pomocí tohoto komplexního průvodce. ### [Generujte dokumenty XPS pomocí XpsDevice v .NET pomocí Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Odemkněte potenciál vývoje webu s Aspose.HTML pro .NET. Snadno vytvářejte, převádějte a manipulujte s dokumenty HTML. +### [Vytvořte HTML dokument pomocí Aspose.HTML – průvodce krok za krokem](./create-html-document-with-aspose-html-step-by-step-guide/) +Naučte se krok za krokem vytvářet HTML dokumenty pomocí knihovny Aspose.HTML v .NET. ## Závěr @@ -78,4 +80,4 @@ Závěrem, pokud chcete zvládnout manipulaci s HTML dokumenty pomocí Aspose.HT {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/czech/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..c475609fb --- /dev/null +++ b/html/czech/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,239 @@ +--- +category: general +date: 2026-01-03 +description: Vytvořte HTML dokument v C# pomocí Aspose.HTML. Naučte se, jak přidat + prvek do těla, nastavit styl písma a formátovat text HTML pomocí jednoduchého span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: cs +og_description: Vytvořte HTML dokument v C# a podívejte se, jak přidat prvek do těla, + nastavit styl písma a formátovat text HTML pomocí Aspose.HTML. +og_title: Vytvořte HTML dokument s Aspose.HTML – rychlý průvodce +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Vytvořte HTML dokument s Aspose.HTML – krok za krokem průvodce +url: /cs/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Vytvoření HTML dokumentu pomocí Aspose.HTML – krok za krokem + +Už jste někdy potřebovali **vytvořit html dokument** programově a divěli jste se, proč výstup vypadá obyčejně? Nejste v tom sami. V mnoha projektech musíme generovat úryvky za běhu – například e‑mailové šablony, dynamické reporty nebo malé UI widgety. Dobrou zprávou je, že Aspose.HTML to umožňuje snadno **vytvořit html dokument**, naformátovat jej a vložit do stránky, aniž byste museli psát surové řetězce. + +V tomto tutoriálu projdeme kompletním příkladem, který ukazuje, jak **přidat prvek do těla** (**append element to body**), **nastavit styl písma**, a **formátovat text html** pomocí **vytvořit span element**. Na konci budete mít spustitelný C# úryvek, který vytvoří tučný‑kurzivní text uvnitř `` a pochopíte „proč“ za každým voláním. + +> **Požadavky** +> • .NET 6 nebo novější (jakékoli aktuální .NET runtime) +> • NuGet balíček Aspose.HTML pro .NET (`Aspose.Html`) nainstalovaný +> • Základní znalost C# a konceptů DOM + +Žádné další knihovny nejsou potřeba a kód běží na Windows, Linuxu i macOS. + +--- + +## Co vytvoříte + +Vytvoříme minimální HTML dokument, přidáme `` obsahující frázi **Bold‑Italic text**, použijeme jak **tučný**, tak **kurzivní** styl a nakonec **přidáme prvek do těla**. Výsledný markup vypadá takto: + +```html + + + Bold‑Italic text + + +``` + +Celý zdroj můžete zkopírovat na konci průvodce a spustit ihned. + +--- + +![Create HTML document example](image.png){alt="příklad vytvoření html dokumentu"} + +--- + +## Krok 1 – Inicializace HTMLDocument (základ **create html document**) + +Než budeme moci **append element to body**, potřebujeme objekt dokumentu, se kterým budeme pracovat. Aspose.HTML poskytuje třídu `HTMLDocument`, která představuje DOM v paměti. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Proč je to důležité*: Vytvořením instance `HTMLDocument` získáte čisté plátno – představte si to jako prázdný list, na který později **format text html**. Bez tohoto kroku nemůžete manipulovat s uzly ani aplikovat styly. + +--- + +## Krok 2 – Vytvoření elementu `` (**create span element**) + +Nyní potřebujeme kontejner pro náš naformátovaný text. `` je ideální, protože je to inline element, který může nést CSS bez narušení toku. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Tip*: Pokud budete potřebovat vložit více kusů textu, můžete stejný `spanElement` znovu použít jeho klonováním (`spanElement.Clone(true)`) a změnou `InnerHtml` pokaždé. + +--- + +## Krok 3 – **set font style** pro tučné **a** kurzivní + +Aspose.HTML nabízí silně typovaný objekt `Style`. Pro **set font style** kombinujeme `WebFontStyle.Bold` a `WebFontStyle.Italic` pomocí bitového OR. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Proč použít výčtový typ*: Výčtový typ `WebFontStyle` mapuje přímo na CSS vlastnosti (`font-weight` a `font-style`). Použití výčtu zabraňuje překlepům a zajišťuje, že generované CSS je platné – což je klíčové pro spolehlivé **format text html**. + +--- + +## Krok 4 – **Append element to body** a dokončení dokumentu + +Jakmile je stylovaný `` připraven, posledním krokem je umístit jej dovnitř tagu ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +V tomto okamžiku strom DOM vypadá přesně jako úryvek zobrazený dříve. Pokud si prohlédnete `htmlDocument.InnerHtml`, uvidíte kompletní markup. + +--- + +## Krok 5 – Uložení nebo vykreslení dokumentu + +Můžete buď zapsat HTML do souboru, streamovat jej do prohlížeče, nebo jej renderovat do PDF/obrázku pomocí renderovacího enginu Aspose.HTML. Zde je nejjednodušší varianta výstupu do souboru: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Otevřete `output.html` v libovolném prohlížeči a měli byste vidět **Bold‑Italic text** zobrazený přesně tak, jak má být. + +--- + +## Kompletní funkční příklad + +Sestavením všech částí získáte kompletní, připravený program: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Očekávaný výstup** – po otevření `output.html` uvidíte: + +> **Bold‑Italic text** (tučný a kurzivní) + +Pokud si prohlédnete zdroj, uvidíte přesně HTML, o kterém jsme mluvili, což potvrzuje úspěšné provedení kroku **format text html**. + +--- + +## Často kladené otázky a okrajové případy + +### 1. Co když potřebuji více než dva styly? + +`WebFontStyle` je flags výčet, takže můžete kombinovat libovolný počet stylů (např. `Underline`). Stačí nadále používat operátor `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Můžu změnit barvu současně? + +Ano. Objekt `Style` má vlastnost `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Jak **append element to body** několikrát? + +Vytvořte smyčku, klonujte stylovaný ``, upravte text a každou klonovanou verzi přidejte: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Co když potřebuji **format text html** uvnitř `
` místo toho? + +Stejná API funguje pro jakýkoli element. Stačí nahradit `CreateElement("span")` za `CreateElement("div")` a upravit styly podle potřeby. + +### 5. Obavy o kompatibilitu? + +Aspose.HTML cílí na .NET Standard 2.0+, takže kód běží na .NET Core, .NET Framework i .NET 5/6+. Není potřeba žádných extra shimů pro prohlížeče. + +--- + +## Tipy a úskalí + +- **Tip:** Vždy nastavujte `InnerHtml` *po* konfiguraci stylu. Změna vnitřního obsahu před nastavením stylu může v některých prohlížečích spustit relayout; nastavení po stylování zamezí zbytečným operacím. +- **Dejte pozor na:** Míchání `WebFontStyle` s inline CSS řetězci. Pokud později ručně nastavíte `spanElement.SetAttribute("style", "...")`, přepíšete styly vygenerované výčtem. Držte se jedné metody. +- **Poznámka o výkonu:** Pro velké dokumenty je výhodnější vytvořit všechny uzly najednou a poté je najednou připojit – snižuje to počet DOM mutací a urychluje renderování. + +--- + +## Závěr + +Nyní víte, jak **create html document** pomocí Aspose.HTML, **append element to body**, **set font style** a **format text html** pomocí **create span element**. Příklad je plně funkční a vysvětlení pokrývají jak „jak“, tak „proč“, což usnadňuje přizpůsobení vzoru složitějším scénářům. + +Jste připraveni na další krok? Zkuste nahradit `` za `

` s více CSS třídami, nebo renderovat stejný DOM do PDF pomocí `Document` → `PdfSaveOptions`. Principy zůstávají stejné a Aspose.HTML se tak stane spolehlivým partnerem pro jakoukoli server‑side generaci HTML. + +Máte otázky nebo jste objevili chytrý trik? Zanechte komentář níže – šťastné programování! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/net/html-extensions-and-conversions/_index.md b/html/czech/net/html-extensions-and-conversions/_index.md index adc31c429..dcf7879d6 100644 --- a/html/czech/net/html-extensions-and-conversions/_index.md +++ b/html/czech/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,10 @@ Aspose.HTML for .NET není jen knihovna; je to změna hry ve světě vývoje web ## Výukové programy pro rozšíření a konverze HTML ### [Převeďte HTML do PDF v .NET pomocí Aspose.HTML](./convert-html-to-pdf/) Převeďte HTML do PDF bez námahy pomocí Aspose.HTML pro .NET. Postupujte podle našeho podrobného průvodce a uvolněte sílu převodu HTML do PDF. + +### [Vytvořte PDF z URL – Kompletní průvodce v C#](./create-pdf-from-url-complete-c-guide/) +Kompletní průvodce v C# pro vytvoření PDF z webové adresy pomocí Aspose.HTML pro .NET. + ### [Převeďte EPUB na obrázek v .NET pomocí Aspose.HTML](./convert-epub-to-image/) Přečtěte si, jak převést EPUB na obrázky pomocí Aspose.HTML pro .NET. Výukový program krok za krokem s příklady kódu a přizpůsobitelnými možnostmi. ### [Převeďte EPUB do PDF v .NET pomocí Aspose.HTML](./convert-epub-to-pdf/) @@ -74,4 +78,4 @@ Tak na co čekáš? Vydejme se na tuto vzrušující cestu k prozkoumání rozš {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/czech/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..339534ac9 --- /dev/null +++ b/html/czech/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: Rychle vytvořte PDF z URL v C#. Naučte se, jak převést HTML na PDF, uložit + webovou stránku jako PDF a generovat PDF z HTML pomocí jednoduchého kódu. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: cs +og_description: Vytvořte PDF z URL v C# rychle. Tento návod ukazuje, jak převést HTML + na PDF, uložit webovou stránku jako PDF a generovat PDF z HTML pomocí Aspose.HTML. +og_title: Vytvořte PDF z URL – Kompletní průvodce C# +tags: +- pdf +- csharp +- html +- conversion +title: Vytvořte PDF z URL – Kompletní průvodce C# +url: /cs/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Vytvoření PDF z URL – Kompletní průvodce C# + +Už jste někdy potřebovali **vytvořit PDF z URL**, ale nebyli jste si jisti, kterou knihovnu zvolit? Nejste v tom sami. Mnoho vývojářů narazí na tento problém, když chtějí archivovat webovou stránku, generovat faktury z online šablony nebo jednoduše nabídnout tlačítko „stáhnout jako PDF“ na svém webu. + +V tomto tutoriálu projdeme celý proces **převodu HTML do PDF** pomocí C#. Uvidíte, jak **uložit webovou stránku jako PDF**, jak **generovat PDF z HTML**, a proč knihovna `Aspose.HTML for .NET` tuto práci usnadňuje. Na konci budete mít připravený útržek kódu, který načte libovolnou veřejnou URL, vykreslí ji a zapíše PDF soubor na disk. + +> **Tip:** Pokud pracujete za firemním proxy, ujistěte se, že konstruktor `HTMLDocument` dostane správná nastavení `WebRequest` – jinak se stahování tiše nezdaří. + +## Co budete potřebovat + +- **.NET 6.0** nebo novější (kód funguje také na .NET Framework 4.7+). +- **Aspose.HTML for .NET** NuGet balíček (`Aspose.HTML`). +- Zapisovatelná složka na disku, kam se PDF uloží. +- Základní znalost C# (žádné pokročilé triky nejsou potřeba). + +Žádné extra konfigurační soubory, žádná skrytá magie – pouze pár řádků čistého, okomentovaného kódu. + +![Create PDF from URL example](image.png){alt="vytvořit pdf z url"} + +## Krok 1: Instalace NuGet balíčku Aspose.HTML + +Otevřete terminál nebo Package Manager Console a spusťte: + +```bash +dotnet add package Aspose.HTML +``` + +> **Proč je tento krok důležitý:** Třídy `HTMLDocument`, `PdfSaveOptions` a `PdfConverter` sídlí v namespace `Aspose.Html`. Bez balíčku kompilátor nebude vědět, co tyto typy jsou. + +## Krok 2: Načtení webové stránky do `HTMLDocument` + +Prvním skutečným krokem je načtení vzdáleného HTML. `HTMLDocument` může přijmout URL přímo a postará se o přesměrování a detekci typu obsahu za vás. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Co se děje?** +- `HTMLDocument` parsuje stažený markup do DOM stromu, stejně jako prohlížeč. +- Veškeré externí CSS, obrázky nebo skripty odkazované absolutními URL jsou také staženy, což zajišťuje, že PDF vypadá jako živá stránka. + +## Krok 3: Nastavení možností exportu PDF (okraje, velikost stránky atd.) + +Než předáme dokument konvertoru, doladíme výstup. Objekt `PdfSaveOptions` vám umožní nastavit okraje, orientaci stránky a dokonce i verzi PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Proč nastavovat okraje?** +Příliš těsný PDF může oříznout záhlaví nebo zápatí, zejména na mobilně optimalizovaných stránkách. Přidání mírného okraje zajistí čitelnost celého obsahu. + +## Krok 4: Přímý převod HTML dokumentu do PDF + +Nyní těžká část. `PdfConverter.ConvertHtml` streamuje vykreslenou stránku přímo do PDF souboru. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Pod kapotou:** +- Aspose vykresluje DOM pomocí vlastního layout engine (není potřeba Chromium). +- Vykreslený bitmap se pak rasterizuje do PDF vektorů, kde je to možné, čímž se zachová možnost výběru textu. + +## Krok 5: Ověření výsledku a ošetření okrajových případů + +Rychlá kontrola ušetří budoucí bolesti hlavy. Otevřete vygenerovaný soubor; měli byste vidět živou stránku, aplikované okraje a všechny obrázky neporušené. + +### Časté problémy a jak se jim vyhnout + +| Problém | Příčina | Řešení | +|-------|-------|-----| +| **Prázdné PDF** | URL blokováno firewallem nebo vyžaduje autentizaci | Předat vlastní `WebRequest` s přihlašovacími údaji do konstruktoru `HTMLDocument` | +| **Chybějící CSS** | Externí stylesheet používá relativní URL | Zajistěte, že základní URL je správná (Aspose to řeší, ale ověřte přesměrování) | +| **Velká velikost souboru** | Obrázky s vysokým rozlišením nejsou zmenšeny | Použijte `PdfSaveOptions.ImageCompression` pro JPEG kompresi vložených obrázků | +| **Unicode znaky poškozené** | Font není vložen | Nastavte `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Kompletní funkční příklad (připravený ke zkopírování) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Spusťte program (`dotnet run`) a najdete `example.pdf` v `C:\Temp`. Otevřete jej libovolným PDF prohlížečem a uvidíte přesnou repliku `https://example.com` s nastavenými okraji. + +## Závěr + +Právě jsme vám ukázali **jak vytvořit PDF z URL** pomocí C#. Prošli jsme kroky načtení webové stránky, nastavení okrajů a převodu DOM do PDF souboru – vše, co potřebujete k **převodu HTML do PDF**, **uložení webové stránky jako PDF** a **generování PDF z HTML** v produkčním prostředí. + +Klidně experimentujte: změňte velikost stránky na `Letter`, přepněte orientaci na na šířku, nebo přidejte záhlaví/zápatí pomocí `PdfPageEventHandler`. Stejný vzor funguje i pro dynamické stránky, portály chráněné přihlášením (stačí předat cookies) nebo hromadné zpracování seznamu URL. + +**Další kroky, které můžete prozkoumat** + +- **HTML to PDF C#** s asynchronním převodem pro služby s vysokou propustností. +- Vkládání **metadata** (autor, název) do PDF pomocí `PdfDocumentInfo`. +- Použití **Aspose.PDF** ke sloučení více PDF vygenerovaných z různých URL do jedné zprávy. + +Máte otázky? Zanechte komentář níže a šťastné programování! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/net/rendering-html-documents/_index.md b/html/czech/net/rendering-html-documents/_index.md index 08a9a5efd..305ec800a 100644 --- a/html/czech/net/rendering-html-documents/_index.md +++ b/html/czech/net/rendering-html-documents/_index.md @@ -42,6 +42,8 @@ Nyní, když máte Aspose.HTML pro .NET nastaveno, je čas prozkoumat výukové ### [Renderujte HTML jako PNG v .NET pomocí Aspose.HTML](./render-html-as-png/) Naučte se pracovat s Aspose.HTML pro .NET: Manipulujte s HTML, převádějte do různých formátů a další. Ponořte se do tohoto komplexního tutoriálu! +### [Jak renderovat HTML do PNG – Kompletní průvodce krok za krokem](./how-to-render-html-to-png-complete-step-by-step-guide/) +Naučte se, jak pomocí Aspose.HTML pro .NET převést HTML do PNG pomocí podrobného krok‑za‑krokem návodu. ### [Renderujte EPUB jako XPS v .NET pomocí Aspose.HTML](./render-epub-as-xps/) V tomto komplexním kurzu se dozvíte, jak vytvářet a vykreslovat dokumenty HTML pomocí Aspose.HTML for .NET. Ponořte se do světa HTML manipulace, web scraping a další. ### [Časový limit vykreslování v .NET pomocí Aspose.HTML](./rendering-timeout/) @@ -52,9 +54,12 @@ Naučte se, jak efektivně řídit časové limity vykreslování v Aspose.HTML Naučte se vykreslovat více dokumentů HTML pomocí Aspose.HTML pro .NET. Zvyšte své možnosti zpracování dokumentů pomocí této výkonné knihovny. ### [Renderujte SVG Doc jako PNG v .NET pomocí Aspose.HTML](./render-svg-doc-as-png/) Odemkněte sílu Aspose.HTML pro .NET! Naučte se, jak snadno vykreslit dokument SVG jako PNG. Ponořte se do podrobných příkladů a nejčastějších dotazů. Začněte hned! +### [Jak renderovat HTML – Kompletní průvodce s vlastním správcem zdrojů](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Naučte se, jak renderovat HTML pomocí vlastního správce zdrojů v kompletním průvodci. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/czech/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..438237e06 --- /dev/null +++ b/html/czech/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,224 @@ +--- +category: general +date: 2026-01-03 +description: Jak renderovat HTML do obrázků pomocí Aspose.HTML. Naučte se konverzi + HTML na obrázek, vlastní manipulátor zdrojů a převod HTML na bitmapu v C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: cs +og_description: Jak renderovat HTML do obrázků pomocí Aspose.HTML. Ovládněte konverzi + HTML na obrázek, vlastní manipulátor zdrojů a převod HTML na bitmapu v C#. +og_title: Jak renderovat HTML – Kompletní průvodce s vlastním správcem zdrojů +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Jak renderovat HTML – Kompletní průvodce s vlastním správcem zdrojů +url: /cs/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Jak renderovat HTML – Kompletní průvodce s vlastním manipulátorem zdrojů + +Už jste se někdy zamýšleli **jak renderovat HTML** do bitmapy, aniž byste museli sami manipulovat s prohlížečovým enginem? Nejste sami. Mnoho vývojářů narazí na problém, když potřebují rychlý snímek dynamické stránky pro e‑maily, reporty nebo miniatury. Dobrá zpráva? S Aspose.HTML můžete převést libovolný HTML řetězec na obrázek – bez UI, bez headless Chrome, jen čistý C# kód. + +V tomto tutoriálu projdeme praktickým scénářem **html to image conversion**, ukážeme vám, jak **implementovat vlastní manipulátor zdrojů**, a demonstrujeme kompletní workflow **convert html to bitmap**. Na konci budete mít znovupoužitelnou metodu, která renderuje HTML do obrázku kompletně v paměti, připravenou k dalšímu zpracování nebo uložení. + +> **Prerequisites** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * Basic familiarity with C# and streams + +Pokud máte tyto základy pokryté, pojďme na to. + +--- + +## Jak renderovat HTML s Aspose.HTML + +Jádrem každé operace **render html to image** je třída `ImageRenderer`. Přijímá `HTMLDocument` a vytváří rastrovou grafiku (PNG, JPEG, BMP atd.). Níže je minimální kostra: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Tento úryvek funguje, ale soubor na disku získáte jen pokud řadič řeknete, kam má zapisovat. Aby vše zůstalo v paměti – a abyste zachytili každý zdroj (obrázky, CSS, fonty), který HTML požaduje – připojíme **vlastní manipulátor zdrojů**. + +## Implementace vlastního manipulátoru zdrojů + +**Vlastní manipulátor zdrojů** vám dává plnou kontrolu nad tím, jak jsou externí assety načítány a ukládány. V mnoha případech budete chtít tyto assety zachytit v paměti pro pozdější použití (např. sloučit je do ZIP). Manipulátor dědí z `ResourceHandler` a přepisuje `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Proč to dělat?** +* **Performance** – žádný diskový I/O, vše zůstává v RAM. +* **Security** – kontrolujete, které URL jsou povoleny k načtení. +* **Extensibility** – můžete cachovat zdroje, přejmenovávat je nebo je vkládat do jiných kontejnerů. + +## Převod HTML na bitmapu pomocí ImageRenderer + +Nyní spojíme všechny části: načteme HTML, připojíme `MyHandler` a vykreslíme. Následující metoda vrací `MemoryStream` obsahující PNG obrázek vykreslené stránky. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Očekávaný výstup + +Pokud zavoláte metodu takto: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Získáte `demo.png`, který vypadá zhruba takto: + +![příklad výstupu renderování html](https://example.com/assets/render-html-output.png "příklad výstupu renderování html") + +*Alt text:* **příklad výstupu renderování html** – malá bitmapa zobrazující vykreslený HTML úryvek. + +## Převod HTML na obrázek – Časté úskalí a tipy + +### 1. Relativní URL a značky base + +Pokud vaše HTML odkazuje na externí CSS nebo obrázky s relativními cestami, renderer nezná základní složku. Buď: + +* Přidejte značku ``, nebo +* Rozřešte URL uvnitř `MyHandler.HandleResource` a poskytněte správný stream. + +### 2. Dostupnost fontů + +Aspose.HTML používá výchozí systémové fonty. Pro vlastní webové fonty (`@font-face`) zajistěte, aby soubory fontů byly přístupné přes manipulátor, nebo je vložte jako base64 data URI. + +### 3. Velké stránky + +Vykreslení velmi vysoké stránky může spotřebovat značnou paměť. Můžete omezit velikost viewportu: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Formáty obrázků + +`renderer.Save(stream, ImageFormat.Jpeg)` funguje stejně dobře, pokud potřebujete JPEG kompresi. Nahraďte `ImageFormat.Png` za `ImageFormat.Bmp` pro skutečný výstup **convert html to bitmap**. + +## Renderování HTML na obrázek – Pokročilé scénáře + +### A. Vykreslování více stránek + +Pokud HTML obsahuje zalomení stránky (`
`), můžete iterovat přes stránky: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Vložení obrázku do PDF + +Kombinujte s `Aspose.Pdf` pro přímé vložení PNG: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +## Závěr + +Probrali jsme **jak renderovat HTML** do bitmapy kompletně v paměti, prozkoumali základy **html to image conversion**, vytvořili **vlastní manipulátor zdrojů** a ukázali vám, jak **convert html to bitmap** pomocí `ImageRenderer` z Aspose.HTML. Přístup je rychlý, thread‑safe a snadno rozšiřitelný pro reálné projekty – od generování miniatur pro e‑mail až po automatizované vytváření reportů. + +Jste připraveni na další krok? Zkuste nahradit PNG výstup JPEG, experimentujte s různými velikostmi stránek nebo připojte manipulátor k vrstvě cache, aby opakované vykreslování bylo okamžité. Možnosti jsou neomezené, když máte kontrolu nad všemi zdroji. + +Máte otázky nebo zajímavý případ použití, který byste chtěli sdílet? Zanechte komentář níže a šťastné renderování! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/czech/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..068a9a305 --- /dev/null +++ b/html/czech/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: Naučte se, jak renderovat HTML do PNG, převést webovou stránku na obrázek + a uložit HTML jako PNG pomocí Aspose.HTML v C#. Rychlé, spolehlivé a připravené + pro produkci. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: cs +og_description: Naučte se, jak renderovat HTML do PNG, převést webovou stránku na + obrázek a uložit HTML jako PNG s kompletním příkladem v C# pomocí Aspose.HTML. +og_title: Jak renderovat HTML do PNG – kompletní průvodce +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Jak renderovat HTML do PNG – Kompletní krok‑za‑krokem průvodce +url: /cs/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Jak renderovat HTML do PNG – Kompletní průvodce krok za krokem + +Pokud hledáte **how to render html** do obrázku, jste na správném místě. Ať už potřebujete **convert webpage to image** pro náhledy, archivovat stránku jako PNG, nebo generovat náhledy pro sociální sítě za běhu, proces může být překvapivě jednoduchý s vhodnou knihovnou. + +V tomto tutoriálu vás provedeme převodem libovolné živé URL na soubor PNG pomocí Aspose.HTML pro .NET. Uvidíte kompletní spustitelný úryvek kódu, zjistíte, proč je každé nastavení důležité, a objevíte několik tipů pro řešení okrajových případů. Na konci budete schopni **save html as png**, **convert html to png**, a dokonce výsledek vložit do zprávy nebo e‑mailu bez potíží. + +## Požadavky – Co budete potřebovat + +- **.NET 6.0** nebo novější (kód funguje také s .NET Core a .NET Framework) +- **Aspose.HTML for .NET** NuGet balíček (`Aspose.Html`) nainstalovaný +- IDE dle vašeho výběru (Visual Studio, Rider nebo VS Code) +- Zápisovatelný adresář, kam bude PNG uloženo + +Žádná další konfigurace není vyžadována — Aspose.HTML se postará o těžkou práci při parsování stránky, aplikaci CSS a rasterizaci rozvržení. + +## Krok 1: Načtěte HTML dokument, který chcete renderovat + +Prvním, co potřebujete, je instance `HTMLDocument`, která ukazuje na stránku, kterou chcete zachytit. Aspose.HTML může načíst z URL, lokálního souboru nebo surového HTML řetězce. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** Načtení dokumentu přímo z URL zajišťuje, že všechny externí zdroje (CSS, JavaScript, obrázky) jsou automaticky staženy, což vám poskytne věrné vykreslení živé stránky. + +## Krok 2: Nakonfigurujte možnosti renderování obrázku + +Dále nastavíme `ImageRenderingOptions`. Tyto možnosti řídí velikost výstupu, kvalitu a zda se použije anti‑aliasing. Jejich laděním můžete vyvážit velikost souboru vůči vizuální věrnosti. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** Pokud potřebujete náhled s vyšším rozlišením, zvyšte `Width` a `Height` úměrně. Aspose.HTML rozvržení podle toho zvětší, aniž by ztratil vektorovou kvalitu. + +## Krok 3: Inicializujte Image Renderer + +Nyní vytvoříme `ImageRenderer` předáním dokumentu a právě definovaných možností. Tento objekt je engine, který skutečně vykresluje stránku na bitmapu. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** Renderer parsuje DOM, vypočítává CSS styly, provádí layout a nakonec rasterizuje každý prvek na pixelové plátno. Vše se děje v paměti, takže nepotřebujete okno prohlížeče. + +## Krok 4: Vykreslete a uložte PNG soubor + +Nakonec zavolejte `Render` s úplnou cestou, kam chcete PNG uložit. Metoda zapíše soubor synchronně a automaticky uvolní interní zdroje. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** Po spuštění programu najdete `example.png` ve složce `output`. Otevřete jej v libovolném prohlížeči obrázků a měli byste vidět věrný snímek `https://example.com` v rozměrech 800×600 px. + +--- + +### Kompletní, připravený příklad + +Níže je kompletní program, který můžete zkopírovat a vložit do nového konzolového projektu. Obsahuje všechny `using` direktivy, ošetření chyb a komentáře pro přehlednost. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Spusťte program (`dotnet run` ze složky projektu) a získáte PNG, který odráží živou stránku. To je **how to render html** pomocí několika řádků C#. + +--- + +## Často kladené otázky a okrajové případy + +### Můžu renderovat lokální HTML soubor místo URL? + +Samozřejmě. Nahraďte URL cestou k souboru: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Co když stránka používá JavaScript k úpravě DOM po načtení? + +Aspose.HTML spouští většinu klientských skriptů, ale neposkytuje kompletní prohlížečový engine. Pro silně skriptované stránky můžete potřebovat předem vykreslit HTML (např. pomocí headless Chromium) a poté předat vzniklý markup Aspose.HTML. + +### Jak mohu řídit úroveň komprese PNG? + +`ImageRenderingOptions` obsahuje vlastnost `CompressionLevel` (0–9). Nižší čísla znamenají větší soubory, ale vyšší kvalitu. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Potřebuji průhledné pozadí — mohu to udělat? + +Ano. Před renderováním nastavte barvu pozadí na průhlednou: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Existuje způsob, jak renderovat více stránek do jednoho obrázku? + +Můžete projít kolekci URL nebo HTML řetězců, každou vykreslit na bitmapu a poté je spojit pomocí `System.Drawing` nebo `ImageSharp`. Hlavní krok **convert html to png** zůstává stejný. + +--- + +## Bonus: Vložení PNG do Web API + +Pokud chcete tuto funkci zpřístupnit přes ASP.NET Core endpoint, jednoduše vraťte bajty souboru: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Nyní může jakýkoli klient požádat o `GET /render?url=https://example.com` a získat PNG za běhu — ideální pro služby **convert webpage to image**. + +--- + +## Závěr + +Probrali jsme vše, co potřebujete vědět o **how to render html** do PNG souboru pomocí Aspose.HTML pro .NET. Od načtení vzdálené stránky, konfigurace možností renderování až po řešení běžných úskalí, kompletní příklad vám ukazuje přesně, jak **convert html to png**, **save html as png**, a dokonce vystavit logiku přes webové API. + +Vyzkoušejte to s vlastními URL, experimentujte s různými rozměry a možná automatizujte generování náhledů pro váš katalog produktů. Možnosti jsou neomezené, jakmile zvládnete základy **render html to png**. + +*Připraven na další úroveň?* Pořiďte si NuGet balíček, vložte kód do svého projektu a začněte ještě dnes převádět webové stránky na obrázky. Pokud narazíte na problémy, neváhejte zanechat komentář — šťastné renderování! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/net/canvas-and-image-manipulation/_index.md b/html/dutch/net/canvas-and-image-manipulation/_index.md index d427d1a42..e18c9f0bc 100644 --- a/html/dutch/net/canvas-and-image-manipulation/_index.md +++ b/html/dutch/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Leer hoe u SVG naar PDF converteert met Aspose.HTML voor .NET. Hoogwaardige, sta Leer hoe u SVG naar XPS converteert met Aspose.HTML voor .NET. Geef uw webontwikkeling een boost met deze krachtige bibliotheek. ### [Hoe antialiasing in C# inschakelen – Gladde randen](./how-to-enable-antialiasing-in-c-smooth-edges/) Leer hoe u antialiasing inschakelt in C# om vloeiende randen te krijgen in uw canvas- en beeldbewerkingen. +### [Canvas-tekst maken – Volledige gids voor het renderen van tekst op afbeeldingen](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Leer hoe u tekst op een canvas kunt plaatsen en renderen op afbeeldingen met Aspose.HTML voor .NET. ## Conclusie diff --git a/html/dutch/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/dutch/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..30179453e --- /dev/null +++ b/html/dutch/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,234 @@ +--- +category: general +date: 2026-01-03 +description: Maak snel canvas‑tekst en leer hoe je een tekstafbeelding rendert, tekstopties + instelt en tekst op het canvas vult, terwijl je de Linux‑tekstweergave verbetert. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: nl +og_description: Maak canvas-tekst met Aspose HTML, leer hoe je tekstafbeeldingen rendert, + stel tekstopties in en verbeter de tekstkwaliteit op Linux in één tutorial. +og_title: Canvas-tekst maken – Complete rendergids +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Canvas-tekst maken – Volledige gids voor het renderen van tekst op afbeeldingen +url: /nl/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Canvas‑tekst maken – Complete Rendering‑gids + +Heb je ooit **canvas‑tekst** moeten maken, maar wist je niet hoe je scherpe glyphs op elk platform krijgt? Je bent niet de enige. Veel ontwikkelaars lopen tegen een probleem aan wanneer hun tekst er wazig uitziet op Linux, vooral bij het omzetten van HTML naar een afbeelding. + +In deze tutorial lopen we een praktische oplossing door die niet alleen **tekst‑afbeelding renderen** op een Aspose HTML‑canvas mogelijk maakt, maar je ook laat zien hoe je **tekstopties instelt**, `FillText` correct gebruikt, en **Linux‑tekst** verbetert met hinting. Aan het einde heb je een zelfstandige, uitvoerbare code‑fragment die je in elk .NET‑project kunt plaatsen. + +## Wat je zult leren + +- Hoe je een `Canvas`‑object instantiateert en voorbereidt om te tekenen. +- De rol van `TextOptions` en waarom het inschakelen van hinting belangrijk is op Linux. +- Stapsgewijze code die **canvas‑tekst vult** met gestileerde, hoogwaardige tekens. +- Veelvoorkomende valkuilen (ontbrekende hinting, verkeerd coördinatensysteem) en snelle oplossingen. +- Manieren om het voorbeeld uit te breiden: aangepaste lettertypen, kleuren en meer‑regelige tekst. + +> **Voorwaarde:** .NET 6+ (of .NET Framework 4.7.2) en het Aspose.HTML for .NET NuGet‑pakket geïnstalleerd. + +--- + +## Stap 1: Het project en de imports instellen + +Voordat we gaan tekenen, zorg ervoor dat je project naar de juiste assemblies verwijst. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro tip:** Als je op Linux werkt, voeg het `libgdiplus`‑pakket toe (`sudo apt-get install libgdiplus`) zodat GDI‑gebaseerde rendering soepel verloopt. + +--- + +## Stap 2: Een canvas maken en de grootte definiëren + +Een canvas is in wezen een off‑screen bitmap waarop je kunt schilderen. Beschouw het als je digitale tekentafel. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Waarom dit belangrijk is:** Het instellen van een solide achtergrond voorkomt transparante artefacten wanneer je later de afbeelding exporteert. + +--- + +## Stap 3: Tekstopties configureren – De sleutel tot duidelijke Linux‑tekst + +Linux‑lettertype‑rendering kan er wazig uitzien als hinting is uitgeschakeld. `TextOptions.UseHinting` vertelt de renderer om glyphs op pixelgrenzen uit te lijnen, waardoor de output dramatisch scherper wordt. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Wat gebeurt er als je dit overslaat?** Op veel Linux‑distributies zal de tekst enigszins wazig of misaligned verschijnen, vooral bij kleine lettergroottes. + +--- + +## Stap 4: Tekst op het canvas vullen + +Nu het canvas klaar is en de tekstopties zijn afgestemd, kunnen we daadwerkelijk **canvas‑tekst vullen**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Wil je aangepaste styling (kleur, lettergrootte, uitlijning), wikkel dan de aanroep in een `Font` en `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Stap 5: Het canvas exporteren als afbeeldingsbestand + +De laatste stap is het gerenderde bitmap naar schijf schrijven zodat je het resultaat kunt verifiëren. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Open `canvas-output.png` en je zou scherpe, correct gehintte tekst moeten zien — of je nu op Windows, macOS of Linux werkt. + +--- + +## Veelgestelde vragen & randgevallen + +### Hoe beïnvloedt hinting de prestaties? + +Het inschakelen van hinting voegt een verwaarloosbare overhead toe (meestal < 2 ms voor een 800×600 canvas). Het visuele voordeel weegt ruimschoots op tegen de kosten, vooral bij server‑side afbeeldingsgeneratie waar kwaliteit cruciaal is. + +### Wat als ik meer‑regelige tekst nodig heb? + +Gebruik `canvas.FillText` in een lus, waarbij je de Y‑coördinaat aanpast, of maak gebruik van de `canvas.FillText`‑overload die een `TextLayout`‑object accepteert voor automatische regelafbreking. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Kan ik een aangepast TrueType‑lettertype gebruiken? + +Absoluut. Laad het lettertype met `FontFamily` en wijs het toe aan `TextOptions.FontFamily` of direct aan de `Font` die je aan `FillText` doorgeeft. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Zorg ervoor dat het lettertype‑bestand toegankelijk is voor de runtime (plaats het in de projectmap of registreer het systeem‑breed). + +--- + +## Volledig werkend voorbeeld + +Hieronder vind je het complete, kant‑klaar‑te‑kopiëren programma dat elke stap hierboven bevat. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Verwacht resultaat:** Een PNG‑bestand genaamd `canvas-output.png` met twee regels tekst — één normaal, één vet blauw — beide scherp gerenderd dankzij hinting. + +--- + +## Conclusie + +We hebben zojuist **canvas‑tekst** vanaf nul **gemaakt**, geleerd hoe we **tekst‑afbeelding renderen** met Aspose.HTML, en ontdekt waarom **tekstopties** zoals `UseHinting` essentieel zijn om **Linux‑tekst** te **verbeteren**. Door de bovenstaande stappen te volgen kun je betrouwbaar **canvas‑tekst vullen** in elke .NET‑omgeving, of je nu thumbnails, watermerken of dynamische graphics voor web‑API's genereert. + +Klaar voor de volgende uitdaging? Probeer achtergrondgradaties toe te voegen, tekst te roteren, of te exporteren naar SVG voor vector‑perfecte schaalbaarheid. Dezelfde principes — juiste `TextOptions`, doordachte coördinatenafhandeling en nette opruiming — gelden voor alle formaten. + +Als je tegen vreemde problemen aanloopt of ideeën hebt voor uitbreidingen, laat dan een reactie achter. Veel plezier met coderen, en geniet van die razendscherpe tekens! + +--- + +*Afbeelding die een canvas met scherpe tekst illustreert (alt‑tekst: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/net/html-document-manipulation/_index.md b/html/dutch/net/html-document-manipulation/_index.md index 1736f2547..c84ab09db 100644 --- a/html/dutch/net/html-document-manipulation/_index.md +++ b/html/dutch/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Leer dynamische en webinhoud te maken met Aspose.HTML voor .NET. Versterk uw onl Leer Aspose.HTML voor .NET gebruiken. Importeer namespace, voeg HTML samen met XML en verbeter uw webontwikkelingsvaardigheden met deze uitgebreide gids. ### [Genereer XPS-documenten door XpsDevice in .NET met Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Ontgrendel het potentieel van webontwikkeling met Aspose.HTML voor .NET. Maak, converteer en manipuleer eenvoudig HTML-documenten. +### [HTML-document maken met Aspose.HTML – Stapsgewijze gids](./create-html-document-with-aspose-html-step-by-step-guide/) +Leer hoe u een HTML-document maakt met Aspose.HTML in .NET. Volg deze stapsgewijze gids met voorbeelden en tips. ## Conclusie @@ -78,4 +80,4 @@ Concluderend, als u HTML-documentmanipulatie onder de knie wilt krijgen met Aspo {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/dutch/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..078dd2454 --- /dev/null +++ b/html/dutch/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,239 @@ +--- +category: general +date: 2026-01-03 +description: Maak een HTML‑document in C# met Aspose.HTML. Leer hoe je een element + aan de body toevoegt, de lettertype‑stijl instelt en tekst in HTML opmaakt met een + eenvoudige span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: nl +og_description: Maak een HTML‑document in C# en zie hoe je een element aan de body + kunt toevoegen, de lettertype‑stijl kunt instellen en tekst‑HTML kunt opmaken met + Aspose.HTML. +og_title: HTML-document maken met Aspose.HTML – Snelle gids +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: HTML-document maken met Aspose.HTML – Stapsgewijze handleiding +url: /nl/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML-document maken met Aspose.HTML – Stapsgewijze gids + +Heb je ooit **create html document** programmatically nodig gehad en je afgevraagd waarom de output er simpel uitziet? Je bent niet de enige. In veel projecten moeten we snippets on‑the‑fly genereren — denk aan e‑mailtemplates, dynamische rapporten of kleine UI‑widgets. Het goede nieuws is dat Aspose.HTML het een fluitje van een cent maakt om **create html document** te maken, te stylen en in je pagina te plaatsen zonder ruwe strings te schrijven. + +In deze tutorial lopen we een volledig voorbeeld door dat laat zien hoe je **append element to body**, **set font style**, en **format text html** kunt gebruiken met een **create span element**. Aan het einde heb je een uitvoerbare C#‑snippet die vet‑cursieve tekst binnen een span produceert, en begrijp je de “why” achter elke aanroep. + +> **Voorvereisten** +> • .NET 6 of later (elke recente .NET runtime werkt) +> • Aspose.HTML for .NET NuGet‑pakket (`Aspose.Html`) geïnstalleerd +> • Basiskennis van C# en DOM‑concepten + +Geen andere bibliotheken zijn vereist, en de code draait op Windows, Linux of macOS. + +--- + +## Wat je gaat bouwen + +We zullen een minimaal HTML-document maken, een `` toevoegen die de zin **Bold‑Italic text** bevat, zowel **bold** als **italic** styling toepassen, en uiteindelijk **append element to body**. De uiteindelijke markup ziet er zo uit: + +```html + + + Bold‑Italic text + + +``` + +Je kunt de volledige broncode aan het einde van de gids kopiëren‑en‑plakken en direct uitvoeren. + +![Create HTML document example](image.png){alt="voorbeeld van html-document maken"} + +--- + +## Stap 1 – Initialise the HTMLDocument (de basis van **create html document**) + +Voordat we **append element to body** kunnen, hebben we een documentobject nodig om mee te werken. Aspose.HTML biedt de `HTMLDocument`‑klasse die een in‑memory DOM vertegenwoordigt. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Waarom dit belangrijk is*: Het instantieren van `HTMLDocument` geeft je een schoon canvas — zie het als een blanco blad waarop je later **format text html** zult toepassen. Zonder deze stap kun je geen knooppunten manipuleren of stijlen toepassen. + +--- + +## Stap 2 – Maak het ``‑element (**create span element**) + +Nu hebben we een container nodig voor onze gestylede tekst. Een `` is perfect omdat het een inline‑element is dat CSS kan dragen zonder de stroom te onderbreken. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Pro tip*: Als je ooit meerdere stukjes tekst moet invoegen, kun je hetzelfde `spanElement` hergebruiken door het te clonen (`spanElement.Clone(true)`) en elke keer de `InnerHtml` aan te passen. + +--- + +## Stap 3 – Pas **set font style** toe voor vet **en** cursief + +Aspose.HTML biedt een sterk getypeerd `Style`‑object. Om **set font style** toe te passen combineren we `WebFontStyle.Bold` en `WebFontStyle.Italic` met een bitwise OR. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Waarom de enum gebruiken*: De `WebFontStyle`‑enum mappt direct naar CSS‑eigenschappen (`font-weight` en `font-style`). Het gebruik van de enum voorkomt typefouten en zorgt ervoor dat de gegenereerde CSS geldig is — essentieel voor betrouwbare **format text html**. + +--- + +## Stap 4 – **Append element to body** en finaliseer het document + +Met de gestylede span klaar, is de laatste stap om deze in de ``‑tag te plaatsen. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +Op dit punt ziet de DOM‑boom er precies uit als de eerder getoonde snippet. Als je `htmlDocument.InnerHtml` inspecteert, zie je de volledig gevormde markup. + +--- + +## Stap 5 – Sla het document op of render het + +Je kunt de HTML naar een bestand schrijven, naar een browser streamen, of renderen naar PDF/Image met de rendering‑engine van Aspose.HTML. Hier is de eenvoudigste bestands‑outputoptie: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Open `output.html` in een willekeurige browser en je zou **Bold‑Italic text** precies zoals bedoeld moeten zien. + +--- + +## Volledig werkend voorbeeld + +Alles bij elkaar, hier is het volledige, kant‑klaar programma: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Verwachte output** – het openen van `output.html` toont: + +> **Bold‑Italic text** (vet en cursief) + +Als je de bron inspecteert, zie je de exacte HTML die we bespraken, wat bevestigt dat de **format text html** stap geslaagd is. + +--- + +## Veelgestelde vragen & randgevallen + +### 1. Wat als ik meer dan twee stijlen nodig heb? + +`WebFontStyle` is een flags‑enum, dus je kunt elk aantal stijlen combineren (bijv. `Underline`). Blijf gewoon de `|`‑operator gebruiken: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Kan ik de kleur tegelijk wijzigen? + +Zeker. Het `Style`‑object heeft een `Color`‑eigenschap: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Hoe kan ik **append element to body** meerdere keren? + +Maak een lus, clone de gestylede span, pas de tekst aan, en voeg elke clone toe: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Wat als ik **format text html** binnen een `
` nodig heb in plaats daarvan? + +Dezelfde API werkt voor elk element. Vervang gewoon `CreateElement("span")` door `CreateElement("div")` en pas de stijlen aan indien nodig. + +### 5. Compatibiliteitszorgen? + +Aspose.HTML richt zich op .NET Standard 2.0+, dus de code draait op .NET Core, .NET Framework en .NET 5/6+. Er zijn geen extra browser‑specifieke shims nodig. + +--- + +## Pro‑tips & valkuilen + +- **Pro tip:** Stel `InnerHtml` altijd *na* het configureren van de stijl in. Het eerst wijzigen van de binnenste inhoud kan in sommige browsers een re‑layout veroorzaken; dit na het stylen doen voorkomt onnodig werk. +- **Let op:** Het mengen van `WebFontStyle` met inline CSS‑strings. Als je later handmatig `spanElement.SetAttribute("style", "...")` instelt, overschrijf je de door de enum gegenereerde stijlen. Houd je aan één methode. +- **Prestatienota:** Voor grote documenten vermindert batch‑creatie (alle knooppunten eerst maken, daarna in één keer toevoegen) het aantal DOM‑mutaties en versnelt het renderen. + +--- + +## Conclusie + +Je weet nu hoe je **create html document** kunt maken met Aspose.HTML, **append element to body**, **set font style**, en **format text html** kunt gebruiken met een **create span element**. Het voorbeeld is volledig functioneel, en de uitleg behandelt zowel het “hoe” als het “waarom”, waardoor het gemakkelijk is het patroon aan te passen aan complexere scenario's. + +Klaar voor de volgende stap? Probeer de `` te vervangen door een `

` met meerdere CSS‑klassen, of render dezelfde DOM naar een PDF met `Document` → `PdfSaveOptions`. Dezelfde principes gelden, en je zult Aspose.HTML een betrouwbare partner vinden voor elke server‑side HTML‑generatietaak. + +Heb je vragen, of een slimme truc ontdekt? Laat een reactie achter—happy coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/net/html-extensions-and-conversions/_index.md b/html/dutch/net/html-extensions-and-conversions/_index.md index 17408c25e..12ae9c569 100644 --- a/html/dutch/net/html-extensions-and-conversions/_index.md +++ b/html/dutch/net/html-extensions-and-conversions/_index.md @@ -37,6 +37,8 @@ Bent u klaar om te beginnen? Aspose.HTML voor .NET tutorials zijn geschikt voor Aspose.HTML voor .NET is niet zomaar een bibliotheek; het is een game-changer in de wereld van webontwikkeling. Het biedt een uitgebreid scala aan functies en tools die uw HTML-gerelateerde taken stroomlijnen. Aan het einde van deze tutorials bent u uitgerust met de kennis en vaardigheden om het potentieel van Aspose.HTML voor .NET te maximaliseren. ## HTML-extensies en conversiehandleidingen +### [PDF maken van URL – Complete C#-gids](./create-pdf-from-url-complete-c-guide/) +Leer hoe u met Aspose.HTML voor .NET een PDF genereert vanuit een URL met een volledige C#-stapsgewijze handleiding. ### [Converteer HTML naar PDF in .NET met Aspose.HTML](./convert-html-to-pdf/) Converteer moeiteloos HTML naar PDF met Aspose.HTML voor .NET. Volg onze stapsgewijze handleiding en ontketen de kracht van HTML-naar-PDF-conversie. ### [Converteer EPUB naar afbeelding in .NET met Aspose.HTML](./convert-epub-to-image/) @@ -74,4 +76,4 @@ Dus waar wacht u nog op? Laten we beginnen aan deze spannende reis om HTML-exten {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/dutch/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..845454e1f --- /dev/null +++ b/html/dutch/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,200 @@ +--- +category: general +date: 2026-01-03 +description: Maak snel een PDF van een URL in C#. Leer hoe je HTML naar PDF converteert, + een webpagina opslaat als PDF, en een PDF genereert vanuit HTML met eenvoudige code. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: nl +og_description: Maak snel een PDF van een URL in C#. Deze tutorial laat zien hoe je + HTML naar PDF converteert, een webpagina opslaat als PDF, en een PDF genereert vanuit + HTML met behulp van Aspose.HTML. +og_title: PDF maken van URL – Complete C# Gids +tags: +- pdf +- csharp +- html +- conversion +title: PDF maken van URL – Complete C#‑gids +url: /nl/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# PDF maken van URL – Complete C# Gids + +Heb je ooit **PDF maken van URL** moeten doen, maar wist je niet welke bibliotheek je moest kiezen? Je bent niet de enige. Veel ontwikkelaars lopen tegen die muur aan wanneer ze een webpagina willen archiveren, facturen willen genereren vanuit een online sjabloon, of simpelweg een “download als PDF”‑knop op hun site willen aanbieden. + +In deze tutorial lopen we het volledige proces door van **HTML naar PDF converteren** met C#. Je ziet hoe je **webpagina opslaat als PDF**, hoe je **PDF genereert vanuit HTML**, en waarom de `Aspose.HTML for .NET`‑bibliotheek het een fluitje van een cent maakt. Aan het einde heb je een kant‑klaar‑snippet die elke openbare URL ophaalt, rendert en een PDF‑bestand naar schijf schrijft. + +> **Pro tip:** Als je achter een corporate proxy werkt, zorg er dan voor dat de `HTMLDocument`‑constructor de juiste `WebRequest`‑instellingen krijgt — anders faalt de download stilletjes. + +## Wat je nodig hebt + +- **.NET 6.0** of later (de code werkt ook op .NET Framework 4.7+). +- **Aspose.HTML for .NET** NuGet‑package (`Aspose.HTML`). +- Een schrijfbare map op schijf waar de PDF wordt opgeslagen. +- Basiskennis van C# (geen geavanceerde trucjes nodig). + +Geen extra configuratiebestanden, geen verborgen magie — slechts een paar regels schone, gedocumenteerde code. + +![Create PDF from URL example](image.png){alt="pdf maken van url"} + +## Stap 1: Installeer het Aspose.HTML NuGet‑package + +Open je terminal of Package Manager Console en voer uit: + +```bash +dotnet add package Aspose.HTML +``` + +> **Waarom deze stap belangrijk is:** De klassen `HTMLDocument`, `PdfSaveOptions` en `PdfConverter` bevinden zich in de `Aspose.Html`‑namespace. Zonder het package weet de compiler niet wat deze types zijn. + +## Stap 2: Laad de webpagina in een `HTMLDocument` + +De eerste echte actie is het ophalen van de externe HTML. `HTMLDocument` kan direct een URL accepteren en regelt redirects en content‑type detectie voor je. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Wat gebeurt er?** +- `HTMLDocument` parseert de opgehaalde markup naar een DOM‑boom, net zoals een browser dat zou doen. +- Alle externe CSS, afbeeldingen of scripts die via absolute URL’s worden aangeroepen, worden ook gedownload, zodat de PDF eruitziet als de live pagina. + +## Stap 3: Configureer PDF‑exportopties (marges, paginagrootte, enz.) + +Voordat we het document aan de converter geven, stemmen we de output af. Het `PdfSaveOptions`‑object laat je marges, paginarichting en zelfs de PDF‑versie bepalen. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Waarom marges instellen?** +Een strak gepakte PDF kan kop‑ of voetteksten afsnijden, vooral op mobiel‑geoptimaliseerde sites. Een bescheiden marge zorgt ervoor dat alles leesbaar blijft. + +## Stap 4: Converteer het HTML‑document direct naar PDF + +Nu het zware werk. `PdfConverter.ConvertHtml` streamt de gerenderde pagina rechtstreeks naar een PDF‑bestand. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Onder de motorkap:** +- Aspose rendert de DOM met zijn eigen layout‑engine (geen Chromium nodig). +- De gerenderde bitmap wordt vervolgens gerasterd naar PDF‑vectoren waar mogelijk, waardoor tekst selecteerbaar blijft. + +## Stap 5: Controleer het resultaat en behandel randgevallen + +Een snelle sanity‑check bespaart later hoofdpijn. Open het gegenereerde bestand; je zou de live pagina moeten zien, met toegepaste marges en alle afbeeldingen intact. + +### Veelvoorkomende valkuilen en hoe ze te vermijden + +| Issue | Cause | Fix | +|-------|-------|-----| +| **Lege PDF** | URL geblokkeerd door firewall of vereist authenticatie | Geef een aangepaste `WebRequest` met inloggegevens mee aan de `HTMLDocument`‑constructor | +| **Ontbrekende CSS** | Externe stylesheet gebruikt relatieve URL’s | Zorg dat de basis‑URL correct is (Aspose handelt dit af, maar controleer redirects) | +| **Groot bestand** | Hoge resolutie‑afbeeldingen niet verkleind | Gebruik `PdfSaveOptions.ImageCompression` om ingesloten afbeeldingen JPEG‑gecomprimeerd op te slaan | +| **Unicode‑tekens vervormd** | Lettertype niet ingesloten | Stel `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` in | + +## Volledig werkend voorbeeld (Kopieer‑en‑plak klaar) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Voer het programma uit (`dotnet run`) en je vindt `example.pdf` in `C:\Temp`. Open het met een PDF‑viewer, en je zou een exacte replica van `https://example.com` moeten zien met de door jou gedefinieerde marges. + +## Conclusie + +We hebben je zojuist laten zien **hoe je PDF maakt van URL** met C#. De stappen omvatten het laden van een webpagina, het configureren van marges en het converteren van de DOM naar een PDF‑bestand — alles wat je nodig hebt om **HTML naar PDF te converteren**, **webpagina op te slaan als PDF**, en **PDF te genereren vanuit HTML** op een productie‑klare manier. + +Voel je vrij om te experimenteren: wijzig de paginagrootte naar `Letter`, wissel de oriëntatie naar landscape, of voeg een header/footer toe met `PdfPageEventHandler`. Hetzelfde patroon werkt voor dynamische pagina’s, login‑beveiligde portals (geef gewoon cookies mee), of zelfs batch‑verwerking van een lijst URL’s. + +**Volgende stappen die je kunt verkennen** + +- **HTML to PDF C#** met asynchrone conversie voor high‑throughput services. +- Metadata (**author**, **title**) inbedden in de PDF via `PdfDocumentInfo`. +- **Aspose.PDF** gebruiken om meerdere PDF’s, gegenereerd vanuit verschillende URL’s, samen te voegen tot één rapport. + +Heb je vragen? Laat een reactie achter hieronder, en happy coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/net/rendering-html-documents/_index.md b/html/dutch/net/rendering-html-documents/_index.md index b90380226..8389b923e 100644 --- a/html/dutch/net/rendering-html-documents/_index.md +++ b/html/dutch/net/rendering-html-documents/_index.md @@ -52,9 +52,14 @@ Leer hoe u renderingtime-outs effectief kunt beheren in Aspose.HTML voor .NET. V Leer hoe u meerdere HTML-documenten kunt renderen met Aspose.HTML voor .NET. Verbeter uw documentverwerkingsmogelijkheden met deze krachtige bibliotheek. ### [SVG-document renderen als PNG in .NET met Aspose.HTML](./render-svg-doc-as-png/) Ontgrendel de kracht van Aspose.HTML voor .NET! Leer hoe u moeiteloos SVG Doc als PNG kunt renderen. Duik in stapsgewijze voorbeelden en FAQ's. Ga nu aan de slag! +### [HTML renderen – Complete gids met aangepaste resourcehandler](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Leer hoe u HTML kunt renderen met een aangepaste resourcehandler in Aspose.HTML voor .NET. +### [HTML renderen naar PNG – Complete stap‑voor‑stap gids](./how-to-render-html-to-png-complete-step-by-step-guide/) +Leer hoe u HTML naar PNG kunt renderen met Aspose.HTML voor .NET in een volledige stap‑voor‑stap handleiding. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/dutch/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..5213ba6dc --- /dev/null +++ b/html/dutch/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,218 @@ +--- +category: general +date: 2026-01-03 +description: Hoe HTML te renderen naar afbeeldingen met Aspose.HTML. Leer html‑naar‑afbeeldingconversie, + aangepaste resource‑handler en converteer html naar bitmap in C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: nl +og_description: Hoe HTML te renderen naar afbeeldingen met Aspose.HTML. Beheers html‑naar‑afbeeldingconversie, + aangepaste resourcehandler en converteer HTML naar bitmap in C#. +og_title: Hoe HTML te renderen – Complete gids met aangepaste resourcehandler +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Hoe HTML te renderen – Complete gids met aangepaste resourcehandler +url: /nl/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Hoe HTML te Renderen – Complete Gids met Custom Resource Handler + +Heb je je ooit afgevraagd **hoe HTML te renderen** naar een bitmap zonder zelf een browserengine te jongleren? Je bent niet de enige. Veel ontwikkelaars lopen tegen een muur aan wanneer ze een snelle screenshot van een dynamische pagina nodig hebben voor e‑mails, rapporten of miniatuurafbeeldingen. Het goede nieuws? Met Aspose.HTML kun je elke HTML‑string omzetten naar een afbeelding—geen UI, geen headless Chrome, alleen pure C#‑code. + +In deze tutorial lopen we een praktisch **html to image conversion** scenario door, laten we zien hoe je een **custom resource handler** implementeert, en demonstreren we de volledige **convert html to bitmap** workflow. Aan het einde heb je een herbruikbare methode die HTML rendert naar een afbeelding volledig in het geheugen, klaar voor verdere verwerking of opslag. + +> **Voorvereisten** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * Basic familiarity with C# and streams + +Als je die basis hebt, laten we dan duiken in. + +--- + +## Hoe HTML te Renderen met Aspose.HTML + +De kern van elke **render html to image** operatie is de `ImageRenderer`‑klasse. Deze neemt een `HTMLDocument` en produceert rastergrafieken (PNG, JPEG, BMP, enz.). Hieronder staat het minimale skelet: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Dat fragment werkt, maar je krijgt alleen een bestand op schijf als je de renderer vertelt waarheen te schrijven. Om alles in het geheugen te houden—en om elke resource (afbeeldingen, CSS, lettertypen) die de HTML opvraagt te onderscheppen—pluggen we een **custom resource handler** in. + +## Implementeren van een Custom Resource Handler + +Een **custom resource handler** geeft je volledige controle over hoe externe assets worden opgehaald en opgeslagen. In veel gevallen wil je die assets in het geheugen vastleggen voor later gebruik (bijv. bundelen in een ZIP). De handler erft van `ResourceHandler` en overschrijft `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Waarom zou je het doen?** +* **Performance** – geen schijf‑I/O, alles blijft in RAM. +* **Security** – je bepaalt welke URL's mogen worden opgehaald. +* **Extensibility** – je kunt resources cachen, hernoemen, of in andere containers insluiten. + +## HTML naar Bitmap Converteren met ImageRenderer + +Nu combineren we de onderdelen: laad de HTML, koppel `MyHandler`, en render. De volgende methode retourneert een `MemoryStream` die een PNG‑afbeelding van de gerenderde pagina bevat. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Verwachte Output + +If you call the method like this: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +You’ll get a `demo.png` that looks roughly like: + +![voorbeeld van hoe html te renderen output](https://example.com/assets/render-html-output.png "voorbeeld van hoe html te renderen output") + +*Alt‑tekst:* **voorbeeld van hoe html te renderen output** – een klein bitmap‑beeld dat de gerenderde HTML‑snippet toont. + +## HTML naar Afbeelding Conversie – Veelvoorkomende Valkuilen & Tips + +### 1. Relatieve URL's & Base‑tags +Als je HTML externe CSS of afbeeldingen met relatieve paden verwijst, kent de renderer de basismap niet. Kies één van de volgende opties: + +* Voeg een ``‑tag toe, of +* Los URL's op binnen `MyHandler.HandleResource` en lever de juiste stream. + +### 2. Beschikbaarheid van Lettertypen +Aspose.HTML gebruikt standaard systeemlettertypen. Voor aangepaste web‑lettertypen (`@font-face`) zorg je ervoor dat de lettertypebestanden toegankelijk zijn via de handler, of embed ze als base64‑data‑URI's. + +### 3. Grote Pagina's +Rendering a very tall page can consume significant memory. You can limit the viewport size: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Afbeeldingsformaten +`renderer.Save(stream, ImageFormat.Jpeg)` werkt even goed als je JPEG‑compressie nodig hebt. Vervang `ImageFormat.Png` door `ImageFormat.Bmp` voor een echte **convert html to bitmap** output. + +## HTML Renderen naar Afbeelding – Geavanceerde Scenario's + +### A. Meerdere Pagina's Renderen +If the HTML contains page breaks (`
`), you can iterate over pages: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. De Afbeelding Insluiten in een PDF +Combine with `Aspose.Pdf` to embed the PNG directly: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +## Conclusie + +We hebben **hoe HTML te renderen** naar een bitmap volledig in het geheugen behandeld, de basisprincipes van **html to image conversion** verkend, een **custom resource handler** gebouwd, en laten zien hoe je **convert html to bitmap** kunt uitvoeren met Aspose.HTML’s `ImageRenderer`. De aanpak is snel, thread‑safe en gemakkelijk uitbreidbaar voor real‑world projecten—van het genereren van e‑mail‑miniatuurafbeeldingen tot geautomatiseerde rapportcreatie. + +Klaar voor de volgende stap? Probeer de PNG‑output te vervangen door een JPEG, experimenteer met verschillende paginagroottes, of koppel de handler aan een cache‑laag zodat herhaalde renders direct zijn. De mogelijkheden zijn eindeloos wanneer je elke resource zelf beheert. + +Heb je vragen of een cool use‑case die je wilt delen? Laat een reactie achter hieronder, en happy rendering! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/dutch/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..e36ce39a7 --- /dev/null +++ b/html/dutch/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: Leer hoe je HTML naar PNG rendert, een webpagina naar een afbeelding + converteert en HTML opslaat als PNG met Aspose.HTML in C#. Snel, betrouwbaar en + klaar voor productie. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: nl +og_description: Leer hoe je HTML naar PNG rendert, een webpagina naar een afbeelding + converteert en HTML opslaat als PNG met een volledig C#‑voorbeeld met Aspose.HTML. +og_title: Hoe HTML naar PNG te renderen – Complete gids +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Hoe HTML naar PNG renderen – Complete stap‑voor‑stap gids +url: /nl/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Hoe HTML naar PNG te Renderen – Complete Stapsgewijze Gids + +Als je op zoek bent naar **how to render html** naar een afbeelding, ben je hier aan het juiste adres. Of je nu **convert webpage to image** nodig hebt voor thumbnails, een pagina wilt archiveren als PNG, of social‑media previews on the fly wilt genereren, het proces kan verrassend eenvoudig zijn met de juiste bibliotheek. + +In deze tutorial lopen we stap voor stap door hoe je elke live URL omzet naar een PNG‑bestand met Aspose.HTML voor .NET. Je ziet een volledige, uitvoerbare code‑snippet, leert waarom elke instelling belangrijk is, en ontdekt een paar trucjes voor het omgaan met randgevallen. Aan het einde kun je **save html as png**, **convert html to png** uitvoeren, en zelfs het resultaat in een rapport of e‑mail embedden zonder moeite. + +## Vereisten – Wat je nodig hebt + +- **.NET 6.0** of later (de code werkt ook met .NET Core en .NET Framework) +- NuGet‑pakket **Aspose.HTML for .NET** (`Aspose.Html`) geïnstalleerd +- Een IDE naar keuze (Visual Studio, Rider, of VS Code) +- Een beschrijfbare map waar de PNG wordt opgeslagen + +Geen extra configuratie vereist—Aspose.HTML verzorgt het zware werk van het parseren van de pagina, toepassen van CSS, en rasteren van de layout. + +## Stap 1: Laad het HTML‑document dat je wilt renderen + +Het eerste dat je nodig hebt is een `HTMLDocument`‑instance die naar de pagina wijst die je wilt vastleggen. Aspose.HTML kan laden vanaf een URL, een lokaal bestand, of een ruwe HTML‑string. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** Het document direct vanaf de URL laden zorgt ervoor dat alle externe bronnen (CSS, JavaScript, afbeeldingen) automatisch worden opgehaald, waardoor je een getrouwe weergave van de live pagina krijgt. + +## Stap 2: Configureer afbeeldingsrenderopties + +Vervolgens stellen we `ImageRenderingOptions` in. Deze opties bepalen de uitvoergrootte, kwaliteit, en of anti‑aliasing wordt toegepast. Het afstemmen ervan laat je de bestandsgrootte balanceren tegen visuele getrouwheid. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** Als je een thumbnail met hogere resolutie nodig hebt, verhoog dan `Width` en `Height` proportioneel. Aspose.HTML schaalt de layout dienovereenkomstig zonder verlies van vectorkwaliteit. + +## Stap 3: Initialise de Image Renderer + +Nu maken we een `ImageRenderer` aan door het document en de opties die we zojuist hebben gedefinieerd door te geven. Dit object is de engine die de pagina daadwerkelijk op een bitmap tekent. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** De renderer parseert de DOM, berekent CSS‑stijlen, voert layout uit, en rastert uiteindelijk elk element op een pixel‑canvas. Dit alles gebeurt in het geheugen, dus je hebt geen browservenster nodig. + +## Stap 4: Render en sla het PNG‑bestand op + +Tot slot roep je `Render` aan met het volledige pad waar je de PNG wilt opslaan. De methode schrijft het bestand synchroon weg en maakt interne bronnen automatisch vrij. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** Na het uitvoeren van het programma vind je `example.png` in de `output`‑map. Open het met een willekeurige afbeeldingsviewer en je zou een getrouwe weergave van `https://example.com` moeten zien op 800×600 px. + +--- + +### Volledig, kant‑klaar voorbeeld + +Hieronder staat het volledige programma dat je kunt copy‑pasten in een nieuw console‑project. Het bevat alle `using`‑directives, foutafhandeling, en commentaren voor duidelijkheid. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Voer het programma uit (`dotnet run` vanuit de projectmap) en je krijgt een PNG die de live pagina weerspiegelt. Dat is **how to render html** met slechts een paar regels C#. + +--- + +## Veelgestelde vragen & randgevallen + +### Kan ik een lokaal HTML‑bestand renderen in plaats van een URL? + +Zeker. Vervang de URL door een bestandspad: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Wat als de pagina JavaScript gebruikt om de DOM na het laden te wijzigen? + +Aspose.HTML voert de meeste client‑side scripts uit, maar biedt geen volledige browser‑engine. Voor sterk gescripte pagina's moet je mogelijk de HTML vooraf renderen (bijv. met een headless Chromium‑instance) en vervolgens de resulterende markup aan Aspose.HTML voeren. + +### Hoe regel ik het PNG‑compressieniveau? + +`ImageRenderingOptions` bevat een `CompressionLevel`‑eigenschap (0–9). Lagere getallen betekenen grotere bestanden maar hogere kwaliteit. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Ik heb een transparante achtergrond nodig—kan ik dat doen? + +Ja. Stel de achtergrondkleur in op transparant vóór het renderen: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Is er een manier om meerdere pagina's in één afbeelding te renderen? + +Je kunt over een collectie URL's of HTML‑strings itereren, elk renderen naar een bitmap, en ze vervolgens samenvoegen met `System.Drawing` of `ImageSharp`. De kernstap **convert html to png** blijft hetzelfde. + +--- + +## Bonus: PNG embedden in een Web‑API + +Als je deze functionaliteit via een ASP.NET Core‑endpoint wilt aanbieden, retourneer dan eenvoudigweg de bestandsbytes: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Nu kan elke client `GET /render?url=https://example.com` aanvragen en direct een PNG ontvangen—perfect voor **convert webpage to image** services. + +--- + +## Conclusie + +We hebben alles behandeld wat je moet weten over **how to render html** naar een PNG‑bestand met Aspose.HTML voor .NET. Van het laden van een externe pagina, het configureren van renderopties, tot het omgaan met veelvoorkomende valkuilen, het volledige voorbeeld laat je precies zien hoe je **convert html to png**, **save html as png** uitvoert, en zelfs de logica via een web‑API beschikbaar maakt. + +Probeer het met je eigen URL's, experimenteer met verschillende afmetingen, en automatiseer eventueel thumbnail‑generatie voor je productcatalogus. De mogelijkheden zijn eindeloos zodra je de basis van **render html to png** onder de knie hebt. + +*Klaar om een stap hoger te gaan?* Pak het NuGet‑pakket, voeg de code toe aan je project, en begin vandaag nog met het converteren van webpagina's naar afbeeldingen. Als je ergens tegenaan loopt, laat dan gerust een reactie achter—veel renderplezier! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/canvas-and-image-manipulation/_index.md b/html/english/net/canvas-and-image-manipulation/_index.md index 658c74f8b..e4adbdfc8 100644 --- a/html/english/net/canvas-and-image-manipulation/_index.md +++ b/html/english/net/canvas-and-image-manipulation/_index.md @@ -37,12 +37,19 @@ To get you started, we have a comprehensive list of tutorials. These step-by-ste ## Canvas and Image Manipulation Tutorials ### [Manipulating Canvas in .NET with Aspose.HTML](./manipulating-canvas/) Learn how to manipulate HTML documents with Aspose.HTML for .NET. This comprehensive tutorial covers the basics, prerequisites, and step-by-step examples. + +### [Create canvas text – Full Guide to Rendering Text on Images](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Learn how to render text onto images using canvas with Aspose.HTML for .NET in this comprehensive step-by-step guide. + ### [Convert SVG to Image in .NET with Aspose.HTML](./convert-svg-to-image/) Convert SVG to Images in .NET with Aspose.HTML. A Comprehensive Tutorial for Developers. Easily transform SVG documents into JPEG, PNG, BMP, and GIF formats. + ### [Convert SVG to PDF in .NET with Aspose.HTML](./convert-svg-to-pdf/) Learn how to convert SVG to PDF with Aspose.HTML for .NET. High-quality, step-by-step tutorial for efficient document processing. + ### [Convert SVG to XPS in .NET with Aspose.HTML](./convert-svg-to-xps/) Learn how to convert SVG to XPS using Aspose.HTML for .NET. Boost your web development with this powerful library. + ### [How to Enable Antialiasing in C# – Smooth Edges](./how-to-enable-antialiasing-in-c-smooth-edges/) Learn how to enable antialiasing in C# to achieve smooth edges in graphics rendering using Aspose.HTML for .NET. diff --git a/html/english/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/english/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..16e258acf --- /dev/null +++ b/html/english/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,234 @@ +--- +category: general +date: 2026-01-03 +description: Create canvas text quickly and learn how to render text image, set text + options, and fill text canvas while improving Linux text rendering. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: en +og_description: Create canvas text with Aspose HTML, learn to render text image, set + text options, and improve Linux text quality in a single tutorial. +og_title: Create canvas text – Complete Rendering Guide +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Create canvas text – Full Guide to Rendering Text on Images +url: /net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Create canvas text – Complete Rendering Guide + +Ever needed to **create canvas text** but weren’t sure how to get crisp glyphs on every platform? You’re not alone. Many developers hit a snag when their text looks fuzzy on Linux, especially when converting HTML to an image. + +In this tutorial we’ll walk through a practical solution that not only lets you **render text image** onto an Aspose HTML canvas but also shows you how to **set text options**, use `FillText` correctly, and **improve Linux text** rendering with hinting. By the end you’ll have a self‑contained, runnable snippet you can drop into any .NET project. + +## What You’ll Learn + +- How to instantiate a `Canvas` object and prepare it for drawing. +- The role of `TextOptions` and why enabling hinting matters on Linux. +- Step‑by‑step code that **fill text canvas** with styled, high‑quality characters. +- Common pitfalls (missing hinting, wrong coordinate system) and quick fixes. +- Ways to extend the example: custom fonts, colors, and multi‑line text. + +> **Prerequisite:** .NET 6+ (or .NET Framework 4.7.2) and the Aspose.HTML for .NET NuGet package installed. + +--- + +## Step 1: Set Up the Project and Imports + +Before we start drawing, make sure your project references the right assemblies. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro tip:** If you’re on Linux, add the `libgdiplus` package (`sudo apt-get install libgdiplus`) so GDI‑based rendering works smoothly. + +--- + +## Step 2: Create a Canvas and Define Its Size + +A canvas is essentially an off‑screen bitmap you can paint on. Think of it as your digital drawing board. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Why this matters:** Setting a solid background prevents transparent artifacts when you later export the image. + +--- + +## Step 3: Configure Text Options – The Key to Clear Linux Text + +Linux font rendering can look blurry if hinting is disabled. `TextOptions.UseHinting` tells the renderer to align glyphs to pixel boundaries, dramatically sharpening the output. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **What if you skip this?** On many Linux distributions the text will appear slightly fuzzy or misaligned, especially at small font sizes. + +--- + +## Step 4: Fill Text onto the Canvas + +Now that the canvas is ready and the text options are tuned, we can actually **fill text canvas**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +If you want custom styling (color, font size, alignment), wrap the call in a `Font` and `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Step 5: Export the Canvas as an Image File + +The final step is to write the rendered bitmap to disk so you can verify the result. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Open `canvas-output.png` and you should see sharp, correctly hinted text—whether you’re on Windows, macOS, or Linux. + +--- + +## Common Questions & Edge Cases + +### How does hinting affect performance? + +Enabling hinting adds a negligible overhead (usually < 2 ms for an 800×600 canvas). The visual gain far outweighs the cost, especially for server‑side image generation where quality is paramount. + +### What if I need multi‑line text? + +Use `canvas.FillText` in a loop, adjusting the Y‑coordinate, or employ `canvas.FillText` overload that accepts a `TextLayout` object for automatic line‑breaking. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Can I use a custom TrueType font? + +Absolutely. Load the font with `FontFamily` and assign it to `TextOptions.FontFamily` or directly to the `Font` you pass to `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Make sure the font file is accessible to the runtime (place it in the project folder or register it system‑wide). + +--- + +## Full Working Example + +Below is the complete, copy‑paste‑ready program that incorporates every step above. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Expected output:** A PNG file named `canvas-output.png` containing two lines of text—one plain, one bold blue—both rendered crisply thanks to hinting. + +--- + +## Conclusion + +We’ve just **created canvas text** from scratch, learned how to **render text image** with Aspose.HTML, and discovered why **set text options** like `UseHinting` are essential to **improve Linux text** quality. By following the steps above you can reliably **fill text canvas** in any .NET environment, whether you’re generating thumbnails, watermarks, or dynamic graphics for web APIs. + +Ready for the next challenge? Try adding background gradients, rotating text, or exporting to SVG for vector‑perfect scaling. The same principles—proper `TextOptions`, thoughtful coordinate handling, and clean disposal—apply across formats. + +If you ran into any quirks or have ideas for extensions, drop a comment. Happy coding, and enjoy those razor‑sharp characters! + +--- + +*Image illustrating a canvas with crisp text (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/html-document-manipulation/_index.md b/html/english/net/html-document-manipulation/_index.md index 122d86f75..8bfaca653 100644 --- a/html/english/net/html-document-manipulation/_index.md +++ b/html/english/net/html-document-manipulation/_index.md @@ -59,6 +59,8 @@ Unlock the potential of Aspose.HTML for .NET with our comprehensive guide. Learn Learn how to harness the power of Aspose.HTML for .NET. Boost your web development with HTML manipulation and rendering. ### [Creating a Document in .NET with Aspose.HTML](./creating-a-document/) Unleash the Power of Aspose.HTML for .NET. Learn to Create, Manipulate, and Optimize HTML and SVG Documents with Ease. Explore Step-By-Step Examples and FAQs. +### [Create HTML Document with Aspose.HTML – Step‑by‑Step Guide](./create-html-document-with-aspose-html-step-by-step-guide/) +Learn how to create HTML documents using Aspose.HTML for .NET with a detailed step‑by‑step guide and practical examples. ### [Editing a Document in .NET with Aspose.HTML](./editing-a-document/) Create captivating web content with Aspose.HTML for .NET. Learn how to manipulate HTML, CSS, and more. ### [Saving a Document in .NET with Aspose.HTML](./saving-a-document/) @@ -78,4 +80,4 @@ In conclusion, if you want to master HTML document manipulation using Aspose.HTM {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/english/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..04cc4c0c7 --- /dev/null +++ b/html/english/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,239 @@ +--- +category: general +date: 2026-01-03 +description: Create HTML document in C# using Aspose.HTML. Learn how to append element + to body, set font style, and format text HTML with a simple span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: en +og_description: Create HTML document in C# and see how to append element to body, + set font style, and format text HTML using Aspose.HTML. +og_title: Create HTML Document with Aspose.HTML – Quick Guide +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Create HTML Document with Aspose.HTML – Step‑by‑Step Guide +url: /net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Create HTML Document with Aspose.HTML – Step‑by‑Step Guide + +Ever needed to **create html document** programmatically and wondered why the output looks plain? You're not the only one. In many projects we have to generate snippets on‑the‑fly—think email templates, dynamic reports, or tiny UI widgets. The good news is that Aspose.HTML makes it a breeze to **create html document**, style it, and drop it into your page without writing raw strings. + +In this tutorial we’ll walk through a complete example that shows how to **append element to body**, **set font style**, and **format text html** using a **create span element**. By the end you’ll have a runnable C# snippet that produces bold‑italic text inside a span, and you’ll understand the “why” behind each call. + +> **Prerequisites** +> • .NET 6 or later (any recent .NET runtime works) +> • Aspose.HTML for .NET NuGet package (`Aspose.Html`) installed +> • Basic familiarity with C# and DOM concepts + +No other libraries are required, and the code runs on Windows, Linux, or macOS. + +--- + +## What You’ll Build + +We’ll create a minimal HTML document, add a `` that contains the phrase **Bold‑Italic text**, apply both **bold** and **italic** styling, and finally **append element to body**. The final markup looks like this: + +```html + + + Bold‑Italic text + + +``` + +You can copy‑paste the complete source at the end of the guide and run it straight away. + +--- + +![Create HTML document example](image.png){alt="create html document example"} + +--- + +## Step 1 – Initialise the HTMLDocument (the foundation of **create html document**) + +Before we can **append element to body**, we need a document object to work with. Aspose.HTML provides the `HTMLDocument` class that represents an in‑memory DOM. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Why this matters*: Instantiating `HTMLDocument` gives you a clean canvas—think of it as a blank sheet where you’ll later **format text html**. Without this step you can’t manipulate nodes or apply styles. + +--- + +## Step 2 – Create the `` element (**create span element**) + +Now we need a container for our styled text. A `` is perfect because it’s an inline element that can carry CSS without breaking the flow. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Pro tip*: If you ever need to insert multiple pieces of text, you can reuse the same `spanElement` by cloning it (`spanElement.Clone(true)`) and changing the `InnerHtml` each time. + +--- + +## Step 3 – Apply **set font style** for bold **and** italic + +Aspose.HTML exposes a strongly‑typed `Style` object. To **set font style** we combine `WebFontStyle.Bold` and `WebFontStyle.Italic` using a bitwise OR. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Why use the enum*: The `WebFontStyle` enum maps directly to CSS properties (`font-weight` and `font-style`). Using the enum prevents typos and ensures the generated CSS is valid—essential for reliable **format text html**. + +--- + +## Step 4 – **Append element to body** and finalise the document + +With the styled span ready, the last step is to place it inside the `` tag. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +At this point the DOM tree looks exactly like the snippet shown earlier. If you inspect `htmlDocument.InnerHtml`, you’ll see the fully‑formed markup. + +--- + +## Step 5 – Save or render the document + +You can either write the HTML to a file, stream it to a browser, or render it to PDF/Image using Aspose.HTML’s rendering engine. Here’s the simplest file‑output option: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Open `output.html` in any browser and you should see **Bold‑Italic text** displayed exactly as intended. + +--- + +## Full Working Example + +Putting everything together, here’s the complete, ready‑to‑run program: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Expected output** – opening `output.html` shows: + +> **Bold‑Italic text** (bold and italic) + +If you inspect the source, you’ll see the exact HTML we discussed, confirming that the **format text html** step succeeded. + +--- + +## Common Questions & Edge Cases + +### 1. What if I need more than two styles? + +`WebFontStyle` is a flags enum, so you can combine any number of styles (e.g., `Underline`). Just keep using the `|` operator: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Can I change the color at the same time? + +Absolutely. The `Style` object has a `Color` property: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. How do I **append element to body** multiple times? + +Create a loop, clone the styled span, adjust the text, and append each clone: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. What if I need to **format text html** inside a `
` instead? + +The same API works for any element. Just replace `CreateElement("span")` with `CreateElement("div")` and adjust styles as needed. + +### 5. Compatibility concerns? + +Aspose.HTML targets .NET Standard 2.0+, so the code runs on .NET Core, .NET Framework, and .NET 5/6+. No extra browser‑specific shims are required. + +--- + +## Pro Tips & Pitfalls + +- **Pro tip:** Always set `InnerHtml` *after* you’ve configured the style. Changing the inner content first can trigger a re‑layout in some browsers; doing it after styling avoids unnecessary work. +- **Watch out for:** Mixing `WebFontStyle` with inline CSS strings. If you manually set `spanElement.SetAttribute("style", "...")` later, you’ll overwrite the enum‑generated styles. Stick to one method. +- **Performance note:** For large documents, batch creation (create all nodes first, then append them in one go) reduces the number of DOM mutations and speeds up rendering. + +--- + +## Conclusion + +You now know how to **create html document** with Aspose.HTML, **append element to body**, **set font style**, and **format text html** using a **create span element**. The example is fully functional, and the explanations cover both the “how” and the “why,” making it easy to adapt the pattern to more complex scenarios. + +Ready for the next step? Try swapping the `` for a `

` with multiple CSS classes, or render the same DOM to a PDF using `Document` → `PdfSaveOptions`. The same principles apply, and you’ll find Aspose.HTML a reliable partner for any server‑side HTML generation task. + +Got questions, or discovered a clever twist? Drop a comment below—happy coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/html-extensions-and-conversions/_index.md b/html/english/net/html-extensions-and-conversions/_index.md index 193cedf1b..d3db22d45 100644 --- a/html/english/net/html-extensions-and-conversions/_index.md +++ b/html/english/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ Aspose.HTML for .NET is not just a library; it's a game-changer in the world of ## HTML Extensions and Conversions Tutorials ### [Convert HTML to PDF in .NET with Aspose.HTML](./convert-html-to-pdf/) Convert HTML to PDF effortlessly with Aspose.HTML for .NET. Follow our step-by-step guide and unleash the power of HTML-to-PDF conversion. +### [Create PDF from URL – Complete C# Guide](./create-pdf-from-url-complete-c-guide/) +Learn how to generate a PDF directly from a web URL using Aspose.HTML for .NET with a complete C# step-by-step guide. ### [Convert EPUB to Image in .NET with Aspose.HTML](./convert-epub-to-image/) Learn how to convert EPUB to images using Aspose.HTML for .NET. Step-by-step tutorial with code examples and customizable options. ### [Convert EPUB to PDF in .NET with Aspose.HTML](./convert-epub-to-pdf/) @@ -75,4 +77,4 @@ So, what are you waiting for? Let's embark on this exciting journey to explore H {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/english/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..b18f8ed29 --- /dev/null +++ b/html/english/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: Create PDF from URL in C# quickly. Learn how to convert HTML to PDF, + save webpage as PDF, and generate PDF from HTML with easy code. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: en +og_description: Create PDF from URL in C# quickly. This tutorial shows how to convert + HTML to PDF, save webpage as PDF, and generate PDF from HTML using Aspose.HTML. +og_title: Create PDF from URL – Complete C# Guide +tags: +- pdf +- csharp +- html +- conversion +title: Create PDF from URL – Complete C# Guide +url: /net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Create PDF from URL – Complete C# Guide + +Ever needed to **create PDF from URL** but weren't sure which library to pick? You're not alone. Many developers hit that wall when they want to archive a web page, generate invoices from an online template, or simply offer a “download as PDF” button on their site. + +In this tutorial we’ll walk through the entire process of **converting HTML to PDF** using C#. You’ll see how to **save webpage as PDF**, how to **generate PDF from HTML**, and why the `Aspose.HTML for .NET` library makes it a breeze. By the end, you’ll have a ready‑to‑run snippet that pulls any public URL, renders it, and writes a PDF file to disk. + +> **Pro tip:** If you’re working behind a corporate proxy, make sure the `HTMLDocument` constructor receives the correct `WebRequest` settings—otherwise the download will silently fail. + +## What You’ll Need + +- **.NET 6.0** or later (the code works on .NET Framework 4.7+ as well). +- **Aspose.HTML for .NET** NuGet package (`Aspose.HTML`). +- A writable folder on disk where the PDF will be saved. +- Basic familiarity with C# (no advanced tricks required). + +No extra configuration files, no hidden magic—just a few lines of clean, commented code. + +![Create PDF from URL example](image.png){alt="create pdf from url"} + +## Step 1: Install the Aspose.HTML NuGet Package + +Open your terminal or Package Manager Console and run: + +```bash +dotnet add package Aspose.HTML +``` + +> **Why this step matters:** The `HTMLDocument`, `PdfSaveOptions`, and `PdfConverter` classes live in the `Aspose.Html` namespace. Without the package, the compiler will have no clue what these types are. + +## Step 2: Load the Web Page into an `HTMLDocument` + +The first real action is fetching the remote HTML. `HTMLDocument` can take a URL directly, handling redirects and content‑type detection for you. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**What’s happening?** +- `HTMLDocument` parses the fetched markup into a DOM tree, just like a browser would. +- Any external CSS, images, or scripts referenced by absolute URLs are also downloaded, ensuring the PDF looks like the live page. + +## Step 3: Configure PDF Export Options (Margins, Page Size, etc.) + +Before we hand the document over to the converter, we fine‑tune the output. The `PdfSaveOptions` object lets you dictate margins, page orientation, and even PDF version. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Why set margins?** +A tight‑fit PDF can clip headers or footers, especially on mobile‑optimized sites. Adding a modest margin ensures everything stays readable. + +## Step 4: Convert the HTML Document Directly to PDF + +Now the heavy lifting. `PdfConverter.ConvertHtml` streams the rendered page straight into a PDF file. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Under the hood:** +- Aspose renders the DOM using its own layout engine (no Chromium needed). +- The rendered bitmap is then rasterized into PDF vectors where possible, preserving text selectability. + +## Step 5: Verify the Result and Handle Edge Cases + +A quick sanity check saves headaches later. Open the generated file; you should see the live page, margins applied, and all images intact. + +### Common pitfalls and how to avoid them + +| Issue | Cause | Fix | +|-------|-------|-----| +| **Blank PDF** | URL blocked by firewall or requires authentication | Pass a custom `WebRequest` with credentials to `HTMLDocument` constructor | +| **Missing CSS** | External stylesheet uses relative URLs | Ensure the base URL is correct (Aspose handles this, but double‑check redirects) | +| **Large file size** | High‑resolution images not downscaled | Use `PdfSaveOptions.ImageCompression` to JPEG‑compress embedded images | +| **Unicode characters garbled** | Font not embedded | Set `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Full Working Example (Copy‑Paste Ready) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Run the program (`dotnet run`) and you’ll find `example.pdf` in `C:\Temp`. Open it with any PDF viewer, and you should see the exact replica of `https://example.com` with the margins you defined. + +## Conclusion + +We’ve just shown you **how to create PDF from URL** using C#. The steps covered loading a web page, configuring margins, and converting the DOM to a PDF file—everything you need to **convert HTML to PDF**, **save webpage as PDF**, and **generate PDF from HTML** in a production‑ready way. + +Feel free to experiment: change the page size to `Letter`, switch orientation to landscape, or add a header/footer using `PdfPageEventHandler`. The same pattern works for dynamic pages, login‑protected portals (just supply cookies), or even batch‑processing a list of URLs. + +**Next steps you might explore** + +- **HTML to PDF C#** with asynchronous conversion for high‑throughput services. +- Embedding **metadata** (author, title) into the PDF via `PdfDocumentInfo`. +- Using **Aspose.PDF** to merge multiple PDFs generated from different URLs into a single report. + +Got questions? Drop a comment below, and happy coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/rendering-html-documents/_index.md b/html/english/net/rendering-html-documents/_index.md index b97ad1b19..f4a4c7906 100644 --- a/html/english/net/rendering-html-documents/_index.md +++ b/html/english/net/rendering-html-documents/_index.md @@ -24,13 +24,13 @@ To get started, you'll need to install the Aspose.HTML for .NET library and set ## Why Choose Aspose.HTML for .NET? -Aspose.HTML for .NET stands out as a top choice for HTML rendering due to its rich features, excellent documentation, and active community support. Here's why you should consider using it: +Aspose.HTML for .NET stands out as a top choice for HTML rendering due to its rich features, excellent documentation, and active community support. Here’s why you should consider using it: - Powerful Rendering: Aspose.HTML for .NET provides high-quality HTML rendering capabilities, ensuring your documents look great every time. -- Ease of Use: The library is designed to be developer-friendly, with a straightforward API and plenty of examples to guide you. +- Ease of Use: The library is designed to be developer‑friendly, with a straightforward API and plenty of examples to guide you. -- Cross-Platform Compatibility: You can use Aspose.HTML for .NET on various platforms, including Windows, Linux, and macOS. +- Cross‑Platform Compatibility: You can use Aspose.HTML for .NET on various platforms, including Windows, Linux, and macOS. - Regular Updates: Aspose is dedicated to improving its products, so you can expect regular updates and bug fixes. @@ -42,6 +42,8 @@ Now that you have Aspose.HTML for .NET set up, it's time to explore the tutorial ### [Render HTML as PNG in .NET with Aspose.HTML](./render-html-as-png/) Learn to work with Aspose.HTML for .NET: Manipulate HTML, convert to various formats, and more. Dive into this comprehensive tutorial! +### [How to Render HTML to PNG – Complete Step‑by‑Step Guide](./how-to-render-html-to-png-complete-step-by-step-guide/) +Step-by-step guide to rendering HTML to PNG using Aspose.HTML for .NET, covering setup, options, and best practices. ### [Render EPUB as XPS in .NET with Aspose.HTML](./render-epub-as-xps/) Learn how to create and render HTML documents with Aspose.HTML for .NET in this comprehensive tutorial. Dive into the world of HTML manipulation, web scraping, and more. ### [Rendering Timeout in .NET with Aspose.HTML](./rendering-timeout/) @@ -52,9 +54,12 @@ Learn how to control rendering timeouts effectively in Aspose.HTML for .NET. Exp Learn to render multiple HTML documents using Aspose.HTML for .NET. Boost your document processing capabilities with this powerful library. ### [Render SVG Doc as PNG in .NET with Aspose.HTML](./render-svg-doc-as-png/) Unlock the power of Aspose.HTML for .NET! Learn how to Render SVG Doc as PNG effortlessly. Dive into step-by-step examples and FAQs. Get started now! +### [How to Render HTML – Complete Guide with Custom Resource Handler](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Learn how to render HTML with a custom resource handler using Aspose.HTML for .NET in this complete guide. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/english/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..fb90e37ba --- /dev/null +++ b/html/english/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: How to render HTML into images using Aspose.HTML. Learn html to image + conversion, custom resource handler, and convert html to bitmap in C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: en +og_description: How to render HTML into images using Aspose.HTML. Master html to image + conversion, custom resource handler, and convert html to bitmap in C#. +og_title: How to Render HTML – Complete Guide with Custom Resource Handler +tags: +- C# +- Aspose.HTML +- Image Rendering +title: How to Render HTML – Complete Guide with Custom Resource Handler +url: /net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# How to Render HTML – Complete Guide with Custom Resource Handler + +Ever wondered **how to render HTML** into a bitmap without juggling a browser engine yourself? You're not alone. Many developers hit a wall when they need a quick screenshot of a dynamic page for emails, reports, or thumbnails. The good news? With Aspose.HTML you can turn any HTML string into an image—no UI, no headless Chrome, just pure C# code. + +In this tutorial we’ll walk through a practical **html to image conversion** scenario, show you how to **implement a custom resource handler**, and demonstrate the full **convert html to bitmap** workflow. By the end you’ll have a reusable method that renders HTML to an image entirely in memory, ready for further processing or storage. + +> **Prerequisites** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * Basic familiarity with C# and streams + +If you’ve got those basics covered, let’s dive in. + +--- + +## How to Render HTML with Aspose.HTML + +The core of any **render html to image** operation is the `ImageRenderer` class. It takes an `HTMLDocument` and spits out raster graphics (PNG, JPEG, BMP, etc.). Below is the minimal skeleton: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +That snippet works, but you only get a file on disk if you tell the renderer where to write it. To keep everything in memory—and to intercept every resource (images, CSS, fonts) that the HTML requests—we’ll plug in a **custom resource handler**. + +--- + +## Implementing a Custom Resource Handler + +A **custom resource handler** gives you full control over how external assets are fetched and stored. In many cases you’ll want to capture those assets in memory for later use (e.g., bundling them into a ZIP). The handler inherits from `ResourceHandler` and overrides `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Why bother?** +* **Performance** – no disk I/O, everything stays in RAM. +* **Security** – you control which URLs are allowed to be fetched. +* **Extensibility** – you can cache resources, rename them, or embed them in other containers. + +--- + +## Convert HTML to Bitmap Using ImageRenderer + +Now we combine the pieces: load the HTML, attach `MyHandler`, and render. The following method returns a `MemoryStream` containing a PNG image of the rendered page. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Expected Output + +If you call the method like this: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +You’ll get a `demo.png` that looks roughly like: + +![how to render html output example](https://example.com/assets/render-html-output.png "how to render html output example") + +*Alt text:* **how to render html output example** – a tiny bitmap showing the rendered HTML snippet. + +--- + +## HTML to Image Conversion – Common Pitfalls & Tips + +### 1. Relative URLs & Base Tags +If your HTML references external CSS or images with relative paths, the renderer won’t know the base folder. Either: + +* Add a `` tag, or +* Resolve URLs inside `MyHandler.HandleResource` and serve the correct stream. + +### 2. Font Availability +Aspose.HTML uses system fonts by default. For custom web fonts (`@font-face`), ensure the font files are reachable via the handler, or embed them as base64 data URIs. + +### 3. Large Pages +Rendering a very tall page can consume significant memory. You can limit the viewport size: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Image Formats +`renderer.Save(stream, ImageFormat.Jpeg)` works just as well if you need JPEG compression. Replace `ImageFormat.Png` with `ImageFormat.Bmp` for a true **convert html to bitmap** output. + +--- + +## Render HTML to Image – Advanced Scenarios + +### A. Rendering Multiple Pages +If the HTML contains page breaks (`
`), you can iterate over pages: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Embedding the Image in a PDF +Combine with `Aspose.Pdf` to embed the PNG directly: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## Conclusion + +We’ve covered **how to render HTML** into a bitmap entirely in memory, explored **html to image conversion** fundamentals, built a **custom resource handler**, and showed you how to **convert html to bitmap** with Aspose.HTML’s `ImageRenderer`. The approach is fast, thread‑safe, and easily extensible for real‑world projects—from email thumbnail generation to automated report creation. + +Ready for the next step? Try swapping the PNG output for a JPEG, experiment with different page sizes, or hook the handler into a caching layer so repeated renders are instantaneous. The sky’s the limit when you control every resource yourself. + +Got questions or a cool use‑case you’d like to share? Drop a comment below, and happy rendering! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/english/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..1c241ccaa --- /dev/null +++ b/html/english/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,231 @@ +--- +category: general +date: 2026-01-03 +description: Learn how to render HTML to PNG, convert webpage to image and save HTML + as PNG using Aspose.HTML in C#. Quick, reliable, and ready for production. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: en +og_description: Master how to render HTML to PNG, convert webpage to image, and save + HTML as PNG with a full C# example using Aspose.HTML. +og_title: How to Render HTML to PNG – Complete Guide +tags: +- C# +- Aspose.HTML +- Image Rendering +title: How to Render HTML to PNG – Complete Step‑by‑Step Guide +url: /net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# How to Render HTML to PNG – Complete Step‑by‑Step Guide + +If you’re looking for **how to render html** into an image, you’ve come to the right place. Whether you need to **convert webpage to image** for thumbnails, archive a page as a PNG, or generate social‑media previews on the fly, the process can be surprisingly simple with the right library. + +In this tutorial we’ll walk through turning any live URL into a PNG file using Aspose.HTML for .NET. You’ll see a full, runnable code snippet, learn why each setting matters, and discover a few tricks for handling edge cases. By the end you’ll be able to **save html as png**, **convert html to png**, and even embed the result in a report or email without breaking a sweat. + +## Prerequisites – What You’ll Need + +Before we dive in, make sure you have the following: + +- **.NET 6.0** or later (the code works with .NET Core and .NET Framework as well) +- **Aspose.HTML for .NET** NuGet package (`Aspose.Html`) installed +- An IDE of your choice (Visual Studio, Rider, or VS Code) +- A writable folder where the PNG will be saved + +No extra configuration is required—Aspose.HTML handles the heavy lifting of parsing the page, applying CSS, and rasterising the layout. + +## Step 1: Load the HTML Document You Want to Render + +The first thing you need is an `HTMLDocument` instance that points to the page you wish to capture. Aspose.HTML can load from a URL, a local file, or a raw HTML string. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** Loading the document directly from the URL ensures that all external resources (CSS, JavaScript, images) are fetched automatically, giving you a faithful rendering of the live page. + +## Step 2: Configure Image Rendering Options + +Next, we set up `ImageRenderingOptions`. These options control the output size, quality, and whether anti‑aliasing is applied. Tweaking them lets you balance file size against visual fidelity. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** If you need a higher‑resolution thumbnail, increase `Width` and `Height` proportionally. Aspose.HTML will scale the layout accordingly without losing vector quality. + +## Step 3: Initialise the Image Renderer + +Now we create an `ImageRenderer` by passing the document and the options we just defined. This object is the engine that actually draws the page onto a bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** The renderer parses the DOM, computes CSS styles, performs layout, and finally rasterises each element onto a pixel canvas. All of that happens in memory, so you don’t need a browser window. + +## Step 4: Render and Save the PNG File + +Finally, call `Render` with the full path where you want the PNG stored. The method writes the file synchronously and disposes of internal resources automatically. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** After running the program, you’ll find `example.png` inside the `output` folder. Open it with any image viewer and you should see a faithful snapshot of `https://example.com` at 800×600 px. + +--- + +### Full, Ready‑to‑Run Example + +Below is the complete program you can copy‑paste into a new console project. It includes all `using` directives, error handling, and comments for clarity. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Run the program (`dotnet run` from the project folder) and you’ll get a PNG that mirrors the live page. That’s **how to render html** with just a few lines of C#. + +--- + +## Frequently Asked Questions & Edge Cases + +### Can I render a local HTML file instead of a URL? + +Absolutely. Replace the URL with a file path: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### What if the page uses JavaScript to modify the DOM after load? + +Aspose.HTML executes most client‑side scripts, but it doesn’t provide a full browser engine. For heavily scripted pages you might need to pre‑render the HTML (e.g., using a headless Chromium instance) and then feed the resulting markup to Aspose.HTML. + +### How do I control PNG compression level? + +`ImageRenderingOptions` includes a `CompressionLevel` property (0–9). Lower numbers mean larger files but higher quality. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### I need a transparent background—can I do that? + +Yes. Set the background color to transparent before rendering: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Is there a way to render multiple pages into a single image? + +You can loop over a collection of URLs or HTML strings, render each to a bitmap, and then stitch them together using `System.Drawing` or `ImageSharp`. The core **convert html to png** step remains the same. + +--- + +## Bonus: Embedding the PNG in a Web API + +If you want to expose this functionality via an ASP.NET Core endpoint, simply return the file bytes: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Now any client can request `GET /render?url=https://example.com` and receive a PNG on the fly—perfect for **convert webpage to image** services. + +--- + +## Conclusion + +We’ve covered everything you need to know about **how to render html** into a PNG file using Aspose.HTML for .NET. From loading a remote page, configuring rendering options, and handling common pitfalls, the full example shows you exactly how to **convert html to png**, **save html as png**, and even expose the logic through a web API. + +Give it a try with your own URLs, experiment with different dimensions, and perhaps automate thumbnail generation for your product catalogue. The sky’s the limit once you’ve mastered the basics of **render html to png**. + +--- + +*Ready to level up?* Grab the NuGet package, drop the code into your project, and start converting webpages to images today. If you hit any snags, feel free to leave a comment—happy rendering! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/net/canvas-and-image-manipulation/_index.md b/html/french/net/canvas-and-image-manipulation/_index.md index 0d9eeea89..524dd337e 100644 --- a/html/french/net/canvas-and-image-manipulation/_index.md +++ b/html/french/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Apprenez à convertir un fichier SVG en PDF avec Aspose.HTML pour .NET. Tutoriel Apprenez à convertir SVG en XPS à l'aide d'Aspose.HTML pour .NET. Boostez votre développement Web avec cette puissante bibliothèque. ### [Comment activer l'anticrénelage en C# – Bords lisses](./how-to-enable-antialiasing-in-c-smooth-edges/) Apprenez à activer l'anticrénelage en C# pour obtenir des bords d'images lisses avec Aspose.HTML. +### [Créer du texte sur canvas – Guide complet pour rendre du texte sur des images](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Apprenez à ajouter et styliser du texte sur des images en utilisant le canvas avec Aspose.HTML pour .NET. ## Conclusion diff --git a/html/french/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/french/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..2b406b7b5 --- /dev/null +++ b/html/french/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,236 @@ +--- +category: general +date: 2026-01-03 +description: Créez du texte sur canvas rapidement et apprenez à rendre une image de + texte, à définir les options de texte et à remplir le canvas de texte tout en améliorant + le rendu du texte sous Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: fr +og_description: Créez du texte sur canvas avec Aspose HTML, apprenez à rendre une + image de texte, définissez les options de texte et améliorez la qualité du texte + sous Linux dans un seul tutoriel. +og_title: Créer du texte sur canvas – Guide complet du rendu +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Créer du texte sur canvas – Guide complet pour rendre du texte sur des images +url: /fr/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Créer du texte sur canvas – Guide complet de rendu + +Vous avez déjà eu besoin de **créer du texte sur canvas** sans savoir comment obtenir des glyphes nets sur chaque plateforme ? Vous n'êtes pas seul. De nombreux développeurs rencontrent un problème lorsque leur texte apparaît flou sous Linux, surtout lors de la conversion de HTML en image. + +Dans ce tutoriel, nous allons parcourir une solution pratique qui vous permet non seulement de **rendre une image texte** sur un canvas Aspose HTML, mais aussi de **définir les options de texte**, d’utiliser correctement `FillText`, et d’**améliorer le rendu du texte sous Linux** grâce au hinting. À la fin, vous disposerez d’un extrait autonome, exécutable, que vous pourrez intégrer à n’importe quel projet .NET. + +## Ce que vous allez apprendre + +- Comment instancier un objet `Canvas` et le préparer au dessin. +- Le rôle de `TextOptions` et pourquoi activer le hinting est crucial sous Linux. +- Un code pas à pas qui **remplit le canvas de texte** avec des caractères stylés et de haute qualité. +- Les pièges courants (hinting manquant, système de coordonnées incorrect) et leurs correctifs rapides. +- Des façons d’étendre l’exemple : polices personnalisées, couleurs, texte multi‑lignes. + +> **Prérequis :** .NET 6+ (ou .NET Framework 4.7.2) et le package NuGet Aspose.HTML for .NET installé. + +--- + +## Étape 1 : Configurer le projet et les imports + +Avant de commencer à dessiner, assurez‑vous que votre projet référence les bons assemblages. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Astuce :** Si vous êtes sous Linux, ajoutez le paquet `libgdiplus` (`sudo apt-get install libgdiplus`) afin que le rendu basé sur GDI fonctionne correctement. + +--- + +## Étape 2 : Créer un canvas et définir sa taille + +Un canvas est essentiellement un bitmap hors‑écran sur lequel vous pouvez peindre. Pensez‑y comme à votre tableau de dessin numérique. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Pourquoi c’est important :** Définir un arrière‑plan solide évite les artefacts transparents lors de l’exportation de l’image. + +--- + +## Étape 3 : Configurer les options de texte – La clé pour un texte Linux net + +Le rendu des polices sous Linux peut paraître flou si le hinting est désactivé. `TextOptions.UseHinting` indique au moteur de rendu d’aligner les glyphes aux limites de pixel, ce qui affine considérablement le résultat. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Et si vous ignorez cela ?** Sur de nombreuses distributions Linux, le texte apparaîtra légèrement flou ou mal aligné, surtout avec de petites tailles de police. + +--- + +## Étape 4 : Remplir le texte sur le canvas + +Maintenant que le canvas est prêt et que les options de texte sont réglées, nous pouvons réellement **remplir le canvas de texte**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Si vous souhaitez un style personnalisé (couleur, taille de police, alignement), encapsulez l’appel dans un `Font` et un `Brush` : + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Étape 5 : Exporter le canvas en fichier image + +La dernière étape consiste à écrire le bitmap rendu sur le disque afin de vérifier le résultat. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Ouvrez `canvas-output.png` et vous devriez voir un texte net, correctement hinté—que vous soyez sous Windows, macOS ou Linux. + +--- + +## Questions fréquentes & cas particuliers + +### Comment le hinting affecte‑t‑il les performances ? + +Activer le hinting ajoute un surcoût négligeable (généralement < 2 ms pour un canvas de 800×600). Le gain visuel l’emporte largement sur le coût, surtout pour la génération d’images côté serveur où la qualité est primordiale. + +### Et si j’ai besoin d’un texte multi‑lignes ? + +Utilisez `canvas.FillText` dans une boucle en ajustant la coordonnée Y, ou exploitez la surcharge de `canvas.FillText` qui accepte un objet `TextLayout` pour le retour à la ligne automatique. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Puis‑je utiliser une police TrueType personnalisée ? + +Absolument. Chargez la police avec `FontFamily` et affectez‑la à `TextOptions.FontFamily` ou directement au `Font` que vous passez à `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Assurez‑vous que le fichier de police soit accessible à l’exécution (placez‑le dans le dossier du projet ou enregistrez‑le globalement sur le système). + +--- + +## Exemple complet fonctionnel + +Voici le programme complet, prêt à copier‑coller, qui intègre toutes les étapes décrites ci‑dessus. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Résultat attendu :** Un fichier PNG nommé `canvas-output.png` contenant deux lignes de texte—une simple, une en gras bleu—toutes deux rendues nettes grâce au hinting. + +--- + +## Conclusion + +Nous venons de **créer du texte sur canvas** à partir de zéro, d’apprendre à **rendre une image texte** avec Aspose.HTML, et de découvrir pourquoi **définir les options de texte** comme `UseHinting` est essentiel pour **améliorer la qualité du texte sous Linux**. En suivant les étapes ci‑dessus, vous pouvez de façon fiable **remplir le canvas de texte** dans n’importe quel environnement .NET, que vous génériez des miniatures, des filigranes ou des graphiques dynamiques pour des API web. + +Prêt pour le prochain défi ? Essayez d’ajouter des dégradés d’arrière‑plan, de faire pivoter le texte, ou d’exporter en SVG pour un redimensionnement vectoriel parfait. Les mêmes principes—`TextOptions` correctement configurées, gestion réfléchie des coordonnées, et libération propre des ressources—s’appliquent à tous les formats. + +Si vous avez rencontré des particularités ou avez des idées d’extensions, laissez un commentaire. Bon codage, et profitez de ces caractères ultra‑nets ! + +--- + +*Image illustrant un canvas avec du texte net (alt text : “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/net/html-document-manipulation/_index.md b/html/french/net/html-document-manipulation/_index.md index bd9e9e8a0..e9c138f8e 100644 --- a/html/french/net/html-document-manipulation/_index.md +++ b/html/french/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Apprenez à créer du contenu Web dynamique à l'aide d'Aspose.HTML pour .NET. D Apprenez à utiliser Aspose.HTML pour .NET. Importez des espaces de noms, fusionnez HTML avec XML et améliorez vos compétences en développement Web avec ce guide complet. ### [Générer des documents XPS par XpsDevice dans .NET avec Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Libérez le potentiel du développement Web avec Aspose.HTML pour .NET. Créez, convertissez et manipulez facilement des documents HTML. +### [Créer un document HTML avec Aspose.HTML – Guide étape par étape](./create-html-document-with-aspose-html-step-by-step-guide/) +Apprenez à créer un document HTML avec Aspose.HTML grâce à un guide détaillé, étape par étape. ## Conclusion @@ -78,4 +80,4 @@ En conclusion, si vous souhaitez maîtriser la manipulation de documents HTML à {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/french/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..1f40b617b --- /dev/null +++ b/html/french/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,218 @@ +--- +category: general +date: 2026-01-03 +description: Créer un document HTML en C# avec Aspose.HTML. Apprenez comment ajouter + un élément au corps, définir le style de police et formater le texte HTML avec un + simple span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: fr +og_description: Créez un document HTML en C# et découvrez comment ajouter un élément + au corps, définir le style de police et formater le texte HTML à l'aide d'Aspose.HTML. +og_title: Créer un document HTML avec Aspose.HTML – Guide rapide +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Créer un document HTML avec Aspose.HTML – Guide étape par étape +url: /fr/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Créer un document HTML avec Aspose.HTML – Guide étape par étape + +Vous avez déjà eu besoin de **create html document** programmatically et vous êtes demandé pourquoi le résultat semble simple ? Vous n'êtes pas le seul. Dans de nombreux projets, nous devons générer des extraits à la volée — pensez aux modèles d'e‑mail, aux rapports dynamiques ou aux petits widgets UI. La bonne nouvelle, c'est qu'Aspose.HTML rend facile la **create html document**, la styliser, et l'insérer dans votre page sans écrire de chaînes brutes. + +Dans ce tutoriel, nous parcourrons un exemple complet montrant comment **append element to body**, **set font style**, et **format text html** en utilisant un **create span element**. À la fin, vous disposerez d'un extrait C# exécutable qui produit du texte gras‑italique à l'intérieur d'un span, et vous comprendrez le « pourquoi » de chaque appel. + +> **Prérequis** +> • .NET 6 ou version ultérieure (tout runtime .NET récent fonctionne) +> • Package NuGet Aspose.HTML for .NET (`Aspose.Html`) installé +> • Familiarité de base avec C# et les concepts DOM + +Aucune autre bibliothèque n'est requise, et le code s'exécute sous Windows, Linux ou macOS. + +## Ce que vous allez créer + +Nous créerons un document HTML minimal, ajouterons un `` contenant la phrase **Bold‑Italic text**, appliquerons les styles **bold** et **italic**, et enfin **append element to body**. Le balisage final ressemble à ceci : + +```html + + + Bold‑Italic text + + +``` + +Vous pouvez copier‑coller le code complet à la fin du guide et l'exécuter immédiatement. + +![Create HTML document example](image.png){alt="exemple de création de document html"} + +## Étape 1 – Initialiser le HTMLDocument (la base de **create html document**) + +Avant de pouvoir **append element to body**, nous avons besoin d'un objet document avec lequel travailler. Aspose.HTML fournit la classe `HTMLDocument` qui représente un DOM en mémoire. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Pourquoi c'est important* : Instancier `HTMLDocument` vous donne une toile vierge — pensez à une feuille blanche où vous pourrez plus tard **format text html**. Sans cette étape, vous ne pouvez pas manipuler les nœuds ni appliquer de styles. + +## Étape 2 – Créer l'élément `` (**create span element**) + +Nous avons maintenant besoin d'un conteneur pour notre texte stylisé. Un `` est parfait car c'est un élément en ligne qui peut contenir du CSS sans interrompre le flux. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Astuce* : Si vous avez besoin d'insérer plusieurs morceaux de texte, vous pouvez réutiliser le même `spanElement` en le clonant (`spanElement.Clone(true)`) et en modifiant le `InnerHtml` à chaque fois. + +## Étape 3 – Appliquer **set font style** pour gras **et** italique + +Aspose.HTML expose un objet `Style` fortement typé. Pour **set font style**, nous combinons `WebFontStyle.Bold` et `WebFontStyle.Italic` à l'aide d'un OU bit à bit. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Pourquoi utiliser l'énumération* : L'énumération `WebFontStyle` correspond directement aux propriétés CSS (`font-weight` et `font-style`). Utiliser l'énumération évite les fautes de frappe et garantit que le CSS généré est valide — essentiel pour un **format text html** fiable. + +## Étape 4 – **Append element to body** et finaliser le document + +Avec le span stylisé prêt, la dernière étape consiste à le placer à l'intérieur de la balise ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +À ce stade, l'arbre DOM ressemble exactement à l'extrait montré précédemment. Si vous inspectez `htmlDocument.InnerHtml`, vous verrez le balisage complet. + +## Étape 5 – Enregistrer ou rendre le document + +Vous pouvez soit écrire le HTML dans un fichier, le diffuser vers un navigateur, ou le rendre en PDF/Image en utilisant le moteur de rendu d'Aspose.HTML. Voici l'option de sortie fichier la plus simple : + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Ouvrez `output.html` dans n'importe quel navigateur et vous devriez voir le texte **Bold‑Italic text** affiché exactement comme prévu. + +## Exemple complet fonctionnel + +En réunissant tous les éléments, voici le programme complet, prêt à être exécuté : + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Sortie attendue** – l'ouverture de `output.html` affiche : + +> **Bold‑Italic text** (gras et italique) + +Si vous inspectez le source, vous verrez le HTML exact dont nous avons parlé, confirmant que l'étape **format text html** a réussi. + +## Questions fréquentes & cas limites + +### 1. Et si j'ai besoin de plus de deux styles ? + +`WebFontStyle` est une énumération de drapeaux, vous pouvez donc combiner n'importe quel nombre de styles (par ex., `Underline`). Continuez simplement à utiliser l'opérateur `|` : + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Puis-je changer la couleur en même temps ? + +Absolument. L'objet `Style` possède une propriété `Color` : + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Comment **append element to body** plusieurs fois ? + +Créez une boucle, clonez le span stylisé, ajustez le texte, et ajoutez chaque clone : + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Et si je dois **format text html** à l'intérieur d'un `
` à la place ? + +La même API fonctionne pour tout élément. Remplacez simplement `CreateElement("span")` par `CreateElement("div")` et ajustez les styles selon les besoins. + +### 5. Problèmes de compatibilité ? + +Aspose.HTML cible .NET Standard 2.0+, donc le code s'exécute sur .NET Core, .NET Framework et .NET 5/6+. Aucun shim spécifique au navigateur n'est nécessaire. + +## Astuces pro & pièges + +- **Astuce** : Toujours définir `InnerHtml` *après* avoir configuré le style. Modifier le contenu interne d'abord peut déclencher un re‑layout dans certains navigateurs ; le faire après le style évite un travail inutile. +- **Attention** : Mélanger `WebFontStyle` avec des chaînes CSS en ligne. Si vous définissez manuellement `spanElement.SetAttribute("style", "...")` plus tard, vous écraserez les styles générés par l'énumération. Restez sur une seule méthode. +- **Note de performance** : Pour les gros documents, créez les nœuds en lot (créez tous les nœuds d'abord, puis ajoutez‑les en une seule fois) afin de réduire le nombre de mutations du DOM et d'accélérer le rendu. + +## Conclusion + +Vous savez maintenant comment **create html document** avec Aspose.HTML, **append element to body**, **set font style**, et **format text html** en utilisant un **create span element**. L'exemple est entièrement fonctionnel, et les explications couvrent à la fois le « comment » et le « pourquoi », ce qui facilite l'adaptation du modèle à des scénarios plus complexes. + +Prêt pour l'étape suivante ? Essayez de remplacer le `` par un `

` avec plusieurs classes CSS, ou rendez le même DOM en PDF en utilisant `Document` → `PdfSaveOptions`. Les mêmes principes s'appliquent, et vous trouverez Aspose.HTML un partenaire fiable pour toute tâche de génération HTML côté serveur. + +Des questions, ou avez-vous découvert une astuce ingénieuse ? Laissez un commentaire ci‑dessous — bon codage ! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/net/html-extensions-and-conversions/_index.md b/html/french/net/html-extensions-and-conversions/_index.md index de68ff377..3ae2d0253 100644 --- a/html/french/net/html-extensions-and-conversions/_index.md +++ b/html/french/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ Aspose.HTML pour .NET n'est pas seulement une bibliothèque ; c'est un outil ré ## Tutoriels sur les extensions et conversions HTML ### [Convertir HTML en PDF dans .NET avec Aspose.HTML](./convert-html-to-pdf/) Convertissez facilement du HTML en PDF avec Aspose.HTML pour .NET. Suivez notre guide étape par étape et exploitez la puissance de la conversion HTML en PDF. +### [Créer un PDF à partir d’une URL – Guide complet C#](./create-pdf-from-url-complete-c-guide/) +Apprenez à générer un PDF à partir d’une URL en C# avec Aspose.HTML, étape par étape, avec options de personnalisation. ### [Convertir EPUB en image dans .NET avec Aspose.HTML](./convert-epub-to-image/) Découvrez comment convertir un EPUB en images à l'aide d'Aspose.HTML pour .NET. Tutoriel étape par étape avec des exemples de code et des options personnalisables. ### [Convertir EPUB en PDF dans .NET avec Aspose.HTML](./convert-epub-to-pdf/) @@ -74,4 +76,4 @@ Alors, qu'attendez-vous ? Embarquons pour ce voyage passionnant pour explorer le {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/french/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..cda4d8e4d --- /dev/null +++ b/html/french/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,201 @@ +--- +category: general +date: 2026-01-03 +description: Créer un PDF à partir d'une URL en C# rapidement. Apprenez comment convertir + du HTML en PDF, enregistrer une page Web en PDF et générer un PDF à partir du HTML + avec un code simple. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: fr +og_description: Créez un PDF à partir d’une URL en C# rapidement. Ce tutoriel montre + comment convertir du HTML en PDF, enregistrer une page Web au format PDF et générer + un PDF à partir de HTML en utilisant Aspose.HTML. +og_title: Créer un PDF à partir d'une URL – Guide complet C# +tags: +- pdf +- csharp +- html +- conversion +title: Créer un PDF à partir d'une URL – Guide complet C# +url: /fr/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Créer un PDF à partir d'une URL – Guide complet C# + +Vous avez déjà eu besoin de **créer un PDF à partir d'une URL** sans savoir quelle bibliothèque choisir ? Vous n'êtes pas seul. De nombreux développeurs rencontrent ce problème lorsqu'ils souhaitent archiver une page web, générer des factures à partir d'un modèle en ligne, ou simplement offrir un bouton « télécharger en PDF » sur leur site. + +Dans ce tutoriel, nous parcourrons l’ensemble du processus de **conversion HTML en PDF** avec C#. Vous verrez comment **enregistrer une page web en PDF**, comment **générer un PDF à partir de HTML**, et pourquoi la bibliothèque `Aspose.HTML for .NET` rend cela très simple. À la fin, vous disposerez d’un extrait de code prêt à l’emploi qui récupère n’importe quelle URL publique, la rend, et écrit un fichier PDF sur le disque. + +> **Astuce pro :** Si vous travaillez derrière un proxy d’entreprise, assurez‑vous que le constructeur `HTMLDocument` reçoit les bons paramètres `WebRequest` — sinon le téléchargement échouera silencieusement. + +## Ce dont vous avez besoin + +- **.NET 6.0** ou supérieur (le code fonctionne également avec .NET Framework 4.7+). +- Le package NuGet **Aspose.HTML for .NET** (`Aspose.HTML`). +- Un dossier accessible en écriture où le PDF sera enregistré. +- Une connaissance de base du C# (pas de techniques avancées requises). + +Aucun fichier de configuration supplémentaire, aucune magie cachée — juste quelques lignes de code propre et commenté. + +![Create PDF from URL example](image.png){alt="créer pdf à partir d'une url"} + +## Étape 1 : Installer le package NuGet Aspose.HTML + +Ouvrez votre terminal ou la console du gestionnaire de packages et exécutez : + +```bash +dotnet add package Aspose.HTML +``` + +> **Pourquoi cette étape est importante :** Les classes `HTMLDocument`, `PdfSaveOptions` et `PdfConverter` se trouvent dans l’espace de noms `Aspose.Html`. Sans le package, le compilateur ne saura pas ce que sont ces types. + +## Étape 2 : Charger la page web dans un `HTMLDocument` + +La première action réelle consiste à récupérer le HTML distant. `HTMLDocument` accepte directement une URL, gérant les redirections et la détection du type de contenu pour vous. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Que se passe‑t‑il ?** +- `HTMLDocument` analyse le balisage récupéré en un arbre DOM, comme le ferait un navigateur. +- Tous les CSS externes, images ou scripts référencés par des URL absolues sont également téléchargés, garantissant que le PDF ressemble à la page en ligne. + +## Étape 3 : Configurer les options d’export PDF (marges, taille de page, etc.) + +Avant de transmettre le document au convertisseur, nous ajustons la sortie. L’objet `PdfSaveOptions` vous permet de définir les marges, l’orientation de la page, et même la version du PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Pourquoi définir des marges ?** +Un PDF trop serré peut couper les en‑têtes ou pieds de page, surtout sur les sites optimisés pour le mobile. Ajouter une marge modeste assure que tout reste lisible. + +## Étape 4 : Convertir le document HTML directement en PDF + +Place maintenant le travail lourd. `PdfConverter.ConvertHtml` diffuse la page rendue directement dans un fichier PDF. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Sous le capot :** +- Aspose rend le DOM à l’aide de son propre moteur de mise en page (pas besoin de Chromium). +- Le bitmap rendu est ensuite vectorisé en PDF lorsque c’est possible, préservant la sélection du texte. + +## Étape 5 : Vérifier le résultat et gérer les cas particuliers + +Une vérification rapide évite bien des maux de tête plus tard. Ouvrez le fichier généré ; vous devriez voir la page en direct, les marges appliquées, et toutes les images intactes. + +### Pièges courants et comment les éviter + +| Problème | Cause | Solution | +|----------|-------|----------| +| **PDF vide** | URL bloquée par le pare‑feu ou nécessitant une authentification | Fournir un `WebRequest` personnalisé avec les informations d’identification au constructeur `HTMLDocument` | +| **CSS manquant** | Feuille de style externe utilisant des URL relatives | Vérifier que l’URL de base est correcte (Aspose gère cela, mais revérifiez les redirections) | +| **Taille de fichier importante** | Images haute résolution non réduites | Utiliser `PdfSaveOptions.ImageCompression` pour compresser les images intégrées en JPEG | +| **Caractères Unicode corrompus** | Police non incorporée | Définir `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Exemple complet fonctionnel (prêt à copier‑coller) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Exécutez le programme (`dotnet run`) et vous trouverez `example.pdf` dans `C:\Temp`. Ouvrez‑le avec n’importe quel lecteur PDF, et vous verrez la réplique exacte de `https://example.com` avec les marges que vous avez définies. + +## Conclusion + +Nous venons de vous montrer **comment créer un PDF à partir d’une URL** avec C#. Les étapes ont couvert le chargement d’une page web, la configuration des marges, et la conversion du DOM en fichier PDF — tout ce dont vous avez besoin pour **convertir HTML en PDF**, **enregistrer une page web en PDF**, et **générer un PDF à partir de HTML** de manière prête pour la production. + +N’hésitez pas à expérimenter : changez la taille de la page en `Letter`, passez à l’orientation paysage, ou ajoutez un en‑tête/pied de page avec `PdfPageEventHandler`. Le même schéma fonctionne pour les pages dynamiques, les portails protégés par connexion (il suffit de fournir les cookies), ou même le traitement par lots d’une liste d’URL. + +**Prochaines étapes à explorer** + +- **HTML to PDF C#** avec conversion asynchrone pour des services à haut débit. +- Intégration de **métadonnées** (auteur, titre) dans le PDF via `PdfDocumentInfo`. +- Utilisation de **Aspose.PDF** pour fusionner plusieurs PDF générés à partir de différentes URL en un seul rapport. + +Des questions ? Laissez un commentaire ci‑dessous, et bon codage ! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/net/rendering-html-documents/_index.md b/html/french/net/rendering-html-documents/_index.md index 018dde281..ec8685877 100644 --- a/html/french/net/rendering-html-documents/_index.md +++ b/html/french/net/rendering-html-documents/_index.md @@ -42,6 +42,10 @@ Maintenant que vous avez configuré Aspose.HTML pour .NET, il est temps d'explor ### [Rendre HTML au format PNG dans .NET avec Aspose.HTML](./render-html-as-png/) Apprenez à travailler avec Aspose.HTML pour .NET : manipulez du HTML, convertissez-le en différents formats et bien plus encore. Plongez dans ce didacticiel complet ! +### [Comment rendre du HTML en PNG – Guide complet étape par étape](./how-to-render-html-to-png-complete-step-by-step-guide/) +Apprenez à convertir du HTML en images PNG avec Aspose.HTML pour .NET grâce à un guide complet et détaillé. +### [Comment rendre du HTML – Guide complet avec gestionnaire de ressources personnalisé](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Apprenez à rendre du HTML avec un gestionnaire de ressources personnalisé, en suivant un guide complet pas à pas. ### [Rendre EPUB en XPS dans .NET avec Aspose.HTML](./render-epub-as-xps/) Découvrez comment créer et restituer des documents HTML avec Aspose.HTML pour .NET dans ce didacticiel complet. Plongez dans le monde de la manipulation HTML, du scraping Web et bien plus encore. ### [Délai d'attente de rendu dans .NET avec Aspose.HTML](./rendering-timeout/) @@ -57,4 +61,4 @@ Libérez la puissance d'Aspose.HTML pour .NET ! Apprenez à restituer un docume {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/french/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..bac985421 --- /dev/null +++ b/html/french/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,231 @@ +--- +category: general +date: 2026-01-03 +description: Comment rendre le HTML en images avec Aspose.HTML. Apprenez la conversion + de HTML en image, le gestionnaire de ressources personnalisé et la conversion du + HTML en bitmap en C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: fr +og_description: Comment rendre le HTML en images avec Aspose.HTML. Maîtrisez la conversion + HTML en image, le gestionnaire de ressources personnalisé, et convertissez le HTML + en bitmap en C#. +og_title: Comment rendre le HTML – Guide complet avec un gestionnaire de ressources + personnalisé +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Comment rendre le HTML – Guide complet avec gestionnaire de ressources personnalisé +url: /fr/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Comment rendre du HTML – Guide complet avec un gestionnaire de ressources personnalisé + +Vous vous êtes déjà demandé **comment rendre du HTML** en bitmap sans devoir manipuler vous‑même un moteur de navigateur ? Vous n’êtes pas seul. De nombreux développeurs se heurtent à un mur lorsqu’ils ont besoin d’une capture d’écran rapide d’une page dynamique pour des e‑mails, des rapports ou des miniatures. La bonne nouvelle ? Avec Aspose.HTML, vous pouvez transformer n’importe quelle chaîne HTML en image—sans UI, sans Chrome headless, juste du pur code C#. + +Dans ce tutoriel, nous allons parcourir un scénario pratique de **conversion html en image**, vous montrer comment **implémenter un gestionnaire de ressources personnalisé**, et démontrer le flux complet de **conversion html en bitmap**. À la fin, vous disposerez d’une méthode réutilisable qui rend le HTML en image entièrement en mémoire, prête pour un traitement ou un stockage ultérieur. + +> **Prérequis** +> * .NET 6+ (ou .NET Framework 4.7.2+) +> * Aspose.HTML for .NET package NuGet (`Aspose.Html`) +> * Familiarité de base avec C# et les flux + +Si vous avez ces bases, plongeons‑y. + +--- + +## Comment rendre du HTML avec Aspose.HTML + +Le cœur de toute opération de **render html to image** est la classe `ImageRenderer`. Elle prend un `HTMLDocument` et génère des graphiques raster (PNG, JPEG, BMP, etc.). Voici le squelette minimal : + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Ce fragment fonctionne, mais vous n’obtenez un fichier sur le disque que si vous indiquez au renderer où l’écrire. Pour tout garder en mémoire—et intercepter chaque ressource (images, CSS, polices) que le HTML demande—nous allons brancher un **gestionnaire de ressources personnalisé**. + +--- + +## Implémentation d’un gestionnaire de ressources personnalisé + +Un **gestionnaire de ressources personnalisé** vous donne un contrôle total sur la façon dont les actifs externes sont récupérés et stockés. Dans de nombreux cas, vous souhaiterez capturer ces actifs en mémoire pour une utilisation ultérieure (par ex., les regrouper dans un ZIP). Le gestionnaire hérite de `ResourceHandler` et surcharge `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Pourquoi s’en préoccuper ?** +* **Performance** – aucune I/O disque, tout reste en RAM. +* **Sécurité** – vous contrôlez quelles URL sont autorisées à être récupérées. +* **Extensibilité** – vous pouvez mettre en cache les ressources, les renommer, ou les intégrer dans d’autres conteneurs. + +--- + +## Conversion HTML en bitmap avec ImageRenderer + +Nous combinons maintenant les éléments : chargez le HTML, attachez `MyHandler`, et rendez. La méthode suivante renvoie un `MemoryStream` contenant une image PNG de la page rendue. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Résultat attendu + +Si vous appelez la méthode ainsi : + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Vous obtiendrez un `demo.png` qui ressemble approximativement à : + +![how to render html output example](https://example.com/assets/render-html-output.png "how to render html output example") + +*Texte alternatif :* **how to render html output example** – un petit bitmap montrant l’extrait HTML rendu. + +--- + +## Conversion HTML en image – Pièges courants & astuces + +### 1. URL relatives & balises `` +Si votre HTML référence des CSS ou des images externes avec des chemins relatifs, le renderer ne connaîtra pas le dossier de base. Vous avez deux options : + +* Ajouter une balise ``, ou +* Résoudre les URL dans `MyHandler.HandleResource` et fournir le flux correct. + +### 2. Disponibilité des polices +Aspose.HTML utilise les polices système par défaut. Pour les polices web personnalisées (`@font-face`), assurez‑vous que les fichiers de police sont accessibles via le gestionnaire, ou intégrez‑les sous forme d’URIs de données base64. + +### 3. Pages volumineuses +Rendre une page très haute peut consommer beaucoup de mémoire. Vous pouvez limiter la taille du viewport : + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Formats d’image +`renderer.Save(stream, ImageFormat.Jpeg)` fonctionne tout aussi bien si vous avez besoin d’une compression JPEG. Remplacez `ImageFormat.Png` par `ImageFormat.Bmp` pour obtenir une sortie **convert html to bitmap** réelle. + +--- + +## Rendu HTML en image – Scénarios avancés + +### A. Rendu de plusieurs pages +Si le HTML contient des sauts de page (`
`), vous pouvez itérer sur les pages : + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Intégration de l’image dans un PDF +Combinez avec `Aspose.Pdf` pour intégrer directement le PNG : + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## Conclusion + +Nous avons couvert **comment rendre du HTML** en bitmap entièrement en mémoire, exploré les fondamentaux de la **conversion html en image**, construit un **gestionnaire de ressources personnalisé**, et montré comment **convertir html en bitmap** avec `ImageRenderer` d’Aspose.HTML. Cette approche est rapide, thread‑safe, et facilement extensible pour des projets réels—de la génération de miniatures d’e‑mail à la création automatisée de rapports. + +Prêt pour l’étape suivante ? Essayez de remplacer la sortie PNG par un JPEG, expérimentez différentes tailles de page, ou branchez le gestionnaire à une couche de cache afin que les rendus répétés soient instantanés. Le ciel est la limite quand vous contrôlez chaque ressource vous‑même. + +Des questions ou un cas d’usage intéressant à partager ? Laissez un commentaire ci‑dessous, et bon rendu ! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/french/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..8c0abb970 --- /dev/null +++ b/html/french/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,225 @@ +--- +category: general +date: 2026-01-03 +description: Apprenez à rendre du HTML en PNG, à convertir une page Web en image et + à enregistrer du HTML en PNG en utilisant Aspose.HTML en C#. Rapide, fiable et prêt + pour la production. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: fr +og_description: Maîtrisez la conversion de HTML en PNG, la transformation de pages + Web en image et l'enregistrement de HTML au format PNG avec un exemple complet en + C# utilisant Aspose.HTML. +og_title: Comment rendre du HTML en PNG – Guide complet +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Comment rendre du HTML en PNG – Guide complet étape par étape +url: /fr/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Comment rendre du HTML en PNG – Guide complet étape par étape + +Si vous cherchez **how to render html** en image, vous êtes au bon endroit. Que vous ayez besoin de **convert webpage to image** pour des miniatures, d'archiver une page en PNG, ou de générer des aperçus pour les réseaux sociaux à la volée, le processus peut être étonnamment simple avec la bonne bibliothèque. + +Dans ce tutoriel, nous allons parcourir la conversion de n'importe quelle URL en direct en fichier PNG en utilisant Aspose.HTML for .NET. Vous verrez un extrait de code complet et exécutable, comprendrez pourquoi chaque paramètre est important, et découvrirez quelques astuces pour gérer les cas limites. À la fin, vous pourrez **save html as png**, **convert html to png**, et même intégrer le résultat dans un rapport ou un e‑mail sans effort. + +## Prérequis – Ce dont vous avez besoin + +- **.NET 6.0** ou version ultérieure (le code fonctionne également avec .NET Core et .NET Framework) +- Package NuGet **Aspose.HTML for .NET** (`Aspose.Html`) installé +- Un IDE de votre choix (Visual Studio, Rider ou VS Code) +- Un dossier accessible en écriture où le PNG sera enregistré + +Aucune configuration supplémentaire n'est requise—Aspose.HTML se charge du travail lourd de l'analyse de la page, de l'application du CSS et du rastérisation de la mise en page. + +## Étape 1 : Charger le document HTML que vous souhaitez rendre + +La première chose dont vous avez besoin est une instance `HTMLDocument` qui pointe vers la page que vous souhaitez capturer. Aspose.HTML peut charger depuis une URL, un fichier local ou une chaîne HTML brute. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters :** Charger le document directement depuis l'URL garantit que toutes les ressources externes (CSS, JavaScript, images) sont récupérées automatiquement, vous offrant un rendu fidèle de la page en direct. + +## Étape 2 : Configurer les options de rendu d'image + +Ensuite, nous configurons `ImageRenderingOptions`. Ces options contrôlent la taille de sortie, la qualité et l'application de l'anti‑aliasing. Les ajuster vous permet d'équilibrer la taille du fichier et la fidélité visuelle. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip :** Si vous avez besoin d'une miniature à plus haute résolution, augmentez `Width` et `Height` proportionnellement. Aspose.HTML mettra à l'échelle la mise en page en conséquence sans perdre la qualité vectorielle. + +## Étape 3 : Initialiser le rendu d'image + +Nous créons maintenant un `ImageRenderer` en passant le document et les options que nous venons de définir. Cet objet est le moteur qui dessine réellement la page sur un bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood ?** Le rendu analyse le DOM, calcule les styles CSS, effectue la mise en page, puis rasterise chaque élément sur un canevas pixelisé. Tout cela se passe en mémoire, vous n'avez donc pas besoin d'une fenêtre de navigateur. + +## Étape 4 : Rendre et enregistrer le fichier PNG + +Enfin, appelez `Render` avec le chemin complet où vous souhaitez enregistrer le PNG. La méthode écrit le fichier de façon synchrone et libère automatiquement les ressources internes. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result :** Après l'exécution du programme, vous trouverez `example.png` dans le dossier `output`. Ouvrez-le avec n'importe quel visualiseur d'images et vous devriez voir un instantané fidèle de `https://example.com` en 800×600 px. + +--- + +### Exemple complet, prêt à l'exécution + +Voici le programme complet que vous pouvez copier‑coller dans un nouveau projet console. Il inclut toutes les directives `using`, la gestion des erreurs et des commentaires pour plus de clarté. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Exécutez le programme (`dotnet run` depuis le dossier du projet) et vous obtiendrez un PNG qui reflète la page en direct. C’est **how to render html** avec seulement quelques lignes de C#. + +--- + +## Questions fréquentes & cas limites + +### Puis‑je rendre un fichier HTML local au lieu d'une URL ? + +Absolument. Remplacez l'URL par un chemin de fichier : + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Que faire si la page utilise JavaScript pour modifier le DOM après le chargement ? + +Aspose.HTML exécute la plupart des scripts côté client, mais il ne fournit pas de moteur de navigateur complet. Pour les pages fortement scriptées, vous pourriez devoir pré‑rendre le HTML (par ex., en utilisant une instance Chromium sans tête) puis fournir le balisage résultant à Aspose.HTML. + +### Comment contrôler le niveau de compression PNG ? + +`ImageRenderingOptions` inclut une propriété `CompressionLevel` (0–9). Des nombres plus bas signifient des fichiers plus volumineux mais une qualité supérieure. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### J’ai besoin d’un arrière‑plan transparent—est‑ce possible ? + +Oui. Définissez la couleur d'arrière‑plan sur transparent avant le rendu : + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Existe‑t‑il un moyen de rendre plusieurs pages en une seule image ? + +Vous pouvez parcourir une collection d'URL ou de chaînes HTML, rendre chacune en bitmap, puis les assembler à l'aide de `System.Drawing` ou `ImageSharp`. L'étape principale **convert html to png** reste la même. + +## Bonus : Intégrer le PNG dans une API Web + +Si vous souhaitez exposer cette fonctionnalité via un point de terminaison ASP.NET Core, renvoyez simplement les octets du fichier : + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Tout client peut maintenant demander `GET /render?url=https://example.com` et recevoir un PNG à la volée—parfait pour les services **convert webpage to image**. + +## Conclusion + +Nous avons couvert tout ce que vous devez savoir sur **how to render html** en fichier PNG en utilisant Aspose.HTML for .NET. De la charge d'une page distante, la configuration des options de rendu, à la gestion des pièges courants, l'exemple complet vous montre exactement comment **convert html to png**, **save html as png**, et même exposer la logique via une API Web. + +Essayez avec vos propres URL, expérimentez différentes dimensions, et peut‑être automatisez la génération de miniatures pour votre catalogue de produits. Le ciel est la limite une fois que vous avez maîtrisé les bases de **render html to png**. + +*Prêt à passer au niveau supérieur ?* Récupérez le package NuGet, intégrez le code dans votre projet, et commencez dès aujourd'hui à convertir des pages web en images. Si vous rencontrez des problèmes, n'hésitez pas à laisser un commentaire—bon rendu ! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/net/canvas-and-image-manipulation/_index.md b/html/german/net/canvas-and-image-manipulation/_index.md index c098e0001..716722ad0 100644 --- a/html/german/net/canvas-and-image-manipulation/_index.md +++ b/html/german/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Erfahren Sie, wie Sie mit Aspose.HTML für .NET SVG in PDF konvertieren. Hochwer Erfahren Sie, wie Sie mit Aspose.HTML für .NET SVG in XPS konvertieren. Optimieren Sie Ihre Webentwicklung mit dieser leistungsstarken Bibliothek. ### [Antialiasing in C# aktivieren – Glatte Kanten](./how-to-enable-antialiasing-in-c-smooth-edges/) Erfahren Sie, wie Sie Antialiasing in C# aktivieren, um glatte Kanten in Ihren Grafiken zu erzielen. +### [Canvas-Text erstellen – Vollständige Anleitung zum Rendern von Text auf Bildern](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Erfahren Sie, wie Sie Text auf Canvas-Bildern rendern, Schriftarten anpassen und professionelle Grafiken erzeugen. ## Abschluss diff --git a/html/german/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/german/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..e45c8faa6 --- /dev/null +++ b/html/german/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,234 @@ +--- +category: general +date: 2026-01-03 +description: Erstellen Sie schnell Canvas‑Text und lernen Sie, wie Sie Textbilder + rendern, Textoptionen festlegen und den Canvas mit Text füllen, während Sie die + Textdarstellung unter Linux verbessern. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: de +og_description: Erstellen Sie Canvas‑Text mit Aspose HTML, lernen Sie, Textbilder + zu rendern, Textoptionen festzulegen und die Textqualität unter Linux in einem einzigen + Tutorial zu verbessern. +og_title: Canvas-Text erstellen – vollständiger Rendering-Leitfaden +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Canvas-Text erstellen – Vollständiger Leitfaden zur Textdarstellung auf Bildern +url: /de/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Canvas-Text erstellen – Vollständiger Rendering-Leitfaden + +Haben Sie jemals **create canvas text** erstellen müssen, waren sich aber nicht sicher, wie Sie auf jeder Plattform gestochen scharfe Glyphen erhalten? Sie sind nicht allein. Viele Entwickler stoßen auf ein Problem, wenn ihr Text unter Linux unscharf aussieht, besonders beim Konvertieren von HTML in ein Bild. + +In diesem Tutorial führen wir Sie durch eine praktische Lösung, die nicht nur das **render text image** auf einer Aspose HTML‑Canvas ermöglicht, sondern auch zeigt, wie man **set text options** verwendet, `FillText` korrekt einsetzt und das **improve Linux text**‑Rendering mit Hinting verbessert. Am Ende haben Sie ein eigenständiges, ausführbares Snippet, das Sie in jedes .NET‑Projekt einbinden können. + +## Was Sie lernen werden + +- Wie man ein `Canvas`‑Objekt instanziiert und für das Zeichnen vorbereitet. +- Die Rolle von `TextOptions` und warum das Aktivieren von Hinting unter Linux wichtig ist. +- Schritt‑für‑Schritt‑Code, der **fill text canvas** mit stilisierten, hochwertigen Zeichen füllt. +- Häufige Fallstricke (fehlendes Hinting, falsches Koordinatensystem) und schnelle Lösungen. +- Möglichkeiten, das Beispiel zu erweitern: benutzerdefinierte Schriftarten, Farben und mehrzeiligen Text. + +> **Voraussetzung:** .NET 6+ (oder .NET Framework 4.7.2) und das Aspose.HTML für .NET NuGet‑Paket installiert. + +--- + +## Schritt 1: Projekt einrichten und Imports + +Bevor wir mit dem Zeichnen beginnen, stellen Sie sicher, dass Ihr Projekt die richtigen Assemblies referenziert. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro‑Tipp:** Wenn Sie unter Linux arbeiten, fügen Sie das `libgdiplus`‑Paket hinzu (`sudo apt-get install libgdiplus`), damit die GDI‑basierte Darstellung reibungslos funktioniert. + +--- + +## Schritt 2: Canvas erstellen und Größe festlegen + +Ein Canvas ist im Wesentlichen ein Off‑Screen‑Bitmap, auf dem Sie malen können. Denken Sie daran wie an Ihr digitales Zeichenbrett. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Warum das wichtig ist:** Das Festlegen eines soliden Hintergrunds verhindert transparente Artefakte, wenn Sie das Bild später exportieren. + +--- + +## Schritt 3: Textoptionen konfigurieren – Der Schlüssel zu klarem Linux‑Text + +Die Schriftartdarstellung unter Linux kann unscharf wirken, wenn Hinting deaktiviert ist. `TextOptions.UseHinting` weist den Renderer an, Glyphen an Pixelgrenzen auszurichten, wodurch das Ergebnis deutlich geschärft wird. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Was passiert, wenn Sie das überspringen?** Auf vielen Linux‑Distributionen erscheint der Text leicht unscharf oder falsch ausgerichtet, besonders bei kleinen Schriftgrößen. + +--- + +## Schritt 4: Text auf das Canvas füllen + +Jetzt, da das Canvas bereit ist und die Textoptionen abgestimmt sind, können wir tatsächlich **fill text canvas**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Wenn Sie benutzerdefinierte Stile (Farbe, Schriftgröße, Ausrichtung) wünschen, wickeln Sie den Aufruf in ein `Font`‑ und `Brush`‑Objekt ein: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Schritt 5: Canvas als Bilddatei exportieren + +Der letzte Schritt besteht darin, das gerenderte Bitmap auf die Festplatte zu schreiben, damit Sie das Ergebnis überprüfen können. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Öffnen Sie `canvas-output.png` und Sie sollten scharfen, korrekt gehinteten Text sehen – egal ob Sie Windows, macOS oder Linux verwenden. + +--- + +## Häufige Fragen & Sonderfälle + +### Wie wirkt sich Hinting auf die Leistung aus? + +Das Aktivieren von Hinting fügt einen vernachlässigbaren Overhead hinzu (in der Regel < 2 ms für ein 800×600‑Canvas). Der visuelle Gewinn überwiegt die Kosten bei weitem, besonders bei serverseitiger Bildgenerierung, bei der Qualität entscheidend ist. + +### Was, wenn ich mehrzeiligen Text benötige? + +Verwenden Sie `canvas.FillText` in einer Schleife und passen Sie die Y‑Koordinate an, oder nutzen Sie die Überladung von `canvas.FillText`, die ein `TextLayout`‑Objekt für automatischen Zeilenumbruch akzeptiert. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Kann ich eine benutzerdefinierte TrueType‑Schrift verwenden? + +Absolut. Laden Sie die Schrift mit `FontFamily` und weisen Sie sie `TextOptions.FontFamily` zu oder direkt dem `Font`, das Sie an `FillText` übergeben. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Stellen Sie sicher, dass die Schriftdatei zur Laufzeit zugänglich ist (legen Sie sie im Projektordner ab oder registrieren Sie sie systemweit). + +## Vollständiges funktionierendes Beispiel + +Unten finden Sie das komplette, sofort einsatzbereite Programm, das jeden der obigen Schritte integriert. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Erwartete Ausgabe:** Eine PNG‑Datei namens `canvas-output.png`, die zwei Textzeilen enthält – eine normale, eine fette blaue – beide dank Hinting klar und scharf gerendert. + +--- + +## Fazit + +Wir haben gerade **created canvas text** von Grund auf **erstellt**, gelernt, wie man **render text image** mit Aspose.HTML **rendert**, und entdeckt, warum **set text options** wie `UseHinting` entscheidend sind, um **improve Linux text**‑Qualität zu **verbessern**. Wenn Sie die obigen Schritte befolgen, können Sie zuverlässig **fill text canvas** in jeder .NET‑Umgebung ausführen, egal ob Sie Thumbnails, Wasserzeichen oder dynamische Grafiken für Web‑APIs erzeugen. + +Bereit für die nächste Herausforderung? Versuchen Sie, Hintergrundgradienten hinzuzufügen, Text zu drehen oder nach SVG zu exportieren für vektorreine Skalierung. Die gleichen Prinzipien – korrekte `TextOptions`, durchdachte Koordinatenhandhabung und saubere Freigabe – gelten für alle Formate. + +Wenn Sie auf irgendwelche Eigenheiten gestoßen sind oder Ideen für Erweiterungen haben, hinterlassen Sie einen Kommentar. Viel Spaß beim Programmieren und genießen Sie diese messerscharfen Zeichen! + +--- + +*Bild, das ein Canvas mit scharfem Text illustriert (Alt‑Text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/net/html-document-manipulation/_index.md b/html/german/net/html-document-manipulation/_index.md index a58a8d61f..0a659623b 100644 --- a/html/german/net/html-document-manipulation/_index.md +++ b/html/german/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Erfahren Sie, wie Sie mit Aspose.HTML für .NET dynamische Webinhalte erstellen. Erfahren Sie, wie Sie Aspose.HTML für .NET verwenden. Importieren Sie Namespaces, führen Sie HTML mit XML zusammen und verbessern Sie Ihre Webentwicklungsfähigkeiten mit diesem umfassenden Handbuch. ### [Generieren Sie XPS-Dokumente mit XpsDevice in .NET mit Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Schöpfen Sie das Potenzial der Webentwicklung mit Aspose.HTML für .NET. Erstellen, konvertieren und bearbeiten Sie HTML-Dokumente ganz einfach. +### [HTML-Dokument mit Aspose.HTML erstellen – Schritt‑für‑Schritt‑Anleitung](./create-html-document-with-aspose-html-step-by-step-guide/) +Erfahren Sie, wie Sie mit Aspose.HTML ein HTML-Dokument von Grund auf erstellen – detaillierte Schritt‑für‑Schritt‑Anleitung. ## Abschluss @@ -78,4 +80,4 @@ Fazit: Wenn Sie die HTML-Dokumentenbearbeitung mit Aspose.HTML für .NET beherrs {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/german/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..5db74f3f4 --- /dev/null +++ b/html/german/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,218 @@ +--- +category: general +date: 2026-01-03 +description: Erstellen Sie ein HTML‑Dokument in C# mit Aspose.HTML. Erfahren Sie, + wie Sie ein Element zum Body hinzufügen, den Schriftstil festlegen und Text‑HTML + mit einem einfachen Span formatieren. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: de +og_description: Erstellen Sie ein HTML‑Dokument in C# und sehen Sie, wie Sie ein Element + zum Body hinzufügen, den Schriftstil festlegen und Text‑HTML mit Aspose.HTML formatieren. +og_title: HTML-Dokument mit Aspose.HTML erstellen – Schnellleitfaden +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: HTML-Dokument mit Aspose.HTML erstellen – Schritt‑für‑Schritt‑Anleitung +url: /de/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML‑Dokument mit Aspose.HTML erstellen – Schritt‑für‑Schritt‑Anleitung + +Haben Sie jemals **create html document** programmatisch erstellen müssen und sich gefragt, warum die Ausgabe schlicht aussieht? Sie sind nicht allein. In vielen Projekten müssen wir Schnipsel on‑the‑fly generieren – denken Sie an E‑Mail‑Vorlagen, dynamische Berichte oder kleine UI‑Widgets. Die gute Nachricht ist, dass Aspose.HTML das **create html document** zum Kinderspiel macht, es zu stylen und in Ihre Seite einzufügen, ohne rohe Zeichenketten zu schreiben. + +In diesem Tutorial führen wir Sie durch ein vollständiges Beispiel, das zeigt, wie man **append element to body**, **set font style** und **format text html** mit einem **create span element** verwendet. Am Ende haben Sie ein ausführbares C#‑Snippet, das fett‑kursiven Text in einem Span erzeugt, und Sie verstehen das „Warum“ hinter jedem Aufruf. + +> **Voraussetzungen** +> • .NET 6 oder höher (jede aktuelle .NET‑Runtime funktioniert) +> • Aspose.HTML für .NET NuGet‑Paket (`Aspose.Html`) installiert +> • Grundlegende Kenntnisse in C# und DOM‑Konzepten + +Es werden keine weiteren Bibliotheken benötigt, und der Code läuft unter Windows, Linux oder macOS. + +## Was Sie bauen werden + +Wir erstellen ein minimales HTML‑Dokument, fügen ein `` hinzu, das den Ausdruck **Bold‑Italic text** enthält, wenden sowohl **bold** als auch **italic** Styling an und schließlich **append element to body**. Das endgültige Markup sieht so aus: + +```html + + + Bold‑Italic text + + +``` + +Sie können den vollständigen Quellcode am Ende des Leitfadens kopieren und sofort ausführen. + +![Create HTML document example](image.png){alt="Beispiel für HTML-Dokument erstellen"} + +## Schritt 1 – Initialisieren des HTMLDocument (die Grundlage von **create html document**) + +Bevor wir **append element to body** ausführen können, benötigen wir ein Dokumentobjekt, mit dem wir arbeiten können. Aspose.HTML stellt die Klasse `HTMLDocument` bereit, die ein DOM im Speicher repräsentiert. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Warum das wichtig ist*: Durch das Instanziieren von `HTMLDocument` erhalten Sie eine leere Leinwand – denken Sie an ein leeres Blatt, auf dem Sie später **format text html** anwenden werden. Ohne diesen Schritt können Sie keine Knoten manipulieren oder Stile anwenden. + +## Schritt 2 – Erstellen des ``‑Elements (**create span element**) + +Jetzt benötigen wir einen Container für unseren formatierten Text. Ein `` ist ideal, weil es ein Inline‑Element ist, das CSS tragen kann, ohne den Fluss zu unterbrechen. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Pro‑Tipp*: Wenn Sie mehrere Textstücke einfügen müssen, können Sie dasselbe `spanElement` wiederverwenden, indem Sie es klonen (`spanElement.Clone(true)`) und jedes Mal das `InnerHtml` ändern. + +## Schritt 3 – **set font style** für fett **und** kursiv anwenden + +Aspose.HTML stellt ein stark typisiertes `Style`‑Objekt bereit. Um **set font style** zu setzen, kombinieren wir `WebFontStyle.Bold` und `WebFontStyle.Italic` mittels eines bitweisen OR. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Warum das Enum verwenden*: Das `WebFontStyle`‑Enum wird direkt auf CSS‑Eigenschaften (`font-weight` und `font-style`) abgebildet. Die Verwendung des Enums verhindert Tippfehler und stellt sicher, dass das erzeugte CSS gültig ist – entscheidend für zuverlässiges **format text html**. + +## Schritt 4 – **Append element to body** und das Dokument finalisieren + +Mit dem gestylten Span bereit, ist der letzte Schritt, ihn in das ``‑Tag einzufügen. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +Zu diesem Zeitpunkt sieht der DOM‑Baum exakt wie das zuvor gezeigte Snippet aus. Wenn Sie `htmlDocument.InnerHtml` inspizieren, sehen Sie das vollständig erzeugte Markup. + +## Schritt 5 – Dokument speichern oder rendern + +Sie können das HTML entweder in eine Datei schreiben, an einen Browser streamen oder mit der Rendering‑Engine von Aspose.HTML in PDF/Bild rendern. Hier ist die einfachste Datei‑Ausgabe‑Option: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Öffnen Sie `output.html` in einem beliebigen Browser und Sie sollten **Bold‑Italic text** genau wie beabsichtigt angezeigt sehen. + +## Voll funktionsfähiges Beispiel + +Alles zusammengeführt, hier das komplette, sofort ausführbare Programm: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Erwartete Ausgabe** – beim Öffnen von `output.html` wird angezeigt: + +> **Bold‑Italic text** (fett und kursiv) + +Wenn Sie den Quellcode inspizieren, sehen Sie das genaue HTML, das wir besprochen haben, was bestätigt, dass der **format text html**‑Schritt erfolgreich war. + +## Häufige Fragen & Sonderfälle + +### 1. Was, wenn ich mehr als zwei Stile benötige? + +`WebFontStyle` ist ein Flags‑Enum, sodass Sie beliebig viele Stile kombinieren können (z. B. `Underline`). Verwenden Sie einfach weiterhin den `|`‑Operator: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Kann ich gleichzeitig die Farbe ändern? + +Absolut. Das `Style`‑Objekt besitzt eine `Color`‑Eigenschaft: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Wie führe ich **append element to body** mehrfach aus? + +Erstellen Sie eine Schleife, klonen Sie das gestylte Span, passen Sie den Text an und hängen Sie jedes Klon an: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Was, wenn ich **format text html** stattdessen in einem `
` benötige? + +Die gleiche API funktioniert für jedes Element. Ersetzen Sie einfach `CreateElement("span")` durch `CreateElement("div")` und passen Sie die Stile nach Bedarf an. + +### 5. Kompatibilitätsbedenken? + +Aspose.HTML zielt auf .NET Standard 2.0+ ab, sodass der Code auf .NET Core, .NET Framework und .NET 5/6+ läuft. Es werden keine zusätzlichen browser‑spezifischen Shims benötigt. + +## Pro‑Tipps & Fallstricke + +- **Pro‑Tipp:** Setzen Sie `InnerHtml` immer *nach* der Konfiguration des Stils. Das Ändern des Inhalts zuerst kann in einigen Browsern ein Re‑Layout auslösen; nach dem Styling zu setzen vermeidet unnötige Arbeit. +- **Achten Sie auf:** Das Mischen von `WebFontStyle` mit Inline‑CSS‑Strings. Wenn Sie später manuell `spanElement.SetAttribute("style", "...")` setzen, überschreiben Sie die vom Enum erzeugten Stile. Bleiben Sie bei einer Methode. +- **Leistungshinweis:** Bei großen Dokumenten reduziert die Stapel‑Erstellung (alle Knoten zuerst erstellen, dann alle auf einmal anhängen) die Anzahl der DOM‑Mutationen und beschleunigt das Rendering. + +## Fazit + +Sie wissen jetzt, wie man **create html document** mit Aspose.HTML erstellt, **append element to body**, **set font style** und **format text html** mithilfe eines **create span element** verwendet. Das Beispiel ist voll funktionsfähig, und die Erklärungen decken sowohl das „Wie“ als auch das „Warum“ ab, sodass das Muster leicht an komplexere Szenarien angepasst werden kann. + +Bereit für den nächsten Schritt? Versuchen Sie, das `` durch ein `

` mit mehreren CSS‑Klassen zu ersetzen, oder rendern Sie dasselbe DOM zu einem PDF mit `Document` → `PdfSaveOptions`. Die gleichen Prinzipien gelten, und Sie werden Aspose.HTML als zuverlässigen Partner für jede serverseitige HTML‑Generierung finden. + +Haben Sie Fragen oder einen cleveren Trick entdeckt? Hinterlassen Sie unten einen Kommentar – happy coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/net/html-extensions-and-conversions/_index.md b/html/german/net/html-extensions-and-conversions/_index.md index 95837176f..5f86d61f8 100644 --- a/html/german/net/html-extensions-and-conversions/_index.md +++ b/html/german/net/html-extensions-and-conversions/_index.md @@ -63,6 +63,8 @@ Entdecken Sie, wie Sie mit Aspose.HTML für .NET HTML-Dokumente bearbeiten und k Erfahren Sie, wie Sie mit Aspose.HTML für .NET HTML in TIFF konvertieren. Folgen Sie unserer Schritt-für-Schritt-Anleitung zur effizienten Optimierung von Webinhalten. ### [Konvertieren Sie HTML in XPS in .NET mit Aspose.HTML](./convert-html-to-xps/) Entdecken Sie die Leistungsfähigkeit von Aspose.HTML für .NET: Konvertieren Sie HTML mühelos in XPS. Voraussetzungen, Schritt-für-Schritt-Anleitung und FAQs inklusive. +### [PDF aus URL erstellen – Vollständige C#-Anleitung](./create-pdf-from-url-complete-c-guide/) +Erfahren Sie, wie Sie mit Aspose.HTML für .NET PDFs direkt aus einer URL generieren – Schritt‑für‑Schritt‑C#‑Beispiel. ## Abschluss @@ -74,4 +76,4 @@ Also, worauf warten Sie noch? Begeben wir uns auf diese spannende Reise, um HTML {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/german/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..c03a725a3 --- /dev/null +++ b/html/german/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,201 @@ +--- +category: general +date: 2026-01-03 +description: Erstelle PDF aus einer URL in C# schnell. Lerne, wie man HTML in PDF + konvertiert, eine Webseite als PDF speichert und PDF aus HTML mit einfachem Code + generiert. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: de +og_description: Erstelle PDF aus URL in C# schnell. Dieses Tutorial zeigt, wie man + HTML in PDF konvertiert, eine Webseite als PDF speichert und PDF aus HTML mit Aspose.HTML + generiert. +og_title: PDF aus URL erstellen – Vollständiger C#‑Leitfaden +tags: +- pdf +- csharp +- html +- conversion +title: PDF aus URL erstellen – Vollständiger C#‑Leitfaden +url: /de/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# PDF aus URL erstellen – Vollständiger C#‑Leitfaden + +Haben Sie schon einmal **PDF aus URL** erstellen müssen, wussten aber nicht, welche Bibliothek Sie wählen sollen? Sie sind nicht allein. Viele Entwickler stoßen an diese Grenze, wenn sie eine Webseite archivieren, Rechnungen aus einer Online‑Vorlage generieren oder einfach einen „Download als PDF“-Button auf ihrer Seite anbieten wollen. + +In diesem Tutorial gehen wir den gesamten Prozess des **Konvertierens von HTML zu PDF** mit C# durch. Sie sehen, wie man **Webseite als PDF speichert**, wie man **PDF aus HTML generiert** und warum die Bibliothek `Aspose.HTML for .NET` das Ganze zum Kinderspiel macht. Am Ende haben Sie ein sofort einsatzbereites Snippet, das jede öffentliche URL abruft, rendert und eine PDF‑Datei auf die Festplatte schreibt. + +> **Pro‑Tipp:** Arbeiten Sie hinter einem Unternehmens‑Proxy, stellen Sie sicher, dass dem `HTMLDocument`‑Konstruktor die richtigen `WebRequest`‑Einstellungen übergeben werden – sonst schlägt der Download stillschweigend fehl. + +## Was Sie benötigen + +- **.NET 6.0** oder neuer (der Code funktioniert auch mit .NET Framework 4.7+). +- **Aspose.HTML for .NET** NuGet‑Paket (`Aspose.HTML`). +- Ein beschreibbarer Ordner auf der Festplatte, in dem das PDF gespeichert wird. +- Grundlegende Kenntnisse in C# (keine fortgeschrittenen Tricks nötig). + +Keine zusätzlichen Konfigurationsdateien, kein verstecktes „Magic“ – nur ein paar Zeilen sauberer, kommentierter Code. + +![Beispiel für PDF aus URL erstellen](image.png){alt="pdf aus url erstellen"} + +## Schritt 1: Das Aspose.HTML‑NuGet‑Paket installieren + +Öffnen Sie Ihr Terminal oder die Package Manager Console und führen Sie aus: + +```bash +dotnet add package Aspose.HTML +``` + +> **Warum dieser Schritt wichtig ist:** Die Klassen `HTMLDocument`, `PdfSaveOptions` und `PdfConverter` befinden sich im Namespace `Aspose.Html`. Ohne das Paket weiß der Compiler nicht, was diese Typen sind. + +## Schritt 2: Die Webseite in ein `HTMLDocument` laden + +Die erste eigentliche Aktion ist das Abrufen des entfernten HTML. `HTMLDocument` kann eine URL direkt übernehmen und kümmert sich um Weiterleitungen und die Erkennung des Content‑Types für Sie. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Was passiert hier?** +- `HTMLDocument` analysiert das abgerufene Markup zu einem DOM‑Baum, genau wie ein Browser. +- Alle externen CSS‑Dateien, Bilder oder Skripte, die über absolute URLs referenziert werden, werden ebenfalls heruntergeladen, sodass das PDF wie die Live‑Seite aussieht. + +## Schritt 3: PDF‑Exportoptionen konfigurieren (Ränder, Seitengröße usw.) + +Bevor wir das Dokument an den Konverter übergeben, feintunen wir die Ausgabe. Das Objekt `PdfSaveOptions` ermöglicht das Festlegen von Rändern, Seitenausrichtung und sogar der PDF‑Version. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Warum Ränder setzen?** +Ein zu enges PDF kann Kopf‑ oder Fußzeilen abschneiden, besonders bei mobil optimierten Seiten. Ein kleiner Rand sorgt dafür, dass alles lesbar bleibt. + +## Schritt 4: Das HTML‑Dokument direkt zu PDF konvertieren + +Jetzt kommt die eigentliche Arbeit. `PdfConverter.ConvertHtml` streamt die gerenderte Seite direkt in eine PDF‑Datei. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Unter der Haube:** +- Aspose rendert das DOM mit seiner eigenen Layout‑Engine (kein Chromium nötig). +- Das gerenderte Bitmap wird, wo möglich, in PDF‑Vektoren rasterisiert, wodurch die Textauswahl erhalten bleibt. + +## Schritt 5: Ergebnis prüfen und Sonderfälle behandeln + +Ein kurzer Plausibilitätstest erspart später Kopfschmerzen. Öffnen Sie die erzeugte Datei; Sie sollten die Live‑Seite, die gesetzten Ränder und alle Bilder intakt sehen. + +### Häufige Stolperfallen und wie man sie vermeidet + +| Problem | Ursache | Lösung | +|---------|---------|--------| +| **Leeres PDF** | URL wird von Firewall blockiert oder erfordert Authentifizierung | Einen benutzerdefinierten `WebRequest` mit Anmeldedaten an den `HTMLDocument`‑Konstruktor übergeben | +| **CSS fehlt** | Externe Stylesheet‑Datei verwendet relative URLs | Sicherstellen, dass die Basis‑URL korrekt ist (Aspose kümmert sich darum, aber Weiterleitungen prüfen) | +| **Große Dateigröße** | Hochauflösende Bilder werden nicht verkleinert | `PdfSaveOptions.ImageCompression` auf JPEG‑Kompression setzen, um eingebettete Bilder zu komprimieren | +| **Unicode‑Zeichen verzerrt** | Schriftart nicht eingebettet | `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` setzen | + +## Vollständiges funktionierendes Beispiel (Copy‑Paste‑bereit) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Führen Sie das Programm (`dotnet run`) aus und Sie finden `example.pdf` in `C:\Temp`. Öffnen Sie es mit einem beliebigen PDF‑Betrachter, und Sie sollten die exakte Kopie von `https://example.com` mit den von Ihnen definierten Rändern sehen. + +## Fazit + +Wir haben Ihnen gezeigt, **wie man PDF aus URL** mit C# erstellt. Die Schritte umfassten das Laden einer Webseite, das Konfigurieren von Rändern und das Konvertieren des DOM zu einer PDF‑Datei – alles, was Sie benötigen, um **HTML zu PDF zu konvertieren**, **Webseite als PDF zu speichern** und **PDF aus HTML zu generieren** in einer produktionsreifen Weise. + +Probieren Sie gern herum: Ändern Sie die Seitengröße zu `Letter`, stellen Sie die Ausrichtung auf Querformat um oder fügen Sie mit `PdfPageEventHandler` eine Kopf‑/Fußzeile hinzu. Das gleiche Muster funktioniert für dynamische Seiten, login‑geschützte Portale (einfach Cookies übergeben) oder sogar für die Stapelverarbeitung einer Liste von URLs. + +**Nächste Schritte, die Sie erkunden könnten** + +- **HTML to PDF C#** mit asynchroner Konvertierung für hochdurchsatzfähige Services. +- Einbetten von **Metadaten** (Autor, Titel) in das PDF über `PdfDocumentInfo`. +- Verwendung von **Aspose.PDF**, um mehrere aus verschiedenen URLs erzeugte PDFs zu einem einzigen Bericht zusammenzuführen. + +Fragen? Hinterlassen Sie einen Kommentar unten – und happy coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/net/rendering-html-documents/_index.md b/html/german/net/rendering-html-documents/_index.md index 1f43678ce..e8ce72e63 100644 --- a/html/german/net/rendering-html-documents/_index.md +++ b/html/german/net/rendering-html-documents/_index.md @@ -42,19 +42,31 @@ Nachdem Sie Aspose.HTML für .NET eingerichtet haben, ist es an der Zeit, die Tu ### [Rendern Sie HTML als PNG in .NET mit Aspose.HTML](./render-html-as-png/) Erfahren Sie, wie Sie mit Aspose.HTML für .NET arbeiten: HTML bearbeiten, in verschiedene Formate konvertieren und mehr. Tauchen Sie ein in dieses umfassende Tutorial! + +### [HTML zu PNG rendern – Vollständige Schritt‑für‑Schritt‑Anleitung](./how-to-render-html-to-png-complete-step-by-step-guide/) +Erfahren Sie, wie Sie HTML mit Aspose.HTML in .NET Schritt für Schritt in PNG konvertieren und dabei alle wichtigen Einstellungen nutzen. + ### [Rendern Sie EPUB als XPS in .NET mit Aspose.HTML](./render-epub-as-xps/) Erfahren Sie in diesem umfassenden Tutorial, wie Sie mit Aspose.HTML für .NET HTML-Dokumente erstellen und rendern. Tauchen Sie ein in die Welt der HTML-Manipulation, des Web Scraping und mehr. + ### [Rendering-Timeout in .NET mit Aspose.HTML](./rendering-timeout/) Erfahren Sie, wie Sie Rendering-Timeouts in Aspose.HTML für .NET effektiv steuern. Erkunden Sie Rendering-Optionen und sorgen Sie für ein reibungsloses Rendering von HTML-Dokumenten. + ### [Rendern Sie MHTML als XPS in .NET mit Aspose.HTML](./render-mhtml-as-xps/) Lernen Sie, MHTML mit Aspose.HTML in .NET als XPS zu rendern. Verbessern Sie Ihre HTML-Manipulationsfähigkeiten und steigern Sie Ihre Webentwicklungsprojekte! + ### [Rendern Sie mehrere Dokumente in .NET mit Aspose.HTML](./render-multiple-documents/) Erfahren Sie, wie Sie mit Aspose.HTML für .NET mehrere HTML-Dokumente rendern. Steigern Sie Ihre Dokumentverarbeitungsfunktionen mit dieser leistungsstarken Bibliothek. + ### [Rendern Sie SVG-Dokumente als PNG in .NET mit Aspose.HTML](./render-svg-doc-as-png/) Entfesseln Sie die Leistungsfähigkeit von Aspose.HTML für .NET! Erfahren Sie, wie Sie SVG-Dokumente mühelos als PNG rendern. Tauchen Sie ein in Schritt-für-Schritt-Beispiele und FAQs. Jetzt loslegen! + +### [HTML rendern – Vollständige Anleitung mit benutzerdefiniertem Ressourcen-Handler](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Erfahren Sie, wie Sie HTML mit einem benutzerdefinierten Ressourcen-Handler rendern und dabei volle Kontrolle über das Laden von Ressourcen erhalten. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/german/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..868254007 --- /dev/null +++ b/html/german/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: Wie man HTML mit Aspose.HTML in Bilder rendert. Lernen Sie die HTML‑zu‑Bild‑Konvertierung, + benutzerdefinierte Ressourcen‑Handler und die Umwandlung von HTML in Bitmap in C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: de +og_description: Wie man HTML mit Aspose.HTML in Bilder rendert. Beherrsche die HTML‑zu‑Bild‑Konvertierung, + benutzerdefinierte Ressourcen‑Handler und konvertiere HTML in ein Bitmap in C#. +og_title: Wie man HTML rendert – Vollständiger Leitfaden mit benutzerdefiniertem Ressourcen‑Handler +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Wie man HTML rendert – Vollständiger Leitfaden mit benutzerdefiniertem Ressourcen‑Handler +url: /de/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Wie man HTML rendert – Komplett‑Anleitung mit benutzerdefiniertem Resource‑Handler + +Haben Sie sich schon einmal gefragt, **wie man HTML** in ein Bitmap rendert, ohne selbst eine Browser‑Engine zu jonglieren? Sie sind nicht allein. Viele Entwickler stoßen an ihre Grenzen, wenn sie schnell einen Screenshot einer dynamischen Seite für E‑Mails, Berichte oder Thumbnails benötigen. Die gute Nachricht? Mit Aspose.HTML können Sie jede HTML‑Zeichenkette in ein Bild umwandeln – ohne UI, ohne headless Chrome, nur reiner C#‑Code. + +In diesem Tutorial gehen wir Schritt für Schritt durch ein praktisches **HTML‑zu‑Bild‑Konvertierungs**‑Szenario, zeigen Ihnen, **wie man einen benutzerdefinierten Resource‑Handler implementiert**, und demonstrieren den kompletten **convert html to bitmap**‑Workflow. Am Ende haben Sie eine wiederverwendbare Methode, die HTML vollständig im Speicher in ein Bild rendert, bereit für weitere Verarbeitung oder Speicherung. + +> **Voraussetzungen** +> * .NET 6+ (oder .NET Framework 4.7.2+) +> * Aspose.HTML für .NET NuGet‑Paket (`Aspose.Html`) +> * Grundlegende Kenntnisse in C# und Streams + +Wenn Sie diese Grundlagen abgedeckt haben, legen wir los. + +--- + +## Wie man HTML mit Aspose.HTML rendert + +Der Kern jeder **render html to image**‑Operation ist die Klasse `ImageRenderer`. Sie nimmt ein `HTMLDocument` entgegen und erzeugt Rastergrafiken (PNG, JPEG, BMP usw.). Nachfolgend das minimale Gerüst: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Dieses Snippet funktioniert, aber Sie erhalten nur eine Datei auf der Festplatte, wenn Sie dem Renderer mitteilen, wohin er schreiben soll. Um alles im Speicher zu behalten – und um jede Ressource (Bilder, CSS, Fonts) abzufangen, die das HTML anfordert – schließen wir einen **benutzerdefinierten Resource‑Handler** ein. + +--- + +## Implementierung eines benutzerdefinierten Resource‑Handlers + +Ein **custom resource handler** gibt Ihnen die volle Kontrolle darüber, wie externe Assets abgerufen und gespeichert werden. In vielen Fällen möchten Sie diese Assets im Speicher für die spätere Verwendung (z. B. zum Bündeln in ein ZIP) erfassen. Der Handler erbt von `ResourceHandler` und überschreibt `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Warum das Ganze?** +* **Performance** – kein Festplatten‑I/O, alles bleibt im RAM. +* **Sicherheit** – Sie bestimmen, welche URLs abgerufen werden dürfen. +* **Erweiterbarkeit** – Sie können Ressourcen cachen, umbenennen oder in andere Container einbetten. + +--- + +## HTML in Bitmap konvertieren mit ImageRenderer + +Jetzt kombinieren wir die Bausteine: Laden das HTML, hängen `MyHandler` an und rendern. Die folgende Methode gibt einen `MemoryStream` zurück, der ein PNG‑Bild der gerenderten Seite enthält. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Erwartete Ausgabe + +Wenn Sie die Methode so aufrufen: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Erhalten Sie ein `demo.png`, das ungefähr so aussieht: + +![Beispiel für die HTML-Renderausgabe](https://example.com/assets/render-html-output.png "Beispiel für die HTML-Renderausgabe") + +*Alt‑Text:* **Beispiel für die HTML-Renderausgabe** – ein kleines Bitmap, das das gerenderte HTML‑Snippet zeigt. + +--- + +## HTML‑zu‑Bild‑Konvertierung – Häufige Stolperfallen & Tipps + +### 1. Relative URLs & Base‑Tags +Wenn Ihr HTML externe CSS‑ oder Bilddateien mit relativen Pfaden referenziert, kennt der Renderer den Basisordner nicht. Entweder: + +* Fügen Sie ein ``‑Tag hinzu, oder +* Lösen Sie URLs innerhalb von `MyHandler.HandleResource` auf und liefern den korrekten Stream. + +### 2. Schriftartenverfügbarkeit +Aspose.HTML verwendet standardmäßig System‑Fonts. Für benutzerdefinierte Web‑Fonts (`@font-face`) stellen Sie sicher, dass die Font‑Dateien über den Handler erreichbar sind oder betten Sie sie als Base64‑Data‑URIs ein. + +### 3. Große Seiten +Das Rendern einer sehr langen Seite kann viel Speicher beanspruchen. Sie können die Viewport‑Größe begrenzen: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Bildformate +`renderer.Save(stream, ImageFormat.Jpeg)` funktioniert genauso gut, wenn Sie JPEG‑Kompression benötigen. Ersetzen Sie `ImageFormat.Png` durch `ImageFormat.Bmp` für eine echte **convert html to bitmap**‑Ausgabe. + +--- + +## HTML zu Bild rendern – Fortgeschrittene Szenarien + +### A. Mehrere Seiten rendern +Enthält das HTML Seitenumbrüche (`
`), können Sie über die Seiten iterieren: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Bild in ein PDF einbetten +Kombinieren Sie es mit `Aspose.Pdf`, um das PNG direkt einzubetten: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## Fazit + +Wir haben gezeigt, **wie man HTML** vollständig im Speicher in ein Bitmap rendert, die Grundlagen der **html to image conversion** erläutert, einen **custom resource handler** gebaut und demonstriert, wie man **convert html to bitmap** mit Aspose.HTMLs `ImageRenderer` durchführt. Der Ansatz ist schnell, thread‑sicher und leicht erweiterbar für reale Projekte – von der Generierung von E‑Mail‑Thumbnails bis hin zur automatisierten Berichtserstellung. + +Bereit für den nächsten Schritt? Tauschen Sie die PNG‑Ausgabe gegen ein JPEG aus, experimentieren Sie mit verschiedenen Seitengrößen oder binden Sie den Handler in eine Caching‑Schicht ein, sodass wiederholte Renderings sofort verfügbar sind. Der Himmel ist die Grenze, wenn Sie jede Ressource selbst steuern. + +Haben Sie Fragen oder ein cooles Anwendungsbeispiel, das Sie teilen möchten? Hinterlassen Sie einen Kommentar unten, und happy rendering! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/german/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..2b38496cd --- /dev/null +++ b/html/german/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,232 @@ +--- +category: general +date: 2026-01-03 +description: Erfahren Sie, wie Sie HTML in PNG rendern, Webseiten in Bilder konvertieren + und HTML mit Aspose.HTML in C# als PNG speichern. Schnell, zuverlässig und produktionsbereit. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: de +og_description: Erfahren Sie, wie Sie HTML in PNG rendern, Webseiten in Bilder konvertieren + und HTML als PNG speichern – mit einem vollständigen C#‑Beispiel unter Verwendung + von Aspose.HTML. +og_title: Wie man HTML zu PNG rendert – Komplettanleitung +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTML zu PNG rendern – Vollständige Schritt‑für‑Schritt‑Anleitung +url: /de/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Wie man HTML zu PNG rendert – Vollständige Schritt‑für‑Schritt‑Anleitung + +Wenn Sie nach **how to render html** in ein Bild suchen, sind Sie hier genau richtig. Egal, ob Sie **convert webpage to image** für Thumbnails benötigen, eine Seite als PNG archivieren wollen oder Social‑Media‑Vorschauen on‑the‑fly erzeugen möchten – mit der richtigen Bibliothek kann der Prozess überraschend einfach sein. + +In diesem Tutorial führen wir Sie durch das Umwandeln jeder beliebigen Live‑URL in eine PNG‑Datei mit Aspose.HTML für .NET. Sie sehen ein vollständiges, ausführbares Code‑Snippet, erfahren, warum jede Einstellung wichtig ist, und entdecken ein paar Tricks für den Umgang mit Sonderfällen. Am Ende können Sie **save html as png**, **convert html to png** und das Ergebnis sogar in einen Bericht oder eine E‑Mail einbetten – ganz ohne Schwitzen. + +## Voraussetzungen – Was Sie benötigen + +Bevor wir starten, stellen Sie sicher, dass Sie Folgendes haben: + +- **.NET 6.0** oder höher (der Code funktioniert auch mit .NET Core und .NET Framework) +- **Aspose.HTML für .NET** NuGet‑Paket (`Aspose.Html`) installiert +- Eine IDE Ihrer Wahl (Visual Studio, Rider oder VS Code) +- Einen beschreibbaren Ordner, in dem das PNG gespeichert wird + +Keine zusätzliche Konfiguration ist nötig – Aspose.HTML übernimmt das schwere Heben beim Parsen der Seite, Anwenden von CSS und Rasterisieren des Layouts. + +## Schritt 1: Laden Sie das HTML‑Dokument, das Sie rendern möchten + +Das Erste, was Sie benötigen, ist eine `HTMLDocument`‑Instanz, die auf die Seite verweist, die Sie erfassen wollen. Aspose.HTML kann von einer URL, einer lokalen Datei oder einem rohen HTML‑String laden. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Warum das wichtig ist:** Das Laden des Dokuments direkt von der URL sorgt dafür, dass alle externen Ressourcen (CSS, JavaScript, Bilder) automatisch abgerufen werden, sodass Sie eine getreue Wiedergabe der Live‑Seite erhalten. + +## Schritt 2: Bild‑Render‑Optionen konfigurieren + +Als Nächstes richten wir `ImageRenderingOptions` ein. Diese Optionen steuern die Ausgabegröße, Qualität und ob Anti‑Aliasing angewendet wird. Durch Feineinstellungen können Sie Dateigröße und visuelle Treue ausbalancieren. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro‑Tipp:** Wenn Sie ein hochauflösendes Thumbnail benötigen, erhöhen Sie `Width` und `Height` proportional. Aspose.HTML skaliert das Layout entsprechend, ohne die Vektorqualität zu verlieren. + +## Schritt 3: Den Image Renderer initialisieren + +Jetzt erstellen wir einen `ImageRenderer`, indem wir das Dokument und die gerade definierten Optionen übergeben. Dieses Objekt ist die Engine, die die Seite tatsächlich auf ein Bitmap zeichnet. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **Was passiert im Hintergrund?** Der Renderer parsed den DOM, berechnet CSS‑Stile, führt das Layout aus und rasterisiert schließlich jedes Element auf eine Pixel‑Canvas. Das alles geschieht im Speicher, sodass kein Browser‑Fenster nötig ist. + +## Schritt 4: Rendern und das PNG‑File speichern + +Zum Schluss rufen Sie `Render` mit dem vollständigen Pfad auf, an dem das PNG abgelegt werden soll. Die Methode schreibt die Datei synchron und gibt interne Ressourcen automatisch frei. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Erwartetes Ergebnis:** Nach dem Ausführen des Programms finden Sie `example.png` im Ordner `output`. Öffnen Sie es mit einem Bildbetrachter und Sie sehen einen getreuen Schnappschuss von `https://example.com` mit 800×600 px. + +--- + +### Vollständiges, sofort ausführbares Beispiel + +Unten finden Sie das komplette Programm, das Sie in ein neues Konsolen‑Projekt kopieren können. Es enthält alle `using`‑Direktiven, Fehlerbehandlung und Kommentare zur Klarheit. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Führen Sie das Programm aus (`dotnet run` im Projektordner) und Sie erhalten ein PNG, das die Live‑Seite widerspiegelt. Das ist **how to render html** mit nur wenigen Zeilen C#. + +--- + +## Häufig gestellte Fragen & Sonderfälle + +### Kann ich eine lokale HTML‑Datei statt einer URL rendern? + +Natürlich. Ersetzen Sie die URL durch einen Dateipfad: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Was, wenn die Seite JavaScript nutzt, um den DOM nach dem Laden zu verändern? + +Aspose.HTML führt die meisten client‑seitigen Skripte aus, bietet jedoch keine vollständige Browser‑Engine. Für stark geskriptete Seiten müssen Sie das HTML ggf. vorher rendern (z. B. mit einer headless Chromium‑Instanz) und das resultierende Markup dann an Aspose.HTML übergeben. + +### Wie steuere ich das PNG‑Kompressionslevel? + +`ImageRenderingOptions` enthält die Eigenschaft `CompressionLevel` (0–9). Niedrigere Werte bedeuten größere Dateien, aber höhere Qualität. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Ich brauche einen transparenten Hintergrund – geht das? + +Ja. Setzen Sie die Hintergrundfarbe vor dem Rendern auf transparent: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Gibt es eine Möglichkeit, mehrere Seiten in ein einziges Bild zu rendern? + +Sie können über eine Sammlung von URLs oder HTML‑Strings iterieren, jede in ein Bitmap rendern und anschließend mit `System.Drawing` oder `ImageSharp` zusammenfügen. Der Kernschritt **convert html to png** bleibt derselbe. + +--- + +## Bonus: Das PNG in einer Web‑API einbetten + +Wenn Sie diese Funktionalität über einen ASP.NET Core‑Endpoint bereitstellen wollen, geben Sie einfach die Dateibytes zurück: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Jetzt kann jeder Client `GET /render?url=https://example.com` aufrufen und erhält on‑the‑fly ein PNG – perfekt für **convert webpage to image**‑Dienste. + +--- + +## Fazit + +Wir haben alles behandelt, was Sie über **how to render html** in eine PNG‑Datei mit Aspose.HTML für .NET wissen müssen. Vom Laden einer Remote‑Seite, über das Konfigurieren der Render‑Optionen bis hin zum Umgang mit gängigen Stolpersteinen – das vollständige Beispiel zeigt Ihnen exakt, wie Sie **convert html to png**, **save html as png** und die Logik sogar über eine Web‑API bereitstellen. + +Probieren Sie es mit Ihren eigenen URLs aus, experimentieren Sie mit verschiedenen Abmessungen und automatisieren Sie ggf. die Thumbnail‑Erstellung für Ihren Produktkatalog. Sobald Sie die Grundlagen von **render html to png** beherrschen, sind Ihrer Kreativität keine Grenzen gesetzt. + +--- + +*Bereit, das nächste Level zu erreichen?* Holen Sie sich das NuGet‑Paket, fügen Sie den Code in Ihr Projekt ein und beginnen Sie noch heute mit dem Konvertieren von Webseiten in Bilder. Wenn Sie auf Probleme stoßen, hinterlassen Sie gerne einen Kommentar – happy rendering! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/net/canvas-and-image-manipulation/_index.md b/html/greek/net/canvas-and-image-manipulation/_index.md index f94b84758..b0a3207ea 100644 --- a/html/greek/net/canvas-and-image-manipulation/_index.md +++ b/html/greek/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ url: /el/net/canvas-and-image-manipulation/ Μάθετε πώς να μετατρέπετε SVG σε XPS χρησιμοποιώντας το Aspose.HTML για .NET. Ενισχύστε την ανάπτυξη Ιστού σας με αυτήν την ισχυρή βιβλιοθήκη. ### [Πώς να ενεργοποιήσετε το Antialiasing σε C# – Ομαλές άκρες](./how-to-enable-antialiasing-in-c-smooth-edges/) Μάθετε πώς να ενεργοποιήσετε το antialiasing σε C# για ομαλές γραμμές και κείμενα στα γραφικά σας. +### [Δημιουργία κειμένου σε καμβά – Πλήρης οδηγός απόδοσης κειμένου σε εικόνες](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Μάθετε πώς να προσθέτετε και να μορφοποιείτε κείμενο σε εικόνες χρησιμοποιώντας το Aspose.HTML για .NET. ## Σύναψη diff --git a/html/greek/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/greek/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..2550c2908 --- /dev/null +++ b/html/greek/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,236 @@ +--- +category: general +date: 2026-01-03 +description: Δημιουργήστε κείμενο καμβά γρήγορα και μάθετε πώς να αποδίδετε εικόνα + κειμένου, να ορίζετε επιλογές κειμένου και να γεμίζετε τον καμβά κειμένου, ενώ βελτιώνετε + την απόδοση κειμένου στο Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: el +og_description: Δημιουργήστε κείμενο σε καμβά με το Aspose HTML, μάθετε πώς να αποδίδετε + εικόνα κειμένου, να ορίζετε επιλογές κειμένου και να βελτιώσετε την ποιότητα κειμένου + στο Linux σε ένα ενιαίο σεμινάριο. +og_title: Δημιουργία κειμένου καμβά – Πλήρης οδηγός απόδοσης +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Δημιουργία κειμένου καμβά – Πλήρης οδηγός για την απόδοση κειμένου σε εικόνες +url: /el/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Δημιουργία κειμένου σε καμβά – Οδηγός Πλήρους Απόδοσης + +Κάποτε χρειάστηκε να **δημιουργήσετε κείμενο σε καμβά** αλλά δεν ήσασταν σίγουροι πώς να έχετε καθαρά γλύφους σε κάθε πλατφόρμα; Δεν είστε μόνοι. Πολλοί προγραμματιστές αντιμετωπίζουν πρόβλημα όταν το κείμενό τους φαίνεται θολό σε Linux, ειδικά κατά τη μετατροπή HTML σε εικόνα. + +Σε αυτό το tutorial θα περάσουμε βήμα‑βήμα από μια πρακτική λύση που όχι μόνο σας επιτρέπει να **αποδώσετε εικόνα κειμένου** σε έναν καμβά Aspose HTML, αλλά και σας δείχνει πώς να **ορίσετε επιλογές κειμένου**, να χρησιμοποιήσετε σωστά το `FillText` και να **βελτιώσετε την απόδοση κειμένου σε Linux** με hinting. Στο τέλος θα έχετε ένα αυτόνομο, εκτελέσιμο απόσπασμα κώδικα που μπορείτε να ενσωματώσετε σε οποιοδήποτε έργο .NET. + +## Τι Θα Μάθετε + +- Πώς να δημιουργήσετε ένα αντικείμενο `Canvas` και να το προετοιμάσετε για σχεδίαση. +- Τον ρόλο του `TextOptions` και γιατί η ενεργοποίηση του hinting είναι σημαντική σε Linux. +- Κώδικα βήμα‑βήμα που **γεμίζει το καμβά με κείμενο** με στυλιζαρισμένους, υψηλής ποιότητας χαρακτήρες. +- Συνηθισμένα προβλήματα (απουσία hinting, λάθος σύστημα συντεταγμένων) και γρήγορες διορθώσεις. +- Τρόπους επέκτασης του παραδείγματος: προσαρμοσμένες γραμματοσειρές, χρώματα και κείμενο πολλαπλών γραμμών. + +> **Προαπαιτούμενο:** .NET 6+ (ή .NET Framework 4.7.2) και το πακέτο NuGet Aspose.HTML for .NET εγκατεστημένο. + +--- + +## Βήμα 1: Ρύθμιση του Έργου και των Εισαγωγών + +Πριν αρχίσουμε να σχεδιάζουμε, βεβαιωθείτε ότι το έργο σας αναφέρει τις σωστές συναρτήσεις. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Συμβουλή:** Αν χρησιμοποιείτε Linux, προσθέστε το πακέτο `libgdiplus` (`sudo apt-get install libgdiplus`) ώστε η απόδοση με βάση το GDI να λειτουργεί ομαλά. + +--- + +## Βήμα 2: Δημιουργία Καμβά και Ορισμός Μεγέθους + +Ένας καμβάς είναι ουσιαστικά ένα bitmap εκτός οθόνης πάνω στο οποίο μπορείτε να ζωγραφίσετε. Σκεφτείτε το ως το ψηφιακό σας σχέδιο. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Γιατί είναι σημαντικό:** Ο καθορισμός ενός στερεού φόντου αποτρέπει διαφανή artefacts όταν εξάγετε αργότερα την εικόνα. + +--- + +## Βήμα 3: Διαμόρφωση Επιλογών Κειμένου – Το Κλειδί για Καθαρό Κείμενο σε Linux + +Η απόδοση γραμματοσειρών σε Linux μπορεί να φαίνεται θολή αν το hinting είναι απενεργοποιημένο. Το `TextOptions.UseHinting` λέει στον renderer να ευθυγραμμίζει τα γλύφα στα όρια των pixel, βελτιώνοντας δραστικά την ευκρίνεια. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Τι συμβαίνει αν το παραλείψετε;** Σε πολλές διανομές Linux το κείμενο θα εμφανιστεί ελαφρώς θολό ή λανθασμένα ευθυγραμμισμένο, ειδικά σε μικρά μεγέθη γραμματοσειράς. + +--- + +## Βήμα 4: Γέμισμα Καμβά με Κείμενο + +Τώρα που ο καμβάς είναι έτοιμος και οι επιλογές κειμένου έχουν ρυθμιστεί, μπορούμε πράγματι να **γεμίσουμε το καμβά με κείμενο**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Αν θέλετε προσαρμοσμένο στυλ (χρώμα, μέγεθος γραμματοσειράς, στοίχιση), τυλίξτε την κλήση σε ένα `Font` και ένα `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Βήμα 5: Εξαγωγή του Καμβά ως Αρχείο Εικόνας + +Το τελευταίο βήμα είναι να γράψετε το αποδοθέν bitmap στο δίσκο ώστε να μπορείτε να ελέγξετε το αποτέλεσμα. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Ανοίξτε το `canvas-output.png` και θα δείτε καθαρό, σωστά hint‑αρισμένο κείμενο—είτε βρίσκεστε σε Windows, macOS ή Linux. + +--- + +## Συχνές Ερωτήσεις & Ακραίες Περιπτώσεις + +### Πώς το hinting επηρεάζει την απόδοση; + +Η ενεργοποίηση του hinting προσθέτει μια αμελητέα επιβάρυνση (συνήθως < 2 ms για καμβά 800×600). Το οπτικό όφελος υπερτερεί κατά πολύ του κόστους, ειδικά για δημιουργία εικόνων στο διακομιστή όπου η ποιότητα είναι πρωταρχική. + +### Τι κάνω αν χρειάζομαι κείμενο πολλαπλών γραμμών; + +Χρησιμοποιήστε το `canvas.FillText` μέσα σε βρόχο, προσαρμόζοντας τη συντεταγμένη Y, ή εκμεταλλευτείτε την υπερφόρτωση του `canvas.FillText` που δέχεται αντικείμενο `TextLayout` για αυτόματη αναδίπλωση. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Μπορώ να χρησιμοποιήσω προσαρμοσμένη γραμματοσειρά TrueType; + +Απολύτως. Φορτώστε τη γραμματοσειρά με `FontFamily` και αναθέστε την στο `TextOptions.FontFamily` ή απευθείας στο `Font` που περνάτε στο `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Βεβαιωθείτε ότι το αρχείο γραμματοσειράς είναι προσβάσιμο στο runtime (τοποθετήστε το στον φάκελο του έργου ή καταχωρίστε το σε επίπεδο συστήματος). + +--- + +## Πλήρες Παράδειγμα Λειτουργίας + +Παρακάτω βρίσκεται το ολοκληρωμένο, έτοιμο για αντιγραφή πρόγραμμα που ενσωματώνει όλα τα παραπάνω βήματα. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Αναμενόμενο αποτέλεσμα:** Ένα αρχείο PNG με όνομα `canvas-output.png` που περιέχει δύο γραμμές κειμένου—μία απλή, μία έντονη μπλε—και οι δύο αποδίδονται καθαρά χάρη στο hinting. + +--- + +## Συμπέρασμα + +Μόλις **δημιουργήσαμε κείμενο σε καμβά** από το μηδέν, μάθαμε πώς να **αποδώσουμε εικόνα κειμένου** με Aspose.HTML και ανακαλύψαμε γιατί **η ρύθμιση επιλογών κειμένου** όπως το `UseHinting` είναι απαραίτητη για **βελτίωση της ποιότητας κειμένου σε Linux**. Ακολουθώντας τα παραπάνω βήματα μπορείτε αξιόπιστα να **γεμίζετε το καμβά με κείμενο** σε οποιοδήποτε περιβάλλον .NET, είτε δημιουργείτε μικρογραφίες, υδατογραφήματα ή δυναμικά γραφικά για web APIs. + +Έτοιμοι για την επόμενη πρόκληση; Δοκιμάστε να προσθέσετε διαβαθμίσεις φόντου, περιστροφή κειμένου ή εξαγωγή σε SVG για απόλυτη κλιμάκωση διανυσματικά. Οι ίδιες αρχές—σωστές `TextOptions`, προσεγγιστική διαχείριση συντεταγμένων και καθαρή διαχείριση πόρων—ισχύουν σε όλες τις μορφές. + +Αν αντιμετωπίσατε οποιαδήποτε ιδιομορφία ή έχετε ιδέες για επεκτάσεις, αφήστε ένα σχόλιο. Καλή προγραμματιστική δουλειά και απολαύστε εκείνους τους ακονισμένους χαρακτήρες! + +--- + +*Εικόνα που απεικονίζει έναν καμβά με καθαρό κείμενο (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/net/html-document-manipulation/_index.md b/html/greek/net/html-document-manipulation/_index.md index dded3736c..8942ce74c 100644 --- a/html/greek/net/html-document-manipulation/_index.md +++ b/html/greek/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ url: /el/net/html-document-manipulation/ Μάθετε να χρησιμοποιείτε το Aspose.HTML για .NET. Εισαγάγετε χώρο ονομάτων, συγχώνευση HTML με XML και βελτιώστε τις δεξιότητές σας στην ανάπτυξη ιστού με αυτόν τον περιεκτικό οδηγό. ### [Δημιουργήστε έγγραφα XPS από το XpsDevice σε .NET με Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Ξεκλειδώστε τις δυνατότητες ανάπτυξης ιστού με το Aspose.HTML για .NET. Δημιουργήστε, μετατρέψτε και χειριστείτε εύκολα έγγραφα HTML. +### [Δημιουργία εγγράφου HTML με Aspose.HTML – Οδηγός βήμα‑βήμα](./create-html-document-with-aspose-html-step-by-step-guide/) +Μάθετε πώς να δημιουργήσετε έγγραφα HTML χρησιμοποιώντας το Aspose.HTML με αναλυτικές οδηγίες βήμα‑βήμα. ## Σύναψη @@ -78,4 +80,4 @@ url: /el/net/html-document-manipulation/ {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/greek/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..fae22b52a --- /dev/null +++ b/html/greek/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,241 @@ +--- +category: general +date: 2026-01-03 +description: Δημιουργήστε έγγραφο HTML σε C# χρησιμοποιώντας το Aspose.HTML. Μάθετε + πώς να προσθέτετε στοιχείο στο σώμα, να ορίζετε το στυλ γραμματοσειράς και να μορφοποιείτε + κείμενο HTML με ένα απλό span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: el +og_description: Δημιουργήστε έγγραφο HTML σε C# και δείτε πώς να προσθέσετε στοιχείο + στο σώμα, να ορίσετε το στυλ γραμματοσειράς και να μορφοποιήσετε το κείμενο HTML + χρησιμοποιώντας το Aspose.HTML. +og_title: Δημιουργία εγγράφου HTML με το Aspose.HTML – Σύντομος οδηγός +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Δημιουργία εγγράφου HTML με το Aspose.HTML – Οδηγός βήμα‑προς‑βήμα +url: /el/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Δημιουργία εγγράφου HTML με Aspose.HTML – Οδηγός βήμα‑βήμα + +Έχετε χρειαστεί ποτέ να **create html document** προγραμματιστικά και να αναρωτηθείτε γιατί το αποτέλεσμα φαίνεται απλό; Δεν είστε ο μόνος. Σε πολλά έργα πρέπει να δημιουργούμε αποσπάσματα εν κινήσει—σκεφτείτε πρότυπα email, δυναμικές αναφορές ή μικρά UI widgets. Τα καλά νέα είναι ότι το Aspose.HTML κάνει εύκολο το **create html document**, το στυλ του, και η ενσωμάτωσή του στη σελίδα σας χωρίς να γράφετε ακατέργαστες συμβολοσειρές. + +Σε αυτό το tutorial θα περάσουμε από ένα πλήρες παράδειγμα που δείχνει πώς να **append element to body**, **set font style**, και **format text html** χρησιμοποιώντας ένα **create span element**. Στο τέλος θα έχετε ένα εκτελέσιμο απόσπασμα C# που παράγει έντονο‑πλάγιο κείμενο μέσα σε ένα span, και θα κατανοήσετε το “γιατί” πίσω από κάθε κλήση. + +> **Προαπαιτούμενα** +> • .NET 6 ή νεότερο (οποιοδήποτε πρόσφατο runtime .NET λειτουργεί) +> • Πακέτο NuGet Aspose.HTML for .NET (`Aspose.Html`) εγκατεστημένο +> • Βασική εξοικείωση με C# και έννοιες DOM + +Δεν απαιτούνται άλλες βιβλιοθήκες, και ο κώδικας εκτελείται σε Windows, Linux ή macOS. + +--- + +## Τι Θα Δημιουργήσετε + +Θα δημιουργήσουμε ένα ελάχιστο έγγραφο HTML, θα προσθέσουμε ένα `` που περιέχει τη φράση **Bold‑Italic text**, θα εφαρμόσουμε και τα δύο στυλ **bold** και **italic**, και τέλος **append element to body**. Το τελικό markup φαίνεται ως εξής: + +```html + + + Bold‑Italic text + + +``` + +Μπορείτε να αντιγράψετε‑επικολλήσετε τον πλήρη κώδικα στο τέλος του οδηγού και να τον εκτελέσετε αμέσως. + +--- + +![Create HTML document example](image.png){alt="create html document example"} + +--- + +## Βήμα 1 – Αρχικοποίηση του HTMLDocument (η βάση του **create html document**) + +Πριν μπορέσουμε να **append element to body**, χρειαζόμαστε ένα αντικείμενο εγγράφου για να εργαστούμε. Το Aspose.HTML παρέχει την κλάση `HTMLDocument` που αντιπροσωπεύει ένα DOM στη μνήμη. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Γιατί είναι σημαντικό*: Η δημιουργία ενός `HTMLDocument` σας δίνει έναν καθαρό καμβά—σκεφτείτε το ως ένα κενό φύλλο όπου θα **format text html** αργότερα. Χωρίς αυτό το βήμα δεν μπορείτε να χειριστείτε κόμβους ή να εφαρμόσετε στυλ. + +--- + +## Βήμα 2 – Δημιουργία του στοιχείου `` (**create span element**) + +Τώρα χρειαζόμαστε ένα κοντέινερ για το στυλιζαρισμένο κείμενό μας. Ένα `` είναι τέλειο επειδή είναι ένα ενσωματωμένο στοιχείο που μπορεί να μεταφέρει CSS χωρίς να διακόπτει τη ροή. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Συμβουλή*: Αν ποτέ χρειαστεί να εισάγετε πολλαπλά κομμάτια κειμένου, μπορείτε να επαναχρησιμοποιήσετε το ίδιο `spanElement` κλωνοποιώντας το (`spanElement.Clone(true)`) και αλλάζοντας το `InnerHtml` κάθε φορά. + +--- + +## Βήμα 3 – Εφαρμογή του **set font style** για έντονο **και** πλάγιο + +Το Aspose.HTML εκθέτει ένα ισχυρά τυποποιημένο αντικείμενο `Style`. Για να **set font style** συνδυάζουμε το `WebFontStyle.Bold` και το `WebFontStyle.Italic` χρησιμοποιώντας bitwise OR. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Γιατί να χρησιμοποιήσετε το enum*: Το enum `WebFontStyle` αντιστοιχεί άμεσα στις ιδιότητες CSS (`font-weight` και `font-style`). Η χρήση του enum αποτρέπει τυπογραφικά λάθη και εξασφαλίζει ότι το παραγόμενο CSS είναι έγκυρο—απαραίτητο για αξιόπιστο **format text html**. + +--- + +## Βήμα 4 – **Append element to body** και ολοκλήρωση του εγγράφου + +Με το στυλιζαρισμένο span έτοιμο, το τελευταίο βήμα είναι να το τοποθετήσετε μέσα στην ετικέτα ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +Σε αυτό το σημείο το δέντρο DOM φαίνεται ακριβώς όπως το απόσπασμα που εμφανίστηκε νωρίτερα. Αν εξετάσετε το `htmlDocument.InnerHtml`, θα δείτε το πλήρως σχηματισμένο markup. + +--- + +## Βήμα 5 – Αποθήκευση ή απόδοση του εγγράφου + +Μπορείτε είτε να γράψετε το HTML σε αρχείο, να το μεταδώσετε σε πρόγραμμα περιήγησης, ή να το αποδώσετε σε PDF/Image χρησιμοποιώντας τη μηχανή απόδοσης του Aspose.HTML. Ακολουθεί η πιο απλή επιλογή εξόδου σε αρχείο: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Ανοίξτε το `output.html` σε οποιοδήποτε πρόγραμμα περιήγησης και θα πρέπει να δείτε το **Bold‑Italic text** να εμφανίζεται ακριβώς όπως προοριζόταν. + +--- + +## Πλήρες Παράδειγμα Εργασίας + +Συνδυάζοντας όλα, εδώ είναι το πλήρες, έτοιμο‑για‑εκτέλεση πρόγραμμα: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Αναμενόμενο αποτέλεσμα** – το άνοιγμα του `output.html` δείχνει: + +> **Bold‑Italic text** (έντονο και πλάγιο) + +Αν εξετάσετε την πηγή, θα δείτε το ακριβές HTML που συζητήσαμε, επιβεβαιώνοντας ότι το βήμα **format text html** πέτυχε. + +--- + +## Συχνές Ερωτήσεις & Ακραίες Περιπτώσεις + +### 1. Τι γίνεται αν χρειάζομαι περισσότερα από δύο στυλ; + +`WebFontStyle` είναι enum flags, έτσι μπορείτε να συνδυάσετε οποιονδήποτε αριθμό στυλ (π.χ., `Underline`). Συνεχίστε να χρησιμοποιείτε τον τελεστή `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Μπορώ να αλλάξω το χρώμα ταυτόχρονα; + +Απόλυτα. Το αντικείμενο `Style` έχει ιδιότητα `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Πώς να **append element to body** πολλαπλές φορές; + +Δημιουργήστε έναν βρόχο, κλωνοποιήστε το στυλιζαρισμένο span, προσαρμόστε το κείμενο, και προσθέστε κάθε κλώνο: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Τι γίνεται αν χρειαστεί να **format text html** μέσα σε `
` αντί; + +Το ίδιο API λειτουργεί για οποιοδήποτε στοιχείο. Απλώς αντικαταστήστε το `CreateElement("span")` με `CreateElement("div")` και προσαρμόστε τα στυλ όπως χρειάζεται. + +### 5. Ανησυχίες συμβατότητας; + +Το Aspose.HTML στοχεύει στο .NET Standard 2.0+, έτσι ο κώδικας εκτελείται σε .NET Core, .NET Framework, και .NET 5/6+. Δεν απαιτούνται επιπλέον shim για προγράμματα περιήγησης. + +--- + +## Επαγγελματικές Συμβουλές & Πιθανά Προβλήματα + +- **Συμβουλή**: Πάντα ορίστε το `InnerHtml` *μετά* τη διαμόρφωση του στυλ. Η αλλαγή του εσωτερικού περιεχομένου πρώτα μπορεί να προκαλέσει επαναδιάταξη σε ορισμένα προγράμματα περιήγησης· κάνοντάς το μετά το στυλ αποφεύγετε περιττή εργασία. +- **Προσοχή**: Ανάμειξη `WebFontStyle` με inline CSS strings. Αν ορίσετε χειροκίνητα `spanElement.SetAttribute("style", "...")` αργότερα, θα αντικαταστήσετε τα στυλ που δημιουργήθηκαν από το enum. Μείνετε σε μία μέθοδο. +- **Σημείωση απόδοσης**: Για μεγάλα έγγραφα, η δημιουργία σε παρτίδες (δημιουργήστε όλους τους κόμβους πρώτα, μετά προσθέστε τους όλα μαζί) μειώνει τις μεταβολές DOM και επιταχύνει την απόδοση. + +--- + +## Συμπέρασμα + +Τώρα γνωρίζετε πώς να **create html document** με Aspose.HTML, **append element to body**, **set font style**, και **format text html** χρησιμοποιώντας ένα **create span element**. Το παράδειγμα είναι πλήρως λειτουργικό, και οι εξηγήσεις καλύπτουν τόσο το “πώς” όσο και το “γιατί”, καθιστώντας εύκολη την προσαρμογή του μοτίβου σε πιο σύνθετα σενάρια. + +Έτοιμοι για το επόμενο βήμα; Δοκιμάστε να αντικαταστήσετε το `` με ένα `

` με πολλαπλές κλάσεις CSS, ή αποδώστε το ίδιο DOM σε PDF χρησιμοποιώντας `Document` → `PdfSaveOptions`. Οι ίδιες αρχές ισχύουν, και θα βρείτε το Aspose.HTML έναν αξιόπιστο συνεργάτη για οποιαδήποτε εργασία δημιουργίας HTML από την πλευρά του διακομιστή. + +Έχετε ερωτήσεις ή ανακαλύψατε κάποιο έξυπνο κόλπο; Αφήστε ένα σχόλιο παρακάτω—καλή προγραμματιστική! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/net/html-extensions-and-conversions/_index.md b/html/greek/net/html-extensions-and-conversions/_index.md index b2b41e9e1..608fb41b2 100644 --- a/html/greek/net/html-extensions-and-conversions/_index.md +++ b/html/greek/net/html-extensions-and-conversions/_index.md @@ -63,6 +63,8 @@ url: /el/net/html-extensions-and-conversions/ Μάθετε πώς να μετατρέπετε HTML σε TIFF με το Aspose.HTML για .NET. Ακολουθήστε τον βήμα προς βήμα οδηγό μας για αποτελεσματική βελτιστοποίηση περιεχομένου ιστού. ### [Μετατροπή HTML σε XPS σε .NET με Aspose.HTML](./convert-html-to-xps/) Ανακαλύψτε τη δύναμη του Aspose.HTML για .NET: Μετατρέψτε HTML σε XPS χωρίς κόπο. Περιλαμβάνονται προαπαιτούμενα, οδηγός βήμα προς βήμα και συχνές ερωτήσεις. +### [Δημιουργία PDF από URL – Πλήρης Οδηγός C#](./create-pdf-from-url-complete-c-guide/) +Μάθετε πώς να δημιουργήσετε PDF από μια διεύθυνση URL χρησιμοποιώντας το Aspose.HTML για .NET με πλήρη οδηγό C#. ## Σύναψη @@ -74,4 +76,4 @@ url: /el/net/html-extensions-and-conversions/ {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/greek/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..f087234ac --- /dev/null +++ b/html/greek/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,201 @@ +--- +category: general +date: 2026-01-03 +description: Δημιουργήστε PDF από URL σε C# γρήγορα. Μάθετε πώς να μετατρέψετε HTML + σε PDF, να αποθηκεύσετε μια ιστοσελίδα ως PDF και να δημιουργήσετε PDF από HTML + με εύκολο κώδικα. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: el +og_description: Δημιουργήστε PDF από URL σε C# γρήγορα. Αυτό το σεμινάριο δείχνει + πώς να μετατρέψετε HTML σε PDF, να αποθηκεύσετε μια ιστοσελίδα ως PDF και να δημιουργήσετε + PDF από HTML χρησιμοποιώντας το Aspose.HTML. +og_title: Δημιουργία PDF από URL – Πλήρης Οδηγός C# +tags: +- pdf +- csharp +- html +- conversion +title: Δημιουργία PDF από URL – Πλήρης Οδηγός C# +url: /el/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Δημιουργία PDF από URL – Πλήρης Οδηγός C# + +Ποτέ χρειάστηκε να **δημιουργήσετε PDF από URL** αλλά δεν ήξερατε ποια βιβλιοθήκη να επιλέξετε; Δεν είστε μόνοι. Πολλοί προγραμματιστές αντιμετωπίζουν αυτό το πρόβλημα όταν θέλουν να αρχειοθετήσουν μια ιστοσελίδα, να δημιουργήσουν τιμολόγια από ένα online πρότυπο ή απλώς να προσφέρουν ένα κουμπί “λήψη ως PDF” στον ιστότοπό τους. + +Σε αυτό το tutorial θα περάσουμε από όλη τη διαδικασία **μετατροπής HTML σε PDF** χρησιμοποιώντας C#. Θα δείτε πώς να **αποθηκεύσετε μια ιστοσελίδα ως PDF**, πώς να **δημιουργήσετε PDF από HTML**, και γιατί η βιβλιοθήκη `Aspose.HTML for .NET` το κάνει παιχνιδάκι. Στο τέλος, θα έχετε ένα έτοιμο‑για‑εκτέλεση snippet που παίρνει οποιοδήποτε δημόσιο URL, το αποδίδει και γράφει ένα αρχείο PDF στο δίσκο. + +> **Συμβουλή:** Αν εργάζεστε πίσω από εταιρικό proxy, βεβαιωθείτε ότι ο κατασκευαστής `HTMLDocument` λαμβάνει τις σωστές ρυθμίσεις `WebRequest` — διαφορετικά η λήψη θα αποτύχει σιωπηρά. + +## Τι Θα Χρειαστείτε + +- **.NET 6.0** ή νεότερο (ο κώδικας λειτουργεί και σε .NET Framework 4.7+). +- Πακέτο NuGet **Aspose.HTML for .NET** (`Aspose.HTML`). +- Ένας φάκελος με δικαιώματα εγγραφής όπου θα αποθηκευτεί το PDF. +- Βασική εξοικείωση με C# (δεν απαιτούνται προχωρημένα κόλπα). + +Καμία επιπλέον ρύθμιση, κανένα κρυφό μαγικό—μόνο μερικές γραμμές καθαρού, σχολιασμένου κώδικα. + +![Create PDF from URL example](image.png){alt="δημιουργία pdf από url"} + +## Βήμα 1: Εγκατάσταση του Πακέτου NuGet Aspose.HTML + +Ανοίξτε το τερματικό ή το Package Manager Console και εκτελέστε: + +```bash +dotnet add package Aspose.HTML +``` + +> **Γιατί είναι σημαντικό αυτό το βήμα:** Οι κλάσεις `HTMLDocument`, `PdfSaveOptions` και `PdfConverter` βρίσκονται στο namespace `Aspose.Html`. Χωρίς το πακέτο, ο μεταγλωττιστής δεν θα γνωρίζει τι είναι αυτά τα τύπους. + +## Βήμα 2: Φόρτωση της Ιστοσελίδας σε ένα `HTMLDocument` + +Η πρώτη πραγματική ενέργεια είναι η λήψη του απομακρυσμένου HTML. Το `HTMLDocument` μπορεί να πάρει ένα URL απευθείας, διαχειριζόμενο τις ανακατευθύνσεις και τον εντοπισμό τύπου περιεχομένου για εσάς. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Τι συμβαίνει;** +- Το `HTMLDocument` αναλύει το ληφθέν markup σε ένα δέντρο DOM, όπως θα έκανε ένας φυλλομετρητής. +- Οποιοδήποτε εξωτερικό CSS, εικόνες ή σενάρια που αναφέρονται με απόλυτα URLs επίσης κατεβάζονται, εξασφαλίζοντας ότι το PDF θα μοιάζει με τη ζωντανή σελίδα. + +## Βήμα 3: Διαμόρφωση Επιλογών Εξαγωγής PDF (Περιθώρια, Μέγεθος Σελίδας κ.λπ.) + +Πριν παραδώσουμε το έγγραφο στον μετατροπέα, ρυθμίζουμε την έξοδο. Το αντικείμενο `PdfSaveOptions` σας επιτρέπει να ορίσετε περιθώρια, προσανατολισμό σελίδας και ακόμη και την έκδοση PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Γιατί να ορίσετε περιθώρια;** +Ένα στενό PDF μπορεί να κόψει κεφαλίδες ή υποσέλιδα, ειδικά σε ιστοσελίδες βελτιστοποιημένες για κινητά. Η προσθήκη ενός μέτριου περιθωρίου εξασφαλίζει ότι όλα παραμένουν αναγνώσιμα. + +## Βήμα 4: Άμεση Μετατροπή του HTML Εγγράφου σε PDF + +Τώρα η βαριά δουλειά. Η `PdfConverter.ConvertHtml` ρέει τη αποδοθείσα σελίδα κατευθείαν σε αρχείο PDF. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Πίσω από τη σκηνή:** +- Η Aspose αποδίδει το DOM χρησιμοποιώντας τη δική της μηχανή διάταξης (χωρίς Chromium). +- Το αποδοθέν bitmap στη συνέχεια rasterizes σε PDF vectors όπου είναι δυνατόν, διατηρώντας την δυνατότητα επιλογής κειμένου. + +## Βήμα 5: Επαλήθευση του Αποτελέσματος και Διαχείριση Ακραίων Περιπτώσεων + +Μια γρήγορη έλεγχος λογικής αποφεύγει προβλήματα αργότερα. Ανοίξτε το παραγόμενο αρχείο· θα πρέπει να δείτε τη ζωντανή σελίδα, τα περιθώρια εφαρμοσμένα και όλες τις εικόνες ακεραιωμένες. + +### Συνηθισμένα προβλήματα και πώς να τα αποφύγετε + +| Πρόβλημα | Αιτία | Διόρθωση | +|----------|-------|----------| +| **Κενό PDF** | Το URL μπλοκάρεται από firewall ή απαιτεί έλεγχο ταυτότητας | Πέρασμα προσαρμοσμένου `WebRequest` με διαπιστευτήρια στον κατασκευαστή `HTMLDocument` | +| **Λείπουν CSS** | Εξωτερικό φύλλο στυλ χρησιμοποιεί σχετικές διαδρομές | Βεβαιωθείτε ότι το base URL είναι σωστό (η Aspose το διαχειρίζεται, αλλά ελέγξτε τις ανακατευθύνσεις) | +| **Μεγάλο μέγεθος αρχείου** | Υψηλής ανάλυσης εικόνες που δεν έχουν μειωθεί | Χρησιμοποιήστε `PdfSaveOptions.ImageCompression` για JPEG‑συμπίεση των ενσωματωμένων εικόνων | +| **Κατεστραμμένοι Unicode χαρακτήρες** | Μη ενσωματωμένη γραμματοσειρά | Ορίστε `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Πλήρες Παράδειγμα Εργασίας (Έτοιμο για Αντιγραφή‑Επικόλληση) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Τρέξτε το πρόγραμμα (`dotnet run`) και θα βρείτε το `example.pdf` στο `C:\Temp`. Ανοίξτε το με οποιονδήποτε προβολέα PDF και θα δείτε την ακριβή αναπαραγωγή του `https://example.com` με τα περιθώρια που ορίσατε. + +## Συμπέρασμα + +Σας δείξαμε **πώς να δημιουργήσετε PDF από URL** χρησιμοποιώντας C#. Τα βήματα κάλυψαν τη φόρτωση μιας ιστοσελίδας, τη διαμόρφωση περιθωρίων και τη μετατροπή του DOM σε αρχείο PDF—ό,τι χρειάζεστε για **μετατροπή HTML σε PDF**, **αποθήκευση ιστοσελίδας ως PDF**, και **δημιουργία PDF από HTML** με τρόπο έτοιμο για παραγωγή. + +Πειραματιστείτε: αλλάξτε το μέγεθος σελίδας σε `Letter`, αλλάξτε τον προσανατολισμό σε landscape, ή προσθέστε κεφαλίδα/υποσέλιδο χρησιμοποιώντας `PdfPageEventHandler`. Το ίδιο μοτίβο λειτουργεί για δυναμικές σελίδες, portal με προστασία σύνδεσης (απλώς δώστε cookies), ή ακόμη και για μαζική επεξεργασία λίστας URLs. + +**Επόμενα βήματα που μπορείτε να εξερευνήσετε** + +- **HTML to PDF C#** με ασύγχρονη μετατροπή για υπηρεσίες υψηλής απόδοσης. +- Ενσωμάτωση **μεταδεδομένων** (συγγραφέας, τίτλος) στο PDF μέσω `PdfDocumentInfo`. +- Χρήση **Aspose.PDF** για συγχώνευση πολλαπλών PDF που δημιουργήθηκαν από διαφορετικά URLs σε μία αναφορά. + +Έχετε ερωτήσεις; Αφήστε ένα σχόλιο παρακάτω, και καλή προγραμματιστική διασκέδαση! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/net/rendering-html-documents/_index.md b/html/greek/net/rendering-html-documents/_index.md index 447eb51bb..3bb01e489 100644 --- a/html/greek/net/rendering-html-documents/_index.md +++ b/html/greek/net/rendering-html-documents/_index.md @@ -42,6 +42,8 @@ url: /el/net/rendering-html-documents/ ### [Αποδώστε το HTML ως PNG στο .NET με το Aspose.HTML](./render-html-as-png/) Μάθετε να εργάζεστε με το Aspose.HTML για .NET: Χειριστείτε HTML, μετατρέψτε σε διάφορες μορφές και πολλά άλλα. Βουτήξτε σε αυτό το ολοκληρωμένο σεμινάριο! +### [Πώς να αποδώσετε HTML σε PNG – Πλήρης οδηγός βήμα‑βήμα](./how-to-render-html-to-png-complete-step-by-step-guide/) +Μάθετε πώς να αποδίδετε HTML σε PNG με πλήρη βήμα‑βήμα οδηγίες, χρησιμοποιώντας το Aspose.HTML για .NET. ### [Αποδώστε το EPUB ως XPS σε .NET με Aspose.HTML](./render-epub-as-xps/) Μάθετε πώς να δημιουργείτε και να αποδίδετε έγγραφα HTML με το Aspose.HTML για .NET σε αυτό το ολοκληρωμένο σεμινάριο. Βουτήξτε στον κόσμο της χειραγώγησης HTML, της απόξεσης ιστού και πολλά άλλα. ### [Χρονικό όριο απόδοσης σε .NET με Aspose.HTML](./rendering-timeout/) @@ -52,9 +54,12 @@ url: /el/net/rendering-html-documents/ Μάθετε να αποδίδετε πολλά έγγραφα HTML χρησιμοποιώντας το Aspose.HTML για .NET. Ενισχύστε τις δυνατότητες επεξεργασίας εγγράφων σας με αυτήν την ισχυρή βιβλιοθήκη. ### [Απόδοση SVG Doc ως PNG σε .NET με Aspose.HTML](./render-svg-doc-as-png/) Ξεκλειδώστε τη δύναμη του Aspose.HTML για .NET! Μάθετε πώς να αποδίδετε το Έγγραφο SVG ως PNG χωρίς κόπο. Ανατρέξτε σε παραδείγματα βήμα προς βήμα και συχνές ερωτήσεις. Ξεκινήστε τώρα! +### [Πώς να αποδώσετε HTML – Πλήρης οδηγός με προσαρμοσμένο διαχειριστή πόρων](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Μάθετε πώς να αποδίδετε HTML με προσαρμοσμένο διαχειριστή πόρων, βήμα-βήμα, σε αυτόν τον ολοκληρωμένο οδηγό. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/greek/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..9363ef55e --- /dev/null +++ b/html/greek/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,230 @@ +--- +category: general +date: 2026-01-03 +description: Πώς να αποδίδετε HTML σε εικόνες χρησιμοποιώντας το Aspose.HTML. Μάθετε + τη μετατροπή HTML σε εικόνα, προσαρμοσμένο διαχειριστή πόρων και τη μετατροπή HTML + σε bitmap σε C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: el +og_description: Πώς να αποδίδετε HTML σε εικόνες χρησιμοποιώντας το Aspose.HTML. Κατακτήστε + τη μετατροπή HTML σε εικόνα, τον προσαρμοσμένο διαχειριστή πόρων και τη μετατροπή + HTML σε bitmap με C#. +og_title: Πώς να αποδώσετε HTML – Πλήρης οδηγός με προσαρμοσμένο διαχειριστή πόρων +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Πώς να αποδώσετε HTML – Πλήρης οδηγός με προσαρμοσμένο διαχειριστή πόρων +url: /el/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Πώς να Αποδώσετε HTML – Πλήρης Οδηγός με Προσαρμοσμένο Διαχειριστή Πόρων + +Έχετε αναρωτηθεί ποτέ **πώς να αποδώσετε HTML** σε bitmap χωρίς να ασχοληθείτε με κάποιο browser engine; Δεν είστε μόνοι. Πολλοί προγραμματιστές συναντούν εμπόδιο όταν χρειάζονται ένα γρήγορο screenshot μιας δυναμικής σελίδας για email, αναφορές ή μικρογραφίες. Τα καλά νέα; Με το Aspose.HTML μπορείτε να μετατρέψετε οποιοδήποτε HTML string σε εικόνα — χωρίς UI, χωρίς headless Chrome, μόνο καθαρός κώδικας C#. + +Σε αυτό το tutorial θα περάσουμε από ένα πρακτικό σενάριο **html to image conversion**, θα σας δείξουμε πώς να **εφαρμόσετε έναν προσαρμοσμένο διαχειριστή πόρων**, και θα παρουσιάσουμε τη πλήρη ροή εργασίας **convert html to bitmap**. Στο τέλος θα έχετε μια επαναχρησιμοποιήσιμη μέθοδο που αποδίδει HTML σε εικόνα εξ ολοκλήρου στη μνήμη, έτοιμη για περαιτέρω επεξεργασία ή αποθήκευση. + +> **Prerequisites** +> * .NET 6+ (ή .NET Framework 4.7.2+) +> * Πακέτο NuGet Aspose.HTML for .NET (`Aspose.Html`) +> * Βασική εξοικείωση με C# και streams + +Αν έχετε καλύψει αυτά τα βασικά, ας ξεκινήσουμε. + +--- + +## Πώς να Αποδώσετε HTML με Aspose.HTML + +Ο πυρήνας κάθε λειτουργίας **render html to image** είναι η κλάση `ImageRenderer`. Παίρνει ένα `HTMLDocument` και παράγει raster graphics (PNG, JPEG, BMP, κλπ.). Παρακάτω είναι το ελάχιστο σκελετό: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Το απόσπασμα αυτό λειτουργεί, αλλά λαμβάνετε αρχείο μόνο αν υποδείξετε στον renderer πού να το γράψει. Για να κρατήσετε τα πάντα στη μνήμη — και να παρεμβείτε σε κάθε πόρο (εικόνες, CSS, γραμματοσειρές) που ζητά το HTML — θα συνδέσουμε έναν **custom resource handler**. + +--- + +## Υλοποίηση Προσαρμοσμένου Διαχειριστή Πόρων + +Ένας **custom resource handler** σας δίνει πλήρη έλεγχο πάνω στο πώς τα εξωτερικά assets ανακτώνται και αποθηκεύονται. Σε πολλές περιπτώσεις θα θέλετε να συλλάβετε αυτά τα assets στη μνήμη για μετέπειτα χρήση (π.χ., να τα συμπιέσετε σε ZIP). Ο διαχειριστής κληρονομεί από την `ResourceHandler` και υπερκαλύπτει τη μέθοδο `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Γιατί να το κάνετε;** +* **Performance** — χωρίς I/O δίσκου, όλα παραμένουν στη RAM. +* **Security** — εσείς ελέγχετε ποιες URL επιτρέπεται να ανακτηθούν. +* **Extensibility** — μπορείτε να κάνετε caching πόρων, να τα μετονομάσετε, ή να τα ενσωματώσετε σε άλλα containers. + +--- + +## Convert HTML to Bitmap Χρησιμοποιώντας ImageRenderer + +Τώρα συνδυάζουμε τα κομμάτια: φορτώνουμε το HTML, συνδέουμε το `MyHandler`, και αποδίδουμε. Η παρακάτω μέθοδος επιστρέφει ένα `MemoryStream` που περιέχει μια PNG εικόνα της αποδοθείσας σελίδας. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Αναμενόμενο Αποτέλεσμα + +Αν καλέσετε τη μέθοδο ως εξής: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Θα λάβετε ένα `demo.png` που μοιάζει περίπου με: + +![παράδειγμα εξόδου render html](https://example.com/assets/render-html-output.png "παράδειγμα εξόδου render html") + +*Alt text:* **παράδειγμα εξόδου render html** — ένα μικρό bitmap που δείχνει το αποδοθέν απόσπασμα HTML. + +--- + +## HTML to Image Conversion – Συνηθισμένα Πιθανά Προβλήματα & Συμβουλές + +### 1. Σχετικές URL & Base Tags +Αν το HTML σας αναφέρεται σε εξωτερικά CSS ή εικόνες με σχετικές διαδρομές, ο renderer δεν θα γνωρίζει το βασικό φάκελο. Εναλλακτικά: + +* Προσθέστε μια ετικέτα ``, ή +* Επίλυση URL μέσα στη `MyHandler.HandleResource` και εξυπηρετήστε το σωστό stream. + +### 2. Διαθεσιμότητα Γραμματοσειρών +Το Aspose.HTML χρησιμοποιεί τις συστημικές γραμματοσειρές εξ ορισμού. Για προσαρμοσμένες web fonts (`@font-face`), βεβαιωθείτε ότι τα αρχεία γραμματοσειρών είναι προσβάσιμα μέσω του διαχειριστή, ή ενσωματώστε τα ως base64 data URIs. + +### 3. Μεγάλες Σελίδες +Η απόδοση μιας πολύ υψηλής σελίδας μπορεί να καταναλώσει σημαντική μνήμη. Μπορείτε να περιορίσετε το μέγεθος του viewport: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Μορφές Εικόνας +`renderer.Save(stream, ImageFormat.Jpeg)` λειτουργεί εξίσου καλά αν χρειάζεστε συμπίεση JPEG. Αντικαταστήστε το `ImageFormat.Png` με `ImageFormat.Bmp` για πραγματική έξοδο **convert html to bitmap**. + +--- + +## Render HTML to Image – Προχωρημένα Σενάρια + +### A. Απόδοση Πολλαπλών Σελίδων +Αν το HTML περιέχει διακοπές σελίδας (`
`), μπορείτε να επαναλάβετε τη διαδικασία για κάθε σελίδα: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Ενσωμάτωση της Εικόνας σε PDF +Συνδυάστε με το `Aspose.Pdf` για να ενσωματώσετε το PNG απευθείας: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## Συμπέρασμα + +Καλύψαμε **πώς να αποδώσετε HTML** σε bitmap εξ ολοκλήρου στη μνήμη, εξετάσαμε τα βασικά της **html to image conversion**, δημιουργήσαμε έναν **custom resource handler**, και σας δείξαμε πώς να **convert html to bitmap** με το `ImageRenderer` του Aspose.HTML. Η προσέγγιση είναι γρήγορη, thread‑safe, και εύκολα επεκτάσιμη για πραγματικά έργα — από δημιουργία μικρογραφιών email μέχρι αυτοματοποιημένη παραγωγή αναφορών. + +Έτοιμοι για το επόμενο βήμα; Δοκιμάστε να αλλάξετε την έξοδο PNG σε JPEG, πειραματιστείτε με διαφορετικά μεγέθη σελίδας, ή συνδέστε τον διαχειριστή σε ένα επίπεδο caching ώστε οι επαναλαμβανόμενες αποδόσεις να είναι άμεσες. Ο ουρανός είναι το όριο όταν ελέγχετε κάθε πόρο μόνοι σας. + +Έχετε ερωτήσεις ή ένα ενδιαφέρον use‑case που θέλετε να μοιραστείτε; Αφήστε ένα σχόλιο παρακάτω, και καλή απόδοση! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/greek/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..a5b58c71d --- /dev/null +++ b/html/greek/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,233 @@ +--- +category: general +date: 2026-01-03 +description: Μάθετε πώς να αποδίδετε HTML σε PNG, να μετατρέπετε μια ιστοσελίδα σε + εικόνα και να αποθηκεύετε HTML ως PNG χρησιμοποιώντας το Aspose.HTML σε C#. Γρήγορο, + αξιόπιστο και έτοιμο για παραγωγή. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: el +og_description: Αποκτήστε πλήρη γνώση για το πώς να αποδίδετε HTML σε PNG, να μετατρέπετε + ιστοσελίδα σε εικόνα και να αποθηκεύετε HTML ως PNG με ένα πλήρες παράδειγμα C# + χρησιμοποιώντας το Aspose.HTML. +og_title: Πώς να αποδώσετε HTML σε PNG – Πλήρης οδηγός +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Πώς να μετατρέψετε HTML σε PNG – Πλήρης οδηγός βήμα‑προς‑βήμα +url: /el/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Πώς να Μετατρέψετε HTML σε PNG – Πλήρης Οδηγός Βήμα‑βήμα + +Αν ψάχνετε για **πώς να μετατρέψετε html** σε εικόνα, βρίσκεστε στο σωστό μέρος. Είτε χρειάζεστε **convert webpage to image** για μικρογραφίες, είτε θέλετε να αρχειοθετήσετε μια σελίδα ως PNG, είτε να δημιουργήσετε προεπισκοπήσεις κοινωνικών μέσων σε πραγματικό χρόνο, η διαδικασία μπορεί να είναι εκπληκτικά απλή με τη σωστή βιβλιοθήκη. + +Σε αυτό το tutorial θα δούμε πώς να μετατρέψετε οποιοδήποτε ζωντανό URL σε αρχείο PNG χρησιμοποιώντας το Aspose.HTML for .NET. Θα δείτε ένα πλήρες, εκτελέσιμο απόσπασμα κώδικα, θα καταλάβετε γιατί κάθε ρύθμιση είναι σημαντική και θα ανακαλύψετε μερικά κόλπα για την αντιμετώπιση ειδικών περιπτώσεων. Στο τέλος θα μπορείτε να **save html as png**, **convert html to png**, και ακόμη να ενσωματώσετε το αποτέλεσμα σε αναφορά ή email χωρίς καμία δυσκολία. + +## Προαπαιτούμενα – Τι Θα Χρειαστείτε + +Πριν ξεκινήσουμε, βεβαιωθείτε ότι έχετε τα εξής: + +- **.NET 6.0** ή νεότερο (ο κώδικας λειτουργεί επίσης με .NET Core και .NET Framework) +- Πακέτο NuGet **Aspose.HTML for .NET** (`Aspose.Html`) εγκατεστημένο +- Ένα IDE της επιλογής σας (Visual Studio, Rider ή VS Code) +- Έναν φάκελο με δικαιώματα εγγραφής όπου θα αποθηκευτεί το PNG + +Δεν απαιτείται καμία επιπλέον ρύθμιση — το Aspose.HTML αναλαμβάνει το βάρος της ανάλυσης της σελίδας, της εφαρμογής CSS και της ραστεροποίησης της διάταξης. + +## Βήμα 1: Φορτώστε το HTML Έγγραφο που Θέλετε να Αποδώσετε + +Το πρώτο που χρειάζεστε είναι μια παρουσία `HTMLDocument` που δείχνει στη σελίδα που θέλετε να καταγράψετε. Το Aspose.HTML μπορεί να φορτώσει από URL, τοπικό αρχείο ή ακατέργαστη συμβολοσειρά HTML. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Γιατί είναι σημαντικό:** Η φόρτωση του εγγράφου απευθείας από το URL εξασφαλίζει ότι όλοι οι εξωτερικοί πόροι (CSS, JavaScript, εικόνες) θα ληφθούν αυτόματα, παρέχοντάς σας μια πιστή απόδοση της ζωντανής σελίδας. + +## Βήμα 2: Διαμορφώστε τις Επιλογές Απόδοσης Εικόνας + +Στη συνέχεια, ορίζουμε το `ImageRenderingOptions`. Αυτές οι επιλογές ελέγχουν το μέγεθος εξόδου, την ποιότητα και το αν θα εφαρμοστεί anti‑aliasing. Η ρύθμισή τους σας επιτρέπει να ισορροπήσετε το μέγεθος του αρχείου με την οπτική πιστότητα. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** Αν χρειάζεστε μικρογραφία υψηλότερης ανάλυσης, αυξήστε αναλογικά το `Width` και το `Height`. Το Aspose.HTML θα κλιμακώσει τη διάταξη αντίστοιχα χωρίς να χάσει την ποιότητα των διανυσματικών στοιχείων. + +## Βήμα 3: Αρχικοποιήστε τον Renderer Εικόνας + +Τώρα δημιουργούμε ένα `ImageRenderer` περνώντας το έγγραφο και τις επιλογές που ορίσαμε. Αυτό το αντικείμενο είναι η μηχανή που σχεδιάζει πραγματικά τη σελίδα σε bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **Τι συμβαίνει στο παρασκήνιο;** Ο renderer αναλύει το DOM, υπολογίζει τα στυλ CSS, εκτελεί τη διάταξη και τελικά ραστεροποιεί κάθε στοιχείο σε έναν καμβά pixel. Όλα αυτά γίνονται στη μνήμη, χωρίς να χρειάζεται παράθυρο προγράμματος περιήγησης. + +## Βήμα 4: Αποδώστε και Αποθηκεύστε το Αρχείο PNG + +Τέλος, καλέστε το `Render` με το πλήρες μονοπάτι όπου θέλετε να αποθηκευτεί το PNG. Η μέθοδος γράφει το αρχείο συγχρονισμένα και απελευθερώνει εσωτερικούς πόρους αυτόματα. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Αναμενόμενο αποτέλεσμα:** Μετά την εκτέλεση του προγράμματος, θα βρείτε το `example.png` μέσα στον φάκελο `output`. Ανοίξτε το με οποιονδήποτε προβολέα εικόνων και θα δείτε μια πιστή λήψη του `https://example.com` σε 800×600 px. + +--- + +### Πλήρες, Έτοιμο‑για‑Εκτέλεση Παράδειγμα + +Ακολουθεί το ολοκληρωμένο πρόγραμμα που μπορείτε να αντιγράψετε‑και‑επικολλήσετε σε ένα νέο console project. Περιλαμβάνει όλες τις οδηγίες `using`, διαχείριση σφαλμάτων και σχόλια για σαφήνεια. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Τρέξτε το πρόγραμμα (`dotnet run` από το φάκελο του project) και θα λάβετε ένα PNG που αντικατοπτρίζει τη ζωντανή σελίδα. Αυτός είναι ο **how to render html** με λίγες μόνο γραμμές C#. + +--- + +## Συχνές Ερωτήσεις & Ειδικές Περιπτώσεις + +### Μπορώ να αποδώσω τοπικό αρχείο HTML αντί για URL; + +Απολύτως. Απλώς αντικαταστήστε το URL με διαδρομή αρχείου: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Τι γίνεται αν η σελίδα χρησιμοποιεί JavaScript για να τροποποιήσει το DOM μετά τη φόρτωση; + +Το Aspose.HTML εκτελεί τα περισσότερα client‑side scripts, αλλά δεν παρέχει πλήρη μηχανή προγράμματος περιήγησης. Για σελίδες με έντονο scripting ίσως χρειαστεί να προ‑αποδώσετε το HTML (π.χ., με headless Chromium) και έπειτα να το περάσετε στο Aspose.HTML. + +### Πώς ελέγχω το επίπεδο συμπίεσης PNG; + +Το `ImageRenderingOptions` περιλαμβάνει την ιδιότητα `CompressionLevel` (0–9). Τα χαμηλότερα νούμερα σημαίνουν μεγαλύτερα αρχεία αλλά υψηλότερη ποιότητα. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Χρειάζομαι διαφανές φόντο — είναι δυνατόν; + +Ναι. Ορίστε το χρώμα φόντου σε διαφανές πριν την απόδοση: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Υπάρχει τρόπος να αποδώσω πολλαπλές σελίδες σε μία εικόνα; + +Μπορείτε να κάνετε βρόχο πάνω σε μια συλλογή URL ή HTML strings, να αποδώσετε το καθένα σε bitmap και στη συνέχεια να τα ενώσετε χρησιμοποιώντας `System.Drawing` ή `ImageSharp`. Το βασικό βήμα **convert html to png** παραμένει το ίδιο. + +--- + +## Bonus: Ενσωμάτωση του PNG σε Web API + +Αν θέλετε να εκθέσετε αυτή τη λειτουργικότητα μέσω ενός endpoint ASP.NET Core, απλώς επιστρέψτε τα bytes του αρχείου: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Τώρα οποιοσδήποτε πελάτης μπορεί να ζητήσει `GET /render?url=https://example.com` και να λάβει άμεσα ένα PNG — ιδανικό για υπηρεσίες **convert webpage to image**. + +--- + +## Συμπέρασμα + +Καλύψαμε όλα όσα χρειάζεται να γνωρίζετε για το **how to render html** σε αρχείο PNG χρησιμοποιώντας το Aspose.HTML for .NET. Από τη φόρτωση απομακρυσμένης σελίδας, τη διαμόρφωση επιλογών απόδοσης, μέχρι την αντιμετώπιση κοινών παγίδων, το πλήρες παράδειγμα σας δείχνει ακριβώς πώς να **convert html to png**, **save html as png**, και ακόμη να εκθέσετε τη λογική μέσω Web API. + +Δοκιμάστε το με τις δικές σας διευθύνσεις URL, πειραματιστείτε με διαφορετικές διαστάσεις και ίσως αυτοματοποιήστε τη δημιουργία μικρογραφιών για τον κατάλογο προϊόντων σας. Ο ουρανός είναι το όριο μόλις κυριαρχήσετε τα βασικά του **render html to png**. + +--- + +*Έτοιμοι για επόμενη ενίσχυση;* Κατεβάστε το πακέτο NuGet, ενσωματώστε τον κώδικα στο πρόγραμμά σας και αρχίστε να μετατρέπετε ιστοσελίδες σε εικόνες σήμερα. Αν αντιμετωπίσετε προβλήματα, αφήστε ένα σχόλιο — καλή απόδοση! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/net/canvas-and-image-manipulation/_index.md b/html/hindi/net/canvas-and-image-manipulation/_index.md index 5e890c17e..ca1fad165 100644 --- a/html/hindi/net/canvas-and-image-manipulation/_index.md +++ b/html/hindi/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aspose.HTML के साथ .NET में SVG को इमेज में .NET के लिए Aspose.HTML का उपयोग करके SVG को XPS में बदलने का तरीका जानें। इस शक्तिशाली लाइब्रेरी के साथ अपने वेब विकास को बढ़ावा दें। ### [C# में एंटीएलियासिंग कैसे सक्षम करें – स्मूथ किनारे](./how-to-enable-antialiasing-in-c-smooth-edges/) C# में एंटीएलियासिंग को सक्षम करके ग्राफ़िक्स के किनारों को स्मूथ बनाना सीखें। +### [कैनवास टेक्स्ट बनाना – छवियों पर टेक्स्ट रेंडर करने की पूरी गाइड](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Aspose.HTML for .NET का उपयोग करके कैनवास पर टेक्स्ट जोड़ने और उसे छवियों में रेंडर करने की पूरी प्रक्रिया सीखें। ## निष्कर्ष diff --git a/html/hindi/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/hindi/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..831664165 --- /dev/null +++ b/html/hindi/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,217 @@ +--- +category: general +date: 2026-01-03 +description: कैनवास टेक्स्ट को जल्दी बनाएं और सीखें कि टेक्स्ट इमेज को कैसे रेंडर + करें, टेक्स्ट विकल्प सेट करें, और टेक्स्ट कैनवास को भरें, साथ ही लिनक्स टेक्स्ट + रेंडरिंग को सुधारें। +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: hi +og_description: Aspose HTML के साथ कैनवास टेक्स्ट बनाएं, टेक्स्ट इमेज रेंडर करना सीखें, + टेक्स्ट विकल्प सेट करें, और एक ही ट्यूटोरियल में Linux टेक्स्ट की गुणवत्ता सुधारें। +og_title: कैनवास टेक्स्ट बनाएं – पूर्ण रेंडरिंग गाइड +tags: +- Aspose +- C# +- Graphics +- Canvas +title: कैनवास टेक्स्ट बनाएं – छवियों पर टेक्स्ट रेंडर करने की पूरी गाइड +url: /hi/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# कैनवास टेक्स्ट बनाएं – पूर्ण रेंडरिंग गाइड + +क्या आपको कभी **create canvas text** बनाना पड़ा है लेकिन हर प्लेटफ़ॉर्म पर स्पष्ट glyphs प्राप्त करने का तरीका नहीं पता था? आप अकेले नहीं हैं। कई डेवलपर्स को समस्या आती है जब उनका टेक्स्ट Linux पर धुंधला दिखता है, विशेषकर जब HTML को इमेज में बदलते हैं। + +इस ट्यूटोरियल में हम एक व्यावहारिक समाधान के माध्यम से चलेंगे जो न केवल आपको Aspose HTML कैनवास पर **render text image** करने देता है, बल्कि यह भी दिखाता है कि **set text options** कैसे सेट करें, `FillText` को सही ढंग से उपयोग करें, और hinting के साथ **improve Linux text** रेंडरिंग को कैसे बेहतर बनाएं। अंत तक आपके पास एक self‑contained, runnable स्निपेट होगा जिसे आप किसी भी .NET प्रोजेक्ट में डाल सकते हैं। + +## आप क्या सीखेंगे + +- `Canvas` ऑब्जेक्ट को instantiate करने और ड्रॉइंग के लिए तैयार करने का तरीका। +- `TextOptions` की भूमिका और Linux पर hinting सक्षम करने का महत्व। +- स्टेप‑बाय‑स्टेप कोड जो **fill text canvas** को styled, high‑quality कैरेक्टर्स के साथ भरता है। +- सामान्य pitfalls (missing hinting, wrong coordinate system) और त्वरित समाधान। +- उदाहरण को विस्तारित करने के तरीके: कस्टम फ़ॉन्ट्स, रंग, और multi‑line टेक्स्ट। + +> **Prerequisite:** .NET 6+ (या .NET Framework 4.7.2) और Aspose.HTML for .NET NuGet पैकेज इंस्टॉल किया हुआ। + +## चरण 1: प्रोजेक्ट और इम्पोर्ट्स सेट अप करें + +ड्रॉइंग शुरू करने से पहले, सुनिश्चित करें कि आपका प्रोजेक्ट सही असेंबलीज़ को रेफ़रेंस करता है। + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro tip:** यदि आप Linux पर हैं, तो `libgdiplus` पैकेज (`sudo apt-get install libgdiplus`) जोड़ें ताकि GDI‑based रेंडरिंग सुचारू रूप से काम करे। + +## चरण 2: कैनवास बनाएं और उसका आकार निर्धारित करें + +कैनवास मूलतः एक ऑफ‑स्क्रीन बिटमैप है जिस पर आप पेंट कर सकते हैं। इसे अपने डिजिटल ड्रॉइंग बोर्ड की तरह समझें। + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Why this matters:** ठोस बैकग्राउंड सेट करने से बाद में इमेज एक्सपोर्ट करने पर ट्रांसपेरेंट आर्टिफैक्ट्स से बचा जा सकता है। + +## चरण 3: टेक्स्ट ऑप्शन्स कॉन्फ़िगर करें – स्पष्ट Linux टेक्स्ट की कुंजी + +यदि hinting अक्षम है तो Linux फ़ॉन्ट रेंडरिंग धुंधली दिख सकती है। `TextOptions.UseHinting` रेंडरर को glyphs को पिक्सेल सीमाओं के साथ संरेखित करने के लिए बताता है, जिससे आउटपुट बहुत तेज़ हो जाता है। + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **What if you skip this?** कई Linux डिस्ट्रिब्यूशन्स में टेक्स्ट थोड़ा धुंधला या गलत संरेखित दिखेगा, विशेषकर छोटे फ़ॉन्ट साइज पर। + +## चरण 4: कैनवास पर टेक्स्ट भरें + +अब जब कैनवास तैयार है और टेक्स्ट ऑप्शन्स ट्यून हो गए हैं, हम वास्तव में **fill text canvas** कर सकते हैं। + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +यदि आप कस्टम स्टाइलिंग (रंग, फ़ॉन्ट साइज, अलाइनमेंट) चाहते हैं, तो कॉल को `Font` और `Brush` में रैप करें: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +## चरण 5: कैनवास को इमेज फ़ाइल के रूप में एक्सपोर्ट करें + +अंतिम चरण यह है कि रेंडर किया गया बिटमैप डिस्क पर लिखा जाए ताकि आप परिणाम की पुष्टि कर सकें। + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +`canvas-output.png` खोलें और आपको तेज़, सही ढंग से hinted टेक्स्ट दिखना चाहिए— चाहे आप Windows, macOS, या Linux पर हों। + +## सामान्य प्रश्न और किनारे के मामलों + +### hinting प्रदर्शन को कैसे प्रभावित करता है? + +hinting सक्षम करने से नगण्य ओवरहेड जुड़ता है (आमतौर पर 800×600 कैनवास के लिए < 2 ms)। दृश्य लाभ लागत से बहुत अधिक है, विशेषकर सर्वर‑साइड इमेज जनरेशन में जहाँ गुणवत्ता प्रमुख होती है। + +### यदि मुझे मल्टी‑लाइन टेक्स्ट चाहिए तो? + +`canvas.FillText` को लूप में उपयोग करें, Y‑कोऑर्डिनेट को समायोजित करें, या `canvas.FillText` ओवरलोड का उपयोग करें जो `TextLayout` ऑब्जेक्ट को स्वीकार करता है स्वचालित लाइन‑ब्रेकिंग के लिए। + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### क्या मैं कस्टम TrueType फ़ॉन्ट उपयोग कर सकता हूँ? + +बिल्कुल। फ़ॉन्ट को `FontFamily` से लोड करें और इसे `TextOptions.FontFamily` को असाइन करें या सीधे उस `Font` को दें जो आप `FillText` को पास करते हैं। + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +सुनिश्चित करें कि फ़ॉन्ट फ़ाइल रनटाइम के लिए सुलभ हो (इसे प्रोजेक्ट फ़ोल्डर में रखें या सिस्टम‑वाइड रजिस्टर करें)। + +## पूर्ण कार्यशील उदाहरण + +नीचे पूर्ण, कॉपी‑पेस्ट‑तैयार प्रोग्राम है जो ऊपर बताए गए सभी चरणों को सम्मिलित करता है। + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Expected output:** एक PNG फ़ाइल जिसका नाम `canvas-output.png` है, जिसमें दो पंक्तियों का टेक्स्ट है—एक साधारण, एक बोल्ड ब्लू—दोनों hinting के कारण स्पष्ट रूप से रेंडर हुए हैं। + +## निष्कर्ष + +हमने अभी-अभी **created canvas text** को शून्य से बनाया, Aspose.HTML के साथ **render text image** करना सीखा, और यह पता लगाया कि `UseHinting` जैसे **set text options** Linux टेक्स्ट की गुणवत्ता को **improve Linux text** करने के लिए क्यों आवश्यक हैं। ऊपर बताए गए चरणों का पालन करके आप किसी भी .NET वातावरण में विश्वसनीय रूप से **fill text canvas** कर सकते हैं, चाहे आप थंबनेल, वॉटरमार्क, या वेब API के लिए डायनामिक ग्राफिक्स जेनरेट कर रहे हों। + +अगली चुनौती के लिए तैयार हैं? बैकग्राउंड ग्रेडिएंट जोड़ने, टेक्स्ट को घुमाने, या SVG में एक्सपोर्ट करने की कोशिश करें ताकि वेक्टर‑परफेक्ट स्केलिंग मिल सके। वही सिद्धांत—उचित `TextOptions`, विचारशील कोऑर्डिनेट हैंडलिंग, और साफ़ डिस्पोज़ल—सभी फ़ॉर्मेट्स पर लागू होते हैं। + +यदि आपको कोई अजीब समस्या मिली या आपके पास विस्तार के विचार हैं, तो टिप्पणी छोड़ें। कोडिंग का आनंद लें, और उन तेज़‑तीक्ष्ण अक्षरों का मज़ा लें! + +*एक इमेज जो स्पष्ट टेक्स्ट वाले कैनवास को दर्शाती है (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/net/html-document-manipulation/_index.md b/html/hindi/net/html-document-manipulation/_index.md index efda2f94a..020e1eea5 100644 --- a/html/hindi/net/html-document-manipulation/_index.md +++ b/html/hindi/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ HTML दस्तावेज़ों के साथ काम करने .NET के लिए Aspose.HTML का उपयोग करना सीखें। इस व्यापक गाइड के साथ नामस्थान आयात करें, HTML को XML के साथ मर्ज करें और अपने वेब विकास कौशल को बढ़ाएँ। ### [Aspose.HTML के साथ .NET में XpsDevice द्वारा XPS दस्तावेज़ उत्पन्न करें](./generate-xps-documents-by-xpsdevice/) .NET के लिए Aspose.HTML के साथ वेब डेवलपमेंट की क्षमता को अनलॉक करें। HTML दस्तावेज़ों को आसानी से बनाएँ, परिवर्तित करें और उनमें हेरफेर करें। +### [Aspose.HTML के साथ HTML दस्तावेज़ बनाएं – चरण‑दर‑चरण गाइड](./create-html-document-with-aspose-html-step-by-step-guide/) +Aspose.HTML का उपयोग करके HTML दस्तावेज़ बनाने की प्रक्रिया को चरण‑दर‑चरण सीखें। ## निष्कर्ष @@ -78,4 +80,4 @@ HTML दस्तावेज़ों के साथ काम करने {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/hindi/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..ba0e3fe86 --- /dev/null +++ b/html/hindi/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,240 @@ +--- +category: general +date: 2026-01-03 +description: C# में Aspose.HTML का उपयोग करके HTML दस्तावेज़ बनाएं। सीखें कि बॉडी + में तत्व कैसे जोड़ें, फ़ॉन्ट शैली सेट करें, और एक साधारण स्पैन के साथ टेक्स्ट HTML + को फॉर्मेट करें। +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: hi +og_description: C# में HTML दस्तावेज़ बनाएं और देखें कि बॉडी में तत्व कैसे जोड़ें, + फ़ॉन्ट शैली सेट करें, और Aspose.HTML का उपयोग करके टेक्स्ट HTML को फ़ॉर्मेट करें। +og_title: Aspose.HTML के साथ HTML दस्तावेज़ बनाएं – त्वरित गाइड +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Aspose.HTML के साथ HTML दस्तावेज़ बनाएं – चरण‑दर‑चरण मार्गदर्शिका +url: /hi/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Aspose.HTML के साथ HTML दस्तावेज़ बनाएं – चरण‑दर‑चरण गाइड + +क्या आपको कभी प्रोग्रामेटिकली **create html document** बनाने की ज़रूरत पड़ी है और आश्चर्य हुआ कि आउटपुट साधारण क्यों दिखता है? आप अकेले नहीं हैं। कई प्रोजेक्ट्स में हमें स्निपेट्स तुरंत जेनरेट करने होते हैं—जैसे ईमेल टेम्प्लेट, डायनामिक रिपोर्ट, या छोटे UI विजेट्स। अच्छी खबर यह है कि Aspose.HTML **create html document** को बहुत आसान बनाता है, इसे स्टाइल करें, और बिना रॉ स्ट्रिंग लिखे अपने पेज में डालें। + +इस ट्यूटोरियल में हम एक पूर्ण उदाहरण के माध्यम से दिखाएंगे कि **append element to body**, **set font style**, और **format text html** कैसे किया जाता है **create span element** का उपयोग करके। अंत तक आपके पास एक रन करने योग्य C# स्निपेट होगा जो एक `` के अंदर बोल्ड‑इटैलिक टेक्स्ट उत्पन्न करता है, और आप प्रत्येक कॉल के “क्यों” को समझ पाएँगे। + +> **Prerequisites** +> • .NET 6 या बाद का संस्करण (कोई भी हालिया .NET रनटाइम काम करेगा) +> • Aspose.HTML for .NET NuGet पैकेज (`Aspose.Html`) स्थापित +> • C# और DOM अवधारणाओं की बुनियादी समझ + +कोई अन्य लाइब्रेरी आवश्यक नहीं है, और कोड Windows, Linux, या macOS पर चलता है। + +--- + +## आप क्या बनाएँगे + +हम एक न्यूनतम HTML दस्तावेज़ बनाएँगे, उसमें एक `` जोड़ेंगे जिसमें **Bold‑Italic text** वाक्यांश होगा, दोनों **bold** और **italic** स्टाइल लागू करेंगे, और अंत में **append element to body** करेंगे। अंतिम मार्कअप इस प्रकार दिखेगा: + +```html + + + Bold‑Italic text + + +``` + +आप गाइड के अंत में पूर्ण स्रोत को कॉपी‑पेस्ट करके तुरंत चला सकते हैं। + +--- + +![Create HTML document example](image.png){alt="create html document example"} + +--- + +## चरण 1 – HTMLDocument को इनिशियलाइज़ करें (**create html document** की नींव) + +**append element to body** करने से पहले हमें एक दस्तावेज़ ऑब्जेक्ट चाहिए जिससे काम किया जा सके। Aspose.HTML `HTMLDocument` क्लास प्रदान करता है जो इन‑मेमोरी DOM को दर्शाता है। + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Why this matters*: `HTMLDocument` को इंस्टैंशिएट करने से आपको एक साफ़ कैनवास मिलता है—इसे एक खाली शीट समझें जहाँ आप बाद में **format text html** करेंगे। इस चरण के बिना आप नोड्स को मैनीपुलेट नहीं कर सकते और न ही स्टाइल लागू कर सकते हैं। + +--- + +## चरण 2 – `` एलिमेंट बनाएं (**create span element**) + +अब हमें स्टाइल किए गए टेक्स्ट के लिए एक कंटेनर चाहिए। `` एक इनलाइन एलिमेंट है जो फ्लो को तोड़े बिना CSS ले जा सकता है, इसलिए यह एकदम उपयुक्त है। + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Pro tip*: यदि आपको कई टेक्स्ट पीस इन्सर्ट करने हों, तो आप उसी `spanElement` को क्लोन (`spanElement.Clone(true)`) करके `InnerHtml` को हर बार बदल सकते हैं। + +--- + +## चरण 3 – बोल्ड **और** इटैलिक के लिए **set font style** लागू करें + +Aspose.HTML एक स्ट्रॉन्गली‑टाइप्ड `Style` ऑब्जेक्ट एक्सपोज़ करता है। **set font style** करने के लिए हम `WebFontStyle.Bold` और `WebFontStyle.Italic` को बिटवाइज़ OR (`|`) से मिलाते हैं। + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Why use the enum*: `WebFontStyle` एन्नुम सीधे CSS प्रॉपर्टीज़ (`font-weight` और `font-style`) से मैप होता है। एन्नुम का उपयोग टाइपो रोकता है और जेनरेटेड CSS को वैध बनाता है—जो विश्वसनीय **format text html** के लिए आवश्यक है। + +--- + +## चरण 4 – **append element to body** करें और दस्तावेज़ को फाइनल करें + +स्टाइल किया हुआ span तैयार है, अब अंतिम कदम है इसे `` टैग के अंदर रखना। + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +इस बिंदु पर DOM ट्री बिल्कुल वही दिखेगा जैसा पहले दिखाए गए स्निपेट में था। यदि आप `htmlDocument.InnerHtml` को inspect करेंगे, तो आपको पूरी तरह से निर्मित मार्कअप दिखेगा। + +--- + +## चरण 5 – दस्तावेज़ को सेव या रेंडर करें + +आप HTML को फ़ाइल में लिख सकते हैं, ब्राउज़र को स्ट्रीम कर सकते हैं, या Aspose.HTML के रेंडरिंग इंजन का उपयोग करके PDF/Image में रेंडर कर सकते हैं। यहाँ सबसे सरल फ़ाइल‑आउटपुट विकल्प दिया गया है: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +`output.html` को किसी भी ब्राउज़र में खोलें और आपको **Bold‑Italic text** बिल्कुल इच्छित रूप में दिखेगा। + +--- + +## पूर्ण कार्यशील उदाहरण + +सब कुछ मिलाकर, यहाँ पूरा, रन‑टू‑रन प्रोग्राम है: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Expected output** – `output.html` खोलने पर दिखेगा: + +> **Bold‑Italic text** (bold and italic) + +यदि आप स्रोत को inspect करेंगे, तो आपको वही HTML मिलेगा जिसकी हमने चर्चा की थी, जिससे यह पुष्टि होगी कि **format text html** स्टेप सफल रहा। + +--- + +## सामान्य प्रश्न एवं किनारी मामलों + +### 1. यदि मुझे दो से अधिक स्टाइल चाहिए तो? + +`WebFontStyle` एक फ़्लैग्स एन्नुम है, इसलिए आप किसी भी संख्या में स्टाइल्स (जैसे `Underline`) को `|` ऑपरेटर से जोड़ सकते हैं: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. क्या मैं साथ ही रंग भी बदल सकता हूँ? + +बिल्कुल। `Style` ऑब्जेक्ट में `Color` प्रॉपर्टी होती है: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. मैं **append element to body** को कई बार कैसे करूँ? + +एक लूप बनाएँ, स्टाइल किया हुआ span क्लोन करें, टेक्स्ट समायोजित करें, और प्रत्येक क्लोन को append करें: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. यदि मुझे **format text html** `
` के अंदर चाहिए तो? + +एक ही API किसी भी एलिमेंट के साथ काम करती है। बस `CreateElement("span")` को `CreateElement("div")` से बदलें और आवश्यकतानुसार स्टाइल समायोजित करें। + +### 5. संगतता संबंधी चिंताएँ? + +Aspose.HTML .NET Standard 2.0+ को टार्गेट करता है, इसलिए कोड .NET Core, .NET Framework, और .NET 5/6+ पर चलता है। कोई अतिरिक्त ब्राउज़र‑स्पेसिफिक शिम्स आवश्यक नहीं हैं। + +--- + +## प्रो टिप्स एवं पिटफ़ॉल्स + +- **Pro tip:** हमेशा `InnerHtml` को *स्टाइल कॉन्फ़िगर करने के बाद* सेट करें। पहले इंटीर कंटेंट बदलने से कुछ ब्राउज़रों में री‑लेआउट ट्रिगर हो सकता है; स्टाइल के बाद करने से अनावश्यक काम बचता है। +- **Watch out for:** `WebFontStyle` को इनलाइन CSS स्ट्रिंग्स के साथ मिलाना। यदि आप बाद में `spanElement.SetAttribute("style", "...")` मैन्युअली सेट करते हैं, तो एन्नुम‑जनरेटेड स्टाइल ओवरराइट हो जाएगी। एक ही मेथड पर टिके रहें। +- **Performance note:** बड़े दस्तावेज़ों के लिए बैच क्रिएशन (पहले सभी नोड्स बनाएं, फिर एक बार में सभी को append करें) DOM म्यूटेशन्स की संख्या घटाता है और रेंडरिंग को तेज़ करता है। + +--- + +## निष्कर्ष + +अब आप जानते हैं कि Aspose.HTML के साथ **create html document** कैसे किया जाता है, **append element to body**, **set font style**, और **format text html** को **create span element** की मदद से कैसे लागू किया जाता है। उदाहरण पूरी तरह कार्यशील है, और व्याख्याएँ “कैसे” और “क्यों” दोनों को कवर करती हैं, जिससे आप इस पैटर्न को अधिक जटिल परिदृश्यों में आसानी से अनुकूलित कर सकते हैं। + +अगला कदम तैयार है? `` को `

` से बदलें जिसमें कई CSS क्लासेज़ हों, या उसी DOM को `Document` → `PdfSaveOptions` के साथ PDF में रेंडर करें। वही सिद्धांत लागू होते हैं, और आप पाएँगे कि Aspose.HTML किसी भी सर्वर‑साइड HTML जेनरेशन टास्क के लिए एक भरोसेमंद साथी है। + +कोई प्रश्न हैं, या कोई चतुर ट्रिक मिली? नीचे कमेंट करें—हैप्पी कोडिंग! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/net/html-extensions-and-conversions/_index.md b/html/hindi/net/html-extensions-and-conversions/_index.md index 5d3d43011..420024d1c 100644 --- a/html/hindi/net/html-extensions-and-conversions/_index.md +++ b/html/hindi/net/html-extensions-and-conversions/_index.md @@ -39,28 +39,43 @@ Aspose.HTML for .NET सिर्फ़ एक लाइब्रेरी न ## HTML एक्सटेंशन और रूपांतरण ट्यूटोरियल ### [Aspose.HTML के साथ .NET में HTML को PDF में बदलें](./convert-html-to-pdf/) .NET के लिए Aspose.HTML के साथ HTML को PDF में आसानी से बदलें। हमारे चरण-दर-चरण गाइड का पालन करें और HTML-से-PDF रूपांतरण की शक्ति को प्राप्त करें। + +### [URL से PDF बनाएं – पूर्ण C# गाइड](./create-pdf-from-url-complete-c-guide/) +C# में URL से PDF बनाने की पूरी प्रक्रिया सीखें, चरण-दर-चरण मार्गदर्शिका। + ### [Aspose.HTML के साथ .NET में EPUB को छवि में बदलें](./convert-epub-to-image/) .NET के लिए Aspose.HTML का उपयोग करके EPUB को छवियों में परिवर्तित करना सीखें। कोड उदाहरणों और अनुकूलन योग्य विकल्पों के साथ चरण-दर-चरण ट्यूटोरियल। + ### [Aspose.HTML के साथ .NET में EPUB को PDF में बदलें](./convert-epub-to-pdf/) जानें कि .NET के लिए Aspose.HTML का उपयोग करके EPUB को PDF में कैसे बदलें। यह चरण-दर-चरण मार्गदर्शिका सहज दस्तावेज़ रूपांतरण के लिए अनुकूलन विकल्प, FAQ और बहुत कुछ शामिल करती है। + ### [Aspose.HTML के साथ .NET में EPUB को XPS में बदलें](./convert-epub-to-xps/) .NET के लिए Aspose.HTML का उपयोग करके .NET में EPUB को XPS में कैसे बदलें, यह जानें। सरल रूपांतरण के लिए हमारे चरण-दर-चरण मार्गदर्शिका का पालन करें। + ### [Aspose.HTML के साथ .NET में HTML को BMP में बदलें](./convert-html-to-bmp/) .NET के लिए Aspose.HTML का उपयोग करके .NET में HTML को BMP में कैसे बदलें, यह जानें। .NET के लिए Aspose.HTML का लाभ उठाने के लिए वेब डेवलपर्स के लिए व्यापक गाइड। + ### [Aspose.HTML के साथ .NET में HTML को DOC और DOCX में बदलें](./convert-html-to-doc-docx/) इस चरण-दर-चरण मार्गदर्शिका में .NET के लिए Aspose.HTML की शक्ति का उपयोग करना सीखें। HTML को DOCX में आसानी से बदलें और अपने .NET प्रोजेक्ट को बेहतर बनाएँ। आज ही शुरू करें! + ### [Aspose.HTML के साथ .NET में HTML को GIF में बदलें](./convert-html-to-gif/) .NET के लिए Aspose.HTML की शक्ति का पता लगाएं: HTML को GIF में बदलने के लिए चरण-दर-चरण मार्गदर्शिका। पूर्वापेक्षाएँ, कोड उदाहरण, FAQ, और बहुत कुछ! Aspose.HTML के साथ अपने HTML हेरफेर को अनुकूलित करें। + ### [Aspose.HTML के साथ .NET में HTML को JPEG में बदलें](./convert-html-to-jpeg/) .NET के लिए Aspose.HTML के साथ .NET में HTML को JPEG में बदलने का तरीका जानें। .NET के लिए Aspose.HTML की शक्ति का उपयोग करने के लिए चरण-दर-चरण मार्गदर्शिका। अपने वेब डेवलपमेंट कार्यों को आसानी से अनुकूलित करें। + ### [Aspose.HTML के साथ .NET में HTML को Markdown में बदलें](./convert-html-to-markdown/) कुशल सामग्री हेरफेर के लिए Aspose.HTML का उपयोग करके .NET में HTML को Markdown में परिवर्तित करना सीखें। सहज रूपांतरण प्रक्रिया के लिए चरण-दर-चरण मार्गदर्शन प्राप्त करें। + ### [Aspose.HTML के साथ .NET में HTML को MHTML में बदलें](./convert-html-to-mhtml/) Aspose.HTML के साथ .NET में HTML को MHTML में बदलें - कुशल वेब सामग्री संग्रह के लिए चरण-दर-चरण मार्गदर्शिका। MHTML संग्रह बनाने के लिए .NET के लिए Aspose.HTML का उपयोग करना सीखें। + ### [Aspose.HTML के साथ .NET में HTML को PNG में बदलें](./convert-html-to-png/) जानें कि HTML दस्तावेज़ों में हेरफेर करने और उन्हें परिवर्तित करने के लिए .NET के लिए Aspose.HTML का उपयोग कैसे करें। प्रभावी .NET विकास के लिए चरण-दर-चरण मार्गदर्शिका। + ### [Aspose.HTML के साथ .NET में HTML को TIFF में बदलें](./convert-html-to-tiff/) .NET के लिए Aspose.HTML के साथ HTML को TIFF में कैसे बदलें, यह जानें। कुशल वेब सामग्री अनुकूलन के लिए हमारे चरण-दर-चरण मार्गदर्शिका का पालन करें। + ### [Aspose.HTML के साथ .NET में HTML को XPS में बदलें](./convert-html-to-xps/) .NET के लिए Aspose.HTML की शक्ति का पता लगाएं: HTML को XPS में आसानी से बदलें। पूर्वापेक्षाएँ, चरण-दर-चरण मार्गदर्शिका और FAQ शामिल हैं। @@ -74,4 +89,4 @@ Aspose.HTML के साथ .NET में HTML को MHTML में बद {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/hindi/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..bd0b32bda --- /dev/null +++ b/html/hindi/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,200 @@ +--- +category: general +date: 2026-01-03 +description: C# में URL से जल्दी PDF बनाएं। जानें कि HTML को PDF में कैसे बदलें, वेबपेज + को PDF के रूप में सहेजें, और आसान कोड के साथ HTML से PDF उत्पन्न करें। +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: hi +og_description: C# में URL से जल्दी PDF बनाएं। यह ट्यूटोरियल दिखाता है कि HTML को + PDF में कैसे बदलें, वेबपेज को PDF के रूप में कैसे सहेजें, और Aspose.HTML का उपयोग + करके HTML से PDF कैसे जनरेट करें। +og_title: URL से PDF बनाएं – पूर्ण C# गाइड +tags: +- pdf +- csharp +- html +- conversion +title: URL से PDF बनाएं – पूर्ण C# गाइड +url: /hi/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# URL से PDF बनाएं – पूर्ण C# गाइड + +क्या आपको कभी **URL से PDF बनाना** पड़ा लेकिन यह नहीं पता था कि कौनसी लाइब्रेरी चुनें? आप अकेले नहीं हैं। कई डेवलपर्स इस समस्या का सामना करते हैं जब वे वेब पेज को आर्काइव करना चाहते हैं, ऑनलाइन टेम्पलेट से इनवॉइस बनाना चाहते हैं, या बस अपनी साइट पर “PDF के रूप में डाउनलोड” बटन देना चाहते हैं। + +इस ट्यूटोरियल में हम C# का उपयोग करके **HTML को PDF में बदलने** की पूरी प्रक्रिया को देखेंगे। आप देखेंगे कि **वेबपेज को PDF के रूप में सहेजना** कैसे किया जाता है, **HTML से PDF उत्पन्न करना** कैसे होता है, और क्यों `Aspose.HTML for .NET` लाइब्रेरी इसे बहुत आसान बनाती है। अंत तक, आपके पास एक तैयार‑से‑चलाने वाला स्निपेट होगा जो किसी भी सार्वजनिक URL को लेता है, उसे रेंडर करता है, और डिस्क पर PDF फ़ाइल लिखता है। + +> **प्रो टिप:** यदि आप कॉरपोरेट प्रॉक्सी के पीछे काम कर रहे हैं, तो सुनिश्चित करें कि `HTMLDocument` कंस्ट्रक्टर को सही `WebRequest` सेटिंग्स मिलें—अन्यथा डाउनलोड चुपचाप विफल हो जाएगा। + +## आपको क्या चाहिए + +- **.NET 6.0** या बाद का (कोड .NET Framework 4.7+ पर भी काम करता है)। +- **Aspose.HTML for .NET** NuGet पैकेज (`Aspose.HTML`)। +- डिस्क पर एक लिखने योग्य फ़ोल्डर जहाँ PDF सहेजा जाएगा। +- C# की बुनियादी समझ (कोई उन्नत ट्रिक आवश्यक नहीं)। + +कोई अतिरिक्त कॉन्फ़िगरेशन फ़ाइलें नहीं, कोई छिपा जादू नहीं—सिर्फ कुछ पंक्तियों का साफ़, टिप्पणी वाला कोड। + +![Create PDF from URL example](image.png){alt="url से pdf बनाएं"} + +## चरण 1: Aspose.HTML NuGet पैकेज स्थापित करें + +टर्मिनल या पैकेज मैनेजर कंसोल खोलें और चलाएँ: + +```bash +dotnet add package Aspose.HTML +``` + +> **क्यों यह चरण महत्वपूर्ण है:** `HTMLDocument`, `PdfSaveOptions`, और `PdfConverter` क्लासेज `Aspose.Html` नेमस्पेस में स्थित हैं। पैकेज के बिना, कंपाइलर को नहीं पता होगा कि ये टाइप्स क्या हैं। + +## चरण 2: वेब पेज को `HTMLDocument` में लोड करें + +पहला वास्तविक कार्य रिमोट HTML को प्राप्त करना है। `HTMLDocument` सीधे एक URL ले सकता है, आपके लिए रीडायरेक्ट और कंटेंट‑टाइप डिटेक्शन को संभालता है। + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**क्या हो रहा है?** +- `HTMLDocument` प्राप्त किए गए मार्कअप को DOM ट्री में पार्स करता है, ठीक उसी तरह जैसे ब्राउज़र करता है। +- किसी भी बाहरी CSS, इमेजेज, या स्क्रिप्ट्स जो एब्सोल्यूट URLs द्वारा संदर्भित हैं, उन्हें भी डाउनलोड किया जाता है, जिससे PDF लाइव पेज जैसा दिखे। + +## चरण 3: PDF एक्सपोर्ट विकल्प कॉन्फ़िगर करें (मार्जिन, पेज साइज, आदि) + +कनवर्टर को दस्तावेज़ सौंपने से पहले, हम आउटपुट को फाइन‑ट्यून करते हैं। `PdfSaveOptions` ऑब्जेक्ट आपको मार्जिन, पेज ओरिएंटेशन, और यहाँ तक कि PDF संस्करण निर्धारित करने देता है। + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**मार्जिन क्यों सेट करें?** +एक टाइट‑फ़िट PDF हेडर या फुटर को काट सकता है, विशेषकर मोबाइल‑ऑप्टिमाइज़्ड साइट्स पर। एक उचित मार्जिन जोड़ने से सब कुछ पढ़ने योग्य रहता है। + +## चरण 4: HTML दस्तावेज़ को सीधे PDF में बदलें + +अब भारी काम। `PdfConverter.ConvertHtml` रेंडर किए गए पेज को सीधे एक PDF फ़ाइल में स्ट्रीम करता है। + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**आंतरिक कार्यप्रणाली:** +- Aspose अपना स्वयं का लेआउट इंजन उपयोग करके DOM को रेंडर करता है (Chromium की आवश्यकता नहीं)। +- रेंडर किया गया बिटमैप फिर जहाँ संभव हो PDF वेक्टर में रास्टराइज़ किया जाता है, जिससे टेक्स्ट चयन योग्य बना रहता है। + +## चरण 5: परिणाम सत्यापित करें और एज केस संभालें + +एक त्वरित सैनीटी चेक बाद में सिरदर्द बचाता है। उत्पन्न फ़ाइल खोलें; आपको लाइव पेज, लागू मार्जिन, और सभी इमेजेज intact दिखनी चाहिए। + +### सामान्य समस्याएँ और उन्हें कैसे टालें + +| Issue | Cause | Fix | +|-------|-------|-----| +| **Blank PDF** | फ़ायरवॉल द्वारा URL ब्लॉक किया गया या प्रमाणीकरण की आवश्यकता | `HTMLDocument` कंस्ट्रक्टर में क्रेडेंशियल्स के साथ कस्टम `WebRequest` पास करें | +| **Missing CSS** | बाहरी स्टाइलशीट रिलेटिव URLs उपयोग करती है | बेस URL सही है यह सुनिश्चित करें (Aspose इसे संभालता है, लेकिन रीडायरेक्ट्स को दोबारा जांचें) | +| **Large file size** | हाई‑रेज़ोल्यूशन इमेजेज डाउनस्केल नहीं हुईं | एम्बेडेड इमेजेज को JPEG‑कम्प्रेस करने के लिए `PdfSaveOptions.ImageCompression` उपयोग करें | +| **Unicode characters garbled** | फ़ॉन्ट एम्बेड नहीं है | `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` सेट करें | + +## पूर्ण कार्यशील उदाहरण (कॉपी‑पेस्ट तैयार) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +प्रोग्राम चलाएँ (`dotnet run`) और आपको `example.pdf` `C:\Temp` में मिलेगा। इसे किसी भी PDF व्यूअर से खोलें, और आपको `https://example.com` की सटीक प्रतिलिपि मार्जिन के साथ दिखनी चाहिए जो आपने निर्धारित किए थे। + +## निष्कर्ष + +हमने अभी आपको C# का उपयोग करके **URL से PDF बनाने** का तरीका दिखाया है। चरणों में वेब पेज लोड करना, मार्जिन कॉन्फ़िगर करना, और DOM को PDF फ़ाइल में बदलना शामिल था—आपको **HTML को PDF में बदलने**, **वेबपेज को PDF के रूप में सहेजने**, और **HTML से PDF उत्पन्न करने** के लिए सभी चीज़ें मिलीं, एक प्रोडक्शन‑रेडी तरीके से। + +बिना झिझक प्रयोग करें: पेज साइज को `Letter` बदलें, ओरिएंटेशन को लैंडस्केप करें, या `PdfPageEventHandler` का उपयोग करके हेडर/फ़ूटर जोड़ें। वही पैटर्न डायनामिक पेज, लॉगिन‑प्रोटेक्टेड पोर्टल (सिर्फ कुकीज़ प्रदान करें), या यहाँ तक कि URL की सूची को बैच‑प्रोसेस करने पर भी काम करता है। + +**अगले कदम जिन्हें आप एक्सप्लोर कर सकते हैं** + +- **HTML to PDF C#** असिंक्रोनस कन्वर्ज़न के साथ हाई‑थ्रूपुट सर्विसेज़ के लिए। +- `PdfDocumentInfo` के माध्यम से PDF में **metadata** (लेखक, शीर्षक) एम्बेड करना। +- विभिन्न URLs से उत्पन्न कई PDFs को एक सिंगल रिपोर्ट में मर्ज करने के लिए **Aspose.PDF** का उपयोग करना। + +कोई प्रश्न हैं? नीचे टिप्पणी छोड़ें, और कोडिंग का आनंद लें! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/net/rendering-html-documents/_index.md b/html/hindi/net/rendering-html-documents/_index.md index 99b6e6499..4912b7429 100644 --- a/html/hindi/net/rendering-html-documents/_index.md +++ b/html/hindi/net/rendering-html-documents/_index.md @@ -42,6 +42,8 @@ Aspose.HTML for .NET अपनी समृद्ध विशेषताओं ### [Aspose.HTML के साथ .NET में HTML को PNG के रूप में प्रस्तुत करें](./render-html-as-png/) .NET के लिए Aspose.HTML के साथ काम करना सीखें: HTML में हेरफेर करें, विभिन्न प्रारूपों में कनवर्ट करें, और बहुत कुछ। इस व्यापक ट्यूटोरियल में गोता लगाएँ! +### [HTML को PNG के रूप में प्रस्तुत करने का तरीका – पूर्ण चरण‑दर‑चरण गाइड](./how-to-render-html-to-png-complete-step-by-step-guide/) +HTML को PNG में बदलने की पूरी प्रक्रिया सीखें, कोड उदाहरण और सर्वोत्तम प्रथाओं के साथ। ### [Aspose.HTML के साथ .NET में EPUB को XPS के रूप में प्रस्तुत करें](./render-epub-as-xps/) इस विस्तृत ट्यूटोरियल में जानें कि .NET के लिए Aspose.HTML के साथ HTML दस्तावेज़ कैसे बनाएँ और रेंडर करें। HTML मैनिपुलेशन, वेब स्क्रैपिंग और बहुत कुछ की दुनिया में गोता लगाएँ। ### [Aspose.HTML के साथ .NET में टाइमआउट रेंडर करना](./rendering-timeout/) @@ -52,9 +54,12 @@ Aspose.HTML for .NET में रेंडरिंग टाइमआउट .NET के लिए Aspose.HTML का उपयोग करके कई HTML दस्तावेज़ों को रेंडर करना सीखें। इस शक्तिशाली लाइब्रेरी के साथ अपनी दस्तावेज़ प्रसंस्करण क्षमताओं को बढ़ाएँ। ### [Aspose.HTML के साथ .NET में SVG दस्तावेज़ को PNG के रूप में प्रस्तुत करें](./render-svg-doc-as-png/) .NET के लिए Aspose.HTML की शक्ति अनलॉक करें! SVG Doc को आसानी से PNG के रूप में रेंडर करना सीखें। चरण-दर-चरण उदाहरणों और FAQ में गोता लगाएँ। अभी शुरू करें! +### [HTML को रेंडर करने का तरीका – कस्टम रिसोर्स हैंडलर के साथ पूर्ण गाइड](./how-to-render-html-complete-guide-with-custom-resource-handl/) +कस्टम रिसोर्स हैंडलर के साथ HTML रेंडर करने की पूरी प्रक्रिया सीखें। + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/hindi/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..c14e3167e --- /dev/null +++ b/html/hindi/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,229 @@ +--- +category: general +date: 2026-01-03 +description: Aspose.HTML का उपयोग करके HTML को छवियों में कैसे रेंडर करें। HTML‑से‑इमेज + रूपांतरण, कस्टम रिसोर्स हैंडलर सीखें, और C# में HTML को बिटमैप में बदलें। +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: hi +og_description: Aspose.HTML का उपयोग करके HTML को छवियों में रेंडर करना। HTML‑से‑छवि + रूपांतरण, कस्टम रिसोर्स हैंडलर में निपुण बनें, और C# में HTML को बिटमैप में परिवर्तित + करें। +og_title: HTML को रेंडर कैसे करें – कस्टम रिसोर्स हैंडलर के साथ पूर्ण गाइड +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTML को कैसे रेंडर करें – कस्टम रिसोर्स हैंडलर के साथ पूर्ण गाइड +url: /hi/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML को रेंडर करने का तरीका – कस्टम रिसोर्स हैंडलर के साथ पूर्ण गाइड + +क्या आपने कभी सोचा है **HTML को** एक बिटमैप में कैसे रेंडर किया जाए बिना खुद ब्राउज़र इंजन को संभाले? आप अकेले नहीं हैं। कई डेवलपर्स को ईमेल, रिपोर्ट या थंबनेल के लिए डायनामिक पेज की त्वरित स्क्रीनशॉट चाहिए होती है और वे अटक जाते हैं। अच्छी खबर? Aspose.HTML के साथ आप किसी भी HTML स्ट्रिंग को इमेज में बदल सकते हैं—कोई UI नहीं, कोई हेडलेस Chrome नहीं, सिर्फ शुद्ध C# कोड। + +इस ट्यूटोरियल में हम एक व्यावहारिक **html to image conversion** परिदृश्य को देखेंगे, **कस्टम रिसोर्स हैंडलर को इम्प्लीमेंट** करना सीखेंगे, और पूरी **convert html to bitmap** वर्कफ़्लो को प्रदर्शित करेंगे। अंत तक आपके पास एक पुन: उपयोग योग्य मेथड होगा जो पूरी तरह मेमोरी में HTML को इमेज में रेंडर करता है, आगे की प्रोसेसिंग या स्टोरेज के लिए तैयार। + +> **Prerequisites** +> * .NET 6+ (या .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet पैकेज (`Aspose.Html`) +> * C# और स्ट्रीम्स की बुनियादी जानकारी + +यदि आपके पास ये बुनियादी चीज़ें हैं, तो चलिए शुरू करते हैं। + +--- + +## Aspose.HTML के साथ HTML को रेंडर कैसे करें + +किसी भी **render html to image** ऑपरेशन का मूल `ImageRenderer` क्लास है। यह एक `HTMLDocument` लेता है और रास्टर ग्राफ़िक्स (PNG, JPEG, BMP, आदि) उत्पन्न करता है। नीचे न्यूनतम स्केलेटन दिया गया है: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +यह स्निपेट काम करता है, लेकिन आपको रेंडरर को यह बताना होगा कि फ़ाइल कहाँ लिखनी है, तभी यह डिस्क पर फ़ाइल बनाता है। सब कुछ मेमोरी में रखने और HTML द्वारा अनुरोधित प्रत्येक रिसोर्स (इमेज, CSS, फ़ॉन्ट) को इंटरसेप्ट करने के लिए हम **कस्टम रिसोर्स हैंडलर** जोड़ेंगे। + +--- + +## कस्टम रिसोर्स हैंडलर को इम्प्लीमेंट करना + +एक **custom resource handler** आपको बाहरी एसेट्स को कैसे फेच और स्टोर किया जाए, इस पर पूर्ण नियंत्रण देता है। कई मामलों में आप इन एसेट्स को बाद में उपयोग के लिए मेमोरी में कैप्चर करना चाहेंगे (जैसे, उन्हें ZIP में बंडल करना)। हैंडलर `ResourceHandler` से इनहेरिट करता है और `HandleResource` को ओवरराइड करता है। + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**क्यों करें?** +* **Performance** – डिस्क I/O नहीं, सब कुछ RAM में रहता है। +* **Security** – आप तय कर सकते हैं कि कौन‑से URLs फेच किए जा सकते हैं। +* **Extensibility** – आप रिसोर्सेज को कैश कर सकते हैं, उनका नाम बदल सकते हैं, या उन्हें अन्य कंटेनर में एम्बेड कर सकते हैं। + +--- + +## ImageRenderer का उपयोग करके HTML को बिटमैप में बदलना + +अब हम टुकड़ों को जोड़ते हैं: HTML लोड करें, `MyHandler` अटैच करें, और रेंडर करें। नीचे दिया गया मेथड एक `MemoryStream` रिटर्न करता है जिसमें रेंडर किए गए पेज की PNG इमेज होती है। + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### अपेक्षित आउटपुट + +यदि आप मेथड को इस तरह कॉल करते हैं: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +तो आपको एक `demo.png` मिलेगा जो लगभग इस प्रकार दिखेगा: + +![how to render html output example](https://example.com/assets/render-html-output.png "how to render html output example") + +*Alt text:* **how to render html output example** – एक छोटा बिटमैप जो रेंडर किए गए HTML स्निपेट को दर्शाता है। + +--- + +## HTML to Image Conversion – सामान्य समस्याएँ और टिप्स + +### 1. रिलेटिव URLs और Base टैग्स +यदि आपका HTML बाहरी CSS या इमेजेज को रिलेटिव पाथ्स से रेफ़र करता है, तो रेंडरर को बेस फ़ोल्डर नहीं पता चलेगा। या तो: + +* `` टैग जोड़ें, या +* `MyHandler.HandleResource` के अंदर URLs को रिजॉल्व करें और सही स्ट्रीम सर्व करें। + +### 2. फ़ॉन्ट उपलब्धता +Aspose.HTML डिफ़ॉल्ट रूप से सिस्टम फ़ॉन्ट्स का उपयोग करता है। कस्टम वेब फ़ॉन्ट्स (`@font-face`) के लिए सुनिश्चित करें कि फ़ॉन्ट फ़ाइलें हैंडलर के माध्यम से पहुँच योग्य हों, या उन्हें base64 डेटा URI के रूप में एम्बेड करें। + +### 3. बड़े पेजेज +बहुत लंबा पेज रेंडर करने से मेमोरी का उपयोग काफी बढ़ सकता है। आप व्यूपोर्ट साइज को सीमित कर सकते हैं: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. इमेज फ़ॉर्मेट्स +`renderer.Save(stream, ImageFormat.Jpeg)` भी वही काम करता है यदि आपको JPEG कॉम्प्रेशन चाहिए। `ImageFormat.Png` को `ImageFormat.Bmp` से बदलें ताकि एक सच्चा **convert html to bitmap** आउटपुट मिले। + +--- + +## Render HTML to Image – उन्नत परिदृश्य + +### A. कई पेजेज रेंडर करना +यदि HTML में पेज ब्रेक्स (`
`) हैं, तो आप पेजेज़ पर इटररेट कर सकते हैं: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. इमेज को PDF में एम्बेड करना +`Aspose.Pdf` के साथ मिलाकर PNG को सीधे एम्बेड करें: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## निष्कर्ष + +हमने **HTML को** पूरी तरह मेमोरी में बिटमैप में रेंडर करने का तरीका कवर किया, **html to image conversion** के मूलभूत सिद्धांतों को समझा, एक **custom resource handler** बनाया, और Aspose.HTML के `ImageRenderer` के साथ **convert html to bitmap** कैसे किया, दिखाया। यह तरीका तेज़, थ्रेड‑सेफ़, और वास्तविक प्रोजेक्ट्स के लिए आसानी से विस्तारित किया जा सकता है—ईमेल थंबनेल जेनरेशन से लेकर ऑटोमैटेड रिपोर्ट निर्माण तक। + +अगला कदम तैयार है? PNG आउटपुट को JPEG में बदलें, विभिन्न पेज साइज के साथ प्रयोग करें, या हैंडलर को कैशिंग लेयर में जोड़ें ताकि बार‑बार रेंडर तुरंत हो। जब आप हर रिसोर्स को खुद नियंत्रित करते हैं, तो संभावनाएँ अनंत हैं। + +कोई सवाल या दिलचस्प उपयोग‑केस साझा करना चाहते हैं? नीचे कमेंट करें, और खुशहाल रेंडरिंग! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/hindi/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..bf34987c5 --- /dev/null +++ b/html/hindi/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,226 @@ +--- +category: general +date: 2026-01-03 +description: Aspose.HTML का उपयोग करके C# में HTML को PNG में रेंडर करना, वेबपेज को + इमेज में बदलना और HTML को PNG के रूप में सहेजना सीखें। तेज़, भरोसेमंद और उत्पादन + के लिए तैयार। +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: hi +og_description: Aspose.HTML का उपयोग करके पूर्ण C# उदाहरण के साथ HTML को PNG में रेंडर + करना, वेबपेज को इमेज में बदलना और HTML को PNG के रूप में सहेजना सीखें। +og_title: HTML को PNG में रेंडर करने का तरीका – पूर्ण गाइड +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTML को PNG में रेंडर कैसे करें – पूर्ण चरण‑दर‑चरण गाइड +url: /hi/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML को PNG में रेंडर कैसे करें – पूर्ण चरण‑दर‑चरण गाइड + +यदि आप **how to render html** को किसी इमेज में बदलने की तलाश में हैं, तो आप सही जगह पर आए हैं। चाहे आपको थंबनेल के लिए **convert webpage to image** की आवश्यकता हो, पेज को PNG के रूप में आर्काइव करना हो, या तुरंत सोशल‑मीडिया प्रीव्यू जनरेट करना हो, सही लाइब्रेरी के साथ यह प्रक्रिया आश्चर्यजनक रूप से सरल हो सकती है। + +इस ट्यूटोरियल में हम Aspose.HTML for .NET का उपयोग करके किसी भी लाइव URL को PNG फ़ाइल में बदलने की प्रक्रिया को चरण‑दर‑चरण देखेंगे। आप एक पूर्ण, चलाने योग्य कोड स्निपेट देखेंगे, प्रत्येक सेटिंग क्यों महत्वपूर्ण है सीखेंगे, और किनारे के मामलों को संभालने के कुछ ट्रिक्स भी जानेंगे। अंत तक आप **save html as png**, **convert html to png** कर पाएँगे, और यहाँ तक कि रिपोर्ट या ईमेल में परिणाम को बिना किसी परेशानी के एम्बेड कर सकेंगे। + +## Prerequisites – What You’ll Need + +शुरू करने से पहले सुनिश्चित करें कि आपके पास निम्नलिखित हैं: + +- **.NET 6.0** या बाद का संस्करण (कोड .NET Core और .NET Framework के साथ भी काम करता है) +- **Aspose.HTML for .NET** NuGet पैकेज (`Aspose.Html`) स्थापित +- आपका पसंदीदा IDE (Visual Studio, Rider, या VS Code) +- एक लिखने योग्य फ़ोल्डर जहाँ PNG सहेजा जाएगा + +कोई अतिरिक्त कॉन्फ़िगरेशन आवश्यक नहीं है—Aspose.HTML पेज को पार्स करने, CSS लागू करने, और लेआउट को रास्टराइज़ करने का काम स्वयं करता है। + +## Step 1: Load the HTML Document You Want to Render + +सबसे पहले आपको एक `HTMLDocument` इंस्टेंस चाहिए जो उस पेज की ओर इशारा करे जिसे आप कैप्चर करना चाहते हैं। Aspose.HTML URL, लोकल फ़ाइल, या रॉ HTML स्ट्रिंग से लोड कर सकता है। + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** दस्तावेज़ को सीधे URL से लोड करने से सभी बाहरी संसाधन (CSS, JavaScript, images) स्वचालित रूप से प्राप्त हो जाते हैं, जिससे आपको लाइव पेज की सटीक रेंडरिंग मिलती है। + +## Step 2: Configure Image Rendering Options + +अब हम `ImageRenderingOptions` सेट करते हैं। ये विकल्प आउटपुट आकार, गुणवत्ता, और एंटी‑एलियासिंग लागू होने को नियंत्रित करते हैं। इन्हें समायोजित करके आप फ़ाइल आकार और दृश्य गुणवत्ता के बीच संतुलन बना सकते हैं। + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** यदि आपको उच्च‑रिज़ॉल्यूशन थंबनेल चाहिए, तो `Width` और `Height` को अनुपातिक रूप से बढ़ाएँ। Aspose.HTML लेआउट को उसी अनुसार स्केल करेगा बिना वेक्टर गुणवत्ता खोए। + +## Step 3: Initialise the Image Renderer + +अब हम `ImageRenderer` बनाते हैं, जिसमें हमने अभी परिभाषित दस्तावेज़ और विकल्प पास किए हैं। यह ऑब्जेक्ट वही इंजन है जो पेज को बिटमैप पर ड्रॉ करता है। + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** रेंडरर DOM को पार्स करता है, CSS स्टाइल्स की गणना करता है, लेआउट करता है, और अंत में प्रत्येक एलिमेंट को पिक्सेल कैनवास पर रास्टराइज़ करता है। यह सब मेमोरी में होता है, इसलिए आपको ब्राउज़र विंडो की आवश्यकता नहीं है। + +## Step 4: Render and Save the PNG File + +अंत में, `Render` को उस पूर्ण पाथ के साथ कॉल करें जहाँ आप PNG सहेजना चाहते हैं। यह मेथड फ़ाइल को सिंक्रोनस रूप से लिखता है और आंतरिक संसाधनों को स्वचालित रूप से डिस्पोज़ कर देता है। + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** प्रोग्राम चलाने के बाद, आपको `example.png` `output` फ़ोल्डर के अंदर मिलेगा। इसे किसी भी इमेज व्यूअर से खोलें और आपको `https://example.com` का 800×600 px का सटीक स्नैपशॉट दिखेगा। + +--- + +### Full, Ready‑to‑Run Example + +नीचे वह पूर्ण प्रोग्राम है जिसे आप नई कंसोल प्रोजेक्ट में कॉपी‑पेस्ट कर सकते हैं। इसमें सभी `using` निर्देश, एरर हैंडलिंग, और स्पष्टता के लिए टिप्पणियाँ शामिल हैं। + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +प्रोग्राम चलाएँ (`dotnet run` प्रोजेक्ट फ़ोल्डर से) और आपको एक PNG मिलेगा जो लाइव पेज को प्रतिबिंबित करता है। यही **how to render html** कुछ ही C# लाइनों से है। + +--- + +## Frequently Asked Questions & Edge Cases + +### Can I render a local HTML file instead of a URL? + +बिल्कुल। URL को फ़ाइल पाथ से बदल दें: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### What if the page uses JavaScript to modify the DOM after load? + +Aspose.HTML अधिकांश क्लाइंट‑साइड स्क्रिप्ट्स को एक्सीक्यूट करता है, लेकिन यह पूर्ण ब्राउज़र इंजन नहीं है। अत्यधिक स्क्रिप्टेड पेजों के लिए आपको पहले HTML को प्री‑रेंडर करना पड़ सकता है (जैसे हेडलेस Chromium का उपयोग) और फिर परिणामस्वरूप मार्कअप को Aspose.HTML को देना होगा। + +### How do I control PNG compression level? + +`ImageRenderingOptions` में `CompressionLevel` प्रॉपर्टी (0–9) उपलब्ध है। छोटे नंबर बड़े फ़ाइल आकार लेकिन उच्च गुणवत्ता दर्शाते हैं। + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### I need a transparent background—can I do that? + +हाँ। रेंडर करने से पहले बैकग्राउंड कलर को ट्रांसपेरेंट सेट करें: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Is there a way to render multiple pages into a single image? + +आप URL या HTML स्ट्रिंग्स के संग्रह पर लूप कर सकते हैं, प्रत्येक को बिटमैप में रेंडर कर सकते हैं, और फिर `System.Drawing` या `ImageSharp` का उपयोग करके उन्हें एक साथ जोड़ सकते हैं। मूल **convert html to png** चरण वही रहता है। + +## Bonus: Embedding the PNG in a Web API + +यदि आप इस फ़ंक्शनैलिटी को ASP.NET Core एंडपॉइंट के माध्यम से एक्सपोज़ करना चाहते हैं, तो बस फ़ाइल बाइट्स रिटर्न करें: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +अब कोई भी क्लाइंट `GET /render?url=https://example.com` अनुरोध कर सकता है और तुरंत PNG प्राप्त कर सकता है—**convert webpage to image** सर्विस के लिए एकदम उपयुक्त। + +## Conclusion + +हमने Aspose.HTML for .NET का उपयोग करके **how to render html** को PNG फ़ाइल में बदलने के सभी आवश्यक चरणों को कवर किया। रिमोट पेज लोड करने, रेंडरिंग विकल्प कॉन्फ़िगर करने, और सामान्य समस्याओं को संभालने से लेकर पूर्ण उदाहरण तक, आप अब **convert html to png**, **save html as png**, और यहाँ तक कि वेब API के माध्यम से इस लॉजिक को एक्सपोज़ भी कर सकते हैं। + +अपने स्वयं के URL के साथ इसे आज़माएँ, विभिन्न डाइमेंशन के साथ प्रयोग करें, और शायद अपने प्रोडक्ट कैटलॉग के लिए थंबनेल जेनरेशन को ऑटोमेट करें। एक बार जब आप **render html to png** की बुनियादें समझ लेते हैं, तो संभावनाएँ असीमित हैं। + +*Ready to level up?* NuGet पैकेज प्राप्त करें, कोड को अपने प्रोजेक्ट में डालें, और आज ही वेबपेज को इमेज में बदलना शुरू करें। यदि कोई समस्या आती है, तो टिप्पणी छोड़ने में संकोच न करें—हैप्पी रेंडरिंग! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/net/canvas-and-image-manipulation/_index.md b/html/hongkong/net/canvas-and-image-manipulation/_index.md index 708ffcd99..989a05aae 100644 --- a/html/hongkong/net/canvas-and-image-manipulation/_index.md +++ b/html/hongkong/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aspose.HTML for .NET 簡化了影像編輯。您可以載入影像、套用濾 了解如何使用 Aspose.HTML for .NET 將 SVG 轉換為 XPS。利用這個強大的程式庫促進您的 Web 開發。 ### [如何在 C# 中啟用抗鋸齒 – 平滑邊緣](./how-to-enable-antialiasing-in-c-smooth-edges/) 了解如何在 C# 中使用 Aspose.HTML 啟用抗鋸齒，讓圖形邊緣更平滑。 +### [在圖像上渲染文字的完整畫布文字指南](./create-canvas-text-full-guide-to-rendering-text-on-images/) +學習如何在圖像上使用 Aspose.HTML for .NET 添加文字，涵蓋字型、顏色、位置與樣式的完整步驟。 ## 結論 diff --git a/html/hongkong/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/hongkong/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..e49dc4ef0 --- /dev/null +++ b/html/hongkong/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,232 @@ +--- +category: general +date: 2026-01-03 +description: 快速建立畫布文字，學習如何渲染文字圖像、設定文字選項，並填充文字畫布，同時提升 Linux 文字渲染。 +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: zh-hant +og_description: 使用 Aspose HTML 建立 Canvas 文字，學習渲染文字圖像，設定文字選項，並在單一教學中提升 Linux 文字品質。 +og_title: 創建畫布文字 – 完整渲染指南 +tags: +- Aspose +- C# +- Graphics +- Canvas +title: 創建畫布文字 – 圖像文字渲染完整指南 +url: /zh-hant/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 建立 Canvas 文字 – 完整渲染指南 + +是否曾需要 **建立 canvas 文字**，卻不確定如何在各平台上取得清晰的字形？你並不孤單。許多開發者在 Linux 上看到文字模糊，尤其是將 HTML 轉成圖片時，常會卡關。 + +在本教學中，我們將示範一個實用解決方案，不只讓你 **渲染文字圖片** 到 Aspose HTML canvas，還會說明如何 **設定文字選項**、正確使用 `FillText`，以及透過 hinting **改善 Linux 文字** 渲染。完成後，你將擁有一段可直接放入任何 .NET 專案的完整、可執行程式碼片段。 + +## 你將學到 + +- 如何實例化 `Canvas` 物件並為繪圖做準備。 +- `TextOptions` 的角色，以及在 Linux 上啟用 hinting 為何重要。 +- 逐步程式碼，讓你 **填入文字到 canvas** 並呈現高品質、樣式化的字元。 +- 常見陷阱（缺少 hinting、座標系統錯誤）與快速修正方式。 +- 延伸範例：自訂字型、顏色與多行文字。 + +> **先決條件：** .NET 6+（或 .NET Framework 4.7.2）以及已安裝 Aspose.HTML for .NET NuGet 套件。 + +--- + +## 步驟 1：設定專案與引用 + +在開始繪圖前，先確保你的專案已參考正確的組件。 + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **小技巧：** 若你在 Linux 上執行，請安裝 `libgdiplus` 套件（`sudo apt-get install libgdiplus`），讓基於 GDI 的渲染順利運作。 + +--- + +## 步驟 2：建立 Canvas 並定義尺寸 + +Canvas 本質上是一個離屏位圖，你可以在上面繪圖。把它想像成你的數位畫板。 + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **為何這很重要：** 設定實心背景可避免在之後匯出圖片時出現透明雜訊。 + +--- + +## 步驟 3：設定文字選項 – 清晰 Linux 文字的關鍵 + +在 Linux 上若未啟用 hinting，字型渲染會顯得模糊。`TextOptions.UseHinting` 會指示渲染器將字形對齊到像素邊界，顯著提升輸出清晰度。 + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **如果省略這一步會怎樣？** 在多數 Linux 發行版上，文字會稍微模糊或對不齊，尤其在小字體尺寸時更為明顯。 + +--- + +## 步驟 4：將文字填入 Canvas + +現在 Canvas 已就緒，文字選項也調整完畢，我們可以真正 **填入文字到 canvas**。 + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +若想自訂樣式（顏色、字體大小、對齊方式），可將呼叫包在 `Font` 與 `Brush` 中： + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## 步驟 5：將 Canvas 匯出為圖片檔案 + +最後一步是將渲染好的位圖寫入磁碟，以便檢查結果。 + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +開啟 `canvas-output.png`，你應該會看到銳利且正確 hint 的文字——無論在 Windows、macOS 或 Linux 上皆如此。 + +--- + +## 常見問題與邊緣案例 + +### hinting 會影響效能嗎？ + +啟用 hinting 只會帶來極小的額外開銷（通常 < 2 ms 於 800×600 的 canvas），視覺提升遠大於成本，特別是對於品質至上的伺服器端圖像產生。 + +### 若需要多行文字該怎麼辦？ + +在迴圈中使用 `canvas.FillText`，調整 Y 座標；或使用接受 `TextLayout` 物件的 `canvas.FillText` overload，以自動斷行。 + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### 可以使用自訂的 TrueType 字型嗎？ + +當然可以。使用 `FontFamily` 載入字型，並指定給 `TextOptions.FontFamily` 或直接傳給 `FillText` 的 `Font`。 + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +確保執行時能存取字型檔（放在專案資料夾或系統全域註冊）。 + +--- + +## 完整可執行範例 + +以下是結合上述所有步驟的完整、可直接複製貼上的程式碼。 + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**預期輸出：** 產生名為 `canvas-output.png` 的 PNG 檔，內含兩行文字——一行普通、另一行藍色粗體——皆因 hinting 而呈現銳利。 + +--- + +## 結論 + +我們已從零開始 **建立 canvas 文字**，學會如何使用 Aspose.HTML **渲染文字圖片**，並了解為何 `UseHinting` 等 **設定文字選項** 對 **改善 Linux 文字** 品質至關重要。依照上述步驟，你可以在任何 .NET 環境中可靠地 **填入文字到 canvas**，無論是產生縮圖、浮水印，或是為 Web API 動態產生圖形。 + +準備好迎接下一個挑戰了嗎？試著加入背景漸層、旋轉文字，或匯出為 SVG 以取得向量級的完美縮放。相同的原則——正確的 `TextOptions`、謹慎的座標處理與乾淨的資源釋放——在各種格式中皆適用。 + +如果你遇到任何奇怪的情況或有擴充想法，歡迎留言分享。祝編程愉快，享受那鋒利如刀的字形吧！ + +--- + +*Image illustrating a canvas with crisp text (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/net/html-document-manipulation/_index.md b/html/hongkong/net/html-document-manipulation/_index.md index bc21317d8..729d31ad6 100644 --- a/html/hongkong/net/html-document-manipulation/_index.md +++ b/html/hongkong/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Aspose.HTML for .NET 因其簡單性和強大功能而脫穎而出。它使您 學習使用 Aspose.HTML for .NET。透過此綜合指南匯入命名空間、將 HTML 與 XML 合併並增強您的 Web 開發技能。 ### [使用 Aspose.HTML 在 .NET 中透過 XpsDevice 產生 XPS 文檔](./generate-xps-documents-by-xpsdevice/) 使用 Aspose.HTML for .NET 釋放 Web 開發的潛力。輕鬆建立、轉換和操作 HTML 文件。 +### [使用 Aspose.HTML 建立 HTML 文件 – 步驟說明指南](./create-html-document-with-aspose-html-step-by-step-guide/) +本教學逐步說明如何使用 Aspose.HTML 建立全新的 HTML 文件，涵蓋基本設定與範例程式碼。 ## 結論 @@ -78,4 +80,4 @@ Aspose.HTML for .NET 因其簡單性和強大功能而脫穎而出。它使您 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/hongkong/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..e3157a113 --- /dev/null +++ b/html/hongkong/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,239 @@ +--- +category: general +date: 2026-01-03 +description: 使用 Aspose.HTML 在 C# 中建立 HTML 文件。了解如何將元素附加到 body、設定字型樣式，以及使用簡單的 span 來格式化文字 + HTML。 +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: zh-hant +og_description: 在 C# 中建立 HTML 文件，了解如何將元素附加至 body、設定字型樣式，並使用 Aspose.HTML 進行文字 HTML + 格式化。 +og_title: 使用 Aspose.HTML 創建 HTML 文件 – 快速指南 +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: 使用 Aspose.HTML 建立 HTML 文件 – 步驟指南 +url: /zh-hant/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 使用 Aspose.HTML 建立 HTML 文件 – 步驟教學 + +是否曾經需要以程式方式 **建立 html 文件**，卻發現輸出結果很平淡？你並不是唯一的遇到者。在許多專案中，我們必須即時產生片段——例如電子郵件範本、動態報表或小型 UI 小工具。好消息是 Aspose.HTML 讓 **建立 html 文件**、設定樣式、並將其插入頁面變得輕而易舉，無需手寫原始字串。 + +在本教學中，我們將逐步示範一個完整範例，說明如何 **將元素附加至 body**、**設定字型樣式**，以及使用 **建立 span 元素** 來 **格式化文字 html**。完成後，你將得到一段可執行的 C# 程式碼，產生包含粗斜體文字的 ``，同時了解每個呼叫背後的「為什麼」。 + +> **先決條件** +> • .NET 6 或更新版本（任何近期的 .NET 執行環境皆可） +> • 已安裝 Aspose.HTML for .NET NuGet 套件（`Aspose.Html`） +> • 具備 C# 與 DOM 基礎概念 + +不需要其他函式庫，程式碼可在 Windows、Linux 或 macOS 上執行。 + +--- + +## 你將建立的內容 + +我們將建立一個最小的 HTML 文件，加入一個包含 **Bold‑Italic text**（粗斜體文字）的 ``，同時套用 **粗體**與**斜體**樣式，最後 **將元素附加至 body**。最終的標記如下： + +```html + + + Bold‑Italic text + + +``` + +你可以在本指南結尾直接複製完整原始碼並立即執行。 + +--- + +![建立 HTML 文件範例](image.png){alt="建立 html 文件範例"} + +--- + +## 步驟 1 – 初始化 HTMLDocument（**建立 html 文件** 的基礎） + +在能 **將元素附加至 body** 之前，我們需要一個文件物件來操作。Aspose.HTML 提供 `HTMLDocument` 類別，代表記憶體中的 DOM。 + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*為什麼重要*：實例化 `HTMLDocument` 為你提供一張乾淨的畫布——就像一張空白紙，之後你才能 **格式化文字 html**。若缺少此步驟，就無法操作節點或套用樣式。 + +--- + +## 步驟 2 – 建立 `` 元素（**建立 span 元素**） + +現在需要一個容器來放置樣式化文字。`` 非常適合，因為它是行內元素，可攜帶 CSS 而不會破壞排版。 + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*小技巧*：如果需要插入多段文字，可以透過 `spanElement.Clone(true)` 複製相同的 `spanElement`，再更改 `InnerHtml`。 + +--- + +## 步驟 3 – 套用 **設定字型樣式** 以同時呈現粗體 **與** 斜體 + +Aspose.HTML 提供強型別的 `Style` 物件。要 **設定字型樣式**，只需使用位元 OR 結合 `WebFontStyle.Bold` 與 `WebFontStyle.Italic`。 + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*為什麼使用列舉*：`WebFontStyle` 列舉直接對應 CSS 屬性（`font-weight` 與 `font-style`）。使用列舉可避免拼寫錯誤，確保產生的 CSS 有效——對可靠的 **格式化文字 html** 至關重要。 + +--- + +## 步驟 4 – **將元素附加至 body** 並完成文件 + +當樣式化的 span 準備好後，最後一步是將它放入 `` 標籤內。 + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +此時 DOM 樹與前面示範的片段完全相同。若檢查 `htmlDocument.InnerHtml`，即可看到完整的標記。 + +--- + +## 步驟 5 – 儲存或呈現文件 + +你可以將 HTML 寫入檔案、串流至瀏覽器，或使用 Aspose.HTML 的渲染引擎轉成 PDF/圖片。以下示範最簡單的檔案輸出方式： + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +在任何瀏覽器開啟 `output.html`，即可看到 **Bold‑Italic text** 正確顯示。 + +--- + +## 完整可執行範例 + +將所有步驟整合，以下是完整、可直接執行的程式： + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**預期輸出** – 開啟 `output.html` 後會看到： + +> **Bold‑Italic text**（粗體且斜體） + +若檢查原始碼，你會看到前述的 HTML，證明 **格式化文字 html** 步驟已成功。 + +--- + +## 常見問題與進階情境 + +### 1. 若需要超過兩種樣式該怎麼辦？ + +`WebFontStyle` 為旗標列舉 (flags enum)，可結合任意數量的樣式（例如 `Underline`）。只要持續使用 `|` 運算子： + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. 能同時變更文字顏色嗎？ + +當然可以。`Style` 物件提供 `Color` 屬性： + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. 如何 **將元素附加至 body** 多次？ + +建立迴圈，複製已樣式化的 span，調整文字後逐一附加： + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. 若要在 `
` 中 **格式化文字 html** 該怎麼做？ + +相同的 API 也適用於任何元素。只要把 `CreateElement("span")` 換成 `CreateElement("div")`，並依需求調整樣式即可。 + +### 5. 相容性問題？ + +Aspose.HTML 支援 .NET Standard 2.0 以上，故程式碼可在 .NET Core、.NET Framework 以及 .NET 5/6+ 上執行。無需額外的瀏覽器相容層。 + +--- + +## 專業提示與常見陷阱 + +- **小技巧**：始終在設定完樣式後再設定 `InnerHtml`。先變更內容可能在某些瀏覽器觸發重新排版，之後再套用樣式會增加不必要的工作。 +- **注意**：避免同時使用 `WebFontStyle` 與手寫的 CSS 字串。若之後手動呼叫 `spanElement.SetAttribute("style", "...")`，會覆寫列舉產生的樣式。建議統一使用一種方式。 +- **效能建議**：對於大型文件，先建立所有節點，再一次性全部附加，可減少 DOM 變更次數，提升渲染速度。 + +--- + +## 結論 + +現在你已掌握如何使用 Aspose.HTML **建立 html 文件**、**將元素附加至 body**、**設定字型樣式**，以及透過 **建立 span 元素** 來 **格式化文字 html**。此範例完整可執行，說明同時涵蓋「如何」與「為什麼」，讓你輕鬆將此模式套用到更複雜的情境。 + +準備好進一步挑戰了嗎？試著把 `` 換成 `

`，加入多個 CSS 類別，或使用 `Document` → `PdfSaveOptions` 將相同的 DOM 轉成 PDF。原理相同，Aspose.HTML 將成為你伺服器端 HTML 產生的可靠夥伴。 + +有任何問題或發現有趣的寫法？歡迎在下方留言——祝開發愉快！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/net/html-extensions-and-conversions/_index.md b/html/hongkong/net/html-extensions-and-conversions/_index.md index 30ed30e0d..077b4c2e1 100644 --- a/html/hongkong/net/html-extensions-and-conversions/_index.md +++ b/html/hongkong/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ Aspose.HTML for .NET 不只是一個函式庫；它還是一個函式庫。它 ## HTML 擴充功能與轉換教學課程 ### [使用 Aspose.HTML 將 .NET 中的 HTML 轉換為 PDF](./convert-html-to-pdf/) 使用 Aspose.HTML for .NET 輕鬆將 HTML 轉換為 PDF。遵循我們的逐步指南，釋放 HTML 到 PDF 轉換的強大功能。 +### [使用 Aspose.HTML 從 URL 建立 PDF – 完整 C# 指南](./create-pdf-from-url-complete-c-guide/) +使用 Aspose.HTML for .NET 從 URL 生成 PDF，提供完整的 C# 步驟指南。 ### [使用 Aspose.HTML 將 EPUB 轉換為 .NET 中的映像](./convert-epub-to-image/) 了解如何使用 Aspose.HTML for .NET 將 EPUB 轉換為映像。包含程式碼範例和可自訂選項的逐步教學。 ### [使用 Aspose.HTML 將 EPUB 轉換為 .NET 中的 PDF](./convert-epub-to-pdf/) @@ -74,4 +76,4 @@ Aspose.HTML for .NET 不只是一個函式庫；它還是一個函式庫。它 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/hongkong/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..82ff6b725 --- /dev/null +++ b/html/hongkong/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: 快速在 C# 中從 URL 建立 PDF。了解如何將 HTML 轉換為 PDF、將網頁儲存為 PDF，以及使用簡易程式碼從 HTML 產生 + PDF。 +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: zh-hant +og_description: 快速在 C# 中從 URL 建立 PDF。此教學示範如何將 HTML 轉換為 PDF、將網頁儲存為 PDF，並使用 Aspose.HTML + 從 HTML 產生 PDF。 +og_title: 從網址建立 PDF – 完整 C# 指南 +tags: +- pdf +- csharp +- html +- conversion +title: 從 URL 產生 PDF – 完整 C# 指南 +url: /zh-hant/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 建立 PDF 從 URL – 完整 C# 教學 + +是否曾經需要 **從 URL 建立 PDF**，卻不確定該選擇哪個函式庫？你並不孤單。許多開發者在想要封存網頁、從線上範本產生發票，或僅僅在網站上提供「下載為 PDF」按鈕時，都會碰到這個問題。 + +在本教學中，我們將一步步說明如何使用 C# **將 HTML 轉換為 PDF**。你會看到如何 **將網頁儲存為 PDF**、如何 **從 HTML 產生 PDF**，以及為什麼 `Aspose.HTML for .NET` 函式庫能讓這件事變得輕而易舉。最後，你將得到一段可直接執行的程式碼，能抓取任何公開的 URL、渲染它，並將 PDF 檔寫入磁碟。 + +> **專業小技巧：** 若你在公司代理伺服器後工作，請確保 `HTMLDocument` 建構子收到正確的 `WebRequest` 設定——否則下載會悄悄失敗。 + +## 你需要的環境 + +- **.NET 6.0** 或更新版本（此程式碼同樣適用於 .NET Framework 4.7+）。 +- **Aspose.HTML for .NET** NuGet 套件（`Aspose.HTML`）。 +- 一個可寫入的資料夾，用來存放產生的 PDF。 +- 基本的 C# 語法熟悉度（不需要進階技巧）。 + +不需要額外的設定檔，也沒有隱藏的魔法——只要幾行乾淨、附有註解的程式碼。 + +![Create PDF from URL example](image.png){alt="從 URL 建立 PDF"} + +## 步驟 1：安裝 Aspose.HTML NuGet 套件 + +在終端機或套件管理員主控台執行： + +```bash +dotnet add package Aspose.HTML +``` + +> **為什麼這一步很重要：** `HTMLDocument`、`PdfSaveOptions` 與 `PdfConverter` 類別都屬於 `Aspose.Html` 命名空間。若未安裝套件，編譯器根本不知道這些型別是什麼。 + +## 步驟 2：將網頁載入 `HTMLDocument` + +第一個實際動作是取得遠端的 HTML。`HTMLDocument` 可以直接接受 URL，並自動處理重新導向與內容類型偵測。 + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**發生了什麼事？** +- `HTMLDocument` 會把取得的標記解析成 DOM 樹，與瀏覽器的行為相同。 +- 任何以絕對 URL 引用的外部 CSS、圖片或腳本也會被下載，確保 PDF 看起來與即時頁面相同。 + +## 步驟 3：設定 PDF 匯出選項（邊距、頁面大小等） + +在將文件交給轉換器之前，我們先微調輸出。`PdfSaveOptions` 物件讓你自行決定邊距、頁面方向，甚至 PDF 版本。 + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**為什麼要設定邊距？** +緊貼的 PDF 可能會裁切標題或頁腳，特別是在行動版網站上。加入適度的邊距可以確保內容保持可讀。 + +## 步驟 4：直接將 HTML 文件轉換為 PDF + +現在進入重點。`PdfConverter.ConvertHtml` 會把渲染好的頁面直接串流成 PDF 檔。 + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**內部運作原理：** +- Aspose 使用自家的版面配置引擎渲染 DOM（不需要 Chromium）。 +- 渲染出的位圖會在可能的情況下轉換為 PDF 向量，保留文字可選取性。 + +## 步驟 5：驗證結果並處理例外情況 + +簡單的檢查可以避免日後的頭痛。開啟產生的檔案，你應該會看到即時頁面、已套用的邊距，且所有圖片完整。 + +### 常見陷阱與避免方式 + +| 問題 | 原因 | 解決方式 | +|------|------|----------| +| **空白 PDF** | URL 被防火牆阻擋或需要驗證 | 在 `HTMLDocument` 建構子傳入自訂的 `WebRequest` 並設定認證 | +| **缺少 CSS** | 外部樣式表使用相對 URL | 確認基礎 URL 正確（Aspose 會自行處理，但仍需檢查重新導向） | +| **檔案過大** | 高解析度圖片未縮小 | 使用 `PdfSaveOptions.ImageCompression` 以 JPEG 壓縮嵌入的圖片 | +| **Unicode 字元亂碼** | 未嵌入字型 | 設定 `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## 完整可執行範例（直接複製貼上） + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +執行程式 (`dotnet run`) 後，你會在 `C:\Temp` 找到 `example.pdf`。用任何 PDF 閱讀器開啟，它應該會完整呈現 `https://example.com`，且套用了你先前設定的邊距。 + +## 結論 + +我們剛剛示範了如何使用 C# **從 URL 建立 PDF**。步驟涵蓋載入網頁、設定邊距，以及將 DOM 轉換成 PDF 檔——這些都是在正式環境中 **將 HTML 轉換為 PDF**、**將網頁儲存為 PDF**、**從 HTML 產生 PDF** 所必需的。 + +歡迎自行實驗：將頁面大小改為 `Letter`、將方向切換為橫向，或使用 `PdfPageEventHandler` 加入頁首/頁尾。相同的模式也適用於動態頁面、需要登入的入口網站（只要提供 Cookie），甚至一次處理多個 URL 的批次作業。 + +**你可以進一步探索的主題** + +- **HTML to PDF C#**：使用非同步轉換以支援高吞吐量服務。 +- 透過 `PdfDocumentInfo` **嵌入中繼資料**（作者、標題）到 PDF。 +- 使用 **Aspose.PDF** 將不同 URL 產生的多個 PDF 合併成單一報告。 + +有問題嗎？在下方留言，我們一起討論。祝開發順利！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/net/rendering-html-documents/_index.md b/html/hongkong/net/rendering-html-documents/_index.md index d364e8c96..be3d7e25a 100644 --- a/html/hongkong/net/rendering-html-documents/_index.md +++ b/html/hongkong/net/rendering-html-documents/_index.md @@ -42,6 +42,8 @@ Aspose.HTML for .NET 因其豐富的功能、優秀的文件和活躍的社群 ### [使用 Aspose.HTML 在 .NET 中將 HTML 渲染為 PNG](./render-html-as-png/) 學習使用 Aspose.HTML for .NET：操作 HTML、轉換為各種格式等等。深入學習這個綜合教學！ +### [如何將 HTML 渲染為 PNG – 完整逐步指南](./how-to-render-html-to-png-complete-step-by-step-guide/) +學習使用 Aspose.HTML for .NET 將 HTML 渲染為 PNG，提供完整的逐步教學與實用技巧。 ### [使用 Aspose.HTML 在 .NET 中將 EPUB 渲染為 XPS](./render-epub-as-xps/) 在這個綜合教學中了解如何使用 Aspose.HTML for .NET 建立和渲染 HTML 文件。深入了解 HTML 操作、網頁抓取等領域。 ### [使用 Aspose.HTML 在 .NET 中渲染逾時](./rendering-timeout/) @@ -52,9 +54,12 @@ Aspose.HTML for .NET 因其豐富的功能、優秀的文件和活躍的社群 學習使用 Aspose.HTML for .NET 呈現多個 HTML 文件。利用這個強大的庫來提高您的文件處理能力。 ### [使用 Aspose.HTML 將 SVG 文件渲染為 .NET 中的 PNG](./render-svg-doc-as-png/) 釋放 Aspose.HTML for .NET 的強大功能！了解如何輕鬆將 SVG 文件渲染為 PNG。深入研究逐步範例和常見問題。現在就開始吧！ +### [如何渲染 HTML – 完整指南與自訂資源處理程式](./how-to-render-html-complete-guide-with-custom-resource-handl/) +了解如何使用 Aspose.HTML for .NET 透過自訂資源處理程式完整渲染 HTML，涵蓋設定與最佳實踐。 + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/hongkong/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..ed80f9322 --- /dev/null +++ b/html/hongkong/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: 如何使用 Aspose.HTML 將 HTML 渲染為圖片。學習 HTML 轉圖片的轉換、自訂資源處理程式，以及在 C# 中將 HTML + 轉換為位圖。 +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: zh-hant +og_description: 如何使用 Aspose.HTML 將 HTML 渲染為圖片。精通 HTML 轉圖片轉換、自訂資源處理程式，以及在 C# 中將 HTML + 轉換為位圖。 +og_title: HTML 渲染方法 – 完整指南與自訂資源處理程式 +tags: +- C# +- Aspose.HTML +- Image Rendering +title: 如何渲染 HTML – 完整指南與自訂資源處理程式 +url: /zh-hant/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 如何渲染 HTML – 完整指南與自訂資源處理程式 + +曾經想過 **如何將 HTML 渲染** 成位圖，而不必自行處理瀏覽器引擎嗎？你並不孤單。許多開發者在需要快速取得動態頁面的螢幕截圖（例如用於電子郵件、報告或縮圖）時，常會卡關。好消息是？使用 Aspose.HTML，你可以將任何 HTML 字串轉換成圖像——不需要 UI、也不需要無頭 Chrome，只要純粹的 C# 程式碼。 + +在本教學中，我們將示範一個實用的 **html to image conversion** 情境，教你如何 **implement a custom resource handler**，並展示完整的 **convert html to bitmap** 工作流程。完成後，你將擁有一個可重複使用的方法，能在記憶體中直接將 HTML 渲染成圖像，方便後續處理或儲存。 + +> **Prerequisites** +> * .NET 6+（或 .NET Framework 4.7.2+） +> * Aspose.HTML for .NET NuGet 套件 (`Aspose.Html`) +> * 基本的 C# 與串流概念 + +如果你已具備上述基礎，讓我們開始吧。 + +--- + +## How to Render HTML with Aspose.HTML + +任何 **render html to image** 操作的核心都是 `ImageRenderer` 類別。它接受一個 `HTMLDocument`，並輸出點陣圖（PNG、JPEG、BMP 等）。以下是最簡潔的骨架： + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +這段程式碼可以運作，但只有在你告訴渲染器寫入檔案位置時，才會產生磁碟檔案。為了全程保留在記憶體中，並攔截 HTML 所請求的每一個資源（圖片、CSS、字型），我們將加入一個 **custom resource handler**。 + +--- + +## Implementing a Custom Resource Handler + +**custom resource handler** 讓你完全掌控外部資產的取得與儲存方式。多數情況下，你會想把這些資產保存在記憶體，以便之後使用（例如打包成 ZIP）。此處的處理程式繼承自 `ResourceHandler`，並覆寫 `HandleResource`。 + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**為什麼要這樣做？** +* **效能** – 無磁碟 I/O，全部留在 RAM 中。 +* **安全性** – 你可以自行決定允許抓取的 URL。 +* **可擴充性** – 可以快取資源、重新命名，或嵌入其他容器中。 + +--- + +## Convert HTML to Bitmap Using ImageRenderer + +現在把各個部件結合起來：載入 HTML、掛載 `MyHandler`，然後渲染。以下方法會回傳一個 `MemoryStream`，其中包含渲染頁面的 PNG 圖像。 + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Expected Output + +如果你這樣呼叫方法： + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +你會得到一個 `demo.png`，大致長這樣： + +![如何渲染 HTML 輸出範例](https://example.com/assets/render-html-output.png "如何渲染 HTML 輸出範例") + +*Alt text:* **如何渲染 HTML 輸出範例** – 一個顯示已渲染 HTML 片段的微型位圖。 + +--- + +## HTML to Image Conversion – Common Pitfalls & Tips + +### 1. Relative URLs & Base Tags +如果你的 HTML 使用相對路徑引用外部 CSS 或圖片，渲染器將無法得知基礎資料夾。你可以： + +* 在 `` 中加入 `` 標籤，或 +* 在 `MyHandler.HandleResource` 內自行解析 URL，並回傳正確的串流。 + +### 2. Font Availability +Aspose.HTML 預設使用系統字型。若使用自訂網頁字型（`@font-face`），請確保字型檔案能透過處理程式取得，或以 base64 data URI 方式嵌入。 + +### 3. Large Pages +渲染極長的頁面會消耗大量記憶體。你可以限制視口大小： + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Image Formats +如果需要 JPEG 壓縮，只要改成 `renderer.Save(stream, ImageFormat.Jpeg)` 即可。將 `ImageFormat.Png` 換成 `ImageFormat.Bmp`，即可得到真正的 **convert html to bitmap** 輸出。 + +--- + +## Render HTML to Image – Advanced Scenarios + +### A. Rendering Multiple Pages +若 HTML 包含分頁斷點（`
`），可以逐頁渲染： + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Embedding the Image in a PDF +結合 `Aspose.Pdf`，直接將 PNG 嵌入 PDF： + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## Conclusion + +我們已說明 **how to render HTML** 成位圖的完整記憶體內流程，探討 **html to image conversion** 的基礎概念，建立 **custom resource handler**，並示範如何使用 Aspose.HTML 的 `ImageRenderer` 進行 **convert html to bitmap**。此方法快速、執行緒安全，且易於擴充，適用於實務專案——從電子郵件縮圖產生到自動化報告製作皆可。 + +準備好下一步了嗎？試著將 PNG 輸出改為 JPEG，或調整不同的頁面尺寸，甚至把處理程式接入快取層，讓重複渲染瞬間完成。只要你能掌控每一個資源，想像空間無限。 + +有任何問題或想分享的酷炫用例嗎？在下方留言，我們一起快樂渲染吧！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/hongkong/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..05f9854f0 --- /dev/null +++ b/html/hongkong/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,225 @@ +--- +category: general +date: 2026-01-03 +description: 學習如何使用 Aspose.HTML 在 C# 中將 HTML 渲染為 PNG、將網頁轉換為圖像以及將 HTML 儲存為 PNG。快速、可靠，隨時可投入生產。 +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: zh-hant +og_description: 精通如何將 HTML 渲染為 PNG、將網頁轉換為圖像，以及使用 Aspose.HTML 的完整 C# 範例將 HTML 儲存為 PNG。 +og_title: 如何將 HTML 渲染為 PNG – 完整指南 +tags: +- C# +- Aspose.HTML +- Image Rendering +title: 如何將 HTML 渲染為 PNG – 完整逐步指南 +url: /zh-hant/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 如何將 HTML 渲染為 PNG – 完整逐步指南 + +如果你正在尋找 **how to render html** 成為圖片的方式，你來對地方了。無論你需要 **convert webpage to image** 來製作縮圖、將頁面存檔為 PNG，或即時產生社交媒體預覽，只要使用合適的函式庫，整個流程其實相當簡單。 + +在本教學中，我們將示範如何使用 Aspose.HTML for .NET 將任何即時 URL 轉換為 PNG 檔案。你會看到完整可執行的程式碼片段、了解每個設定為何重要，並發掘處理邊緣情況的幾個小技巧。完成後，你將能 **save html as png**、**convert html to png**，甚至在報告或電子郵件中嵌入結果，毫不費力。 + +## 前置條件 – 你需要的東西 + +- **.NET 6.0** 或更新版本（程式碼同樣支援 .NET Core 與 .NET Framework） +- 已安裝 **Aspose.HTML for .NET** NuGet 套件 (`Aspose.Html`) +- 任一你慣用的 IDE（Visual Studio、Rider 或 VS Code） +- 一個可寫入的資料夾，用來儲存 PNG + +不需要額外的設定——Aspose.HTML 會自行處理頁面解析、CSS 套用與版面光柵化的繁重工作。 + +## 步驟 1：載入你想要渲染的 HTML 文件 + +首先，你需要一個指向欲擷取頁面的 `HTMLDocument` 實例。Aspose.HTML 可以從 URL、本機檔案或原始 HTML 字串載入。 + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** 直接從 URL 載入文件可自動取得所有外部資源（CSS、JavaScript、圖片），確保渲染出的畫面忠實於即時頁面。 + +## 步驟 2：設定影像渲染選項 + +接著，我們設定 `ImageRenderingOptions`。這些選項控制輸出尺寸、品質，以及是否套用抗鋸齒。微調它們可在檔案大小與視覺保真度之間取得平衡。 + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** 若需要更高解析度的縮圖，只要等比例增加 `Width` 與 `Height`。Aspose.HTML 會相應縮放版面，且不會失去向量品質。 + +## 步驟 3：初始化影像渲染器 + +現在，我們透過傳入剛才建立的文件與選項，建立 `ImageRenderer`。此物件即是將頁面繪製到位圖的核心引擎。 + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** 渲染器會解析 DOM、計算 CSS 樣式、執行版面配置，最後將每個元素光柵化到像素畫布。所有動作皆在記憶體中完成，無需開啟瀏覽器視窗。 + +## 步驟 4：渲染並儲存 PNG 檔案 + +最後，呼叫 `Render` 並傳入 PNG 要儲存的完整路徑。此方法會同步寫入檔案，並自動釋放內部資源。 + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** 執行程式後，你會在 `output` 資料夾內找到 `example.png`。使用任何影像檢視器開啟，即可看到 `https://example.com` 在 800×600 px 的忠實快照。 + +--- + +### 完整、可直接執行的範例 + +以下是可直接貼到新 Console 專案的完整程式碼，內含所有 `using` 指令、錯誤處理與說明註解。 + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +執行程式（在專案資料夾執行 `dotnet run`）即可取得與即時頁面相同的 PNG。這就是 **how to render html**，只需幾行 C# 程式碼。 + +--- + +## 常見問題與邊緣情況 + +### 可以渲染本機 HTML 檔案而不是 URL 嗎？ + +當然可以。只要將 URL 改為檔案路徑即可： + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### 如果頁面在載入後使用 JavaScript 修改 DOM，該怎麼辦？ + +Aspose.HTML 會執行大多數客戶端腳本，但並未提供完整的瀏覽器引擎。對於高度腳本化的頁面，你可能需要先使用無頭 Chromium 之類的工具預先渲染 HTML，然後再將產生的標記交給 Aspose.HTML 處理。 + +### 如何控制 PNG 壓縮等級？ + +`ImageRenderingOptions` 包含 `CompressionLevel` 屬性（0–9）。數值越低檔案越大但品質越高。 + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### 我需要透明背景——可以做到嗎？ + +可以。渲染前將背景顏色設為透明即可： + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### 有沒有辦法將多個頁面渲染成單一影像？ + +可以遍歷一組 URL 或 HTML 字串，分別渲染成位圖，然後使用 `System.Drawing` 或 `ImageSharp` 將它們拼接起來。核心的 **convert html to png** 步驟仍然相同。 + +--- + +## 加分項：在 Web API 中嵌入 PNG + +如果想透過 ASP.NET Core 端點提供此功能，只需回傳檔案的位元組陣列： + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +現在任何客戶端都可以請求 `GET /render?url=https://example.com`，即時取得 PNG——非常適合 **convert webpage to image** 服務。 + +--- + +## 結論 + +我們已完整說明如何使用 Aspose.HTML for .NET 將 **how to render html** 轉換為 PNG 檔案。從載入遠端頁面、設定渲染選項，到處理常見陷阱，完整範例示範了如何 **convert html to png**、**save html as png**，甚至透過 Web API 對外提供此功能。 + +不妨自行嘗試不同的 URL、調整尺寸，或自動為商品目錄產生縮圖。一旦掌握了 **render html to png** 的基礎，創意的可能性就無限延伸。 + +*Ready to level up?* 立即取得 NuGet 套件、將程式碼放入專案，即可開始將網頁轉換為影像。如遇任何問題，歡迎留言討論——祝渲染愉快！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/net/canvas-and-image-manipulation/_index.md b/html/hungarian/net/canvas-and-image-manipulation/_index.md index f87479de0..0cfb53453 100644 --- a/html/hungarian/net/canvas-and-image-manipulation/_index.md +++ b/html/hungarian/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Ismerje meg, hogyan konvertálhat SVG-t PDF-be az Aspose.HTML for .NET segítsé Ismerje meg, hogyan konvertálhat SVG-t XPS-re az Aspose.HTML for .NET használatával. Fokozza fel webfejlesztését ezzel a hatékony könyvtárral. ### [Hogyan engedélyezzük az antialiasingot C#-ban – Simább élek](./how-to-enable-antialiasing-in-c-smooth-edges/) Ismerje meg, hogyan aktiválhatja az antialiasingot C#-ban a simább grafikai elemek érdekében. +### [Canvas szöveg létrehozása – Teljes útmutató a szöveg képeken való megjelenítéséhez](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Lépésről lépésre bemutatja, hogyan adhat szöveget vászonra, és jelenítheti meg képeken az Aspose.HTML for .NET segítségével. ## Következtetés diff --git a/html/hungarian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/hungarian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..93249ff1d --- /dev/null +++ b/html/hungarian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,236 @@ +--- +category: general +date: 2026-01-03 +description: Gyorsan hozz létre vászon szöveget, és tanuld meg, hogyan rendereld a + szöveges képet, állítsd be a szöveg beállításait, valamint töltsd ki a szöveg vásznát, + miközben javítod a Linux szövegmegjelenítést. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: hu +og_description: Készíts vászon szöveget az Aspose HTML segítségével, tanulj meg szövegképet + renderelni, állíts be szövegbeállításokat, és javítsd a Linux szövegminőségét egyetlen + útmutatóban. +og_title: Canvas szöveg létrehozása – Teljes renderelési útmutató +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Canvas szöveg létrehozása – Teljes útmutató a képeken való szöveg rendereléséhez +url: /hu/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Canvas szöveg létrehozása – Teljes renderelési útmutató + +Valaha is szükséged volt **canvas szöveg** létrehozására, de nem tudtad, hogyan érj el éles glifeket minden platformon? Nem vagy egyedül. Sok fejlesztő akadályba ütközik, amikor a szövegük elmosódottan jelenik meg Linuxon, különösen HTML‑ből kép konvertálásakor. + +Ebben az oktatóanyagban egy gyakorlati megoldáson keresztül vezetünk végig, amely nem csak lehetővé teszi, hogy **render text image**‑t helyezz el egy Aspose HTML canvas‑on, hanem megmutatja, hogyan **set text options**, hogyan használd helyesen a `FillText`‑et, és hogyan **improve Linux text** renderelést hinteléssel. A végére egy önálló, futtatható kódrészletet kapsz, amelyet bármely .NET projektbe beilleszthetsz. + +## Amit megtanulsz + +- Hogyan hozhatsz létre egy `Canvas` objektumot és készítheted elő a rajzoláshoz. +- A `TextOptions` szerepe és miért fontos a hintelés engedélyezése Linuxon. +- Lépésről‑lépésre kód, amely **fill text canvas**‑t hoz létre stílusos, magas minőségű karakterekkel. +- Gyakori buktatók (hintelés hiánya, rossz koordináta‑rendszer) és gyors megoldások. +- A példa bővítési lehetőségei: egyedi betűkészletek, színek és több‑soros szöveg. + +> **Előfeltétel:** .NET 6+ (vagy .NET Framework 4.7.2) és az Aspose.HTML for .NET NuGet csomag telepítve. + +--- + +## 1. lépés: A projekt és az importok beállítása + +Mielőtt elkezdenénk rajzolni, győződj meg róla, hogy a projekt a megfelelő assembly‑ket hivatkozza. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro tipp:** Ha Linuxon vagy, telepítsd a `libgdiplus` csomagot (`sudo apt-get install libgdiplus`), hogy a GDI‑alapú renderelés zökkenőmentesen működjön. + +--- + +## 2. lépés: Canvas létrehozása és méretének meghatározása + +A canvas lényegében egy off‑screen bitmap, amelyre festhetünk. Tekintsd úgy, mint a digitális rajztábládat. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Miért fontos:** Egy szilárd háttér beállítása megakadályozza a transzparens artefaktusok megjelenését, amikor később exportálod a képet. + +--- + +## 3. lépés: Text Options konfigurálása – A kulcs a tiszta Linux szöveghez + +A Linux betűkészlet‑renderelés elmosódott lehet, ha a hintelés ki van kapcsolva. A `TextOptions.UseHinting` azt mondja a renderelőnek, hogy a glifeket pixel‑határokhoz igazítsa, ezzel drámaian élesítve a kimenetet. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Mi történik, ha kihagyod?** Sok Linux disztribúción a szöveg kissé elmosódott vagy rosszul igazított lesz, különösen kis betűméreteknél. + +--- + +## 4. lépés: Szöveg kitöltése a canvas‑ra + +Most, hogy a canvas készen áll és a szövegbeállítások finomhangoltak, ténylegesen **fill text canvas**‑t hajthatunk végre. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Ha egyedi stílusra (szín, betűméret, igazítás) van szükséged, csomagold a hívást egy `Font` és egy `Brush` objektumba: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## 5. lépés: Canvas exportálása képfájlként + +Az utolsó lépés a renderelt bitmap leírása a lemezre, hogy ellenőrizhesd az eredményt. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Nyisd meg a `canvas-output.png` fájlt, és éles, helyesen hintelt szöveget kell látnod – legyen szó Windows, macOS vagy Linux rendszerről. + +--- + +## Gyakori kérdések és széljegyek + +### Hogyan befolyásolja a hintelés a teljesítményt? + +A hintelés engedélyezése elhanyagolható overhead‑et ad hozzá (általában < 2 ms egy 800×600-as canvas‑nál). A vizuális előny messze felülmúlja a költséget, különösen szerver‑oldali képgyártásnál, ahol a minőség elsődleges. + +### Mi a teendő több‑soros szöveggel? + +Használd a `canvas.FillText`‑et egy ciklusban, a Y‑koordináta módosításával, vagy alkalmazd a `canvas.FillText` azon túlterhelését, amely `TextLayout` objektumot fogad a automatikus sortöréshez. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Használhatok egyedi TrueType betűtípust? + +Természetesen. Töltsd be a betűtípust `FontFamily`‑vel, és rendeld hozzá a `TextOptions.FontFamily`‑hez, vagy közvetlenül a `Font`‑hoz, amelyet a `FillText`‑nek adsz. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Győződj meg róla, hogy a betűtárgy fájl elérhető a futási környezet számára (helyezd a projekt mappájába vagy regisztráld rendszer‑szinten). + +--- + +## Teljes működő példa + +Az alábbi program teljes, másolás‑beillesztés‑kész kód, amely tartalmazza a fent bemutatott összes lépést. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Várt kimenet:** Egy `canvas-output.png` nevű PNG fájl, amely két sor szöveget tartalmaz – egy egyszerűt és egy vastag kéket – mindkettő élesen megjelenik a hintelésnek köszönhetően. + +--- + +## Összegzés + +Most már **canvas szöveget** hoztunk létre a nulláról, megtanultuk, hogyan **render text image**‑t készítsünk az Aspose.HTML‑lel, és felfedeztük, miért elengedhetetlen a **set text options**, mint a `UseHinting`, a **improve Linux text** minőségének biztosításához. A fenti lépéseket követve megbízhatóan **fill text canvas**‑t tudsz végrehajtani bármely .NET környezetben, legyen szó bélyegképek, vízjelek vagy dinamikus grafikák generálásáról web‑API‑khoz. + +Készen állsz a következő kihívásra? Próbálj ki háttér‑gradienteket, szöveg‑forgatást, vagy exportálj SVG‑be a vektor‑tökéletes méretezésért. Ugyanazok az elvek – megfelelő `TextOptions`, átgondolt koordináta‑kezelés és tiszta erőforrás‑felszabadítás – minden formátumra vonatkoznak. + +Ha bármilyen furcsaságra bukkantál vagy ötleted van a kiterjesztéshez, hagyj egy megjegyzést. Boldog kódolást, és élvezd az éles karaktereket! + +--- + +*Image illustrating a canvas with crisp text (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/net/html-document-manipulation/_index.md b/html/hungarian/net/html-document-manipulation/_index.md index 8746068fa..9e798a787 100644 --- a/html/hungarian/net/html-document-manipulation/_index.md +++ b/html/hungarian/net/html-document-manipulation/_index.md @@ -57,6 +57,8 @@ Ismerje meg, hogyan töltheti fel SEO-ját az Aspose.HTML for .NET segítségév Kibontakoztassa az Aspose.HTML-ben rejlő lehetőségeket .NET-hez átfogó útmutatónkkal. Ismerje meg, hogyan importálhat névtereket, hogyan férhet hozzá távoli HTML-dokumentumokhoz stb. ### [HTML betöltése URL használatával a .NET-ben az Aspose.HTML-lel](./load-html-using-url/) Ismerje meg, hogyan használhatja ki az Aspose.HTML erejét .NET-hez. Fokozza fel webfejlesztését HTML-kezeléssel és -megjelenítéssel. +### [HTML-dokumentum létrehozása az Aspose.HTML‑el – Lépésről‑lépésre útmutató](./create-html-document-with-aspose-html-step-by-step-guide/) +Ismerje meg, hogyan hozhat létre HTML-dokumentumot az Aspose.HTML segítségével, részletes lépésekkel és példákkal. ### [Dokumentum létrehozása .NET-ben az Aspose.HTML segítségével](./creating-a-document/) Engedje szabadjára az Aspose.HTML erejét .NET-hez. Tanuljon meg könnyedén létrehozni, manipulálni és optimalizálni HTML és SVG dokumentumokat. Fedezze fel a lépésről lépésre példákat és a GYIK-et. ### [Dokumentum szerkesztése .NET-ben az Aspose.HTML segítségével](./editing-a-document/) @@ -78,4 +80,4 @@ Használja ki a webfejlesztésben rejlő lehetőségeket az Aspose.HTML for .NET {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/hungarian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..85c097dd5 --- /dev/null +++ b/html/hungarian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,247 @@ +--- +category: general +date: 2026-01-03 +description: HTML dokumentum létrehozása C#-ban az Aspose.HTML használatával. Tanulja + meg, hogyan lehet elemet hozzáadni a body-hoz, beállítani a betűstílust, és egyszerű + span segítségével formázni a szöveget HTML-ben. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: hu +og_description: HTML dokumentum létrehozása C#-ban, és megtekintheted, hogyan lehet + elemet hozzáadni a body-hoz, betűstílust beállítani, és szöveget formázni HTML-ben + az Aspose.HTML segítségével. +og_title: HTML-dokumentum létrehozása az Aspose.HTML segítségével – Gyors útmutató +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: HTML dokumentum létrehozása az Aspose.HTML‑vel – Lépésről‑lépésre útmutató +url: /hu/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML dokumentum létrehozása Aspose.HTML‑el – Lépésről‑lépésre útmutató + +Valaha szükséged volt már arra, hogy **create html document** programozottan készíts, és azon tűnődj, miért néz egyszerűnek a kimenet? Nem vagy egyedül. Sok projektben futás közben kell kódrészleteket generálni – gondolj e‑mail sablonokra, dinamikus jelentésekre vagy apró UI widgetekre. A jó hír, hogy az Aspose.HTML lehetővé teszi, hogy könnyedén **create html document**, stílusozd, és az oldaladra helyezd anélkül, hogy nyers karakterláncokat írnál. + +Ebben az útmutatóban egy teljes példán keresztül vezetünk végig, amely bemutatja, hogyan kell **append element to body**, **set font style**, és **format text html** egy **create span element** használatával. A végére egy futtatható C# kódrészletet kapsz, amely félkövér‑dőlt szöveget hoz létre egy spanben, és megérted az egyes hívások „miértjét”. + +> **Előfeltételek** +> • .NET 6 vagy újabb (bármely friss .NET runtime működik) +> • Aspose.HTML for .NET NuGet csomag (`Aspose.Html`) telepítve +> • Alapvető C# és DOM ismeretek + +Nem szükséges más könyvtár, és a kód Windows, Linux vagy macOS rendszeren fut. + +## Mit fogsz építeni + +Létrehozunk egy minimális HTML dokumentumot, hozzáadunk egy `` elemet, amely a **Bold‑Italic text** kifejezést tartalmazza, alkalmazunk **bold** és **italic** stílusokat, majd végül **append element to body**. A végső markup így néz ki: + +```html + + + Bold‑Italic text + + +``` + +A teljes forrást a útmutató végén másolhatod és azonnal futtathatod. + +![Create HTML document example](image.png){alt="create html document example"} + +## Step 1 – Initialise the HTMLDocument (the foundation of **create html document**) + +## 1. lépés – HTMLDocument inicializálása (**create html document** alapja) + +Mielőtt **append element to body**-t végrehajthatnánk, szükségünk van egy dokumentumobjektumra. Az Aspose.HTML biztosítja a `HTMLDocument` osztályt, amely egy memóriában lévő DOM-ot képvisel. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Why this matters*: A `HTMLDocument` példányosítása egy tiszta vászonként szolgál – gondolj rá úgy, mint egy üres lapra, ahol később **format text html**-t végzel. Enélkül a lépés nélkül nem tudsz csomópontokat manipulálni vagy stílusokat alkalmazni. + +## Step 2 – Create the `` element (**create span element**) + +## 2. lépés – `` elem létrehozása (**create span element**) + +Most szükségünk van egy tárolóra a stílusos szövegünknek. A `` tökéletes, mivel egy inline elem, amely CSS-t hordozhat anélkül, hogy megszakítaná a folyamatot. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Pro tip*: Ha több szövegrészt kell beillesztened, újra felhasználhatod ugyanazt a `spanElement`-et a klónozással (`spanElement.Clone(true)`) és minden alkalommal az `InnerHtml` módosításával. + +## Step 3 – Apply **set font style** for bold **and** italic + +## 3. lépés – **set font style** alkalmazása félkövér **és** dőlt esetén + +Az Aspose.HTML egy erősen tipizált `Style` objektumot biztosít. A **set font style**-hoz a `WebFontStyle.Bold` és a `WebFontStyle.Italic` értékeket kombináljuk bitwise OR‑ral. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Why use the enum*: A `WebFontStyle` enum közvetlenül a CSS tulajdonságokra (`font-weight` és `font-style`) térképez. Az enum használata megelőzi a gépelési hibákat és biztosítja, hogy a generált CSS érvényes legyen – ez elengedhetetlen a megbízható **format text html**-hez. + +## Step 4 – **Append element to body** and finalise the document + +## 4. lépés – **Append element to body** és a dokumentum befejezése + +Miután a stílusos span készen áll, az utolsó lépés, hogy a `` elembe helyezzük. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +Ekkor a DOM-fa pontosan úgy néz ki, mint a korábban bemutatott kódrészlet. Ha megnézed a `htmlDocument.InnerHtml`-t, a teljes markup-ot fogod látni. + +## Step 5 – Save or render the document + +## 5. lépés – Dokumentum mentése vagy renderelése + +A HTML-t írhatod fájlba, streamelheted egy böngészőnek, vagy renderelheted PDF/ kép formátumba az Aspose.HTML renderelő motorjával. Íme a legegyszerűbb fájl‑kimeneti lehetőség: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Nyisd meg az `output.html`-t bármely böngészőben, és a **Bold‑Italic text** pontosan úgy jelenik meg, ahogy elvárt. + +## Full Working Example + +## Teljes működő példa + +Mindent összevonva, itt a teljes, azonnal futtatható program: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Expected output** – opening `output.html` shows: + +> **Bold‑Italic text** (bold and italic) + +Ha megnézed a forrást, a pontos HTML-t fogod látni, amely megerősíti, hogy a **format text html** lépés sikeres volt. + +## Common Questions & Edge Cases + +## Gyakori kérdések és szélhelyzetek + +### 1. What if I need more than two styles? + +### 1. Mi van, ha több mint két stílusra van szükségem? + +`WebFontStyle` egy flags enum, így tetszőleges számú stílust kombinálhatsz (pl. `Underline`). Csak továbbra is használd a `|` operátort: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Can I change the color at the same time? + +### 2. Változtathatom egyszerre a színt is? + +Természetesen. A `Style` objektumnak van egy `Color` tulajdonsága: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. How do I **append element to body** multiple times? + +### 3. Hogyan **append element to body** többször? + +Hozz létre egy ciklust, klónozd a stílusos span-t, állítsd be a szöveget, és minden klónt fűzz hozzá: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. What if I need to **format text html** inside a `
` instead? + +### 4. Mi van, ha a **format text html**-t egy `
`-ben kell használni helyette? + +Ugyanaz az API minden elemhez működik. Csak cseréld le a `CreateElement("span")`-t `CreateElement("div")`-ra, és szükség szerint állítsd be a stílusokat. + +### 5. Compatibility concerns? + +### 5. Kompatibilitási aggályok? + +Az Aspose.HTML a .NET Standard 2.0+ célpontot használja, így a kód fut .NET Core, .NET Framework és .NET 5/6+ környezetben is. Nem szükséges extra böngésző‑specifikus shim. + +## Pro Tips & Pitfalls + +## Pro tippek és buktatók + +- **Pro tip:** Mindig a stílus beállítása után állítsd be az `InnerHtml`-t. Ha előbb módosítod a belső tartalmat, néhány böngészőben újra‑layoutot válthat ki; a stílus után beállítva elkerülhető a felesleges munka. +- **Watch out for:** A `WebFontStyle` keverése inline CSS stringekkel. Ha később manuálisan beállítod a `spanElement.SetAttribute("style", "...")`-t, felülírod az enum‑által generált stílusokat. Maradj egy módszernél. +- **Performance note:** Nagy dokumentumok esetén a kötegelt létrehozás (először az összes node létrehozása, majd egyszerre hozzáadása) csökkenti a DOM‑módosítások számát és felgyorsítja a renderelést. + +## Conclusion + +## Összegzés + +Most már tudod, hogyan kell **create html document** Aspose.HTML‑el, **append element to body**, **set font style**, és **format text html** egy **create span element** használatával. A példa teljesen működőképes, és a magyarázatok mind a „hogyan”, mind a „miért” szempontot lefedik, így könnyen adaptálható összetettebb helyzetekre. + +Készen állsz a következő lépésre? Próbáld meg a ``-t `

`-re cserélni több CSS osztállyal, vagy rendereld ugyanazt a DOM-ot PDF‑be a `Document` → `PdfSaveOptions` használatával. Ugyanazok a elvek érvényesek, és az Aspose.HTML megbízható partnernek bizonyul minden szerver‑oldali HTML generálási feladathoz. + +Van kérdésed, vagy találtál egy ügyes trükköt? Hagyj kommentet alább – jó kódolást! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/net/html-extensions-and-conversions/_index.md b/html/hungarian/net/html-extensions-and-conversions/_index.md index 6ff7bdb74..85f99cee4 100644 --- a/html/hungarian/net/html-extensions-and-conversions/_index.md +++ b/html/hungarian/net/html-extensions-and-conversions/_index.md @@ -37,6 +37,7 @@ Készen állsz az indulásra? Az Aspose.HTML for .NET oktatóanyaga kezdőknek Az Aspose.HTML for .NET nem csak egy könyvtár; ez egy változás a webfejlesztés világában. A funkciók és eszközök széles skáláját kínálja, amelyek leegyszerűsítik a HTML-lel kapcsolatos feladatokat. Ezeknek az oktatóanyagoknak a végére fel lesz szerelve azokkal a tudással és készségekkel, amelyekkel maximalizálhatja az Aspose.HTML .NET-hez való lehetőségét. ## HTML-kiterjesztések és -konverziók oktatóanyagok +### [PDF létrehozása URL-ből – Teljes C# útmutató](./create-pdf-from-url-complete-c-guide/) ### [Konvertálja a HTML-t PDF-be .NET-ben az Aspose.HTML-lel](./convert-html-to-pdf/) A HTML-t könnyedén konvertálja PDF-be az Aspose.HTML for .NET segítségével. Kövesse lépésenkénti útmutatónkat, és engedje szabadjára a HTML-ből PDF-be konvertálás erejét. ### [Az Aspose.HTML segítségével EPUB-t konvertáljon képpé .NET-ben](./convert-epub-to-image/) @@ -74,4 +75,4 @@ Szóval, mire vársz? Vágjunk bele erre az izgalmas utazásra a HTML-bővítmé {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/hungarian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..604234de9 --- /dev/null +++ b/html/hungarian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,201 @@ +--- +category: general +date: 2026-01-03 +description: Készíts PDF-et URL-ből C#-ban gyorsan. Tanulja meg, hogyan konvertálhat + HTML-t PDF-be, menthet weboldalt PDF-ként, és generálhat PDF-et HTML-ből egyszerű + kóddal. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: hu +og_description: PDF létrehozása URL-ből C#-ban gyorsan. Ez az útmutató bemutatja, + hogyan konvertálhat HTML-t PDF-be, hogyan menthet weboldalt PDF-ként, és hogyan + generálhat PDF-et HTML-ből az Aspose.HTML segítségével. +og_title: PDF létrehozása URL‑ből – Teljes C# útmutató +tags: +- pdf +- csharp +- html +- conversion +title: PDF létrehozása URL‑ből – Teljes C# útmutató +url: /hu/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# PDF létrehozása URL‑ből – Teljes C# útmutató + +Valaha is szükséged volt **PDF létrehozására URL‑ből**, de nem tudtad, melyik könyvtárat válaszd? Nem vagy egyedül. Sok fejlesztő szembesül ezzel a problémával, amikor egy weboldalt szeretne archiválni, számlákat generálni egy online sablonból, vagy egyszerűen csak egy „letöltés PDF‑ként” gombot szeretne feltenni a weboldalára. + +Ebben az útmutatóban végigvezetünk a **HTML‑ról PDF‑re konvertálás** teljes folyamatán C#‑ban. Megmutatjuk, hogyan **mentheted el a weboldalt PDF‑ként**, hogyan **generálhatsz PDF‑et HTML‑ből**, és miért teszi ezt a `Aspose.HTML for .NET` könyvtár egyszerűvé. A végére egy kész, futtatható kódrészletet kapsz, amely bármely nyilvános URL‑t lekér, rendereli, és PDF‑fájlt ír a lemezre. + +> **Pro tipp:** Ha vállalati proxy mögött dolgozol, győződj meg róla, hogy az `HTMLDocument` konstruktor a megfelelő `WebRequest` beállításokat kapja – különben a letöltés csendben meghiúsul. + +## Amire szükséged lesz + +- **.NET 6.0** vagy újabb (a kód .NET Framework 4.7+‑on is működik). +- **Aspose.HTML for .NET** NuGet csomag (`Aspose.HTML`). +- Írási jogosultsággal rendelkező mappa a lemezen, ahová a PDF‑et menteni szeretnéd. +- Alapvető C# ismeretek (nincs szükség haladó trükkökre). + +Nincs extra konfigurációs fájl, nincs rejtett varázslat – csak néhány sor tiszta, kommentált kód. + +![Create PDF from URL example](image.png){alt="pdf létrehozása URL‑ből"} + +## 1. lépés: Telepítsd az Aspose.HTML NuGet csomagot + +Nyisd meg a terminált vagy a Package Manager Console‑t, és futtasd: + +```bash +dotnet add package Aspose.HTML +``` + +> **Miért fontos ez a lépés:** A `HTMLDocument`, `PdfSaveOptions` és `PdfConverter` osztályok az `Aspose.Html` névtérben találhatók. A csomag nélkül a fordító nem ismeri ezeket a típusokat. + +## 2. lépés: Töltsd be a weboldalt egy `HTMLDocument`‑ba + +Az első tényleges művelet a távoli HTML lekérése. Az `HTMLDocument` közvetlenül URL‑t is elfogad, kezelve a átirányításokat és a tartalomtípus‑detektálást. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Mi történik?** +- Az `HTMLDocument` a lekért markupot DOM‑fává parse-olja, akárcsak egy böngésző. +- Az abszolút URL‑kkel hivatkozott külső CSS, képek vagy szkriptek is letöltésre kerülnek, biztosítva, hogy a PDF úgy nézzen ki, mint az élő oldal. + +## 3. lépés: PDF export beállítások konfigurálása (margók, oldalméret stb.) + +Mielőtt átadnánk a dokumentumot a konverternek, finomhangoljuk a kimenetet. A `PdfSaveOptions` objektummal megadhatod a margókat, az oldalorientációt, sőt még a PDF verziót is. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Miért állíts be margókat?** +Egy szoros PDF levághatja a fejléceket vagy lábléceket, különösen mobilra optimalizált oldalakon. Egy mérsékelt margó biztosítja, hogy minden olvasható maradjon. + +## 4. lépés: Konvertáld a HTML dokumentumot közvetlenül PDF‑re + +Most jön a nehéz munka. A `PdfConverter.ConvertHtml` a renderelt oldalt közvetlenül egy PDF fájlba stream-eli. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**A háttérben:** +- Az Aspose a DOM‑ot a saját layout motorjával rendereli (Chromium nélkül). +- A renderelt bitmapet ahol csak lehetséges, PDF vektorokká rasterizálja, megőrizve a szöveg kiválaszthatóságát. + +## 5. lépés: Ellenőrizd az eredményt és kezeld a szélhelyzeteket + +Egy gyors ellenőrzés később sok fejfájást megelőz. Nyisd meg a generált fájlt; látnod kell az élő oldalt, a beállított margókat, és minden képet érintetlenül. + +### Gyakori hibák és megoldások + +| Probléma | Ok | Megoldás | +|----------|----|----------| +| **Üres PDF** | A URL-t tűzfal blokkolja vagy hitelesítés szükséges | Adj meg egy egyedi `WebRequest`‑et hitelesítő adatokkal az `HTMLDocument` konstruktorában | +| **Hiányzó CSS** | Külső stíluslap relatív URL‑ket használ | Győződj meg róla, hogy az alap‑URL helyes (az Aspose kezeli, de ellenőrizd az átirányításokat) | +| **Nagy fájlméret** | Magas felbontású képek nem lettek lecsökkentve | Használd a `PdfSaveOptions.ImageCompression`‑t JPEG‑kompresszióra a beágyazott képekhez | +| **Unicode karakterek eltorzulnak** | Betűtípus nincs beágyazva | Állítsd be a `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` értéket | + +## Teljes működő példa (másolás‑beillesztés kész) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Futtasd a programot (`dotnet run`), és megtalálod az `example.pdf` fájlt a `C:\Temp` mappában. Nyisd meg bármely PDF‑olvasóval, és látnod kell a `https://example.com` pontos másolatát a megadott margókkal. + +## Összegzés + +Most már tudod, **hogyan hozhatsz létre PDF‑et URL‑ből** C#‑ban. A lépések lefedték a weboldal betöltését, a margók beállítását és a DOM PDF‑re konvertálását – mindent, amire szükséged van a **HTML‑ról PDF‑re konvertáláshoz**, a **weboldal PDF‑ként mentéséhez**, és a **PDF generálásához HTML‑ből** egy produkcióra kész megoldásban. + +Nyugodtan kísérletezz: változtasd meg az oldalméretet `Letter`‑re, állítsd be a tájolást landscape‑ra, vagy adj hozzá fejlécet/láblécet a `PdfPageEventHandler`‑rel. Ugyanaz a minta működik dinamikus oldalak, bejelentkezést igénylő portálok (csak add meg a cookie‑kat), vagy akár URL‑lista kötegelt feldolgozásához is. + +**Következő lépések, amiket érdemes felfedezni** + +- **HTML to PDF C#** aszinkron konvertálás nagy áteresztőképességű szolgáltatásokhoz. +- **Metaadatok** (szerző, cím) beágyazása a PDF‑be a `PdfDocumentInfo`‑val. +- **Aspose.PDF** használata több, különböző URL‑ekből generált PDF egyesítéséhez egyetlen jelentésben. + +Van kérdésed? Írj egy megjegyzést alul, és jó kódolást! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/net/rendering-html-documents/_index.md b/html/hungarian/net/rendering-html-documents/_index.md index 669aacea0..4e92b945d 100644 --- a/html/hungarian/net/rendering-html-documents/_index.md +++ b/html/hungarian/net/rendering-html-documents/_index.md @@ -42,6 +42,8 @@ Most, hogy be van állítva az Aspose.HTML for .NET, itt az ideje, hogy felfedez ### [Rendelje meg a HTML-t PNG-ként .NET-ben az Aspose.HTML-lel](./render-html-as-png/) Tanulja meg az Aspose.HTML for .NET használatát: Manipuláljon HTML-t, konvertáljon különféle formátumokba stb. Merüljön el ebben az átfogó oktatóanyagban! +### [HTML renderelése PNG‑ként – Teljes lépésről‑lépésre útmutató](./how-to-render-html-to-png-complete-step-by-step-guide/) +Tanulja meg, hogyan renderelhet HTML-t PNG formátumba az Aspose.HTML for .NET segítségével, részletes útmutatóval. ### [Az EPUB megjelenítése XPS-ként .NET-ben az Aspose.HTML segítségével](./render-epub-as-xps/) Ebben az átfogó oktatóanyagban megtudhatja, hogyan hozhat létre és jeleníthet meg HTML-dokumentumokat az Aspose.HTML for .NET segítségével. Merüljön el a HTML-kezelés, a webkaparás és egyebek világában. ### [Renderelési időtúllépés .NET-ben az Aspose.HTML-lel](./rendering-timeout/) @@ -52,9 +54,12 @@ Ismerje meg, hogyan szabályozhatja hatékonyan a megjelenítési időtúllépé Tanuljon meg több HTML-dokumentumot renderelni az Aspose.HTML for .NET használatával. Növelje dokumentumfeldolgozási képességeit ezzel a hatékony könyvtárral. ### [Jelenítse meg az SVG-dokumentumot PNG-ként .NET-ben az Aspose.HTML-lel](./render-svg-doc-as-png/) Oldja fel az Aspose.HTML erejét .NET-hez! Tanulja meg, hogyan lehet könnyedén renderelni az SVG-dokumentumot PNG-ként. Merüljön el a lépésről lépésre bemutatott példákban és a GYIK-ben. Kezdje el most! +### [HTML renderelése – Teljes útmutató egyedi erőforráskezelővel](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Fedezze fel, hogyan renderelhet HTML-t egyedi erőforráskezelővel a teljes útmutatóban. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/hungarian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..18ef0b8d2 --- /dev/null +++ b/html/hungarian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,220 @@ +--- +category: general +date: 2026-01-03 +description: Hogyan rendereljük a HTML-t képekké az Aspose.HTML segítségével. Tanulja + meg a HTML‑kép konvertálást, az egyéni erőforráskezelőt, és a HTML bitmapre konvertálását + C#‑ban. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: hu +og_description: Hogyan rendereljük a HTML-t képekké az Aspose.HTML segítségével. Ismerje + meg a HTML-képre konvertálást, az egyedi erőforráskezelőt, és a HTML bitmapre konvertálását + C#‑ban. +og_title: HTML renderelése – Teljes útmutató egyedi erőforráskezelővel +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTML megjelenítése – Teljes útmutató egyedi erőforráskezelővel +url: /hu/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML renderelése – Teljes útmutató egyedi erőforráskezelővel + +Gondolkodtál már azon, **hogyan renderelj HTML-t** egy bitmapre anélkül, hogy magadnak kellene kezelni egy böngészőmotort? Nem vagy egyedül. Sok fejlesztő akad el, amikor gyors képernyőképre van szüksége egy dinamikus oldalról e-mailekhez, jelentésekhez vagy bélyegképekhez. A jó hír? Az Aspose.HTML segítségével bármely HTML karakterláncot képpé alakíthatsz – nincs UI, nincs headless Chrome, csak tiszta C# kód. + +Ebben az útmutatóban egy gyakorlati **html to image conversion** példán keresztül vezetünk végig, megmutatjuk, hogyan **implementálj egy egyedi erőforráskezelőt**, és bemutatjuk a teljes **convert html to bitmap** munkafolyamatot. A végére egy újrahasználható metódust kapsz, amely HTML-t képpé renderel teljesen a memóriában, készen áll további feldolgozásra vagy tárolásra. + +> **Előfeltételek** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * Basic familiarity with C# and streams + +Ha már megvannak ezek az alapok, merüljünk el benne. + +--- + +## HTML renderelése Aspose.HTML használatával + +Bármely **render html to image** művelet magja az `ImageRenderer` osztály. Ez egy `HTMLDocument`-et vesz és raszteres grafikát (PNG, JPEG, BMP, stb.) ad vissza. Az alábbiakban a minimális vázlat látható: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Ez a kódrészlet működik, de csak akkor kapsz fájlt a lemezen, ha megmondod a renderelőnek, hová írja. Ahhoz, hogy mindent a memóriában tartsunk – és hogy minden erőforrást (képek, CSS, betűkészletek) elkapjunk, amelyet a HTML kér – egy **custom resource handler**-t fogunk csatlakoztatni. + +## Egyedi erőforráskezelő implementálása + +Egy **custom resource handler** teljes kontrollt ad arról, hogyan kerülnek lekérdezésre és tárolásra a külső eszközök. Sok esetben a memóriában szeretnéd ezeket az eszközöket későbbi felhasználásra rögzíteni (pl. ZIP-be csomagolva). A kezelő a `ResourceHandler`-ből örököl és felülírja a `HandleResource` metódust. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Miért éri meg?** +* **Performance** – nincs lemez I/O, minden RAM-ban marad. +* **Security** – te irányítod, mely URL-ek lekérdezhetők. +* **Extensibility** – cache-elheted az erőforrásokat, átnevezheted őket, vagy beágyazhatod más konténerekbe. + +## HTML bitmapre konvertálása ImageRenderer használatával + +Most összeállítjuk a részeket: betöltjük a HTML-t, csatoljuk a `MyHandler`-t, és renderelünk. A következő metódus egy `MemoryStream`-et ad vissza, amely a renderelt oldal PNG képét tartalmazza. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Várható kimenet + +Ha a metódust így hívod: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Kapni fogsz egy `demo.png` fájlt, amely nagyjából így néz ki: + +![hogyan renderelj html kimenet példája](https://example.com/assets/render-html-output.png "hogyan renderelj html kimenet példája") + +*Alt szöveg:* **hogyan renderelj html kimenet példája** – egy apró bitmap, amely a renderelt HTML részletet mutatja. + +## HTML kép konvertálás – Gyakori buktatók és tippek + +### 1. Relatív URL-ek és Base tagek +Ha a HTML külső CSS-re vagy képekre hivatkozik relatív útvonalakkal, a renderelő nem ismeri a bázismappát. Vagy: + +* Adj hozzá egy `` taget, vagy +* `MyHandler.HandleResource`-ben oldd fel az URL-eket, és szolgáld ki a megfelelő streamet. + +### 2. Betűkészlet elérhetőség +Az Aspose.HTML alapértelmezés szerint a rendszer betűkészleteit használja. Egyedi webes betűkészletek (`@font-face`) esetén győződj meg arról, hogy a betűkészlet fájlok elérhetők a kezelőn keresztül, vagy ágyazd be őket base64 adat-URI-ként. + +### 3. Nagy oldalak +Egy nagyon magas oldal renderelése jelentős memóriát fogyaszthat. Korlátozhatod a viewport méretét: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Képképformátumok +`renderer.Save(stream, ImageFormat.Jpeg)` ugyanolyan jól működik, ha JPEG tömörítésre van szükség. A `ImageFormat.Png` helyett `ImageFormat.Bmp`-t használj egy valódi **convert html to bitmap** kimenethez. + +## HTML képbe renderelése – Haladó forgatókönyvek + +### A. Több oldal renderelése +Ha a HTML oldal töréseket tartalmaz (`
`), iterálhatsz az oldalakon: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Kép beágyazása PDF-be +Használd együtt az `Aspose.Pdf`-vel, hogy a PNG-t közvetlenül beágyazd: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +## Összegzés + +Áttekintettük, **hogyan renderelj HTML** egy bitmapre teljesen a memóriában, megvizsgáltuk a **html to image conversion** alapjait, felépítettünk egy **custom resource handler**-t, és megmutattuk, hogyan **convert html to bitmap** az Aspose.HTML `ImageRenderer`-ével. A megközelítés gyors, szálbiztos, és könnyen bővíthető valós projektekhez – az e‑mail bélyegkép generálástól az automatizált jelentéskészítésig. + +Készen állsz a következő lépésre? Próbáld meg a PNG kimenetet JPEG-re cserélni, kísérletezz különböző oldalméretekkel, vagy csatlakoztasd a kezelőt egy cache réteghez, hogy az ismételt renderelések azonnaliak legyenek. A lehetőségek határtalanok, ha minden erőforrást saját magad irányítasz. + +Van kérdésed vagy egy klassz felhasználási eset, amit meg szeretnél osztani? Hagyj egy megjegyzést alább, és jó renderelést! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/hungarian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..14689d182 --- /dev/null +++ b/html/hungarian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,222 @@ +--- +category: general +date: 2026-01-03 +description: Tanulja meg, hogyan lehet HTML-t PNG-re renderelni, weboldalt képpé konvertálni + és HTML-t PNG-ként menteni az Aspose.HTML használatával C#-ban. Gyors, megbízható + és készen áll a termelésre. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: hu +og_description: Tanulja meg, hogyan renderelhet HTML-t PNG-be, konvertálhatja a weboldalt + képpé, és mentheti a HTML-t PNG-ként egy teljes C# példával az Aspose.HTML használatával. +og_title: HTML PNG-re renderelése – Teljes útmutató +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTML renderelése PNG-be – Teljes lépésről lépésre útmutató +url: /hu/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Hogyan renderelj HTML-t PNG‑re – Teljes lépésről‑lépésre útmutató + +Ha **how to render html** képpé, akkor jó helyen jársz. Akár **convert webpage to image** előnézeti képekhez, egy oldal archiválásához PNG‑ként, vagy közösségi média előnézetek generálásához van szükséged, a folyamat meglepően egyszerű lehet a megfelelő könyvtárral. + +Ebben az útmutatóban végigvezetünk, hogyan alakítható bármely élő URL PNG fájlra az Aspose.HTML for .NET segítségével. Meg fogod látni a teljes, futtatható kódrészletet, megtanulod, miért fontos minden beállítás, és felfedezel néhány trükköt a szélsőséges esetek kezelésére. A végére képes leszel **save html as png**, **convert html to png** végrehajtására, sőt az eredményt beágyazni egy jelentésbe vagy e‑mailbe is gond nélkül. + +## Előkövetelmények – Amire szükséged lesz + +- **.NET 6.0** vagy újabb (a kód .NET Core‑dal és .NET Framework‑del is működik) +- **Aspose.HTML for .NET** NuGet csomag (`Aspose.Html`) telepítve +- A választott IDE (Visual Studio, Rider vagy VS Code) +- Egy írható mappa, ahová a PNG-t menteni fogod + +Nem szükséges extra konfiguráció – az Aspose.HTML végzi a nehéz munkát az oldal elemzésében, a CSS alkalmazásában és a layout raszterizálásában. + +## 1. lépés: Töltsd be a renderelni kívánt HTML dokumentumot + +Az első dolog, amire szükséged van, egy `HTMLDocument` példány, amely a rögzíteni kívánt oldalra mutat. Az Aspose.HTML betölthet URL‑ről, helyi fájlból vagy nyers HTML szövegből. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** A dokumentum közvetlen URL‑ről történő betöltése biztosítja, hogy minden külső erőforrás (CSS, JavaScript, képek) automatikusan le legyen töltve, így hű renderelést kapsz az élő oldalról. + +## 2. lépés: Állítsd be a képrenderelés opciókat + +Ezután beállítjuk a `ImageRenderingOptions`. Ezek az opciók szabályozzák a kimeneti méretet, a minőséget, és hogy alkalmazz‑e anti‑aliasing‑et. A finomhangolás lehetővé teszi, hogy egyensúlyba hozd a fájlméretet és a vizuális hűséget. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** Ha nagyobb felbontású bélyegképre van szükséged, arányosan növeld a `Width` és `Height` értékeket. Az Aspose.HTML ennek megfelelően méretezi a layoutot anélkül, hogy elveszítené a vektor minőséget. + +## 3. lépés: Inicializáld a képrenderelőt + +Most létrehozzuk az `ImageRenderer`‑t a dokumentum és a korábban definiált opciók átadásával. Ez az objektum az a motor, amely ténylegesen a bitmapre rajzolja az oldalt. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** A renderelő elemzi a DOM‑ot, kiszámítja a CSS stílusokat, elvégzi a layoutot, majd végül raszterizálja az egyes elemeket egy pixel vászonra. Mindez memóriában történik, így nincs szükséged böngészőablakra. + +## 4. lépés: Rendereld és mentsd el a PNG fájlt + +Végül hívd meg a `Render`‑et a teljes elérési úttal, ahová a PNG‑t menteni szeretnéd. A metódus szinkron módon írja a fájlt, és automatikusan felszabadítja a belső erőforrásokat. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** A program futtatása után megtalálod az `example.png`‑t az `output` mappában. Nyisd meg bármely képnézővel, és egy hű képet kell látnod a `https://example.com` oldalról 800×600 px méretben. + +--- + +### Teljes, futtatható példa + +Az alábbiakban a teljes program látható, amelyet beilleszthetsz egy új konzolprojektbe. Tartalmazza az összes `using` direktívát, hibakezelést és a tisztaság kedvéért kommentárokat. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Futtasd a programot (`dotnet run` a projekt mappájából), és kapsz egy PNG‑t, amely tükrözi az élő oldalt. Így **how to render html** néhány C# sorral. + +## Gyakran Ismételt Kérdések & Szélsőséges Esetek + +### Renderelhetek helyi HTML fájlt URL helyett? + +Természetesen. Cseréld le az URL‑t egy fájlútra: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Mi van, ha az oldal JavaScript‑et használ a DOM betöltés utáni módosításához? + +Az Aspose.HTML a legtöbb kliensoldali scriptet végrehajtja, de nem biztosít teljes böngészőmotort. Erősen szkriptelt oldalak esetén előzetes renderelésre lehet szükség (pl. headless Chromium példány használatával), majd az eredményül kapott markup‑ot átadni az Aspose.HTML‑nek. + +### Hogyan szabályozhatom a PNG tömörítési szintet? + +A `ImageRenderingOptions` tartalmaz egy `CompressionLevel` tulajdonságot (0–9). Az alacsonyabb számok nagyobb fájlokat, de jobb minőséget jelentenek. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Átlátszó háttérre van szükségem – lehetséges? + +Igen. Állítsd a háttérszínt átlátszóra a renderelés előtt: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Van mód több oldalt egyetlen képre renderelni? + +Átfuthatsz egy URL‑ vagy HTML‑string gyűjteményen, minden egyes elemet bitmapre renderelhetsz, majd a `System.Drawing` vagy `ImageSharp` segítségével összefűzheted őket. A központi **convert html to png** lépés változatlan marad. + +## Bónusz: PNG beágyazása egy Web API‑ba + +Ha ezt a funkcionalitást ASP.NET Core végponton keresztül szeretnéd elérhetővé tenni, egyszerűen térj vissza a fájl bájtjaival: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Most bármely kliens kérhet `GET /render?url=https://example.com` és azonnal kap egy PNG‑t – tökéletes **convert webpage to image** szolgáltatásokhoz. + +## Következtetés + +Áttekintettük mindazt, amit tudnod kell a **how to render html** PNG fájlba konvertálásáról az Aspose.HTML for .NET használatával. A távoli oldal betöltésétől, a renderelési opciók beállításán át a gyakori buktatók kezeléséig, a teljes példa pontosan megmutatja, hogyan **convert html to png**, **save html as png**, és még a logikát web API‑n keresztül is elérhetővé teheted. + +Próbáld ki a saját URL‑eidre, kísérletezz különböző méretekkel, és esetleg automatizáld a bélyegkép-generálást a termékkatalógusodhoz. A határ csak a képzeleted, ha már elsajátítottad a **render html to png** alapjait. + +*Készen állsz a szintlépésre?* Szerezd be a NuGet csomagot, helyezd a kódot a projektedbe, és kezdj el ma weboldalakat képpé konvertálni. Ha bármilyen problémába ütközöl, nyugodtan hagyj megjegyzést – jó renderelést! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/net/canvas-and-image-manipulation/_index.md b/html/indonesian/net/canvas-and-image-manipulation/_index.md index 5a0b76167..bb077ca40 100644 --- a/html/indonesian/net/canvas-and-image-manipulation/_index.md +++ b/html/indonesian/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Pelajari cara mengonversi SVG ke PDF dengan Aspose.HTML untuk .NET. Tutorial lan Pelajari cara mengonversi SVG ke XPS menggunakan Aspose.HTML untuk .NET. Tingkatkan pengembangan web Anda dengan pustaka canggih ini. ### [Cara Mengaktifkan Antialiasing di C# – Tepi Halus](./how-to-enable-antialiasing-in-c-smooth-edges/) Pelajari cara mengaktifkan antialiasing di C# untuk menghasilkan tepi gambar yang halus dan kualitas visual yang lebih baik. +### [Membuat Teks pada Kanvas – Panduan Lengkap Rendering Teks pada Gambar](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Panduan menyeluruh tentang cara menambahkan teks ke kanvas dan merendernya pada gambar menggunakan Aspose.HTML untuk .NET. ## Kesimpulan diff --git a/html/indonesian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/indonesian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..b432754d1 --- /dev/null +++ b/html/indonesian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,235 @@ +--- +category: general +date: 2026-01-03 +description: Buat teks kanvas dengan cepat dan pelajari cara merender gambar teks, + mengatur opsi teks, serta mengisi kanvas teks sambil meningkatkan rendering teks + di Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: id +og_description: Buat teks kanvas dengan Aspose HTML, pelajari cara merender gambar + teks, atur opsi teks, dan tingkatkan kualitas teks di Linux dalam satu tutorial. +og_title: Buat teks kanvas – Panduan Rendering Lengkap +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Buat teks kanvas – Panduan Lengkap untuk Menampilkan Teks pada Gambar +url: /id/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Membuat teks kanvas – Panduan Rendering Lengkap + +Pernah perlu **membuat teks kanvas** tetapi tidak yakin bagaimana cara mendapatkan glyph yang tajam di setiap platform? Anda tidak sendirian. Banyak pengembang mengalami masalah ketika teks mereka terlihat buram di Linux, terutama saat mengonversi HTML menjadi gambar. + +Dalam tutorial ini kami akan membahas solusi praktis yang tidak hanya memungkinkan Anda **render gambar teks** ke kanvas Aspose HTML tetapi juga menunjukkan cara **mengatur opsi teks**, menggunakan `FillText` dengan benar, dan **meningkatkan rendering teks di Linux** dengan hinting. Pada akhir tutorial Anda akan memiliki potongan kode yang berdiri sendiri, dapat dijalankan, dan dapat disisipkan ke proyek .NET apa pun. + +## Apa yang Akan Anda Pelajari + +- Cara menginstansiasi objek `Canvas` dan menyiapkannya untuk menggambar. +- Peran `TextOptions` dan mengapa mengaktifkan hinting penting di Linux. +- Kode langkah‑demi‑langkah yang **mengisi kanvas teks** dengan karakter bergaya dan berkualitas tinggi. +- Jebakan umum (hinting yang hilang, sistem koordinat yang salah) dan solusi cepatnya. +- Cara memperluas contoh: font khusus, warna, dan teks multi‑baris. + +> **Prasyarat:** .NET 6+ (atau .NET Framework 4.7.2) dan paket NuGet Aspose.HTML untuk .NET terpasang. + +--- + +## Langkah 1: Siapkan Proyek dan Impor + +Sebelum mulai menggambar, pastikan proyek Anda merujuk ke assembly yang tepat. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Tip pro:** Jika Anda menggunakan Linux, tambahkan paket `libgdiplus` (`sudo apt-get install libgdiplus`) agar rendering berbasis GDI berjalan lancar. + +--- + +## Langkah 2: Buat Kanvas dan Tentukan Ukurannya + +Kanvas pada dasarnya adalah bitmap off‑screen yang dapat Anda lukis. Anggaplah sebagai papan gambar digital Anda. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Mengapa ini penting:** Menetapkan latar belakang solid mencegah artefak transparan saat Anda mengekspor gambar nanti. + +--- + +## Langkah 3: Konfigurasikan Opsi Teks – Kunci untuk Teks Linux yang Jelas + +Rendering font di Linux dapat terlihat buram jika hinting dinonaktifkan. `TextOptions.UseHinting` memberi tahu renderer untuk menyelaraskan glyph ke batas piksel, secara dramatis menajamkan output. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Bagaimana jika Anda melewatkannya?** Pada banyak distribusi Linux teks akan tampak sedikit buram atau tidak sejajar, terutama pada ukuran font kecil. + +--- + +## Langkah 4: Isi Teks ke Kanvas + +Sekarang kanvas sudah siap dan opsi teks telah disetel, kita dapat benar‑benar **mengisi kanvas teks**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Jika Anda menginginkan gaya khusus (warna, ukuran font, perataan), bungkus pemanggilan dengan `Font` dan `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Langkah 5: Ekspor Kanvas sebagai Berkas Gambar + +Langkah terakhir adalah menulis bitmap yang telah dirender ke disk sehingga Anda dapat memverifikasi hasilnya. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Buka `canvas-output.png` dan Anda akan melihat teks yang tajam, dengan hinting yang tepat—baik Anda berada di Windows, macOS, atau Linux. + +--- + +## Pertanyaan Umum & Kasus Tepi + +### Bagaimana hinting memengaruhi kinerja? + +Mengaktifkan hinting menambahkan overhead yang dapat diabaikan (biasanya < 2 ms untuk kanvas 800×600). Keuntungan visual jauh melampaui biaya, terutama untuk pembuatan gambar sisi‑server di mana kualitas sangat penting. + +### Bagaimana jika saya membutuhkan teks multi‑baris? + +Gunakan `canvas.FillText` dalam loop, sesuaikan koordinat Y, atau manfaatkan overload `canvas.FillText` yang menerima objek `TextLayout` untuk pemenggalan baris otomatis. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Bisakah saya menggunakan font TrueType khusus? + +Tentu saja. Muat font dengan `FontFamily` dan tetapkan ke `TextOptions.FontFamily` atau langsung ke `Font` yang Anda berikan ke `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Pastikan berkas font dapat diakses oleh runtime (letakkan di folder proyek atau daftarkan secara sistem‑wide). + +--- + +## Contoh Kerja Lengkap + +Berikut adalah program lengkap yang siap disalin‑tempel dan mencakup setiap langkah di atas. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Output yang diharapkan:** Berkas PNG bernama `canvas-output.png` yang berisi dua baris teks—satu biasa, satu tebal biru—keduanya dirender dengan tajam berkat hinting. + +--- + +## Kesimpulan + +Kami baru saja **membuat teks kanvas** dari nol, mempelajari cara **render gambar teks** dengan Aspose.HTML, dan menemukan mengapa **mengatur opsi teks** seperti `UseHinting` sangat penting untuk **meningkatkan kualitas teks di Linux**. Dengan mengikuti langkah‑langkah di atas Anda dapat dengan andal **mengisi kanvas teks** di lingkungan .NET apa pun, baik Anda menghasilkan thumbnail, watermark, atau grafik dinamis untuk API web. + +Siap untuk tantangan berikutnya? Cobalah menambahkan gradien latar belakang, memutar teks, atau mengekspor ke SVG untuk skala vektor yang sempurna. Prinsip yang sama—`TextOptions` yang tepat, penanganan koordinat yang bijaksana, dan pembuangan yang bersih—berlaku di semua format. + +Jika Anda menemukan kejanggalan atau memiliki ide untuk ekstensi, tinggalkan komentar. Selamat coding, dan nikmati karakter yang tajam bak pisau! + +--- + +*Gambar yang menggambarkan kanvas dengan teks tajam (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/net/html-document-manipulation/_index.md b/html/indonesian/net/html-document-manipulation/_index.md index d98f7053d..ac4728e1f 100644 --- a/html/indonesian/net/html-document-manipulation/_index.md +++ b/html/indonesian/net/html-document-manipulation/_index.md @@ -59,6 +59,8 @@ Manfaatkan potensi Aspose.HTML untuk .NET dengan panduan lengkap kami. Pelajari Pelajari cara memanfaatkan kekuatan Aspose.HTML untuk .NET. Tingkatkan pengembangan web Anda dengan manipulasi dan rendering HTML. ### [Membuat Dokumen di .NET dengan Aspose.HTML](./creating-a-document/) Manfaatkan Kekuatan Aspose.HTML untuk .NET. Pelajari Cara Membuat, Memanipulasi, dan Mengoptimalkan Dokumen HTML dan SVG dengan Mudah. Jelajahi Contoh Langkah demi Langkah dan Tanya Jawab Umum. +### [Buat Dokumen HTML dengan Aspose.HTML – Panduan Langkah-demi-Langkah](./create-html-document-with-aspose-html-step-by-step-guide/) +Pelajari cara membuat dokumen HTML menggunakan Aspose.HTML dengan panduan langkah demi langkah yang mudah diikuti. ### [Mengedit Dokumen dalam .NET dengan Aspose.HTML](./editing-a-document/) Ciptakan konten web yang menarik dengan Aspose.HTML untuk .NET. Pelajari cara memanipulasi HTML, CSS, dan lainnya. ### [Menyimpan Dokumen dalam .NET dengan Aspose.HTML](./saving-a-document/) @@ -78,4 +80,4 @@ Kesimpulannya, jika Anda ingin menguasai manipulasi dokumen HTML menggunakan Asp {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/indonesian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..cc784c315 --- /dev/null +++ b/html/indonesian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,239 @@ +--- +category: general +date: 2026-01-03 +description: Buat dokumen HTML dalam C# menggunakan Aspose.HTML. Pelajari cara menambahkan + elemen ke body, mengatur gaya font, dan memformat teks HTML dengan span sederhana. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: id +og_description: Buat dokumen HTML dalam C# dan lihat cara menambahkan elemen ke body, + mengatur gaya font, serta memformat teks HTML menggunakan Aspose.HTML. +og_title: Buat Dokumen HTML dengan Aspose.HTML – Panduan Cepat +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Buat Dokumen HTML dengan Aspose.HTML – Panduan Langkah demi Langkah +url: /id/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Buat Dokumen HTML dengan Aspose.HTML – Panduan Langkah‑ demi‑ Langkah + +Pernah perlu **create html document** secara programatis dan bertanya‑tanya mengapa outputnya terlihat polos? Anda tidak sendirian. Dalam banyak proyek kami harus menghasilkan potongan kode secara dinamis—pikirkan templat email, laporan dinamis, atau widget UI kecil. Kabar baiknya, Aspose.HTML memudahkan **create html document**, menata gaya, dan menyisipkannya ke halaman Anda tanpa menulis string mentah. + +Dalam tutorial ini kami akan menelusuri contoh lengkap yang menunjukkan cara **append element to body**, **set font style**, dan **format text html** menggunakan **create span element**. Pada akhir tutorial Anda akan memiliki potongan kode C# yang dapat dijalankan yang menghasilkan teks **Bold‑Italic** di dalam sebuah span, dan Anda akan memahami “mengapa” di balik setiap pemanggilan. + +> **Prasyarat** +> • .NET 6 atau lebih baru (semua runtime .NET terbaru dapat digunakan) +> • Paket NuGet Aspose.HTML untuk .NET (`Aspose.Html`) terpasang +> • Familiaritas dasar dengan C# dan konsep DOM + +Tidak ada pustaka lain yang diperlukan, dan kode dapat dijalankan di Windows, Linux, atau macOS. + +--- + +## Apa yang Akan Anda Bangun + +Kami akan membuat dokumen HTML minimal, menambahkan sebuah `` yang berisi frasa **Bold‑Italic text**, menerapkan gaya **bold** dan **italic**, dan akhirnya **append element to body**. Markup akhir terlihat seperti ini: + +```html + + + Bold‑Italic text + + +``` + +Anda dapat menyalin‑tempel sumber lengkap di akhir panduan dan menjalankannya langsung. + +--- + +![contoh dokumen html](image.png){alt="contoh dokumen html"} + +--- + +## Langkah 1 – Inisialisasi HTMLDocument (fondasi dari **create html document**) + +Sebelum kita dapat **append element to body**, kita memerlukan objek dokumen untuk bekerja. Aspose.HTML menyediakan kelas `HTMLDocument` yang mewakili DOM dalam memori. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Mengapa ini penting*: Membuat instance `HTMLDocument` memberi Anda kanvas bersih—bayangkan seperti lembar kosong yang nantinya akan Anda **format text html**. Tanpa langkah ini Anda tidak dapat memanipulasi node atau menerapkan gaya. + +--- + +## Langkah 2 – Buat elemen `` (**create span element**) + +Sekarang kita membutuhkan wadah untuk teks bergaya kami. Sebuah `` sangat cocok karena merupakan elemen inline yang dapat membawa CSS tanpa memutus alur. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Pro tip*: Jika Anda perlu menyisipkan beberapa potongan teks, Anda dapat menggunakan kembali `spanElement` yang sama dengan mengklonnya (`spanElement.Clone(true)`) dan mengubah `InnerHtml` setiap kali. + +--- + +## Langkah 3 – Terapkan **set font style** untuk bold **dan** italic + +Aspose.HTML menyediakan objek `Style` yang kuat. Untuk **set font style** kami menggabungkan `WebFontStyle.Bold` dan `WebFontStyle.Italic` menggunakan operator OR bitwise. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Mengapa menggunakan enum*: Enum `WebFontStyle` langsung memetakan ke properti CSS (`font-weight` dan `font-style`). Menggunakan enum mencegah typo dan memastikan CSS yang dihasilkan valid—penting untuk **format text html** yang dapat diandalkan. + +--- + +## Langkah 4 – **Append element to body** dan selesaikan dokumen + +Dengan span yang sudah bergaya, langkah terakhir adalah menempatkannya di dalam tag ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +Pada titik ini pohon DOM terlihat persis seperti potongan kode yang ditunjukkan sebelumnya. Jika Anda memeriksa `htmlDocument.InnerHtml`, Anda akan melihat markup yang sudah terbentuk sepenuhnya. + +--- + +## Langkah 5 – Simpan atau render dokumen + +Anda dapat menulis HTML ke file, mengirimnya ke browser, atau merendernya ke PDF/Image menggunakan mesin rendering Aspose.HTML. Berikut opsi output file paling sederhana: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Buka `output.html` di browser apa pun dan Anda akan melihat **Bold‑Italic text** ditampilkan persis seperti yang diharapkan. + +--- + +## Contoh Lengkap yang Berfungsi + +Menggabungkan semuanya, berikut program lengkap yang siap dijalankan: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Output yang diharapkan** – membuka `output.html` menampilkan: + +> **Bold‑Italic text** (bold and italic) + +Jika Anda memeriksa sumbernya, Anda akan melihat HTML persis yang telah dibahas, mengonfirmasi bahwa langkah **format text html** berhasil. + +--- + +## Pertanyaan Umum & Kasus Tepi + +### 1. Bagaimana jika saya membutuhkan lebih dari dua gaya? + +`WebFontStyle` adalah enum bertanda flag, sehingga Anda dapat menggabungkan sejumlah gaya (misalnya `Underline`). Terus gunakan operator `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Bisakah saya mengubah warna sekaligus? + +Tentu saja. Objek `Style` memiliki properti `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Bagaimana cara **append element to body** beberapa kali? + +Buat loop, klon span yang sudah bergaya, sesuaikan teksnya, dan tambahkan setiap klon: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Bagaimana jika saya perlu **format text html** di dalam `
` instead? + +API yang sama bekerja untuk elemen apa pun. Cukup ganti `CreateElement("span")` dengan `CreateElement("div")` dan sesuaikan gaya sesuai kebutuhan. + +### 5. Kekhawatiran kompatibilitas? + +Aspose.HTML menargetkan .NET Standard 2.0+, sehingga kode berjalan di .NET Core, .NET Framework, dan .NET 5/6+. Tidak diperlukan shim khusus browser tambahan. + +--- + +## Tips Pro & Perangkap + +- **Pro tip:** Selalu set `InnerHtml` *setelah* Anda mengonfigurasi gaya. Mengubah konten internal terlebih dahulu dapat memicu re‑layout di beberapa browser; melakukannya setelah menata gaya menghindari pekerjaan yang tidak perlu. +- **Waspadai:** Mencampur `WebFontStyle` dengan string CSS inline. Jika Anda secara manual mengatur `spanElement.SetAttribute("style", "...")` nanti, Anda akan menimpa gaya yang dihasilkan oleh enum. Tetap gunakan satu metode. +- **Catatan performa:** Untuk dokumen besar, buat batch (buat semua node terlebih dahulu, lalu tambahkan semuanya sekaligus) mengurangi jumlah mutasi DOM dan mempercepat proses rendering. + +--- + +## Kesimpulan + +Sekarang Anda tahu cara **create html document** dengan Aspose.HTML, **append element to body**, **set font style**, dan **format text html** menggunakan **create span element**. Contoh ini sepenuhnya berfungsi, dan penjelasannya mencakup baik “bagaimana” maupun “mengapa”, sehingga mudah menyesuaikan pola ini untuk skenario yang lebih kompleks. + +Siap untuk langkah selanjutnya? Coba ganti `` dengan `

` yang memiliki beberapa kelas CSS, atau render DOM yang sama ke PDF menggunakan `Document` → `PdfSaveOptions`. Prinsip yang sama berlaku, dan Anda akan menemukan Aspose.HTML menjadi mitra handal untuk tugas generasi HTML sisi‑server apa pun. + +Ada pertanyaan, atau menemukan trik cerdas? Tinggalkan komentar di bawah—selamat coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/net/html-extensions-and-conversions/_index.md b/html/indonesian/net/html-extensions-and-conversions/_index.md index 3fba4d44b..df784ae6c 100644 --- a/html/indonesian/net/html-extensions-and-conversions/_index.md +++ b/html/indonesian/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ Aspose.HTML untuk .NET bukan sekadar pustaka; pustaka ini merupakan pengubah per ## Tutorial Ekstensi dan Konversi HTML ### [Konversi HTML ke PDF dalam .NET dengan Aspose.HTML](./convert-html-to-pdf/) Ubah HTML ke PDF dengan mudah menggunakan Aspose.HTML untuk .NET. Ikuti panduan langkah demi langkah kami dan manfaatkan kekuatan konversi HTML ke PDF. +### [Buat PDF dari URL – Panduan Lengkap C#](./create-pdf-from-url-complete-c-guide/) +Pelajari cara membuat PDF dari URL menggunakan Aspose.HTML untuk .NET dengan contoh kode C# lengkap. ### [Konversi EPUB ke Gambar dalam .NET dengan Aspose.HTML](./convert-epub-to-image/) Pelajari cara mengonversi EPUB ke gambar menggunakan Aspose.HTML untuk .NET. Tutorial langkah demi langkah dengan contoh kode dan opsi yang dapat disesuaikan. ### [Konversi EPUB ke PDF dalam .NET dengan Aspose.HTML](./convert-epub-to-pdf/) @@ -74,4 +76,4 @@ Jadi, tunggu apa lagi? Mari kita mulai perjalanan seru ini untuk menjelajahi eks {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/indonesian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..8b3876c6f --- /dev/null +++ b/html/indonesian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,201 @@ +--- +category: general +date: 2026-01-03 +description: Buat PDF dari URL dalam C# dengan cepat. Pelajari cara mengonversi HTML + ke PDF, menyimpan halaman web sebagai PDF, dan menghasilkan PDF dari HTML dengan + kode yang mudah. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: id +og_description: Buat PDF dari URL di C# dengan cepat. Tutorial ini menunjukkan cara + mengonversi HTML ke PDF, menyimpan halaman web sebagai PDF, dan menghasilkan PDF + dari HTML menggunakan Aspose.HTML. +og_title: Buat PDF dari URL – Panduan Lengkap C# +tags: +- pdf +- csharp +- html +- conversion +title: Buat PDF dari URL – Panduan Lengkap C# +url: /id/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Membuat PDF dari URL – Panduan Lengkap C# + +Pernah perlu **membuat PDF dari URL** tetapi tidak yakin pustaka mana yang harus dipilih? Anda tidak sendirian. Banyak pengembang mengalami kebingungan ketika ingin mengarsipkan halaman web, menghasilkan faktur dari templat daring, atau sekadar menawarkan tombol “unduh sebagai PDF” di situs mereka. + +Dalam tutorial ini kita akan menelusuri seluruh proses **mengonversi HTML ke PDF** menggunakan C#. Anda akan melihat cara **menyimpan halaman web sebagai PDF**, cara **menghasilkan PDF dari HTML**, dan mengapa pustaka `Aspose.HTML for .NET` membuatnya sangat mudah. Pada akhir tutorial, Anda akan memiliki potongan kode siap‑jalankan yang mengambil URL publik apa pun, merendernya, dan menulis file PDF ke disk. + +> **Pro tip:** Jika Anda bekerja di belakang proxy perusahaan, pastikan konstruktor `HTMLDocument` menerima pengaturan `WebRequest` yang tepat—jika tidak, unduhan akan gagal secara diam‑diam. + +## Apa yang Anda Butuhkan + +- **.NET 6.0** atau lebih baru (kode ini juga berfungsi pada .NET Framework 4.7+). +- Paket NuGet **Aspose.HTML for .NET** (`Aspose.HTML`). +- Folder yang dapat ditulisi di disk tempat PDF akan disimpan. +- Familiaritas dasar dengan C# (tidak memerlukan trik lanjutan). + +Tidak ada file konfigurasi tambahan, tidak ada sihir tersembunyi—hanya beberapa baris kode bersih yang berkomentar. + +![Buat PDF dari contoh URL](image.png){alt="buat pdf dari url"} + +## Langkah 1: Instal Paket NuGet Aspose.HTML + +Buka terminal atau Package Manager Console Anda dan jalankan: + +```bash +dotnet add package Aspose.HTML +``` + +> **Mengapa langkah ini penting:** Kelas `HTMLDocument`, `PdfSaveOptions`, dan `PdfConverter` berada di namespace `Aspose.Html`. Tanpa paket ini, kompiler tidak akan mengenali tipe‑tipe tersebut. + +## Langkah 2: Muat Halaman Web ke dalam `HTMLDocument` + +Tindakan pertama yang nyata adalah mengambil HTML dari jarak jauh. `HTMLDocument` dapat menerima URL secara langsung, menangani pengalihan dan deteksi tipe konten untuk Anda. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Apa yang terjadi?** +- `HTMLDocument` mengurai markup yang diambil menjadi pohon DOM, persis seperti yang dilakukan browser. +- Semua CSS eksternal, gambar, atau skrip yang direferensikan dengan URL absolut juga diunduh, memastikan PDF terlihat seperti halaman live. + +## Langkah 3: Konfigurasikan Opsi Ekspor PDF (Margin, Ukuran Halaman, dll.) + +Sebelum menyerahkan dokumen ke konverter, kita menyetel output secara detail. Objek `PdfSaveOptions` memungkinkan Anda menentukan margin, orientasi halaman, bahkan versi PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Mengapa mengatur margin?** +PDF yang terlalu rapat dapat memotong header atau footer, terutama pada situs yang dioptimalkan untuk seluler. Menambahkan margin yang wajar memastikan semua elemen tetap terbaca. + +## Langkah 4: Konversi Dokumen HTML Langsung ke PDF + +Sekarang saatnya kerja berat. `PdfConverter.ConvertHtml` menyalurkan halaman yang dirender langsung ke file PDF. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Di balik layar:** +- Aspose merender DOM menggunakan mesin tata letak miliknya (tanpa memerlukan Chromium). +- Bitmap yang dirender kemudian diubah menjadi vektor PDF bila memungkinkan, menjaga kemampuan teks untuk dipilih. + +## Langkah 5: Verifikasi Hasil dan Tangani Kasus Edge + +Pemeriksaan cepat dapat menghindari masalah di kemudian hari. Buka file yang dihasilkan; Anda harus melihat halaman live, margin yang diterapkan, dan semua gambar tetap utuh. + +### Kesalahan umum dan cara menghindarinya + +| Masalah | Penyebab | Solusi | +|-------|-------|-----| +| **PDF kosong** | URL diblokir firewall atau memerlukan autentikasi | Berikan `WebRequest` khusus dengan kredensial ke konstruktor `HTMLDocument` | +| **CSS hilang** | Stylesheet eksternal menggunakan URL relatif | Pastikan URL dasar benar (Aspose menangani ini, tetapi periksa kembali pengalihan) | +| **Ukuran file besar** | Gambar resolusi tinggi tidak diperkecil | Gunakan `PdfSaveOptions.ImageCompression` untuk mengompres gambar menjadi JPEG | +| **Karakter Unicode rusak** | Font tidak disematkan | Setel `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Contoh Lengkap yang Siap Pakai (Copy‑Paste) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Jalankan program (`dotnet run`) dan Anda akan menemukan `example.pdf` di `C:\Temp`. Buka dengan penampil PDF apa pun, dan Anda akan melihat replika persis dari `https://example.com` dengan margin yang telah Anda tentukan. + +## Kesimpulan + +Kami baru saja menunjukkan **cara membuat PDF dari URL** menggunakan C#. Langkah‑langkah yang dibahas meliputi memuat halaman web, mengatur margin, dan mengonversi DOM menjadi file PDF—semua yang Anda perlukan untuk **mengonversi HTML ke PDF**, **menyimpan halaman web sebagai PDF**, dan **menghasilkan PDF dari HTML** dalam cara yang siap produksi. + +Silakan bereksperimen: ubah ukuran halaman menjadi `Letter`, ubah orientasi menjadi lanskap, atau tambahkan header/footer menggunakan `PdfPageEventHandler`. Pola yang sama bekerja untuk halaman dinamis, portal yang dilindungi login (cukup kirimkan cookie), atau bahkan pemrosesan batch daftar URL. + +**Langkah selanjutnya yang dapat Anda jelajahi** + +- **HTML ke PDF C#** dengan konversi asynchronous untuk layanan throughput tinggi. +- Menyematkan **metadata** (penulis, judul) ke dalam PDF melalui `PdfDocumentInfo`. +- Menggunakan **Aspose.PDF** untuk menggabungkan beberapa PDF yang dihasilkan dari URL berbeda menjadi satu laporan. + +Ada pertanyaan? Tinggalkan komentar di bawah, dan selamat coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/net/rendering-html-documents/_index.md b/html/indonesian/net/rendering-html-documents/_index.md index 3a1528874..89d2e2aff 100644 --- a/html/indonesian/net/rendering-html-documents/_index.md +++ b/html/indonesian/net/rendering-html-documents/_index.md @@ -42,6 +42,8 @@ Setelah Anda menyiapkan Aspose.HTML untuk .NET, saatnya menjelajahi tutorial yan ### [Render HTML sebagai PNG di .NET dengan Aspose.HTML](./render-html-as-png/) Pelajari cara bekerja dengan Aspose.HTML untuk .NET: Memanipulasi HTML, mengonversi ke berbagai format, dan banyak lagi. Pelajari tutorial lengkap ini! +### [Cara Merender HTML ke PNG – Panduan Lengkap Langkah demi Langkah](./how-to-render-html-to-png-complete-step-by-step-guide/) +Pelajari cara merender HTML menjadi PNG dengan panduan lengkap langkah demi langkah menggunakan Aspose.HTML untuk .NET. ### [Render EPUB sebagai XPS di .NET dengan Aspose.HTML](./render-epub-as-xps/) Pelajari cara membuat dan merender dokumen HTML dengan Aspose.HTML untuk .NET dalam tutorial lengkap ini. Pelajari dunia manipulasi HTML, web scraping, dan banyak lagi. ### [Batas Waktu Rendering di .NET dengan Aspose.HTML](./rendering-timeout/) @@ -52,9 +54,12 @@ Pelajari cara mengendalikan batas waktu rendering secara efektif di Aspose.HTML Pelajari cara merender beberapa dokumen HTML menggunakan Aspose.HTML untuk .NET. Tingkatkan kemampuan pemrosesan dokumen Anda dengan pustaka canggih ini. ### [Render Dokumen SVG sebagai PNG di .NET dengan Aspose.HTML](./render-svg-doc-as-png/) Manfaatkan kekuatan Aspose.HTML untuk .NET! Pelajari cara Merender Dokumen SVG sebagai PNG dengan mudah. Pelajari contoh langkah demi langkah dan Tanya Jawab Umum. Mulailah sekarang! +### [Cara Merender HTML – Panduan Lengkap dengan Penangan Sumber Daya Kustom](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Pelajari cara merender HTML dengan penangan sumber daya kustom menggunakan Aspose.HTML untuk .NET. Ikuti panduan lengkap ini! + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/indonesian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..4d3d53ec9 --- /dev/null +++ b/html/indonesian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,220 @@ +--- +category: general +date: 2026-01-03 +description: Cara merender HTML menjadi gambar menggunakan Aspose.HTML. Pelajari konversi + HTML ke gambar, penangan sumber daya khusus, dan mengonversi HTML ke bitmap dalam + C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: id +og_description: Cara merender HTML menjadi gambar menggunakan Aspose.HTML. Kuasai + konversi HTML ke gambar, penangan sumber daya khusus, dan konversi HTML ke bitmap + dalam C#. +og_title: Cara Merender HTML – Panduan Lengkap dengan Penangan Sumber Daya Kustom +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Cara Merender HTML – Panduan Lengkap dengan Penangan Sumber Daya Kustom +url: /id/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cara Merender HTML – Panduan Lengkap dengan Penangan Sumber Daya Kustom + +Pernah bertanya-tanya **bagaimana cara merender HTML** menjadi bitmap tanpa harus mengatur mesin peramban sendiri? Anda tidak sendirian. Banyak pengembang mengalami kebuntuan ketika mereka membutuhkan screenshot cepat dari halaman dinamis untuk email, laporan, atau thumbnail. Kabar baiknya? Dengan Aspose.HTML Anda dapat mengubah string HTML apa pun menjadi gambar—tanpa UI, tanpa headless Chrome, hanya kode C# murni. + +Dalam tutorial ini kami akan membahas skenario **html to image conversion** yang praktis, menunjukkan cara **implement a custom resource handler**, dan mendemonstrasikan alur kerja lengkap **convert html to bitmap**. Pada akhir tutorial Anda akan memiliki metode yang dapat digunakan kembali yang merender HTML menjadi gambar sepenuhnya di memori, siap untuk pemrosesan atau penyimpanan lebih lanjut. + +> **Prasyarat** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * Familiaritas dasar dengan C# dan streams + +Jika Anda sudah menguasai dasar-dasar tersebut, mari kita mulai. + +--- + +## Cara Merender HTML dengan Aspose.HTML + +Inti dari setiap operasi **render html to image** adalah kelas `ImageRenderer`. Ia menerima `HTMLDocument` dan menghasilkan grafik raster (PNG, JPEG, BMP, dll.). Di bawah ini adalah kerangka minimal: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Potongan kode itu berfungsi, tetapi Anda hanya akan mendapatkan file di disk jika Anda memberi tahu renderer ke mana menuliskannya. Untuk menjaga semuanya di memori—dan untuk menyela setiap sumber daya (gambar, CSS, font) yang diminta HTML—kita akan menyambungkan **custom resource handler**. + +## Mengimplementasikan Custom Resource Handler + +Sebuah **custom resource handler** memberi Anda kontrol penuh atas cara aset eksternal diambil dan disimpan. Dalam banyak kasus Anda ingin menangkap aset tersebut di memori untuk penggunaan selanjutnya (mis., menggabungkannya ke dalam ZIP). Handler ini mewarisi dari `ResourceHandler` dan mengoverride `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Mengapa repot?** +* **Performance** – tidak ada I/O disk, semuanya tetap di RAM. +* **Security** – Anda mengontrol URL mana yang diizinkan untuk diambil. +* **Extensibility** – Anda dapat menyimpan cache sumber daya, mengganti nama mereka, atau menyematkannya dalam kontainer lain. + +## Mengonversi HTML ke Bitmap Menggunakan ImageRenderer + +Sekarang kita menggabungkan semua bagian: memuat HTML, melampirkan `MyHandler`, dan merender. Metode berikut mengembalikan `MemoryStream` yang berisi gambar PNG dari halaman yang dirender. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Output yang Diharapkan + +Jika Anda memanggil metode seperti ini: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Anda akan mendapatkan `demo.png` yang kira‑kira terlihat seperti: + +![contoh output render html](https://example.com/assets/render-html-output.png "contoh output render html") + +*Alt text:* **contoh output render html** – sebuah bitmap kecil yang menampilkan potongan HTML yang dirender. + +## Konversi HTML ke Gambar – Kesalahan Umum & Tips + +### 1. URL Relatif & Tag Base +Jika HTML Anda merujuk ke CSS eksternal atau gambar dengan jalur relatif, renderer tidak akan mengetahui folder dasar. Pilih salah satu: + +* Tambahkan tag ``, atau +* Resolusi URL di dalam `MyHandler.HandleResource` dan layani stream yang tepat. + +### 2. Ketersediaan Font +Aspose.HTML menggunakan font sistem secara default. Untuk font web kustom (`@font-face`), pastikan file font dapat diakses melalui handler, atau sematkan mereka sebagai data URI base64. + +### 3. Halaman Besar +Merender halaman yang sangat tinggi dapat mengonsumsi memori yang signifikan. Anda dapat membatasi ukuran viewport: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Format Gambar +`renderer.Save(stream, ImageFormat.Jpeg)` berfungsi sama baiknya jika Anda membutuhkan kompresi JPEG. Ganti `ImageFormat.Png` dengan `ImageFormat.Bmp` untuk output **convert html to bitmap** yang sesungguhnya. + +## Merender HTML ke Gambar – Skenario Lanjutan + +### A. Merender Banyak Halaman +Jika HTML berisi pemisah halaman (`
`), Anda dapat mengiterasi halaman: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Menyematkan Gambar dalam PDF +Gabungkan dengan `Aspose.Pdf` untuk menyematkan PNG secara langsung: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +## Kesimpulan + +Kami telah membahas **how to render HTML** menjadi bitmap sepenuhnya di memori, mengeksplorasi dasar-dasar **html to image conversion**, membangun **custom resource handler**, dan menunjukkan cara **convert html to bitmap** dengan `ImageRenderer` milik Aspose.HTML. Pendekatan ini cepat, thread‑safe, dan mudah diperluas untuk proyek dunia nyata—dari pembuatan thumbnail email hingga pembuatan laporan otomatis. + +Siap untuk langkah selanjutnya? Coba ganti output PNG dengan JPEG, bereksperimen dengan ukuran halaman yang berbeda, atau hubungkan handler ke lapisan caching sehingga render berulang menjadi instan. Tidak ada batasnya ketika Anda mengontrol setiap sumber daya sendiri. + +Ada pertanyaan atau kasus penggunaan menarik yang ingin Anda bagikan? Tinggalkan komentar di bawah, dan selamat merender! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/indonesian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..789c5cc18 --- /dev/null +++ b/html/indonesian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,230 @@ +--- +category: general +date: 2026-01-03 +description: Pelajari cara merender HTML ke PNG, mengonversi halaman web menjadi gambar, + dan menyimpan HTML sebagai PNG menggunakan Aspose.HTML di C#. Cepat, andal, dan + siap untuk produksi. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: id +og_description: Kuasai cara merender HTML ke PNG, mengonversi halaman web menjadi + gambar, dan menyimpan HTML sebagai PNG dengan contoh lengkap C# menggunakan Aspose.HTML. +og_title: Cara Mengonversi HTML ke PNG – Panduan Lengkap +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Cara Merender HTML ke PNG – Panduan Lengkap Langkah demi Langkah +url: /id/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cara Merender HTML ke PNG – Panduan Lengkap Langkah‑per‑Langkah + +Jika Anda mencari **how to render html** menjadi gambar, Anda berada di tempat yang tepat. Baik Anda perlu **convert webpage to image** untuk thumbnail, mengarsipkan halaman sebagai PNG, atau menghasilkan pratinjau media sosial secara langsung, prosesnya dapat sangat sederhana dengan pustaka yang tepat. + +Dalam tutorial ini kami akan menunjukkan cara mengubah URL apa pun menjadi file PNG menggunakan Aspose.HTML untuk .NET. Anda akan melihat potongan kode lengkap yang dapat dijalankan, mempelajari mengapa setiap pengaturan penting, dan menemukan beberapa trik untuk menangani kasus tepi. Pada akhir tutorial Anda akan dapat **save html as png**, **convert html to png**, dan bahkan menyematkan hasilnya dalam laporan atau email tanpa kesulitan. + +## Prasyarat – Apa yang Anda Butuhkan + +- **.NET 6.0** atau yang lebih baru (kode ini juga berfungsi dengan .NET Core dan .NET Framework) +- Paket NuGet **Aspose.HTML for .NET** (`Aspose.Html`) terpasang +- IDE pilihan Anda (Visual Studio, Rider, atau VS Code) +- Folder yang dapat ditulisi tempat PNG akan disimpan + +Tidak ada konfigurasi tambahan yang diperlukan—Aspose.HTML menangani seluruh proses parsing halaman, menerapkan CSS, dan meraster tata letak. + +## Langkah 1: Muat Dokumen HTML yang Ingin Anda Render + +Hal pertama yang Anda perlukan adalah instance `HTMLDocument` yang menunjuk ke halaman yang ingin Anda tangkap. Aspose.HTML dapat memuat dari URL, file lokal, atau string HTML mentah. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** Memuat dokumen langsung dari URL memastikan semua sumber eksternal (CSS, JavaScript, gambar) diambil secara otomatis, memberikan rendering yang akurat dari halaman live. + +## Langkah 2: Konfigurasikan Opsi Rendering Gambar + +Selanjutnya, kami menyiapkan `ImageRenderingOptions`. Opsi-opsi ini mengontrol ukuran output, kualitas, dan apakah anti‑aliasing diterapkan. Menyesuaikannya memungkinkan Anda menyeimbangkan ukuran file dengan fidelitas visual. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** Jika Anda membutuhkan thumbnail dengan resolusi lebih tinggi, tingkatkan `Width` dan `Height` secara proporsional. Aspose.HTML akan menskalakan tata letak sesuai tanpa kehilangan kualitas vektor. + +## Langkah 3: Inisialisasi Image Renderer + +Sekarang kami membuat `ImageRenderer` dengan melewatkan dokumen dan opsi yang baru saja kami definisikan. Objek ini adalah mesin yang sebenarnya menggambar halaman ke bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** Renderer mem-parsing DOM, menghitung gaya CSS, melakukan layout, dan akhirnya meraster setiap elemen ke kanvas piksel. Semua itu terjadi di memori, jadi Anda tidak memerlukan jendela browser. + +## Langkah 4: Render dan Simpan File PNG + +Akhirnya, panggil `Render` dengan jalur lengkap tempat Anda ingin PNG disimpan. Metode ini menulis file secara sinkron dan secara otomatis membebaskan sumber daya internal. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** Setelah menjalankan program, Anda akan menemukan `example.png` di dalam folder `output`. Buka dengan penampil gambar apa pun dan Anda akan melihat snapshot akurat dari `https://example.com` pada ukuran 800×600 px. + +--- + +### Contoh Lengkap, Siap‑Jalankan + +Berikut adalah program lengkap yang dapat Anda salin‑tempel ke proyek konsol baru. Program ini mencakup semua direktif `using`, penanganan error, dan komentar untuk kejelasan. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Jalankan program (`dotnet run` dari folder proyek) dan Anda akan mendapatkan PNG yang mencerminkan halaman live. Itulah **how to render html** dengan hanya beberapa baris C#. + +--- + +## Pertanyaan yang Sering Diajukan & Kasus Tepi + +### Bisakah saya merender file HTML lokal alih‑alih URL? + +Tentu saja. Ganti URL dengan jalur file: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Bagaimana jika halaman menggunakan JavaScript untuk memodifikasi DOM setelah dimuat? + +Aspose.HTML mengeksekusi sebagian besar skrip sisi klien, tetapi tidak menyediakan mesin browser lengkap. Untuk halaman yang sangat bergantung pada skrip, Anda mungkin perlu pra‑render HTML (misalnya, menggunakan instance Chromium headless) dan kemudian memberi markup yang dihasilkan ke Aspose.HTML. + +### Bagaimana cara mengontrol tingkat kompresi PNG? + +`ImageRenderingOptions` memiliki properti `CompressionLevel` (0–9). Angka yang lebih rendah berarti file lebih besar tetapi kualitas lebih tinggi. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Saya membutuhkan latar belakang transparan—apakah saya bisa melakukannya? + +Ya. Atur warna latar belakang menjadi transparan sebelum merender: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Apakah ada cara untuk merender beberapa halaman menjadi satu gambar? + +Anda dapat melakukan loop pada koleksi URL atau string HTML, merender masing‑masing ke bitmap, lalu menempelkan mereka bersama menggunakan `System.Drawing` atau `ImageSharp`. Langkah inti **convert html to png** tetap sama. + +--- + +## Bonus: Menyematkan PNG dalam Web API + +Jika Anda ingin mengekspos fungsionalitas ini melalui endpoint ASP.NET Core, cukup kembalikan byte file: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Sekarang klien mana pun dapat meminta `GET /render?url=https://example.com` dan menerima PNG secara langsung—sempurna untuk layanan **convert webpage to image**. + +--- + +## Kesimpulan + +Kami telah membahas semua yang perlu Anda ketahui tentang **how to render html** menjadi file PNG menggunakan Aspose.HTML untuk .NET. Dari memuat halaman remote, mengonfigurasi opsi rendering, hingga menangani jebakan umum, contoh lengkap menunjukkan cara **convert html to png**, **save html as png**, dan bahkan mengekspos logika melalui Web API. + +Cobalah dengan URL Anda sendiri, bereksperimen dengan dimensi berbeda, dan mungkin otomatisasi pembuatan thumbnail untuk katalog produk Anda. Langit adalah batasnya setelah Anda menguasai dasar‑dasar **render html to png**. + +--- + +*Ready to level up?* Dapatkan paket NuGet, letakkan kode ke dalam proyek Anda, dan mulailah mengonversi halaman web ke gambar hari ini. Jika Anda menemukan kendala, silakan tinggalkan komentar—selamat merender! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/net/canvas-and-image-manipulation/_index.md b/html/italian/net/canvas-and-image-manipulation/_index.md index 24fcf4ddc..344913472 100644 --- a/html/italian/net/canvas-and-image-manipulation/_index.md +++ b/html/italian/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Scopri come convertire SVG in PDF con Aspose.HTML per .NET. Tutorial di alta qua Scopri come convertire SVG in XPS utilizzando Aspose.HTML per .NET. Potenzia il tuo sviluppo web con questa potente libreria. ### [Come abilitare l'Antialiasing in C# – Bordi lisci](./how-to-enable-antialiasing-in-c-smooth-edges/) Scopri come attivare l'antialiasing in C# per ottenere bordi più lisci nelle immagini e nei canvas con Aspose.HTML. +### [Creare testo su canvas – Guida completa al rendering del testo su immagini](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Impara a disegnare testo su immagini usando Aspose.HTML per .NET con esempi pratici passo passo. ## Conclusione diff --git a/html/italian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/italian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..c2225d666 --- /dev/null +++ b/html/italian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,234 @@ +--- +category: general +date: 2026-01-03 +description: Crea rapidamente testo su canvas e impara a renderizzare l'immagine del + testo, impostare le opzioni del testo e riempire il canvas del testo, migliorando + la resa del testo su Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: it +og_description: Crea testo su canvas con Aspose HTML, impara a renderizzare immagini + di testo, imposta le opzioni del testo e migliora la qualità del testo su Linux + in un unico tutorial. +og_title: Crea testo su canvas – Guida completa al rendering +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Crea testo su canvas – Guida completa alla resa del testo su immagini +url: /it/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Crea testo su canvas – Guida completa al rendering + +Hai mai avuto bisogno di **creare testo su canvas** ma non eri sicuro di come ottenere glifi nitidi su ogni piattaforma? Non sei solo. Molti sviluppatori incontrano un problema quando il loro testo appare sfocato su Linux, soprattutto durante la conversione di HTML in un'immagine. + +In questo tutorial percorreremo una soluzione pratica che non solo ti permette di **renderizzare un'immagine di testo** su un canvas Aspose HTML, ma ti mostra anche come **impostare le opzioni di testo**, utilizzare correttamente `FillText` e **migliorare il rendering del testo su Linux** con l'hinting. Alla fine avrai uno snippet autonomo e eseguibile da inserire in qualsiasi progetto .NET. + +## Cosa imparerai + +- Come istanziare un oggetto `Canvas` e prepararlo per il disegno. +- Il ruolo di `TextOptions` e perché abilitare l'hinting è importante su Linux. +- Codice passo‑passo che **riempie il canvas di testo** con caratteri stilizzati e di alta qualità. +- Trappole comuni (hinting mancante, sistema di coordinate errato) e soluzioni rapide. +- Modi per estendere l'esempio: font personalizzati, colori e testo multilinea. + +> **Prerequisito:** .NET 6+ (o .NET Framework 4.7.2) e il pacchetto NuGet Aspose.HTML per .NET installato. + +--- + +## Passo 1: Configura il progetto e le importazioni + +Before we start drawing, make sure your project references the right assemblies. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Consiglio professionale:** Se sei su Linux, aggiungi il pacchetto `libgdiplus` (`sudo apt-get install libgdiplus`) affinché il rendering basato su GDI funzioni senza problemi. + +--- + +## Passo 2: Crea un Canvas e definisci le sue dimensioni + +A canvas is essentially an off‑screen bitmap you can paint on. Think of it as your digital drawing board. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Perché è importante:** Impostare uno sfondo solido previene artefatti trasparenti quando successivamente esporti l'immagine. + +--- + +## Passo 3: Configura le Text Options – La chiave per un testo chiaro su Linux + +Linux font rendering can look blurry if hinting is disabled. `TextOptions.UseHinting` tells the renderer to align glyphs to pixel boundaries, dramatically sharpening the output. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Cosa succede se lo salti?** Su molte distribuzioni Linux il testo apparirà leggermente sfocato o disallineato, soprattutto a piccole dimensioni del font. + +--- + +## Passo 4: Riempire il testo sul Canvas + +Now that the canvas is ready and the text options are tuned, we can actually **fill text canvas**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +If you want custom styling (color, font size, alignment), wrap the call in a `Font` and `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Passo 5: Esporta il Canvas come file immagine + +The final step is to write the rendered bitmap to disk so you can verify the result. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Open `canvas-output.png` and you should see sharp, correctly hinted text—whether you’re on Windows, macOS, or Linux. + +--- + +## Domande comuni e casi particolari + +### Come influisce l'hinting sulle prestazioni? + +Enabling hinting adds a negligible overhead (usually < 2 ms for an 800×600 canvas). The visual gain far outweighs the cost, especially for server‑side image generation where quality is paramount. + +### E se ho bisogno di testo multilinea? + +Use `canvas.FillText` in a loop, adjusting the Y‑coordinate, or employ `canvas.FillText` overload that accepts a `TextLayout` object for automatic line‑breaking. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Posso usare un font TrueType personalizzato? + +Absolutely. Load the font with `FontFamily` and assign it to `TextOptions.FontFamily` or directly to the `Font` you pass to `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Make sure the font file is accessible to the runtime (place it in the project folder or register it system‑wide). + +--- + +## Esempio completo funzionante + +Below is the complete, copy‑paste‑ready program that incorporates every step above. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Output previsto:** Un file PNG chiamato `canvas-output.png` contenente due righe di testo—una normale, una in grassetto blu—entrambe renderizzate nitidamente grazie all'hinting. + +--- + +## Conclusione + +Abbiamo appena **creato testo su canvas** da zero, imparato come **renderizzare un'immagine di testo** con Aspose.HTML, e scoperto perché **impostare le opzioni di testo** come `UseHinting` è essenziale per **migliorare la qualità del testo su Linux**. Seguendo i passaggi sopra puoi affidabilmente **riempire il canvas di testo** in qualsiasi ambiente .NET, sia che tu stia generando miniature, filigrane o grafiche dinamiche per API web. + +Pronto per la prossima sfida? Prova ad aggiungere gradienti di sfondo, ruotare il testo o esportare in SVG per una scalatura vettoriale perfetta. Gli stessi principi—`TextOptions` corrette, gestione attenta delle coordinate e una pulita disposizione—si applicano a tutti i formati. + +Se hai incontrato qualche strano problema o hai idee per estensioni, lascia un commento. Buona programmazione e goditi quei caratteri affilati come rasoi! + +*Immagine che illustra un canvas con testo nitido (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/net/html-document-manipulation/_index.md b/html/italian/net/html-document-manipulation/_index.md index 105d8d8b1..d84aff754 100644 --- a/html/italian/net/html-document-manipulation/_index.md +++ b/html/italian/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Impara a creare contenuti dinamici e web utilizzando Aspose.HTML per .NET. Raffo Impara a usare Aspose.HTML per .NET. Importa namespace, unisci HTML con XML e migliora le tue competenze di sviluppo web con questa guida completa. ### [Genera documenti XPS tramite XpsDevice in .NET con Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Sfrutta il potenziale dello sviluppo web con Aspose.HTML per .NET. Crea, converti e manipola documenti HTML con facilità. +### [Creare documento HTML con Aspose.HTML – Guida passo‑a‑passo](./create-html-document-with-aspose-html-step-by-step-guide/) +Scopri come creare un documento HTML con Aspose.HTML passo dopo passo. Esempi pratici e consigli per sviluppatori. ## Conclusione @@ -78,4 +80,4 @@ In conclusione, se vuoi padroneggiare la manipolazione di documenti HTML usando {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/italian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..f6d39f94b --- /dev/null +++ b/html/italian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,238 @@ +--- +category: general +date: 2026-01-03 +description: Crea un documento HTML in C# usando Aspose.HTML. Scopri come aggiungere + un elemento al body, impostare lo stile del font e formattare il testo HTML con + un semplice span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: it +og_description: Crea un documento HTML in C# e scopri come aggiungere un elemento + al body, impostare lo stile del carattere e formattare il testo HTML usando Aspose.HTML. +og_title: Crea documento HTML con Aspose.HTML – Guida rapida +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Crea documento HTML con Aspose.HTML – Guida passo passo +url: /it/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Crea documento HTML con Aspose.HTML – Guida passo‑passo + +Ti è mai capitato di dover **create html document** programmaticamente e ti sei chiesto perché l'output appare semplice? Non sei l'unico. In molti progetti dobbiamo generare snippet al volo—pensa a template email, report dinamici o piccoli widget UI. La buona notizia è che Aspose.HTML rende facile **create html document**, stilizzarlo e inserirlo nella tua pagina senza scrivere stringhe grezze. + +In questo tutorial percorreremo un esempio completo che mostra come **append element to body**, **set font style** e **format text html** usando un **create span element**. Alla fine avrai uno snippet C# eseguibile che produce testo grassetto‑corsivo all'interno di uno span, e comprenderai il “perché” di ogni chiamata. + +> **Prerequisiti** +> • .NET 6 o versioni successive (qualsiasi runtime .NET recente funziona) +> • Pacchetto NuGet Aspose.HTML per .NET (`Aspose.Html`) installato +> • Familiarità di base con C# e i concetti DOM + +Non sono necessarie altre librerie e il codice funziona su Windows, Linux o macOS. + +--- + +## Cosa costruirai + +Creeremo un documento HTML minimale, aggiungeremo un `` che contiene la frase **Bold‑Italic text**, applicheremo sia lo stile **bold** che **italic**, e infine **append element to body**. Il markup finale appare così: + +```html + + + Bold‑Italic text + + +``` + +Puoi copiare‑incollare il codice completo alla fine della guida e eseguirlo subito. + +--- + +![Create HTML document example](image.png){alt="esempio di creazione documento html"} + +--- + +## Passo 1 – Inizializza l'HTMLDocument (la base di **create html document**) + +Prima di poter **append element to body**, abbiamo bisogno di un oggetto documento con cui lavorare. Aspose.HTML fornisce la classe `HTMLDocument` che rappresenta un DOM in memoria. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Perché è importante*: Istanziare `HTMLDocument` ti fornisce una tela pulita—pensala come un foglio bianco dove più tardi **format text html**. Senza questo passaggio non puoi manipolare nodi o applicare stili. + +--- + +## Passo 2 – Crea l'elemento `` (**create span element**) + +Ora ci serve un contenitore per il nostro testo stilizzato. Un `` è perfetto perché è un elemento inline che può contenere CSS senza interrompere il flusso. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Consiglio professionale*: Se mai avessi bisogno di inserire più pezzi di testo, puoi riutilizzare lo stesso `spanElement` clonandolo (`spanElement.Clone(true)`) e modificando `InnerHtml` ogni volta. + +--- + +## Passo 3 – Applica **set font style** per grassetto **e** corsivo + +Aspose.HTML espone un oggetto `Style` tipizzato. Per **set font style** combiniamo `WebFontStyle.Bold` e `WebFontStyle.Italic` usando un OR bitwise. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Perché usare l'enum*: L'enum `WebFontStyle` mappa direttamente alle proprietà CSS (`font-weight` e `font-style`). Usare l'enum evita errori di battitura e garantisce che il CSS generato sia valido—essenziale per un affidabile **format text html**. + +--- + +## Passo 4 – **Append element to body** e finalizza il documento + +Con lo span stilizzato pronto, l'ultimo passo è inserirlo all'interno del tag ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +A questo punto l'albero DOM appare esattamente come lo snippet mostrato prima. Se ispezioni `htmlDocument.InnerHtml`, vedrai il markup completo. + +--- + +## Passo 5 – Salva o rendi il documento + +Puoi scrivere l'HTML su un file, trasmetterlo a un browser, o renderizzarlo in PDF/Immagine usando il motore di rendering di Aspose.HTML. Ecco l'opzione più semplice per l'output su file: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Apri `output.html` in qualsiasi browser e dovresti vedere **Bold‑Italic text** visualizzato esattamente come previsto. + +--- + +## Esempio completo funzionante + +Mettiamo tutto insieme, ecco il programma completo, pronto per l'esecuzione: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Output previsto** – aprendo `output.html` mostra: + +> **Bold‑Italic text** (grassetto e corsivo) + +--- + +## Domande comuni e casi particolari + +### 1. E se ho bisogno di più di due stili? + +`WebFontStyle` è un enum flags, quindi puoi combinare qualsiasi numero di stili (ad esempio `Underline`). Continua a usare l'operatore `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Posso cambiare il colore contemporaneamente? + +Assolutamente. L'oggetto `Style` ha una proprietà `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Come faccio a **append element to body** più volte? + +Crea un ciclo, clona lo span stilizzato, regola il testo e aggiungi ogni clone: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. E se devo **format text html** all'interno di un `
` invece? + +La stessa API funziona per qualsiasi elemento. Basta sostituire `CreateElement("span")` con `CreateElement("div")` e regolare gli stili secondo necessità. + +### 5. Problemi di compatibilità? + +Aspose.HTML è destinato a .NET Standard 2.0+, quindi il codice funziona su .NET Core, .NET Framework e .NET 5/6+. Non sono necessari shim specifici per browser. + +--- + +## Consigli professionali e insidie + +- **Consiglio professionale**: Imposta sempre `InnerHtml` *dopo* aver configurato lo stile. Cambiare prima il contenuto interno può innescare un re‑layout in alcuni browser; farlo dopo lo styling evita lavoro inutile. +- **Attenzione a**: Mescolare `WebFontStyle` con stringhe CSS inline. Se imposti manualmente `spanElement.SetAttribute("style", "...")` in seguito, sovrascriverai gli stili generati dall'enum. Attieniti a un solo metodo. +- **Nota sulle prestazioni**: Per documenti grandi, crea i nodi in batch (crea tutti i nodi prima, poi aggiungili tutti in una volta) riduce il numero di mutazioni del DOM e velocizza il rendering. + +--- + +## Conclusione + +Ora sai come **create html document** con Aspose.HTML, **append element to body**, **set font style** e **format text html** usando un **create span element**. L'esempio è completamente funzionante, e le spiegazioni coprono sia il “come” sia il “perché”, rendendo facile adattare il modello a scenari più complessi. + +Pronto per il passo successivo? Prova a sostituire il `` con un `

` con più classi CSS, o rendi lo stesso DOM in PDF usando `Document` → `PdfSaveOptions`. Gli stessi principi valgono, e troverai Aspose.HTML un partner affidabile per qualsiasi generazione HTML lato server. + +Hai domande o hai scoperto un trucco intelligente? Lascia un commento qui sotto—buon coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/net/html-extensions-and-conversions/_index.md b/html/italian/net/html-extensions-and-conversions/_index.md index 9dbee06ea..c7bb30b63 100644 --- a/html/italian/net/html-extensions-and-conversions/_index.md +++ b/html/italian/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,10 @@ Aspose.HTML per .NET non è solo una libreria; è un punto di svolta nel mondo d ## Tutorial sulle estensioni e conversioni HTML ### [Convertire HTML in PDF in .NET con Aspose.HTML](./convert-html-to-pdf/) Converti HTML in PDF senza sforzo con Aspose.HTML per .NET. Segui la nostra guida passo dopo passo e libera la potenza della conversione da HTML a PDF. + +### [Crea PDF da URL – Guida completa C#](./create-pdf-from-url-complete-c-guide/) +Crea PDF da un URL usando Aspose.HTML per .NET con una guida completa in C#. + ### [Convertire EPUB in immagine in .NET con Aspose.HTML](./convert-epub-to-image/) Scopri come convertire EPUB in immagini utilizzando Aspose.HTML per .NET. Tutorial dettagliato con esempi di codice e opzioni personalizzabili. ### [Converti EPUB in PDF in .NET con Aspose.HTML](./convert-epub-to-pdf/) @@ -74,4 +78,4 @@ Quindi, cosa aspetti? Intraprendiamo questo entusiasmante viaggio per esplorare {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/italian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..83c60fefe --- /dev/null +++ b/html/italian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: Crea PDF da URL in C# rapidamente. Scopri come convertire HTML in PDF, + salvare la pagina web come PDF e generare PDF da HTML con codice semplice. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: it +og_description: Crea PDF da URL in C# rapidamente. Questo tutorial mostra come convertire + HTML in PDF, salvare la pagina web come PDF e generare PDF da HTML usando Aspose.HTML. +og_title: Crea PDF da URL – Guida completa C# +tags: +- pdf +- csharp +- html +- conversion +title: Crea PDF da URL – Guida completa C# +url: /it/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Crea PDF da URL – Guida Completa C# + +Ti è mai capitato di **creare PDF da URL** ma non sapevi quale libreria scegliere? Non sei l'unico. Molti sviluppatori si trovano di fronte a questo ostacolo quando vogliono archiviare una pagina web, generare fatture da un modello online o semplicemente offrire un pulsante “scarica come PDF” sul proprio sito. + +In questo tutorial percorreremo l’intero processo di **conversione da HTML a PDF** usando C#. Vedrai come **salvare una pagina web come PDF**, come **generare PDF da HTML**, e perché la libreria `Aspose.HTML for .NET` rende tutto molto semplice. Alla fine avrai uno snippet pronto all’uso che recupera qualsiasi URL pubblico, lo rende e scrive un file PDF su disco. + +> **Consiglio professionale:** se lavori dietro un proxy aziendale, assicurati che il costruttore `HTMLDocument` riceva le impostazioni corrette di `WebRequest`—altrimenti il download fallirà silenziosamente. + +## Cosa Ti Serve + +- **.NET 6.0** o versioni successive (il codice funziona anche su .NET Framework 4.7+). +- Pacchetto NuGet **Aspose.HTML for .NET** (`Aspose.HTML`). +- Una cartella scrivibile su disco dove salvare il PDF. +- Familiarità di base con C# (non servono trucchi avanzati). + +Nessun file di configurazione extra, nessuna magia nascosta—solo poche righe di codice pulito e commentato. + +![Esempio di creazione PDF da URL](image.png){alt="crea pdf da url"} + +## Passo 1: Installa il Pacchetto NuGet Aspose.HTML + +Apri il terminale o la Console di Gestione Pacchetti e esegui: + +```bash +dotnet add package Aspose.HTML +``` + +> **Perché questo passo è importante:** le classi `HTMLDocument`, `PdfSaveOptions` e `PdfConverter` si trovano nello spazio dei nomi `Aspose.Html`. Senza il pacchetto il compilatore non saprà cosa siano questi tipi. + +## Passo 2: Carica la Pagina Web in un `HTMLDocument` + +La prima azione reale è recuperare l’HTML remoto. `HTMLDocument` può accettare direttamente un URL, gestendo i redirect e il rilevamento del content‑type per te. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Cosa succede?** +- `HTMLDocument` analizza il markup scaricato creando un albero DOM, proprio come farebbe un browser. +- Qualsiasi CSS, immagine o script esterno referenziato con URL assoluti viene anch'esso scaricato, garantendo che il PDF assomigli alla pagina live. + +## Passo 3: Configura le Opzioni di Esportazione PDF (Margini, Dimensioni Pagina, ecc.) + +Prima di passare il documento al convertitore, affiniamo l’output. L’oggetto `PdfSaveOptions` ti permette di impostare margini, orientamento pagina e persino la versione PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Perché impostare i margini?** +Un PDF troppo stretto può tagliare intestazioni o piè di pagina, soprattutto su siti ottimizzati per mobile. Aggiungere un margine moderato assicura che tutto rimanga leggibile. + +## Passo 4: Converti il Documento HTML Direttamente in PDF + +Ora il lavoro pesante. `PdfConverter.ConvertHtml` trasmette la pagina renderizzata direttamente in un file PDF. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Dietro le quinte:** +- Aspose rende il DOM usando il proprio motore di layout (senza Chromium). +- Il bitmap renderizzato viene poi rasterizzato in vettori PDF dove possibile, preservando la selezionabilità del testo. + +## Passo 5: Verifica il Risultato e Gestisci i Casi Limite + +Un rapido controllo di coerenza evita mal di testa in seguito. Apri il file generato; dovresti vedere la pagina live, i margini applicati e tutte le immagini intatte. + +### Problemi comuni e come evitarli + +| Problema | Causa | Soluzione | +|----------|-------|-----------| +| **PDF vuoto** | URL bloccato dal firewall o richiede autenticazione | Passa un `WebRequest` personalizzato con credenziali al costruttore `HTMLDocument` | +| **CSS mancante** | Foglio di stile esterno usa URL relativi | Assicurati che l'URL base sia corretto (Aspose lo gestisce, ma verifica i redirect) | +| **Dimensione file elevata** | Immagini ad alta risoluzione non ridotte | Usa `PdfSaveOptions.ImageCompression` per comprimere le immagini incorporate in JPEG | +| **Caratteri Unicode corrotti** | Font non incorporato | Imposta `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Esempio Completo (Pronto per Copia‑Incolla) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Esegui il programma (`dotnet run`) e troverai `example.pdf` in `C:\Temp`. Aprilo con qualsiasi visualizzatore PDF e dovresti vedere la replica esatta di `https://example.com` con i margini che hai definito. + +## Conclusione + +Ti abbiamo appena mostrato **come creare PDF da URL** usando C#. I passaggi hanno coperto il caricamento di una pagina web, la configurazione dei margini e la conversione del DOM in un file PDF—tutto ciò di cui hai bisogno per **convertire HTML in PDF**, **salvare pagina web come PDF** e **generare PDF da HTML** in modo pronto per la produzione. + +Sentiti libero di sperimentare: cambia la dimensione della pagina in `Letter`, passa all’orientamento orizzontale, o aggiungi un’intestazione/piè di pagina usando `PdfPageEventHandler`. Lo stesso schema funziona per pagine dinamiche, portali protetti da login (basta fornire i cookie), o anche per elaborare in batch un elenco di URL. + +**Prossimi passi da esplorare** + +- **HTML to PDF C#** con conversione asincrona per servizi ad alto throughput. +- Inserimento di **metadata** (autore, titolo) nel PDF tramite `PdfDocumentInfo`. +- Uso di **Aspose.PDF** per unire più PDF generati da URL diversi in un unico report. + +Hai domande? Lascia un commento qui sotto, e buona programmazione! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/net/rendering-html-documents/_index.md b/html/italian/net/rendering-html-documents/_index.md index db1e56499..a89862195 100644 --- a/html/italian/net/rendering-html-documents/_index.md +++ b/html/italian/net/rendering-html-documents/_index.md @@ -42,19 +42,31 @@ Ora che hai configurato Aspose.HTML per .NET, è il momento di esplorare i tutor ### [Renderizza HTML come PNG in .NET con Aspose.HTML](./render-html-as-png/) Impara a lavorare con Aspose.HTML per .NET: manipola HTML, converti in vari formati e altro ancora. Immergiti in questo tutorial completo! + +### [Come rendere HTML in PNG – Guida completa passo‑passo](./how-to-render-html-to-png-complete-step-by-step-guide/) +Scopri come convertire HTML in PNG con Aspose.HTML passo dopo passo, con esempi pratici e consigli utili. + ### [Renderizza EPUB come XPS in .NET con Aspose.HTML](./render-epub-as-xps/) Scopri come creare e rendere documenti HTML con Aspose.HTML per .NET in questo tutorial completo. Immergiti nel mondo della manipolazione HTML, del web scraping e altro ancora. + ### [Timeout di rendering in .NET con Aspose.HTML](./rendering-timeout/) Scopri come controllare efficacemente i timeout di rendering in Aspose.HTML per .NET. Esplora le opzioni di rendering e assicurati un rendering fluido dei documenti HTML. + ### [Renderizza MHTML come XPS in .NET con Aspose.HTML](./render-mhtml-as-xps/) Impara a rendere MHTML come XPS in .NET con Aspose.HTML. Migliora le tue capacità di manipolazione HTML e potenzia i tuoi progetti di sviluppo web! + ### [Rendering di più documenti in .NET con Aspose.HTML](./render-multiple-documents/) Impara a eseguire il rendering di più documenti HTML utilizzando Aspose.HTML per .NET. Aumenta le tue capacità di elaborazione dei documenti con questa potente libreria. + ### [Rendi il documento SVG come PNG in .NET con Aspose.HTML](./render-svg-doc-as-png/) Sblocca la potenza di Aspose.HTML per .NET! Scopri come rendere SVG Doc come PNG senza sforzo. Immergiti in esempi passo dopo passo e FAQ. Inizia subito! + +### [Come rendere HTML – Guida completa con gestore di risorse personalizzato](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Scopri come rendere HTML usando Aspose.HTML con un gestore di risorse personalizzato per un controllo totale del rendering. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/italian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..f34617e81 --- /dev/null +++ b/html/italian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,220 @@ +--- +category: general +date: 2026-01-03 +description: Come rendere HTML in immagini usando Aspose.HTML. Impara la conversione + da HTML a immagine, il gestore di risorse personalizzato e la conversione di HTML + in bitmap in C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: it +og_description: Come rendere HTML in immagini usando Aspose.HTML. Padroneggia la conversione + da HTML a immagine, il gestore di risorse personalizzato e la conversione da HTML + a bitmap in C#. +og_title: Come rendere HTML – Guida completa con gestore di risorse personalizzato +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Come renderizzare HTML – Guida completa con gestore di risorse personalizzato +url: /it/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Come rendere HTML – Guida completa con gestore di risorse personalizzato + +Ti sei mai chiesto **come rendere HTML** in una bitmap senza dover gestire un motore di browser da solo? Non sei l'unico. Molti sviluppatori si trovano in difficoltà quando hanno bisogno di uno screenshot rapido di una pagina dinamica per email, report o miniature. La buona notizia? Con Aspose.HTML puoi trasformare qualsiasi stringa HTML in un'immagine—senza interfaccia utente, senza Chrome headless, solo puro codice C#. + +In questo tutorial percorreremo uno scenario pratico di **conversione da html a immagine**, ti mostreremo come **implementare un gestore di risorse personalizzato** e dimostreremo l'intero flusso di lavoro **convert html to bitmap**. Alla fine avrai un metodo riutilizzabile che rende HTML in un'immagine interamente in memoria, pronto per ulteriori elaborazioni o archiviazione. + +> **Prerequisiti** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * Familiarità di base con C# e gli stream + +Se hai già queste basi, immergiamoci. + +--- + +## Come rendere HTML con Aspose.HTML + +Il nucleo di qualsiasi operazione **render html to image** è la classe `ImageRenderer`. Prende un `HTMLDocument` e genera grafica raster (PNG, JPEG, BMP, ecc.). Di seguito trovi lo scheletro minimale: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Quello snippet funziona, ma ottieni un file su disco solo se indichi al renderer dove scriverlo. Per mantenere tutto in memoria—e per intercettare ogni risorsa (immagini, CSS, font) che l'HTML richiede—collegheremo un **custom resource handler**. + +## Implementare un gestore di risorse personalizzato + +Un **custom resource handler** ti dà il pieno controllo su come le risorse esterne vengono recuperate e memorizzate. In molti casi vorrai catturare queste risorse in memoria per un uso successivo (ad esempio, raggrupparle in un ZIP). Il gestore eredita da `ResourceHandler` e sovrascrive `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Perché farlo?** +* **Performance** – nessun I/O su disco, tutto rimane in RAM. +* **Security** – controlli quali URL possono essere recuperati. +* **Extensibility** – puoi cache le risorse, rinominarle o incorporarle in altri contenitori. + +## Convertire HTML in Bitmap usando ImageRenderer + +Ora combiniamo i pezzi: carichiamo l'HTML, colleghiamo `MyHandler` e renderizziamo. Il metodo seguente restituisce un `MemoryStream` contenente un'immagine PNG della pagina renderizzata. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Output previsto + +If you call the method like this: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +You’ll get a `demo.png` that looks roughly like: + +![esempio di output di come rendere html](https://example.com/assets/render-html-output.png "esempio di output di come rendere html") + +*Testo alternativo:* **esempio di output di come rendere html** – una piccola bitmap che mostra lo snippet HTML renderizzato. + +## Conversione da HTML a Immagine – Problemi comuni e consigli + +### 1. URL relativi e tag base +Se il tuo HTML fa riferimento a CSS o immagini esterne con percorsi relativi, il renderer non conoscerà la cartella base. Puoi: + +* Aggiungere un tag ``, oppure +* Risolvere gli URL all'interno di `MyHandler.HandleResource` e fornire lo stream corretto. + +### 2. Disponibilità dei font +Aspose.HTML utilizza i font di sistema per impostazione predefinita. Per i font web personalizzati (`@font-face`), assicurati che i file dei font siano raggiungibili tramite il gestore, o incorporali come URI dati base64. + +### 3. Pagine grandi +Rendering a very tall page can consume significant memory. You can limit the viewport size: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Formati immagine +`renderer.Save(stream, ImageFormat.Jpeg)` funziona altrettanto bene se ti serve la compressione JPEG. Sostituisci `ImageFormat.Png` con `ImageFormat.Bmp` per un vero output **convert html to bitmap**. + +## Renderizzare HTML in Immagine – Scenari avanzati + +### A. Renderizzare più pagine +If the HTML contains page breaks (`
`), you can iterate over pages: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Incorporare l'immagine in un PDF +Combine with `Aspose.Pdf` to embed the PNG directly: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +## Conclusione + +Abbiamo coperto **come rendere HTML** in una bitmap interamente in memoria, esplorato i fondamenti della **conversione da html a immagine**, costruito un **custom resource handler** e mostrato come **convert html to bitmap** con `ImageRenderer` di Aspose.HTML. L'approccio è veloce, thread‑safe e facilmente estensibile per progetti reali—dalla generazione di miniature per email alla creazione automatica di report. + +Pronto per il passo successivo? Prova a sostituire l'output PNG con un JPEG, sperimenta con diverse dimensioni di pagina, o collega il gestore a un livello di cache così i rendering ripetuti sono istantanei. Il cielo è il limite quando controlli ogni risorsa da solo. + +Hai domande o un caso d'uso interessante da condividere? Lascia un commento qui sotto, e buona renderizzazione! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/italian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..c29e5602e --- /dev/null +++ b/html/italian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,224 @@ +--- +category: general +date: 2026-01-03 +description: Scopri come rendere l'HTML in PNG, convertire una pagina web in immagine + e salvare l'HTML come PNG usando Aspose.HTML in C#. Veloce, affidabile e pronto + per la produzione. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: it +og_description: Padroneggia come rendere HTML in PNG, convertire una pagina web in + immagine e salvare HTML come PNG con un esempio completo in C# usando Aspose.HTML. +og_title: Come rendere HTML in PNG – Guida completa +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Come convertire HTML in PNG – Guida completa passo passo +url: /it/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Come rendere HTML in PNG – Guida completa passo‑passo + +Se stai cercando **how to render html** in un'immagine, sei nel posto giusto. Che tu abbia bisogno di **convert webpage to image** per le miniature, archiviare una pagina come PNG, o generare anteprime per i social‑media al volo, il processo può essere sorprendentemente semplice con la libreria giusta. + +In questo tutorial ti guideremo passo passo nella conversione di qualsiasi URL live in un file PNG usando Aspose.HTML per .NET. Vedrai un frammento di codice completo e eseguibile, imparerai perché ogni impostazione è importante e scoprirai alcuni trucchi per gestire i casi limite. Alla fine sarai in grado di **save html as png**, **convert html to png**, e persino incorporare il risultato in un report o email senza alcuno sforzo. + +## Prerequisiti – Cosa ti serve + +- **.NET 6.0** o successivo (il codice funziona anche con .NET Core e .NET Framework) +- Pacchetto NuGet **Aspose.HTML for .NET** (`Aspose.Html`) installato +- Un IDE a tua scelta (Visual Studio, Rider o VS Code) +- Una cartella scrivibile dove verrà salvato il PNG + +Non è necessaria alcuna configurazione aggiuntiva—Aspose.HTML si occupa del lavoro pesante di analizzare la pagina, applicare i CSS e rasterizzare il layout. + +## Passo 1: Carica il documento HTML che vuoi rendere + +La prima cosa di cui hai bisogno è un'istanza `HTMLDocument` che punti alla pagina che desideri catturare. Aspose.HTML può caricare da un URL, un file locale o una stringa HTML grezza. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** Caricare il documento direttamente dall'URL garantisce che tutte le risorse esterne (CSS, JavaScript, immagini) vengano recuperate automaticamente, fornendoti un rendering fedele della pagina live. + +## Passo 2: Configura le opzioni di rendering dell'immagine + +Successivamente, impostiamo `ImageRenderingOptions`. Queste opzioni controllano la dimensione dell'output, la qualità e se viene applicato l'anti‑aliasing. Regolandole puoi bilanciare la dimensione del file rispetto alla fedeltà visiva. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** Se ti serve una miniatura a risoluzione più alta, aumenta `Width` e `Height` proporzionalmente. Aspose.HTML scalerà il layout di conseguenza senza perdere la qualità vettoriale. + +## Passo 3: Inizializza il renderer dell'immagine + +Ora creiamo un `ImageRenderer` passando il documento e le opzioni appena definite. Questo oggetto è il motore che effettivamente disegna la pagina su un bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** Il renderer analizza il DOM, calcola gli stili CSS, esegue il layout e infine rasterizza ogni elemento su una tela di pixel. Tutto ciò avviene in memoria, quindi non è necessaria una finestra del browser. + +## Passo 4: Renderizza e salva il file PNG + +Infine, chiama `Render` con il percorso completo dove desideri salvare il PNG. Il metodo scrive il file in modo sincrono e rilascia automaticamente le risorse interne. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** Dopo aver eseguito il programma, troverai `example.png` nella cartella `output`. Aprilo con qualsiasi visualizzatore di immagini e dovresti vedere un'istantanea fedele di `https://example.com` a 800×600 px. + +--- + +### Esempio completo, pronto da eseguire + +Di seguito trovi il programma completo che puoi copiare‑incollare in un nuovo progetto console. Include tutte le direttive `using`, la gestione degli errori e i commenti per chiarezza. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Esegui il programma (`dotnet run` dalla cartella del progetto) e otterrai un PNG che rispecchia la pagina live. Questo è **how to render html** con poche righe di C#. + +--- + +## Domande frequenti & casi limite + +### Posso renderizzare un file HTML locale invece di un URL? + +Assolutamente. Sostituisci l'URL con un percorso file: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Cosa succede se la pagina usa JavaScript per modificare il DOM dopo il caricamento? + +Aspose.HTML esegue la maggior parte degli script client‑side, ma non fornisce un motore browser completo. Per pagine con script intensivi potresti dover pre‑renderizzare l'HTML (ad esempio usando un'istanza headless di Chromium) e poi fornire il markup risultante ad Aspose.HTML. + +### Come controllo il livello di compressione PNG? + +`ImageRenderingOptions` include una proprietà `CompressionLevel` (0–9). Numeri più bassi significano file più grandi ma qualità superiore. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Ho bisogno di uno sfondo trasparente—è possibile? + +Sì. Imposta il colore di sfondo su trasparente prima del rendering: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Esiste un modo per renderizzare più pagine in un'unica immagine? + +Puoi iterare su una collezione di URL o stringhe HTML, renderizzare ciascuno in un bitmap, e poi unirli usando `System.Drawing` o `ImageSharp`. Il passaggio centrale **convert html to png** rimane lo stesso. + +## Bonus: Incorporare il PNG in una Web API + +Se vuoi esporre questa funzionalità tramite un endpoint ASP.NET Core, restituisci semplicemente i byte del file: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Ora qualsiasi client può richiedere `GET /render?url=https://example.com` e ricevere un PNG al volo—perfetto per i servizi **convert webpage to image**. + +## Conclusione + +Abbiamo coperto tutto ciò che devi sapere su **how to render html** in un file PNG usando Aspose.HTML per .NET. Dal caricamento di una pagina remota, alla configurazione delle opzioni di rendering, e alla gestione dei problemi comuni, l'esempio completo ti mostra esattamente come **convert html to png**, **save html as png**, e persino esporre la logica tramite una Web API. + +Provalo con i tuoi URL, sperimenta con diverse dimensioni e magari automatizza la generazione di miniature per il tuo catalogo prodotti. Il cielo è il limite una volta che avrai padroneggiato le basi di **render html to png**. + +*Pronto a fare il salto di livello?* Prendi il pacchetto NuGet, inserisci il codice nel tuo progetto e inizia a convertire le pagine web in immagini oggi. Se incontri problemi, sentiti libero di lasciare un commento—buon rendering! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/net/canvas-and-image-manipulation/_index.md b/html/japanese/net/canvas-and-image-manipulation/_index.md index bc651544a..13a4bb8c4 100644 --- a/html/japanese/net/canvas-and-image-manipulation/_index.md +++ b/html/japanese/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aspose.HTML for .NET を使用して SVG を PDF に変換する方法を学び Aspose.HTML for .NET を使用して SVG を XPS に変換する方法を学びます。この強力なライブラリを使用して Web 開発を強化します。 ### [C# でアンチエイリアシングを有効にする – スムーズなエッジ](./how-to-enable-antialiasing-in-c-smooth-edges/) C# でアンチエイリアシングを有効にし、描画エッジを滑らかにする方法を学びます。 +### [キャンバスにテキストを描画する – 画像上にテキストをレンダリングする完全ガイド](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Aspose.HTML for .NET を使用して、キャンバス上にテキストを描画し、画像に文字をレンダリングする方法をステップバイステップで解説します。 ## 結論 diff --git a/html/japanese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/japanese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..01feee5ad --- /dev/null +++ b/html/japanese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,233 @@ +--- +category: general +date: 2026-01-03 +description: キャンバス上のテキストを素早く作成し、テキスト画像のレンダリング方法、テキストオプションの設定、テキストキャンバスへの塗りつぶしを学びながら、Linux + のテキストレンダリングを改善します。 +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: ja +og_description: Aspose HTMLでキャンバステキストを作成し、テキスト画像のレンダリング方法、テキストオプションの設定、Linuxのテキスト品質向上を1つのチュートリアルで学びましょう。 +og_title: キャンバステキストの作成 – 完全レンダリングガイド +tags: +- Aspose +- C# +- Graphics +- Canvas +title: キャンバステキストの作成 – 画像上にテキストを描画する完全ガイド +url: /ja/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# キャンバステキストの作成 – 完全レンダリングガイド + +**キャンバステキストを作成**したいけど、すべてのプラットフォームでくっきりしたグリフを得る方法が分からない…ということはありませんか？ あなたは一人ではありません。HTML を画像に変換したときに、Linux でテキストがぼやけて見えるという壁にぶつかる開発者は多いです。 + +このチュートリアルでは、**テキスト画像をレンダリング**して Aspose HTML キャンバスに描画する実用的な解決策をステップバイステップで解説します。また、**テキストオプションの設定**、`FillText` の正しい使い方、Linux でのテキストレンダリングをヒンティングで**改善**する方法も紹介します。最後まで読めば、任意の .NET プロジェクトにそのまま貼り付けられる、自己完結型の実行可能スニペットが手に入ります。 + +## 学べること + +- `Canvas` オブジェクトをインスタンス化し、描画の準備をする方法 +- `TextOptions` の役割と、Linux でヒンティングを有効にする重要性 +- スタイル付きで高品質な文字を **fill text canvas** するステップバイステップコード +- よくある落とし穴（ヒンティング未設定、座標系の誤り）とその即時対策 +- 例の拡張方法：カスタムフォント、カラー、複数行テキスト + +> **前提条件:** .NET 6+（または .NET Framework 4.7.2）と Aspose.HTML for .NET NuGet パッケージがインストールされていること。 + +--- + +## 手順 1: プロジェクトとインポートの設定 + +描画を始める前に、プロジェクトが正しいアセンブリを参照していることを確認してください。 + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **プロのコツ:** Linux 環境の場合、`libgdiplus` パッケージ（`sudo apt-get install libgdiplus`）を追加すると、GDI ベースのレンダリングがスムーズに動作します。 + +--- + +## 手順 2: キャンバスの作成とサイズの定義 + +キャンバスは本質的にオフスクリーンのビットマップで、そこに描画できます。デジタルの描画ボードと考えてください。 + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **なぜ重要か:** 固定の背景色を設定しておくと、後で画像をエクスポートしたときに透明なアーティファクトが出るのを防げます。 + +--- + +## 手順 3: テキストオプションの構成 – Linux でクリアなテキストを得る鍵 + +ヒンティングが無効だと、Linux のフォントレンダリングはぼやけて見えることがあります。`TextOptions.UseHinting` は、レンダラにグリフをピクセル境界に合わせさせ、出力を劇的にシャープにします。 + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **これを省略するとどうなるか:** 多くの Linux ディストリビューションで、特に小さいフォントサイズの場合、テキストがややぼやけたり位置ずれしたりします。 + +--- + +## 手順 4: キャンバスにテキストを描画 + +キャンバスの準備とテキストオプションの調整が完了したので、いよいよ **fill text canvas** を実行します。 + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +カスタムスタイル（色、フォントサイズ、配置）を指定したい場合は、`Font` と `Brush` で呼び出しをラップします。 + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## 手順 5: キャンバスを画像ファイルとしてエクスポート + +最後のステップは、レンダリングしたビットマップをディスクに書き出して結果を確認することです。 + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +`canvas-output.png` を開くと、Windows、macOS、Linux いずれでもシャープで正しくヒンティングされたテキストが表示されます。 + +--- + +## よくある質問とエッジケース + +### ヒンティングはパフォーマンスにどう影響する？ + +ヒンティングを有効にしてもオーバーヘッドはごくわずかです（800×600 キャンバスで通常 < 2 ms）。品質の向上はコストをはるかに上回り、特にサーバーサイドで画像生成を行う場合に重要です。 + +### 複数行テキストはどう扱う？ + +`canvas.FillText` をループで呼び出し Y 座標を調整するか、`TextLayout` オブジェクトを受け取るオーバーロードを使用して自動改行させます。 + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### カスタム TrueType フォントは使える？ + +もちろんです。`FontFamily` でフォントをロードし、`TextOptions.FontFamily` に設定するか、`FillText` に直接渡す `Font` に割り当てます。 + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +実行時にフォントファイルが参照できるようにしてください（プロジェクトフォルダーに配置するか、システム全体に登録します）。 + +--- + +## 完全動作サンプル + +以下は、上記のすべての手順を組み込んだ、コピー＆ペースト可能な完全プログラムです。 + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**期待される出力:** `canvas-output.png` という名前の PNG ファイルが生成され、2 行のテキスト（1 行は普通、もう 1 行は太字の青）がヒンティングのおかげでくっきりと描画されます。 + +--- + +## 結論 + +ここまでで **キャンバステキストをゼロから作成**し、Aspose.HTML で **テキスト画像をレンダリング**する方法を学び、`UseHinting` のような **テキストオプションの設定**が **Linux のテキスト品質を改善**する上で不可欠であることを確認しました。上記の手順に従えば、.NET 環境でサムネイル、透かし、Web API 用の動的グラフィックなど、あらゆるシナリオで確実に **fill text canvas** が実行できます。 + +次のチャレンジはどうですか？ 背景グラデーションを追加したり、テキストを回転させたり、SVG にエクスポートしてベクターレベルのスケーリングを実現したりしてみましょう。同じ原則—適切な `TextOptions`、座標系の配慮、クリーンなリソース破棄—がすべてのフォーマットで有効です。 + +疑問や拡張アイデアがあればコメントを残してください。コーディングを楽しみ、鋭い文字を満喫してください！ + +--- + +*Image illustrating a canvas with crisp text (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/net/html-document-manipulation/_index.md b/html/japanese/net/html-document-manipulation/_index.md index ade661406..3782c1e4b 100644 --- a/html/japanese/net/html-document-manipulation/_index.md +++ b/html/japanese/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Aspose.HTML for .NET を使用して動的な Web コンテンツを作成する Aspose.HTML for .NET の使い方を学びます。この包括的なガイドを使用して、名前空間をインポートし、HTML と XML を結合し、Web 開発スキルを強化します。 ### [Aspose.HTML を使用して .NET で XpsDevice によって XPS ドキュメントを生成する](./generate-xps-documents-by-xpsdevice/) Aspose.HTML for .NET で Web 開発の可能性を最大限に引き出します。HTML ドキュメントを簡単に作成、変換、操作できます。 +### [Aspose.HTML を使用して HTML ドキュメントを作成する – ステップバイステップ ガイド](./create-html-document-with-aspose-html-step-by-step-guide/) +Aspose.HTML を使って HTML ドキュメントを最初から作成する方法を、ステップバイステップで学びます。 ## 結論 @@ -78,4 +80,4 @@ Aspose.HTML for .NET で Web 開発の可能性を最大限に引き出します {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/japanese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..408d6d919 --- /dev/null +++ b/html/japanese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,237 @@ +--- +category: general +date: 2026-01-03 +description: C#でAspose.HTMLを使用してHTMLドキュメントを作成します。要素をbodyに追加する方法、フォントスタイルを設定する方法、シンプルなspanでテキストHTMLをフォーマットする方法を学びます。 +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: ja +og_description: C#でHTMLドキュメントを作成し、要素をbodyに追加し、フォントスタイルを設定し、Aspose.HTMLを使用してテキストHTMLをフォーマットする方法をご覧ください。 +og_title: Aspose.HTMLでHTMLドキュメントを作成する – クイックガイド +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Aspose.HTMLでHTMLドキュメントを作成する – ステップバイステップガイド +url: /ja/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Aspose.HTMLでHTMLドキュメントを作成する – ステップバイステップガイド + +プログラムで **create html document** を作成する必要があり、出力が地味に見えることに疑問を抱いたことはありませんか？ あなただけではありません。多くのプロジェクトで、メールテンプレートや動的レポート、または小さな UI ウィジェットなど、スニペットをその場で生成する必要があります。良いニュースは、Aspose.HTML を使えば、**create html document** を簡単に作成し、スタイルを適用し、生の文字列を書かずにページに組み込むことができるということです。 + +このチュートリアルでは、**append element to body**、**set font style**、**format text html** を **create span element** を使用して行う完全な例を順に解説します。最後まで読むと、span 内に太字・斜体テキストを生成する実行可能な C# スニペットが手に入り、各呼び出しの「なぜ」も理解できるようになります。 + +> **Prerequisites** +> • .NET 6 以降（最近の .NET ランタイムであればどれでも可） +> • Aspose.HTML for .NET NuGet パッケージ（`Aspose.Html`）がインストール済み +> • C# と DOM の基本的な知識 + +他のライブラリは不要で、コードは Windows、Linux、macOS 上で動作します。 + +--- + +## 作成するもの + +最小限の HTML ドキュメントを作成し、フレーズ **Bold‑Italic text** を含む `` を追加し、**bold** と **italic** の両方のスタイルを適用し、最後に **append element to body** を行います。最終的なマークアップは以下のようになります： + +```html + + + Bold‑Italic text + + +``` + +ガイドの最後にある完全なソースをコピー＆ペーストすれば、すぐに実行できます。 + +--- + +![Create HTML document example](image.png){alt="create html document example"} + +--- + +## Step 1 – HTMLDocument の初期化（**create html document** の基礎） + +**append element to body** を行う前に、操作対象となるドキュメントオブジェクトが必要です。Aspose.HTML は、メモリ上の DOM を表す `HTMLDocument` クラスを提供します。 + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Why this matters*: `HTMLDocument` をインスタンス化することで、クリーンなキャンバスが手に入ります—後で **format text html** を行うための白紙のシートと考えてください。このステップがなければ、ノードの操作やスタイルの適用はできません。 + +--- + +## Step 2 – `` 要素の作成（**create span element**） + +次に、スタイル付きテキストのコンテナが必要です。`` はインライン要素で、フローを壊さずに CSS を適用できるため最適です。 + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Pro tip*: 複数のテキストを挿入する必要がある場合は、同じ `spanElement` をクローン（`spanElement.Clone(true)`）して、毎回 `InnerHtml` を変更することで再利用できます。 + +--- + +## Step 3 – **set font style** を使用して太字 **かつ** 斜体を適用 + +Aspose.HTML は強く型付けされた `Style` オブジェクトを提供します。**set font style** を行うには、ビット単位の OR 演算子で `WebFontStyle.Bold` と `WebFontStyle.Italic` を組み合わせます。 + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Why use the enum*: `WebFontStyle` 列挙体は CSS プロパティ（`font-weight` と `font-style`）に直接対応しています。列挙体を使用することでタイプミスを防ぎ、生成される CSS が有効であることを保証します—信頼性の高い **format text html** に不可欠です。 + +--- + +## Step 4 – **Append element to body** とドキュメントの最終化 + +スタイルが適用された span が準備できたら、最後のステップはそれを `` タグ内に配置することです。 + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +この時点で DOM ツリーは先ほどのスニペットと全く同じ構造になります。`htmlDocument.InnerHtml` を確認すれば、完全なマークアップが得られます。 + +--- + +## Step 5 – ドキュメントの保存またはレンダリング + +HTML をファイルに書き出す、ブラウザへストリームする、または Aspose.HTML のレンダリングエンジンを使って PDF/画像に変換することができます。最もシンプルなファイル出力オプションは次のとおりです： + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +`output.html` を任意のブラウザで開くと、**Bold‑Italic text** が意図した通りに表示されます。 + +--- + +## 完全な動作例 + +すべてをまとめると、以下が完全な実行可能プログラムです： + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Expected output** – `output.html` を開くと次が表示されます： + +> **Bold‑Italic text** (bold and italic) + +ソースを確認すれば、先ほど説明した正確な HTML が見え、**format text html** 手順が成功したことが確認できます。 + +--- + +## よくある質問とエッジケース + +### 1. 2 つ以上のスタイルが必要な場合は？ + +`WebFontStyle` はフラグ列挙体なので、任意の数のスタイル（例: `Underline`）を組み合わせることができます。`|` 演算子を使い続けるだけです： + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. 同時に色を変更できますか？ + +もちろんです。`Style` オブジェクトには `Color` プロパティがあります： + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. **append element to body** を複数回行うには？ + +ループを作成し、スタイル済みの span をクローンしてテキストを調整し、各クローンを追加します： + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. `
` 内で **format text html** が必要な場合は？ + +同じ API は任意の要素で機能します。`CreateElement("span")` を `CreateElement("div")` に置き換え、必要に応じてスタイルを調整してください。 + +### 5. 互換性の懸念は？ + +Aspose.HTML は .NET Standard 2.0+ を対象としているため、コードは .NET Core、.NET Framework、.NET 5/6+ で動作します。追加のブラウザ固有シムは不要です。 + +--- + +## プロのコツと落とし穴 + +- **Pro tip:** スタイルを設定した *後* に必ず `InnerHtml` を設定してください。先に内部コンテンツを変更すると、一部のブラウザで再レイアウトが発生する可能性があります。スタイル設定後に行うことで不要な処理を回避できます。 +- **Watch out for:** `WebFontStyle` とインライン CSS 文字列を混在させることです。後で手動で `spanElement.SetAttribute("style", "...")` を設定すると、列挙体で生成されたスタイルが上書きされます。どちらか一方に統一してください。 +- **Performance note:** 大規模なドキュメントでは、バッチ作成（すべてのノードを先に作成し、最後に一括で追加）により DOM 変更回数が減り、レンダリングが高速化します。 + +--- + +## 結論 + +これで、Aspose.HTML を使用して **create html document** を行い、**append element to body**、**set font style**、そして **create span element** を使って **format text html** する方法が分かりました。この例は完全に動作し、説明は「やり方」だけでなく「なぜ」もカバーしているため、より複雑なシナリオにもパターンを簡単に適用できます。 + +次のステップに進みませんか？ `` を複数の CSS クラスを持つ `

` に置き換えてみたり、`Document` → `PdfSaveOptions` を使って同じ DOM を PDF にレンダリングしてみたりしてください。同じ原則が適用され、Aspose.HTML がサーバーサイドの HTML 生成タスクにおいて信頼できるパートナーであることが実感できるでしょう。 + +質問や面白いアイデアがあれば、ぜひ下にコメントを残してください—ハッピーコーディング！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/net/html-extensions-and-conversions/_index.md b/html/japanese/net/html-extensions-and-conversions/_index.md index e19a23449..a43383058 100644 --- a/html/japanese/net/html-extensions-and-conversions/_index.md +++ b/html/japanese/net/html-extensions-and-conversions/_index.md @@ -38,31 +38,19 @@ Aspose.HTML for .NET は単なるライブラリではありません。Web 開 ## HTML 拡張と変換のチュートリアル ### [Aspose.HTML を使用して .NET で HTML を PDF に変換する](./convert-html-to-pdf/) -Aspose.HTML for .NET を使用すると、HTML を PDF に簡単に変換できます。ステップ バイ ステップ ガイドに従って、HTML から PDF への変換のパワーを解き放ちましょう。 ### [Aspose.HTML を使用して .NET で EPUB を画像に変換する](./convert-epub-to-image/) -Aspose.HTML for .NET を使用して EPUB を画像に変換する方法を学びます。コード例とカスタマイズ可能なオプションを含むステップバイステップのチュートリアルです。 ### [Aspose.HTML を使用して .NET で EPUB を PDF に変換する](./convert-epub-to-pdf/) -Aspose.HTML for .NET を使用して EPUB を PDF に変換する方法を学びます。このステップ バイ ステップ ガイドでは、シームレスなドキュメント変換のためのカスタマイズ オプション、FAQ などについて説明します。 ### [Aspose.HTML を使用して .NET で EPUB を XPS に変換する](./convert-epub-to-xps/) -Aspose.HTML for .NET を使用して、.NET で EPUB を XPS に変換する方法を学びます。ステップ バイ ステップ ガイドに従って、簡単に変換できます。 ### [Aspose.HTML を使用して .NET で HTML を BMP に変換する](./convert-html-to-bmp/) -Aspose.HTML for .NET を使用して .NET で HTML を BMP に変換する方法を学びます。Aspose.HTML for .NET を活用するための Web 開発者向けの包括的なガイドです。 ### [Aspose.HTML を使用して .NET で HTML を DOC および DOCX に変換する](./convert-html-to-doc-docx/) -このステップバイステップ ガイドで、Aspose.HTML for .NET のパワーを活用する方法を学びましょう。HTML を DOCX に簡単に変換し、.NET プロジェクトをレベルアップしましょう。今すぐ始めましょう! ### [Aspose.HTML を使用して .NET で HTML を GIF に変換する](./convert-html-to-gif/) -Aspose.HTML for .NET の威力をご覧ください: HTML を GIF に変換するためのステップバイステップ ガイド。前提条件、コード例、FAQ など! Aspose.HTML を使用して HTML 操作を最適化します。 ### [Aspose.HTML を使用して .NET で HTML を JPEG に変換する](./convert-html-to-jpeg/) -Aspose.HTML for .NET を使用して、.NET で HTML を JPEG に変換する方法を学びます。Aspose.HTML for .NET のパワーを活用するためのステップバイステップ ガイドです。Web 開発タスクを簡単に最適化できます。 ### [Aspose.HTML を使用して .NET で HTML を Markdown に変換する](./convert-html-to-markdown/) -効率的なコンテンツ操作のために、Aspose.HTML を使用して .NET で HTML を Markdown に変換する方法を学びます。シームレスな変換プロセスのためのステップバイステップのガイダンスを入手します。 ### [Aspose.HTML を使用して .NET で HTML を MHTML に変換する](./convert-html-to-mhtml/) -Aspose.HTML を使用して .NET で HTML を MHTML に変換する - 効率的な Web コンテンツのアーカイブ化のためのステップバイステップ ガイド。Aspose.HTML for .NET を使用して MHTML アーカイブを作成する方法を学習します。 ### [Aspose.HTML を使用して .NET で HTML を PNG に変換する](./convert-html-to-png/) -Aspose.HTML for .NET を使用して HTML ドキュメントを操作および変換する方法を学びます。効果的な .NET 開発のためのステップバイステップ ガイドです。 ### [Aspose.HTML を使用して .NET で HTML を TIFF に変換する](./convert-html-to-tiff/) -Aspose.HTML for .NET を使用して HTML を TIFF に変換する方法を学びます。効率的な Web コンテンツの最適化については、当社のステップバイステップ ガイドに従ってください。 ### [Aspose.HTML を使用して .NET で HTML を XPS に変換する](./convert-html-to-xps/) -Aspose.HTML for .NET のパワーを発見してください: HTML を XPS に簡単に変換します。前提条件、ステップバイステップ ガイド、FAQ が含まれています。 +### [URL から PDF を作成 – 完全 C# ガイド](./create-pdf-from-url-complete-c-guide/) ## 結論 @@ -74,4 +62,4 @@ Aspose.HTML for .NET のパワーを発見してください: HTML を XPS に {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/japanese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..8c51d0704 --- /dev/null +++ b/html/japanese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,198 @@ +--- +category: general +date: 2026-01-03 +description: C#でURLからPDFを素早く作成。HTMLをPDFに変換する方法、ウェブページをPDFとして保存する方法、そして簡単なコードでHTMLからPDFを生成する方法を学びましょう。 +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: ja +og_description: C#でURLからPDFを素早く作成します。このチュートリアルでは、HTMLをPDFに変換する方法、ウェブページをPDFとして保存する方法、そして + Aspose.HTML を使用して HTML から PDF を生成する方法を示します。 +og_title: URLからPDFを作成 – 完全なC#ガイド +tags: +- pdf +- csharp +- html +- conversion +title: URLからPDFを作成する – 完全C#ガイド +url: /ja/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# URLからPDFを作成 – 完全なC#ガイド + +Ever needed to **create PDF from URL** but weren't sure which library to pick? You're not alone. Many developers hit that wall when they want to archive a web page, generate invoices from an online template, or simply offer a “download as PDF” button on their site. + +In this tutorial we’ll walk through the entire process of **converting HTML to PDF** using C#. You’ll see how to **save webpage as PDF**, how to **generate PDF from HTML**, and why the `Aspose.HTML for .NET` library makes it a breeze. By the end, you’ll have a ready‑to‑run snippet that pulls any public URL, renders it, and writes a PDF file to disk. + +> **Pro tip:** 社内プロキシ環境で作業している場合は、`HTMLDocument` コンストラクタに正しい `WebRequest` 設定が渡されていることを確認してください。そうしないとダウンロードが黙って失敗します。 + +## 必要なもの + +- **.NET 6.0** 以上（コードは .NET Framework 4.7+ でも動作します）。 +- **Aspose.HTML for .NET** NuGet パッケージ（`Aspose.HTML`）。 +- PDF を保存する書き込み可能なフォルダー。 +- C# の基本的な知識（高度なテクニックは不要）。 + +余計な設定ファイルや隠しマジックは不要です。数行のクリーンでコメント付きコードだけです。 + +![URLからPDFを作成の例](image.png){alt="URLからPDFを作成"} + +## 手順 1: Aspose.HTML NuGet パッケージをインストール + +ターミナルまたは Package Manager Console で次を実行します： + +```bash +dotnet add package Aspose.HTML +``` + +> **この手順が重要な理由:** `HTMLDocument`、`PdfSaveOptions`、`PdfConverter` クラスは `Aspose.Html` 名前空間に属しています。パッケージが無いとコンパイラはこれらの型を認識できません。 + +## 手順 2: Web ページを `HTMLDocument` に読み込む + +最初の本格的な操作はリモート HTML の取得です。`HTMLDocument` は URL を直接受け取り、リダイレクトやコンテンツタイプの検出を自動で行います。 + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**何が起きているのか？** +- `HTMLDocument` は取得したマークアップを DOM ツリーに解析し、ブラウザと同様の動作をします。 +- 絶対 URL で参照されている外部 CSS、画像、スクリプトも同時にダウンロードされるため、PDF はライブページと同じ見た目になります。 + +## 手順 3: PDF 出力オプションを設定（余白、ページサイズなど） + +コンバータに渡す前に出力を微調整します。`PdfSaveOptions` オブジェクトで余白、ページ向き、PDF バージョンなどを指定できます。 + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**余白を設定する理由** +余白が狭すぎると、特にモバイル最適化されたサイトではヘッダーやフッターが切れてしまうことがあります。ほどほどの余白を入れることで、すべての要素が読みやすくなります。 + +## 手順 4: HTML ドキュメントを直接 PDF に変換 + +いよいよ本番です。`PdfConverter.ConvertHtml` がレンダリングされたページをそのまま PDF ファイルにストリームします。 + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**内部的な処理:** +- Aspose は独自のレイアウトエンジンで DOM を描画します（Chromium は不要）。 +- 描画されたビットマップは可能な限りベクタ形式の PDF にラスタライズされ、テキストの選択可能性が保持されます。 + +## 手順 5: 結果を確認し、エッジケースに対処 + +簡単な検証を行うことで、後々のトラブルを防げます。生成されたファイルを開き、ライブページが余白付きで正しく表示され、画像がすべて保持されていることを確認してください。 + +### よくある落とし穴と回避策 + +| 問題 | 原因 | 対策 | +|------|------|------| +| **Blank PDF** | ファイアウォールで URL がブロックされている、または認証が必要 | `HTMLDocument` コンストラクタに認証情報付きのカスタム `WebRequest` を渡す | +| **Missing CSS** | 外部スタイルシートが相対 URL を使用している | ベース URL が正しいことを確認（Aspose はリダイレクトを処理しますが、念のため確認） | +| **Large file size** | 高解像度画像がダウンスケールされていない | `PdfSaveOptions.ImageCompression` を使用して埋め込み画像を JPEG 圧縮 | +| **Unicode characters garbled** | フォントが埋め込まれていない | `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` を設定 | + +## 完全動作サンプル（コピー＆ペースト可能） + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +プログラムを実行（`dotnet run`）すると、`C:\Temp` に `example.pdf` が作成されます。任意の PDF ビューアで開くと、`https://example.com` の正確なレプリカが余白設定どおりに表示されます。 + +## 結論 + +今回、C# を使って **create PDF from URL** を実現する方法を示しました。手順は Web ページの読み込み、余白設定、DOM から PDF への変換の 3 つです。これで **convert HTML to PDF**、**save webpage as PDF**、**generate PDF from HTML** を本番環境でも安心して利用できます。 + +ぜひ試してみてください：ページサイズを `Letter` に変更したり、向きを横長にしたり、`PdfPageEventHandler` を使ってヘッダー/フッターを追加したり。動的ページやログインが必要なポータル（クッキーを渡すだけ）でも同様に機能しますし、複数の URL から生成した PDF をまとめてレポートにすることも可能です。 + +**次に試すべきこと** + +- 高スループットサービス向けに非同期変換を利用した **HTML to PDF C#**。 +- `PdfDocumentInfo` を使って PDF に **metadata**（作者、タイトル）を埋め込む。 +- 複数の URL から生成した PDF を **Aspose.PDF** で結合し、単一のレポートにまとめる。 + +質問があれば下のコメント欄にどうぞ。Happy coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/net/rendering-html-documents/_index.md b/html/japanese/net/rendering-html-documents/_index.md index 54c9a7f45..3a187ac33 100644 --- a/html/japanese/net/rendering-html-documents/_index.md +++ b/html/japanese/net/rendering-html-documents/_index.md @@ -52,9 +52,14 @@ Aspose.HTML for .NET でレンダリング タイムアウトを効果的に制 Aspose.HTML for .NET を使用して複数の HTML ドキュメントをレンダリングする方法を学びます。この強力なライブラリを使用してドキュメント処理機能を強化します。 ### [Aspose.HTML を使用して .NET で SVG ドキュメントを PNG としてレンダリングする](./render-svg-doc-as-png/) Aspose.HTML for .NET のパワーを解き放ちましょう。SVG ドキュメントを PNG として簡単にレンダリングする方法を学びましょう。ステップバイステップの例と FAQ をご覧ください。今すぐ始めましょう。 +### [HTML をレンダリングする方法 – カスタム リソース ハンドラによる完全ガイド](./how-to-render-html-complete-guide-with-custom-resource-handl/) +カスタム リソース ハンドラを利用して HTML をレンダリングする方法をステップバイステップで解説します。 +### [HTML を PNG にレンダリングする方法 – 完全ステップバイステップガイド](./how-to-render-html-to-png-complete-step-by-step-guide/) +HTML を PNG 形式でレンダリングする完全な手順を学び、実践的な例とベストプラクティスをご紹介します。 + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/japanese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..988489977 --- /dev/null +++ b/html/japanese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: Aspose.HTML を使用して HTML を画像にレンダリングする方法。HTML から画像への変換、カスタム リソース ハンドラ、C# + で HTML をビットマップに変換する方法を学びます。 +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: ja +og_description: Aspose.HTML を使用して HTML を画像にレンダリングする方法。HTML から画像への変換、カスタムリソースハンドラ、C# + で HTML をビットマップに変換する方法をマスターしましょう。 +og_title: HTMLをレンダリングする方法 – カスタムリソースハンドラを使用した完全ガイド +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTMLのレンダリング方法 – カスタムリソースハンドラを使用した完全ガイド +url: /ja/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML をレンダリングする方法 – カスタムリソースハンドラ完全ガイド + +自分でブラウザエンジンを操作せずに **HTML をビットマップにレンダリング** したいと思ったことはありませんか？ 同じ悩みを抱える開発者は多いです。動的ページのスクリーンショットをメールやレポート、サムネイル用にすぐ取得したいときに壁にぶつかります。朗報です！ Aspose.HTML を使えば、任意の HTML 文字列を画像に変換できます – UI もヘッドレス Chrome も不要、純粋な C# コードだけです。 + +このチュートリアルでは、実践的な **html to image conversion** シナリオを通して、**カスタムリソースハンドラの実装方法** を示し、**convert html to bitmap** の全体ワークフローをデモします。最後まで読むと、メモリ上だけで HTML を画像にレンダリングし、さらに処理や保存が可能な再利用可能メソッドが手に入ります。 + +> **Prerequisites** +> * .NET 6+（または .NET Framework 4.7.2+） +> * Aspose.HTML for .NET NuGet パッケージ（`Aspose.Html`） +> * C# とストリームの基本的な知識 + +これらの前提条件が整っていれば、さっそく始めましょう。 + +--- + +## Aspose.HTML で HTML をレンダリングする方法 + +**render html to image** 操作の核となるのは `ImageRenderer` クラスです。`HTMLDocument` を受け取り、ラスタ画像（PNG、JPEG、BMP など）を出力します。以下が最小限の雛形です： + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +このスニペットでも動作しますが、レンダラに書き込み先を指定しなければディスクにファイルは生成されません。すべてをメモリ上で完結させ、HTML が要求するすべてのリソース（画像、CSS、フォント）を捕捉するために、**カスタムリソースハンドラ** を組み込みます。 + +--- + +## カスタムリソースハンドラの実装 + +**カスタムリソースハンドラ** を使うと、外部アセットの取得と保存を完全にコントロールできます。多くの場合、後で利用できるようにメモリ上にアセットを保持したい（例：ZIP にまとめる）でしょう。ハンドラは `ResourceHandler` を継承し、`HandleResource` をオーバーライドします。 + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**なぜ導入するのか？** +* **Performance** – ディスク I/O が発生せず、すべて RAM 上に留まります。 +* **Security** – 取得を許可する URL を自分で管理できます。 +* **Extensibility** – リソースをキャッシュしたり、名前を変更したり、他のコンテナに埋め込んだりできます。 + +--- + +## ImageRenderer を使った HTML からビットマップへの変換 + +ここまでの要素を組み合わせます：HTML をロードし、`MyHandler` を添付し、レンダリングします。以下のメソッドは、レンダリングされたページの PNG 画像を含む `MemoryStream` を返します。 + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### 期待される出力 + +次のようにメソッドを呼び出すと： + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +以下のような `demo.png` が生成されます（概略）： + +![HTML をレンダリングした出力例](https://example.com/assets/render-html-output.png "HTML をレンダリングした出力例") + +*Alt text:* **HTML をレンダリングした出力例** – レンダリングされた HTML スニペットを示す小さなビットマップ。 + +--- + +## HTML から画像への変換 – よくある落とし穴とヒント + +### 1. 相対 URL と base タグ +HTML が相対パスで外部 CSS や画像を参照している場合、レンダラは基準フォルダを認識できません。対策は次のどちらかです： + +* `` タグを追加する、または +* `MyHandler.HandleResource` 内で URL を解決し、正しいストリームを返す。 + +### 2. フォントの可用性 +Aspose.HTML はデフォルトでシステムフォントを使用します。カスタム Web フォント（`@font-face`）を使う場合は、ハンドラ経由でフォントファイルにアクセスできるようにするか、Base64 データ URI として埋め込んでください。 + +### 3. 大規模ページ +非常に高さのあるページをレンダリングするとメモリ消費が大きくなります。ビューポートサイズを制限できます： + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. 画像フォーマット +JPEG 圧縮が必要な場合は `renderer.Save(stream, ImageFormat.Jpeg)` を使用すれば同様に動作します。**convert html to bitmap** の出力として BMP が欲しい場合は `ImageFormat.Png` を `ImageFormat.Bmp` に置き換えてください。 + +--- + +## HTML を画像にレンダリング – 応用シナリオ + +### A. 複数ページのレンダリング +HTML にページ区切り（`
`）が含まれる場合、ページごとに反復処理できます： + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. 画像を PDF に埋め込む +`Aspose.Pdf` と組み合わせて PNG を直接埋め込むことが可能です： + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## まとめ + +本稿では、**HTML をビットマップにレンダリング** する方法をメモリ上だけで実現し、**html to image conversion** の基礎を解説し、**カスタムリソースハンドラ** を構築、そして Aspose.HTML の `ImageRenderer` を用いた **convert html to bitmap** の手順を示しました。この手法は高速でスレッドセーフ、実務プロジェクト（メールサムネイル生成や自動レポート作成など）に容易に拡張できます。 + +次のステップに進みませんか？ PNG 出力を JPEG に置き換えてみたり、異なるページサイズで実験したり、ハンドラをキャッシュ層に接続して再レンダリングを瞬時に行えるようにしたり。リソースをすべて自分で管理すれば、可能性は無限です。 + +質問や面白いユースケースがあれば、ぜひコメントで共有してください。Happy rendering! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/japanese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..133f1af76 --- /dev/null +++ b/html/japanese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,226 @@ +--- +category: general +date: 2026-01-03 +description: C#でAspose.HTMLを使用してHTMLをPNGにレンダリングし、ウェブページを画像に変換し、HTMLをPNGとして保存する方法を学びましょう。高速で信頼性が高く、実運用にも対応しています。 +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: ja +og_description: Aspose.HTML を使用した完全な C# サンプルで、HTML を PNG にレンダリングし、ウェブページを画像に変換し、HTML + を PNG として保存する方法をマスターしましょう。 +og_title: HTMLをPNGに変換する方法 – 完全ガイド +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTMLをPNGに変換する方法 – 完全ステップバイステップガイド +url: /ja/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML を PNG にレンダリングする方法 – 完全ステップバイステップガイド + +画像に **HTML をレンダリングする方法** をお探しなら、ここが適切な場所です。サムネイル用に **Web ページを画像に変換** したり、ページを PNG として保存したり、ソーシャルメディア用プレビューをリアルタイムで生成したりする必要がある場合でも、適切なライブラリさえあれば手順は驚くほどシンプルです。 + +このチュートリアルでは、Aspose.HTML for .NET を使用して任意のライブ URL を PNG ファイルに変換する手順を解説します。完全に実行可能なコードスニペットを確認し、各設定が重要な理由を学び、エッジケースへの対処法をいくつか紹介します。最後まで読めば、**HTML を PNG として保存**、**HTML を PNG に変換**、さらには結果をレポートやメールに埋め込むことが簡単にできるようになります。 + +## 前提条件 – 必要なもの + +- **.NET 6.0** 以上（コードは .NET Core および .NET Framework でも動作します） +- **Aspose.HTML for .NET** NuGet パッケージ（`Aspose.Html`）がインストールされていること +- お好みの IDE（Visual Studio、Rider、または VS Code） +- PNG を保存できる書き込み可能なフォルダー + +追加の設定は不要です — Aspose.HTML がページの解析、CSS の適用、レイアウトのラスタライズという重い処理をすべて担当します。 + +## 手順 1: レンダリングしたい HTML ドキュメントを読み込む + +最初に必要なのは、キャプチャしたいページを指す `HTMLDocument` インスタンスです。Aspose.HTML は URL、ローカルファイル、または生の HTML 文字列からロードできます。 + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **重要な理由:** ドキュメントを URL から直接ロードすることで、外部リソース（CSS、JavaScript、画像）が自動的に取得され、ライブページの忠実なレンダリングが得られます。 + +## 手順 2: 画像レンダリングオプションを設定する + +次に `ImageRenderingOptions` を設定します。このオプションは出力サイズ、品質、アンチエイリアスの適用有無を制御します。調整することで、ファイルサイズとビジュアルの忠実度のバランスを取れます。 + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **プロのコツ:** 高解像度のサムネイルが必要な場合は、`Width` と `Height` を比例的に増やしてください。Aspose.HTML はベクタ品質を失うことなくレイアウトをスケーリングします。 + +## 手順 3: Image Renderer を初期化する + +ここで、先ほど定義したドキュメントとオプションを渡して `ImageRenderer` を作成します。このオブジェクトが実際にページをビットマップに描画するエンジンです。 + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **内部で何が起きているか？** レンダラーは DOM を解析し、CSS スタイルを計算し、レイアウトを実行し、最終的に各要素をピクセルキャンバスにラスタライズします。これらはすべてメモリ上で行われるため、ブラウザウィンドウは不要です。 + +## 手順 4: PNG ファイルをレンダリングして保存する + +最後に、PNG を保存したいフルパスを指定して `Render` を呼び出します。このメソッドはファイルを書き込み同期的に行い、内部リソースを自動的に解放します。 + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **期待される結果:** プログラムを実行すると、`output` フォルダー内に `example.png` が作成されます。任意の画像ビューアで開くと、`https://example.com` の 800×600 px の忠実なスナップショットが表示されます。 + +--- + +### 完全に実行可能なサンプル + +以下は新しいコンソールプロジェクトにコピー＆ペーストできる完全なプログラムです。`using` ディレクティブ、エラーハンドリング、コメントがすべて含まれ、分かりやすくなっています。 + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +プログラムを実行（プロジェクトフォルダーで `dotnet run`）すると、ライブページを鏡のように写した PNG が得られます。これが数行の C# だけで **HTML をレンダリングする方法** です。 + +--- + +## よくある質問とエッジケース + +### URL の代わりにローカル HTML ファイルをレンダリングできますか？ + +もちろんです。URL をファイルパスに置き換えるだけです。 + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### ページがロード後に JavaScript で DOM を変更する場合は？ + +Aspose.HTML はほとんどのクライアントサイドスクリプトを実行しますが、完全なブラウザエンジンは提供していません。スクリプトが多用されているページの場合は、HTML を事前にレンダリング（例: ヘッドレス Chromium を使用）し、その生成されたマークアップを Aspose.HTML に渡す必要があります。 + +### PNG の圧縮レベルはどう制御しますか？ + +`ImageRenderingOptions` には `CompressionLevel` プロパティ（0〜9）があり、数値が低いほどファイルは大きくなりますが品質は高くなります。 + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### 透明な背景が必要です—可能ですか？ + +はい。レンダリング前に背景色を透明に設定します。 + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### 複数ページを単一の画像にレンダリングする方法はありますか？ + +`System.Drawing` や `ImageSharp` を使用して、URL や HTML 文字列のコレクションをループし、各々をビットマップにレンダリングしてから結合できます。コアとなる **HTML を PNG に変換** 手順は変わりません。 + +--- + +## ボーナス: PNG を Web API に埋め込む + +この機能を ASP.NET Core エンドポイントで提供したい場合は、ファイルバイト列を返すだけです。 + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +これで任意のクライアントは `GET /render?url=https://example.com` をリクエストすると、即座に PNG を取得できます — **Web ページを画像に変換** サービスに最適です。 + +--- + +## 結論 + +Aspose.HTML for .NET を使用して **HTML を PNG にレンダリングする方法** に関するすべてを網羅しました。リモートページの読み込み、レンダリングオプションの設定、一般的な落とし穴への対処まで、完全なサンプルは **HTML を PNG に変換**、**HTML を PNG として保存**、さらにはロジックを Web API で公開する方法を具体的に示しています。 + +自分の URL で試し、さまざまなサイズで実験し、製品カタログのサムネイル生成を自動化してみてください。**HTML を PNG にレンダリング** の基本をマスターすれば、可能性は無限です。 + +*ステップアップの準備はできましたか？* NuGet パッケージを取得し、コードをプロジェクトに組み込んで、今日から Web ページを画像に変換しましょう。問題があれば遠慮なくコメントを残してください — ハッピーなレンダリングを！ + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/net/canvas-and-image-manipulation/_index.md b/html/korean/net/canvas-and-image-manipulation/_index.md index 370d453c9..179f01ebf 100644 --- a/html/korean/net/canvas-and-image-manipulation/_index.md +++ b/html/korean/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aspose.HTML for .NET을 사용하여 SVG를 PDF로 변환하는 방법을 알아 .NET용 Aspose.HTML을 사용하여 SVG를 XPS로 변환하는 방법을 알아보세요. 이 강력한 라이브러리로 웹 개발을 강화하세요. ### [C#에서 안티앨리어싱 활성화하기 – 부드러운 가장자리](./how-to-enable-antialiasing-in-c-smooth-edges/) C#에서 안티앨리어싱을 적용하여 그래픽 가장자리를 부드럽게 만드는 방법을 단계별로 안내합니다. +### [캔버스 텍스트 만들기 – 이미지에 텍스트 렌더링 전체 가이드](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Aspose.HTML for .NET을 사용해 캔버스에 텍스트를 추가하고 이미지에 렌더링하는 방법을 단계별로 안내합니다. ## 결론 diff --git a/html/korean/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/korean/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..b29edf0bf --- /dev/null +++ b/html/korean/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,234 @@ +--- +category: general +date: 2026-01-03 +description: 캔버스 텍스트를 빠르게 만들고 텍스트 이미지를 렌더링하는 방법, 텍스트 옵션 설정 및 텍스트 캔버스 채우기를 배우면서 Linux + 텍스트 렌더링을 개선하세요. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: ko +og_description: Aspose HTML로 캔버스 텍스트를 만들고, 텍스트 이미지를 렌더링하는 방법을 배우며, 텍스트 옵션을 설정하고, 단일 + 튜토리얼에서 Linux 텍스트 품질을 향상시키세요. +og_title: 캔버스 텍스트 만들기 – 전체 렌더링 가이드 +tags: +- Aspose +- C# +- Graphics +- Canvas +title: 캔버스 텍스트 만들기 – 이미지에 텍스트 렌더링 완전 가이드 +url: /ko/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 캔버스 텍스트 만들기 – 완전 렌더링 가이드 + +캔버스 텍스트를 **create canvas text** 해야 할 때마다 모든 플랫폼에서 선명한 글리프를 얻는 방법을 몰라 고민한 적 있나요? 당신만 그런 것이 아닙니다. 많은 개발자들이 특히 HTML을 이미지로 변환할 때 Linux에서 텍스트가 흐릿하게 보이는 문제에 부딪힙니다. + +이 튜토리얼에서는 Aspose HTML 캔버스에 **render text image** 를 적용하는 실용적인 솔루션을 단계별로 안내하고, **set text options** 를 설정하는 방법, `FillText` 를 올바르게 사용하는 방법, 그리고 힌팅을 통해 **improve Linux text** 렌더링을 개선하는 방법을 보여줍니다. 끝까지 진행하면 .NET 프로젝트에 바로 넣어 사용할 수 있는 자체 포함 실행 가능한 스니펫을 얻게 됩니다. + +## 배울 내용 + +- `Canvas` 객체를 인스턴스화하고 그리기 위해 준비하는 방법. +- `TextOptions` 의 역할과 Linux에서 힌팅을 활성화하는 것이 중요한 이유. +- 스타일이 적용된 고품질 문자로 **fill text canvas** 하는 단계별 코드. +- 일반적인 함정(힌팅 누락, 좌표계 오류) 및 빠른 해결 방법. +- 예제를 확장하는 방법: 사용자 정의 폰트, 색상, 다중 라인 텍스트. + +> **Prerequisite:** .NET 6+ (or .NET Framework 4.7.2) 및 Aspose.HTML for .NET NuGet 패키지가 설치되어 있어야 합니다. + +--- + +## 단계 1: 프로젝트 및 임포트 설정 + +그리기를 시작하기 전에 프로젝트가 올바른 어셈블리를 참조하고 있는지 확인하세요. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro tip:** Linux 환경이라면 `libgdiplus` 패키지(`sudo apt-get install libgdiplus`)를 추가하여 GDI 기반 렌더링이 원활히 작동하도록 하세요. + +--- + +## 단계 2: 캔버스 생성 및 크기 정의 + +캔버스는 본질적으로 그릴 수 있는 오프스크린 비트맵입니다. 디지털 드로잉 보드라고 생각하면 됩니다. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Why this matters:** 단색 배경을 설정하면 나중에 이미지를 내보낼 때 투명 아티팩트가 발생하는 것을 방지합니다. + +--- + +## 단계 3: 텍스트 옵션 구성 – 선명한 Linux 텍스트의 핵심 + +힌팅이 비활성화된 경우 Linux 폰트 렌더링이 흐릿하게 보일 수 있습니다. `TextOptions.UseHinting` 은 렌더러에게 글리프를 픽셀 경계에 맞추도록 지시하여 출력이 크게 선명해집니다. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **What if you skip this?** 많은 Linux 배포판에서 텍스트가 약간 흐릿하거나 정렬이 맞지 않게 보이며, 특히 작은 폰트 크기에서 그렇습니다. + +--- + +## 단계 4: 캔버스에 텍스트 채우기 + +캔버스가 준비되고 텍스트 옵션이 조정되었으니 이제 실제로 **fill text canvas** 할 수 있습니다. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +맞춤 스타일(색상, 폰트 크기, 정렬)이 필요하면 호출을 `Font`와 `Brush`로 감싸세요: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## 단계 5: 캔버스를 이미지 파일로 내보내기 + +마지막 단계는 렌더링된 비트맵을 디스크에 저장하여 결과를 확인하는 것입니다. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +`canvas-output.png` 를 열면 Windows, macOS, Linux 어느 환경에서도 선명하고 올바르게 힌팅된 텍스트를 확인할 수 있습니다. + +--- + +## 일반 질문 및 엣지 케이스 + +### 힌팅이 성능에 어떤 영향을 미칩니까? + +힌팅을 활성화하면 거의 무시할 수 있는 오버헤드가 추가됩니다(보통 800×600 캔버스 기준 < 2 ms). 시각적인 향상이 비용보다 훨씬 크며, 특히 품질이 중요한 서버 측 이미지 생성에 유리합니다. + +### 다중 라인 텍스트가 필요하면 어떻게 하나요? + +`canvas.FillText` 를 루프에서 사용해 Y 좌표를 조정하거나, 자동 줄바꿈을 위해 `TextLayout` 객체를 받는 `canvas.FillText` 오버로드를 활용하세요. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### 사용자 정의 TrueType 폰트를 사용할 수 있나요? + +물론 가능합니다. `FontFamily` 로 폰트를 로드한 뒤 `TextOptions.FontFamily` 에 할당하거나 `FillText` 에 전달하는 `Font` 에 직접 지정하세요. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +폰트 파일이 런타임에서 접근 가능하도록 하세요(프로젝트 폴더에 두거나 시스템 전체에 등록). + +--- + +## 전체 작동 예제 + +아래는 위의 모든 단계를 포함한 완전한 복사‑붙여넣기 가능한 프로그램입니다. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Expected output:** `canvas-output.png` 라는 PNG 파일이 생성되며, 두 줄의 텍스트(하나는 일반, 하나는 굵은 파란색)가 포함됩니다. 두 텍스트 모두 힌팅 덕분에 선명하게 렌더링됩니다. + +--- + +## 결론 + +우리는 이제 막 **created canvas text** 를 처음부터 만들었고, Aspose.HTML 로 **render text image** 하는 방법을 배우며, `UseHinting` 과 같은 **set text options** 가 **improve Linux text** 품질에 필수적인 이유를 발견했습니다. 위 단계를 따르면 썸네일, 워터마크, 웹 API용 동적 그래픽 등 어떤 .NET 환경에서도 안정적으로 **fill text canvas** 할 수 있습니다. + +다음 도전에 준비되셨나요? 배경 그라디언트 추가, 텍스트 회전, 혹은 벡터‑완벽 스케일링을 위한 SVG 내보내기에 도전해 보세요. 동일한 원칙—적절한 `TextOptions`, 신중한 좌표 처리, 깔끔한 리소스 해제—가 모든 포맷에 적용됩니다. + +문제에 부딪히거나 확장 아이디어가 있다면 댓글을 남겨 주세요. 즐거운 코딩 되시고, 날카로운 문자들을 마음껏 활용하세요! + +--- + +*캔버스에 선명한 텍스트가 표시된 이미지 (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/net/html-document-manipulation/_index.md b/html/korean/net/html-document-manipulation/_index.md index e826a8285..9c6af7f8b 100644 --- a/html/korean/net/html-document-manipulation/_index.md +++ b/html/korean/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Aspose.HTML for .NET을 사용하여 동적이고 웹 콘텐츠를 만드는 방 .NET용 Aspose.HTML을 사용하는 방법을 배우세요. 이 포괄적인 가이드로 네임스페이스를 가져오고, HTML을 XML과 병합하고, 웹 개발 기술을 향상시키세요. ### [Aspose.HTML을 사용하여 .NET에서 XpsDevice로 XPS 문서 생성](./generate-xps-documents-by-xpsdevice/) Aspose.HTML for .NET으로 웹 개발의 잠재력을 열어보세요. HTML 문서를 쉽게 만들고, 변환하고, 조작하세요. +### [Aspose.HTML을 사용하여 HTML 문서 만들기 – 단계별 가이드](./create-html-document-with-aspose-html-step-by-step-guide/) +Aspose.HTML을 활용해 HTML 문서를 처음부터 만들고 저장하는 방법을 단계별로 안내합니다. ## 결론 @@ -78,4 +80,4 @@ Aspose.HTML for .NET으로 웹 개발의 잠재력을 열어보세요. HTML 문 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/korean/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..a987faea9 --- /dev/null +++ b/html/korean/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,239 @@ +--- +category: general +date: 2026-01-03 +description: Aspose.HTML을 사용하여 C#에서 HTML 문서를 생성합니다. 요소를 본문에 추가하고, 글꼴 스타일을 설정하며, 간단한 + span으로 텍스트 HTML을 포맷하는 방법을 배웁니다. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: ko +og_description: C#에서 HTML 문서를 생성하고, Aspose.HTML를 사용하여 요소를 본문에 추가하고, 글꼴 스타일을 설정하며, + 텍스트 HTML을 포맷하는 방법을 확인하세요. +og_title: Aspose.HTML로 HTML 문서 만들기 – 빠른 가이드 +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Aspose.HTML로 HTML 문서 만들기 – 단계별 가이드 +url: /ko/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Aspose.HTML로 HTML 문서 만들기 – 단계별 가이드 + +프로그램matically **create html document**가 필요했지만 출력이 평범해 보이는 이유가 궁금했나요? 당신만 그런 것이 아닙니다. 많은 프로젝트에서 우리는 즉석에서 스니펫을 생성해야 합니다—예를 들어 이메일 템플릿, 동적 보고서, 혹은 작은 UI 위젯 등. 좋은 소식은 Aspose.HTML을 사용하면 **create html document**를 손쉽게 수행하고, 스타일을 적용하며, 원시 문자열을 작성하지 않고 페이지에 삽입할 수 있다는 것입니다. + +이 튜토리얼에서는 **append element to body**, **set font style**, 그리고 **format text html**을 **create span element**를 사용해 수행하는 전체 예제를 단계별로 살펴봅니다. 마지막에는 스팬 안에 굵은‑기울임 텍스트를 생성하는 실행 가능한 C# 코드 스니펫을 얻고, 각 호출 뒤에 숨은 “왜”를 이해하게 됩니다. + +> **Prerequisites** +> • .NET 6 또는 그 이후 버전 (최근 .NET 런타임이면 모두 사용 가능) +> • Aspose.HTML for .NET NuGet 패키지 (`Aspose.Html`) 설치 +> • C# 및 DOM 개념에 대한 기본적인 이해 + +다른 라이브러리는 필요하지 않으며, 코드는 Windows, Linux, macOS에서 모두 실행됩니다. + +--- + +## What You’ll Build + +우리는 최소한의 HTML 문서를 만들고, **Bold‑Italic text**라는 문구를 포함하는 ``을 추가한 뒤, **bold**와 **italic** 스타일을 모두 적용하고, 마지막으로 **append element to body**를 수행합니다. 최종 마크업은 다음과 같습니다: + +```html + + + Bold‑Italic text + + +``` + +전체 소스를 가이드 마지막에 복사‑붙여넣기 하면 바로 실행할 수 있습니다. + +--- + +![Create HTML document example](image.png){alt="HTML 문서 생성 예시"} + +--- + +## Step 1 – Initialise the HTMLDocument (the foundation of **create html document**) + +**append element to body**를 수행하기 전에 작업할 문서 객체가 필요합니다. Aspose.HTML은 메모리 내 DOM을 나타내는 `HTMLDocument` 클래스를 제공합니다. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Why this matters*: `HTMLDocument`를 인스턴스화하면 깨끗한 캔버스를 얻게 됩니다—마치 나중에 **format text html**를 할 빈 종이와 같습니다. 이 단계가 없으면 노드를 조작하거나 스타일을 적용할 수 없습니다. + +--- + +## Step 2 – Create the `` element (**create span element**) + +이제 스타일이 적용된 텍스트를 담을 컨테이너가 필요합니다. ``은 인라인 요소이면서 CSS를 적용해 흐름을 깨뜨리지 않기 때문에 완벽합니다. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Pro tip*: 여러 텍스트 조각을 삽입해야 할 경우, 동일한 `spanElement`를 복제(`spanElement.Clone(true)`)하고 `InnerHtml`을 각각 변경하여 재사용할 수 있습니다. + +--- + +## Step 3 – Apply **set font style** for bold **and** italic + +Aspose.HTML은 강력하게 타입이 지정된 `Style` 객체를 제공합니다. **set font style**를 위해 `WebFontStyle.Bold`와 `WebFontStyle.Italic`을 비트 OR 연산으로 결합합니다. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Why use the enum*: `WebFontStyle` 열거형은 CSS 속성(`font-weight`와 `font-style`)에 직접 매핑됩니다. 열거형을 사용하면 오타를 방지하고 생성된 CSS가 유효함을 보장하므로 신뢰할 수 있는 **format text html**에 필수적입니다. + +--- + +## Step 4 – **Append element to body** and finalise the document + +스타일이 적용된 스팬이 준비되었으니, 마지막 단계는 이를 `` 태그 안에 배치하는 것입니다. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +이 시점에서 DOM 트리는 앞서 보여준 스니펫과 정확히 동일합니다. `htmlDocument.InnerHtml`을 확인하면 완전한 마크업을 볼 수 있습니다. + +--- + +## Step 5 – Save or render the document + +HTML을 파일에 쓰거나 브라우저로 스트리밍하거나, Aspose.HTML 렌더링 엔진을 이용해 PDF/이미지로 변환할 수 있습니다. 가장 간단한 파일 출력 옵션은 다음과 같습니다: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +어떤 브라우저에서든 `output.html`을 열면 **Bold‑Italic text**가 의도한 대로 표시됩니다. + +--- + +## Full Working Example + +모든 코드를 합치면 다음과 같은 완전한 실행 프로그램이 됩니다: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Expected output** – `output.html`을 열면 다음과 같이 표시됩니다: + +> **Bold‑Italic text** (bold and italic) + +소스를 확인하면 우리가 논의한 정확한 HTML을 볼 수 있으며, **format text html** 단계가 성공했음을 확인할 수 있습니다. + +--- + +## Common Questions & Edge Cases + +### 1. What if I need more than two styles? + +`WebFontStyle`은 플래그 열거형이므로, `Underline`과 같이 원하는 만큼의 스타일을 결합할 수 있습니다. 계속해서 `|` 연산자를 사용하면 됩니다: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Can I change the color at the same time? + +물론 가능합니다. `Style` 객체에는 `Color` 속성이 있습니다: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. How do I **append element to body** multiple times? + +루프를 만들어 스타일이 적용된 스팬을 복제하고, 텍스트를 조정한 뒤 각 복제본을 순차적으로 추가합니다: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. What if I need to **format text html** inside a `
` instead? + +동일한 API가 모든 요소에서 작동합니다. `CreateElement("span")`을 `CreateElement("div")`로 교체하고 스타일을 필요에 맞게 조정하면 됩니다. + +### 5. Compatibility concerns? + +Aspose.HTML은 .NET Standard 2.0+을 대상으로 하므로, 코드는 .NET Core, .NET Framework, .NET 5/6+에서 모두 실행됩니다. 추가적인 브라우저‑특정 셈은 필요하지 않습니다. + +--- + +## Pro Tips & Pitfalls + +- **Pro tip:** 스타일을 설정한 *후*에 `InnerHtml`을 설정하세요. 먼저 내부 콘텐츠를 변경하면 일부 브라우저에서 레이아웃 재계산이 발생할 수 있으며, 스타일 적용 후에 하면 불필요한 작업을 피할 수 있습니다. +- **Watch out for:** `WebFontStyle`과 인라인 CSS 문자열을 혼용하지 마세요. 나중에 `spanElement.SetAttribute("style", "...")`를 수동으로 설정하면 열거형으로 생성된 스타일이 덮어써집니다. 한 가지 방법만 고수하세요. +- **Performance note:** 대규모 문서에서는 모든 노드를 먼저 생성한 뒤 한 번에 추가하는 배치 생성이 DOM 변형 횟수를 줄이고 렌더링 속도를 높입니다. + +--- + +## Conclusion + +이제 Aspose.HTML을 사용해 **create html document**를 만들고, **append element to body**, **set font style**, 그리고 **format text html**를 **create span element**로 수행하는 방법을 알게 되었습니다. 예제는 완전하게 동작하며, 설명은 “방법”과 “이유”를 모두 다루어 더 복잡한 시나리오에도 쉽게 적용할 수 있습니다. + +다음 단계가 준비되셨나요? ``을 여러 CSS 클래스를 가진 `

`로 교체하거나, `Document` → `PdfSaveOptions`를 사용해 동일한 DOM을 PDF로 렌더링해 보세요. 동일한 원칙이 적용되며, Aspose.HTML은 서버‑사이드 HTML 생성 작업에 신뢰할 수 있는 파트너가 될 것입니다. + +질문이 있거나 독창적인 팁을 발견하셨나요? 아래에 댓글을 남겨 주세요—행복한 코딩 되세요! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/net/html-extensions-and-conversions/_index.md b/html/korean/net/html-extensions-and-conversions/_index.md index 4f4d77b65..14d5db190 100644 --- a/html/korean/net/html-extensions-and-conversions/_index.md +++ b/html/korean/net/html-extensions-and-conversions/_index.md @@ -54,7 +54,7 @@ Aspose.HTML for .NET을 사용하여 .NET에서 HTML을 BMP로 변환하는 방 ### [Aspose.HTML을 사용하여 .NET에서 HTML을 JPEG로 변환](./convert-html-to-jpeg/) Aspose.HTML for .NET을 사용하여 .NET에서 HTML을 JPEG로 변환하는 방법을 알아보세요. Aspose.HTML for .NET의 힘을 활용하는 단계별 가이드입니다. 웹 개발 작업을 손쉽게 최적화하세요. ### [Aspose.HTML을 사용하여 .NET에서 HTML을 마크다운으로 변환](./convert-html-to-markdown/) -Aspose.HTML을 사용하여 .NET에서 HTML을 Markdown으로 변환하는 방법을 알아보고 효율적인 콘텐츠 조작을 하세요. 원활한 변환 프로세스를 위한 단계별 가이드를 받으세요. +Aspose.HTML 사용하여 .NET에서 HTML을 Markdown으로 변환하는 방법을 알아보고 효율적인 콘텐츠 조작을 하세요. 원활한 변환 프로세스를 위한 단계별 가이드를 받으세요. ### [Aspose.HTML을 사용하여 .NET에서 HTML을 MHTML로 변환](./convert-html-to-mhtml/) Aspose.HTML을 사용하여 .NET에서 HTML을 MHTML로 변환 - 효율적인 웹 콘텐츠 보관을 위한 단계별 가이드. .NET용 Aspose.HTML을 사용하여 MHTML 보관소를 만드는 방법을 알아보세요. ### [Aspose.HTML을 사용하여 .NET에서 HTML을 PNG로 변환](./convert-html-to-png/) @@ -63,6 +63,8 @@ Aspose.HTML for .NET을 사용하여 HTML 문서를 조작하고 변환하는 Aspose.HTML for .NET을 사용하여 HTML을 TIFF로 변환하는 방법을 알아보세요. 효율적인 웹 콘텐츠 최적화를 위한 단계별 가이드를 따르세요. ### [Aspose.HTML을 사용하여 .NET에서 HTML을 XPS로 변환](./convert-html-to-xps/) .NET용 Aspose.HTML의 힘을 알아보세요: HTML을 XPS로 손쉽게 변환하세요. 필수 조건, 단계별 가이드, FAQ가 포함되어 있습니다. +### [URL에서 PDF 만들기 – 완전한 C# 가이드](./create-pdf-from-url-complete-c-guide/) +Aspose.HTML for .NET을 사용해 URL을 PDF로 변환하는 전체 C# 단계별 가이드. ## 결론 @@ -74,4 +76,4 @@ Aspose.HTML for .NET을 사용하여 HTML을 TIFF로 변환하는 방법을 알 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/korean/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..ef9ee1258 --- /dev/null +++ b/html/korean/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: C#에서 URL을 빠르게 PDF로 만들기. HTML을 PDF로 변환하고, 웹페이지를 PDF로 저장하며, 쉬운 코드로 HTML에서 + PDF를 생성하는 방법을 배워보세요. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: ko +og_description: C#에서 URL을 사용해 PDF를 빠르게 만들기. 이 튜토리얼에서는 HTML을 PDF로 변환하고, 웹페이지를 PDF로 + 저장하며, Aspose.HTML을 사용해 HTML에서 PDF를 생성하는 방법을 보여줍니다. +og_title: URL에서 PDF 만들기 – 완전한 C# 가이드 +tags: +- pdf +- csharp +- html +- conversion +title: URL에서 PDF 만들기 – 완전한 C# 가이드 +url: /ko/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# URL에서 PDF 만들기 – 완전 C# 가이드 + +웹 페이지를 **URL에서 PDF로 만들**고 싶지만 어떤 라이브러리를 선택해야 할지 몰라 고민한 적 있나요? 혼자가 아닙니다. 많은 개발자들이 웹 페이지를 보관하거나, 온라인 템플릿으로 청구서를 생성하거나, 사이트에 “PDF로 다운로드” 버튼을 제공하려 할 때 이 문제에 부딪힙니다. + +이 튜토리얼에서는 **HTML을 PDF로 변환**하는 전체 과정을 C#으로 살펴봅니다. **웹 페이지를 PDF로 저장**하는 방법, **HTML에서 PDF 생성**하는 방법, 그리고 `Aspose.HTML for .NET` 라이브러리가 왜 손쉽게 작업을 수행하게 하는지 확인할 수 있습니다. 마지막에는 공개 URL을 가져와 렌더링하고 PDF 파일을 디스크에 쓰는 실행 가능한 코드 스니펫을 제공합니다. + +> **팁:** 기업 프록시 뒤에서 작업 중이라면 `HTMLDocument` 생성자에 올바른 `WebRequest` 설정을 전달해야 합니다—그렇지 않으면 다운로드가 조용히 실패합니다. + +## 준비물 + +- **.NET 6.0** 이상 (코드는 .NET Framework 4.7+에서도 동작합니다). +- **Aspose.HTML for .NET** NuGet 패키지 (`Aspose.HTML`). +- PDF가 저장될 쓰기 가능한 폴더. +- C#에 대한 기본적인 이해 (특별한 트릭은 필요 없습니다). + +추가 설정 파일도, 숨겨진 매직도 없습니다—몇 줄의 깔끔하고 주석이 달린 코드만 있으면 됩니다. + +![Create PDF from URL example](image.png){alt="URL에서 PDF 만들기 예시"} + +## 1단계: Aspose.HTML NuGet 패키지 설치 + +터미널이나 Package Manager Console을 열고 다음을 실행합니다: + +```bash +dotnet add package Aspose.HTML +``` + +> **왜 필요한가:** `HTMLDocument`, `PdfSaveOptions`, `PdfConverter` 클래스는 `Aspose.Html` 네임스페이스에 포함되어 있습니다. 패키지가 없으면 컴파일러가 이 타입들을 알 수 없습니다. + +## 2단계: 웹 페이지를 `HTMLDocument`에 로드 + +첫 번째 실제 작업은 원격 HTML을 가져오는 것입니다. `HTMLDocument`는 URL을 직접 받아 리다이렉트와 콘텐츠‑타입 감지를 자동으로 처리합니다. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**무슨 일이 일어나나요?** +- `HTMLDocument`는 가져온 마크업을 DOM 트리로 파싱합니다. 마치 브라우저가 하는 것과 같습니다. +- 절대 URL로 참조된 외부 CSS, 이미지, 스크립트도 함께 다운로드되어 PDF가 실제 페이지와 동일하게 보입니다. + +## 3단계: PDF 내보내기 옵션 설정 (여백, 페이지 크기 등) + +문서를 변환기에 넘기기 전에 출력 옵션을 미세 조정합니다. `PdfSaveOptions` 객체를 사용하면 여백, 페이지 방향, PDF 버전 등을 지정할 수 있습니다. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**왜 여백을 설정하나요?** +여백이 없으면 모바일 최적화 사이트에서 헤더나 푸터가 잘릴 수 있습니다. 적당한 여백을 추가하면 모든 내용이 읽기 쉬워집니다. + +## 4단계: HTML 문서를 바로 PDF로 변환 + +이제 본격적인 작업입니다. `PdfConverter.ConvertHtml`은 렌더링된 페이지를 바로 PDF 파일로 스트리밍합니다. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**내부 동작:** +- Aspose는 자체 레이아웃 엔진으로 DOM을 렌더링합니다(Chromium 필요 없음). +- 렌더링된 비트맵은 가능한 경우 PDF 벡터로 래스터화되어 텍스트 선택이 유지됩니다. + +## 5단계: 결과 확인 및 예외 상황 처리 + +간단한 검증을 통해 나중에 발생할 수 있는 문제를 예방합니다. 생성된 파일을 열어보면 실시간 페이지가 여백과 함께 표시되고 이미지가 모두 포함되어 있어야 합니다. + +### 흔히 발생하는 문제와 해결 방법 + +| Issue | Cause | Fix | +|-------|-------|-----| +| **Blank PDF** | URL이 방화벽에 차단되었거나 인증이 필요함 | `HTMLDocument` 생성자에 자격 증명이 포함된 커스텀 `WebRequest` 전달 | +| **Missing CSS** | 외부 스타일시트가 상대 URL을 사용 | 기본 URL이 올바른지 확인 (Aspose가 처리하지만 리다이렉트를 재확인) | +| **Large file size** | 고해상도 이미지가 축소되지 않음 | `PdfSaveOptions.ImageCompression`을 사용해 JPEG 압축 적용 | +| **Unicode characters garbled** | 폰트가 임베드되지 않음 | `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` 설정 | + +## 전체 작업 예제 (복사‑붙여넣기 바로 사용) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +프로그램을 실행(`dotnet run`)하면 `C:\Temp`에 `example.pdf`가 생성됩니다. PDF 뷰어로 열어보면 `https://example.com` 페이지가 정의한 여백과 함께 정확히 복제된 것을 확인할 수 있습니다. + +## 결론 + +우리는 **C#을 사용해 URL에서 PDF를 만드는** 방법을 살펴보았습니다. 웹 페이지 로드, 여백 설정, DOM을 PDF 파일로 변환하는 전체 흐름을 다루었으며, 이를 통해 **HTML을 PDF로 변환**, **웹 페이지를 PDF로 저장**, **HTML에서 PDF 생성**을 프로덕션 수준으로 구현할 수 있습니다. + +다양하게 실험해 보세요: 페이지 크기를 `Letter`로 바꾸거나, 가로 방향으로 전환하거나, `PdfPageEventHandler`를 사용해 헤더/푸터를 추가하는 등. 동일한 패턴은 동적 페이지, 로그인 보호 포털(쿠키 제공만 하면 됨), 혹은 여러 URL을 일괄 처리하는 경우에도 적용됩니다. + +**다음에 탐색해볼 내용** + +- **HTML to PDF C#** 비동기 변환을 활용한 고처리량 서비스. +- `PdfDocumentInfo`를 이용해 PDF에 **메타데이터**(작성자, 제목) 삽입. +- **Aspose.PDF**를 사용해 서로 다른 URL에서 생성된 여러 PDF를 하나의 보고서로 병합. + +궁금한 점이 있나요? 아래 댓글로 남겨 주세요. 즐거운 코딩 되세요! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/net/rendering-html-documents/_index.md b/html/korean/net/rendering-html-documents/_index.md index 0f279403f..cbc0544f0 100644 --- a/html/korean/net/rendering-html-documents/_index.md +++ b/html/korean/net/rendering-html-documents/_index.md @@ -42,6 +42,10 @@ Aspose.HTML for .NET은 풍부한 기능, 훌륭한 설명서, 활발한 커뮤 ### [Aspose.HTML을 사용하여 .NET에서 HTML을 PNG로 렌더링합니다.](./render-html-as-png/) .NET용 Aspose.HTML을 사용하는 방법을 배우세요: HTML을 조작하고, 다양한 형식으로 변환하고, 더 많은 것을 하세요. 이 포괄적인 튜토리얼에 뛰어드세요! + +### [HTML을 PNG로 렌더링하는 방법 – 완전 단계별 가이드](./how-to-render-html-to-png-complete-step-by-step-guide/) +HTML을 PNG 이미지로 변환하는 전체 과정을 단계별로 안내합니다. Aspose.HTML for .NET을 활용한 실전 예제를 확인하세요. + ### [Aspose.HTML을 사용하여 .NET에서 EPUB를 XPS로 렌더링](./render-epub-as-xps/) 이 포괄적인 튜토리얼에서 Aspose.HTML for .NET으로 HTML 문서를 만들고 렌더링하는 방법을 알아보세요. HTML 조작, 웹 스크래핑 등의 세계로 뛰어드세요. ### [Aspose.HTML을 사용한 .NET에서의 렌더링 타임아웃](./rendering-timeout/) @@ -52,9 +56,11 @@ Aspose.HTML for .NET에서 렌더링 타임아웃을 효과적으로 제어하 Aspose.HTML for .NET을 사용하여 여러 HTML 문서를 렌더링하는 방법을 배우세요. 이 강력한 라이브러리로 문서 처리 능력을 향상시키세요. ### [Aspose.HTML을 사용하여 .NET에서 SVG 문서를 PNG로 렌더링합니다.](./render-svg-doc-as-png/) .NET용 Aspose.HTML의 힘을 활용하세요! SVG 문서를 PNG로 손쉽게 렌더링하는 방법을 알아보세요. 단계별 예제와 FAQ를 살펴보세요. 지금 시작하세요! +### [HTML 렌더링 방법 – 사용자 정의 리소스 핸들러 완전 가이드](./how-to-render-html-complete-guide-with-custom-resource-handl/) +사용자 정의 리소스 핸들러를 활용해 HTML을 렌더링하는 전체 과정을 단계별로 배워보세요. {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/korean/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..ce198d69d --- /dev/null +++ b/html/korean/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: Aspose.HTML를 사용하여 HTML을 이미지로 렌더링하는 방법. HTML을 이미지로 변환하고, 사용자 지정 리소스 핸들러를 + 활용하며, C#에서 HTML을 비트맵으로 변환하는 방법을 배웁니다. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: ko +og_description: Aspose.HTML를 사용하여 HTML을 이미지로 렌더링하는 방법. HTML을 이미지로 변환하고, 사용자 지정 리소스 + 핸들러를 마스터하며, C#에서 HTML을 비트맵으로 변환합니다. +og_title: HTML을 렌더링하는 방법 – 맞춤 리소스 핸들러와 함께하는 완전 가이드 +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTML을 렌더링하는 방법 – 맞춤 리소스 핸들러와 함께하는 완전 가이드 +url: /ko/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML 렌더링 방법 – 커스텀 리소스 핸들러 완전 가이드 + +브라우저 엔진을 직접 다루지 않고 **HTML을 비트맵으로 렌더링**하는 방법이 궁금하셨나요? 여러분만 그런 것이 아닙니다. 동적인 페이지를 이메일, 보고서, 썸네일 등에 빠르게 스크린샷으로 사용해야 할 때 많은 개발자들이 난관에 부딪히곤 합니다. 좋은 소식은? Aspose.HTML을 사용하면 어떤 HTML 문자열도 이미지로 변환할 수 있습니다—UI도 없고, 헤드리스 Chrome도 필요 없으며, 순수 C# 코드만 있으면 됩니다. + +이 튜토리얼에서는 실용적인 **html to image conversion** 시나리오를 따라가며 **커스텀 리소스 핸들러 구현** 방법을 보여주고, 전체 **convert html to bitmap** 워크플로우를 시연합니다. 최종적으로 메모리 내에서 HTML을 이미지로 렌더링하는 재사용 가능한 메서드를 얻을 수 있으며, 이를 추가 처리나 저장에 활용할 수 있습니다. + +> **Prerequisites** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * Basic familiarity with C# and streams + +위 기본 사항을 갖추셨다면, 바로 시작해 보겠습니다. + +--- + +## Aspose.HTML으로 HTML 렌더링하기 + +모든 **render html to image** 작업의 핵심은 `ImageRenderer` 클래스입니다. 이 클래스는 `HTMLDocument`를 받아 래스터 그래픽(PNG, JPEG, BMP 등)으로 출력합니다. 아래는 최소 구현 예시입니다: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +이 스니펫은 동작하지만, 렌더러가 파일을 어디에 쓸지 지정하지 않으면 디스크에 파일이 생성되지 않습니다. 모든 작업을 메모리 내에서 처리하고, HTML이 요청하는 모든 리소스(이미지, CSS, 폰트)를 가로채기 위해 **커스텀 리소스 핸들러**를 연결합니다. + +--- + +## 커스텀 리소스 핸들러 구현 + +**커스텀 리소스 핸들러**를 사용하면 외부 자산을 가져오고 저장하는 방식을 완전히 제어할 수 있습니다. 많은 경우 이러한 자산을 메모리에 저장해 나중에 사용하고 싶을 것입니다(예: ZIP에 묶기). 핸들러는 `ResourceHandler`를 상속하고 `HandleResource`를 오버라이드합니다. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**왜 이렇게 할까?** +* **Performance** – 디스크 I/O 없이 모든 것이 RAM에 머무릅니다. +* **Security** – 어떤 URL을 가져올 수 있는지 직접 제어합니다. +* **Extensibility** – 리소스를 캐시하거나 이름을 바꾸고, 다른 컨테이너에 삽입할 수 있습니다. + +--- + +## ImageRenderer를 사용한 HTML → Bitmap 변환 + +이제 구성 요소를 결합합니다: HTML을 로드하고, `MyHandler`를 연결한 뒤 렌더링합니다. 아래 메서드는 렌더링된 페이지의 PNG 이미지를 담은 `MemoryStream`을 반환합니다. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### 예상 출력 + +다음과 같이 메서드를 호출하면: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +`demo.png` 파일이 대략 다음과 같이 생성됩니다: + +![how to render html output example](https://example.com/assets/render-html-output.png "how to render html output example") + +*Alt text:* **how to render html output example** – 렌더링된 HTML 스니펫을 보여주는 작은 비트맵. + +--- + +## HTML → Image 변환 – 흔히 겪는 문제와 팁 + +### 1. 상대 URL 및 Base 태그 +HTML이 상대 경로로 외부 CSS나 이미지를 참조하는 경우, 렌더러는 기본 폴더를 알 수 없습니다. 다음 중 하나를 선택하세요: + +* `` 태그를 추가하거나 +* `MyHandler.HandleResource` 내부에서 URL을 해석해 올바른 스트림을 제공하십시오. + +### 2. 폰트 가용성 +Aspose.HTML은 기본적으로 시스템 폰트를 사용합니다. 커스텀 웹 폰트(`@font-face`)를 사용하려면 핸들러를 통해 폰트 파일에 접근 가능하도록 하거나, base64 데이터 URI로 임베드하십시오. + +### 3. 큰 페이지 +매우 긴 페이지를 렌더링하면 메모리 사용량이 크게 증가할 수 있습니다. 뷰포트 크기를 제한할 수 있습니다: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. 이미지 포맷 +`renderer.Save(stream, ImageFormat.Jpeg)`을 사용하면 JPEG 압축도 가능합니다. 진정한 **convert html to bitmap** 출력을 원한다면 `ImageFormat.Png` 대신 `ImageFormat.Bmp`를 사용하십시오. + +--- + +## HTML → Image – 고급 시나리오 + +### A. 다중 페이지 렌더링 +HTML에 페이지 나눔(`\
`)이 포함된 경우, 페이지를 순회하면서 렌더링할 수 있습니다: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. PDF에 이미지 삽입 +`Aspose.Pdf`와 결합해 PNG를 직접 삽입할 수 있습니다: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## 결론 + +우리는 **HTML을 메모리 내에서 비트맵으로 렌더링**하는 방법을 다루었으며, **html to image conversion** 기본 개념을 탐구하고, **커스텀 리소스 핸들러**를 구축했으며, Aspose.HTML의 `ImageRenderer`를 사용해 **convert html to bitmap**을 수행하는 전체 과정을 보여주었습니다. 이 접근 방식은 빠르고, 스레드 안전하며, 실제 프로젝트(이메일 썸네일 생성, 자동 보고서 작성 등)에 쉽게 확장할 수 있습니다. + +다음 단계가 준비되셨나요? PNG 출력을 JPEG로 바꾸어 보거나, 다양한 페이지 크기를 실험해 보세요. 혹은 핸들러를 캐싱 레이어에 연결해 반복 렌더링을 즉시 처리하도록 할 수도 있습니다. 모든 리소스를 직접 제어하면 가능성은 무한합니다. + +질문이나 공유하고 싶은 멋진 사용 사례가 있나요? 아래 댓글로 알려 주세요. 즐거운 렌더링 되세요! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/korean/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..80be89fd0 --- /dev/null +++ b/html/korean/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,231 @@ +--- +category: general +date: 2026-01-03 +description: Aspose.HTML을 사용하여 C#에서 HTML을 PNG로 렌더링하고, 웹페이지를 이미지로 변환하며, HTML을 PNG로 + 저장하는 방법을 배워보세요. 빠르고 신뢰할 수 있으며, 프로덕션에 바로 사용할 수 있습니다. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: ko +og_description: Aspose.HTML을 사용한 전체 C# 예제로 HTML을 PNG로 렌더링하고, 웹 페이지를 이미지로 변환하며, HTML을 + PNG로 저장하는 방법을 마스터하세요. +og_title: HTML을 PNG로 렌더링하는 방법 – 전체 가이드 +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTML을 PNG로 렌더링하는 방법 – 완전한 단계별 가이드 +url: /ko/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML을 PNG로 렌더링하는 방법 – 완전 단계별 가이드 + +웹 페이지를 이미지로 **렌더링하는 방법**을 찾고 있다면, 여기서 바로 해결할 수 있습니다. 썸네일용 **웹페이지를 이미지로 변환**하거나, 페이지를 PNG로 보관하거나, 소셜 미디어 미리보기를 실시간으로 생성하고 싶을 때, 적절한 라이브러리만 있으면 과정이 놀라울 정도로 간단합니다. + +이 튜토리얼에서는 Aspose.HTML for .NET을 사용해 라이브 URL을 PNG 파일로 변환하는 과정을 단계별로 살펴봅니다. 전체 실행 가능한 코드 스니펫을 확인하고, 각 설정이 왜 중요한지 배우며, 몇 가지 트릭을 통해 예외 상황을 처리하는 방법도 알아봅니다. 튜토리얼을 마치면 **html을 png로 저장**, **html을 png로 변환**은 물론, 결과물을 보고서나 이메일에 삽입하는 것도 손쉽게 할 수 있습니다. + +## 사전 준비 – 필요 사항 + +시작하기 전에 다음이 준비되어 있는지 확인하세요. + +- **.NET 6.0** 이상 (코드는 .NET Core와 .NET Framework에서도 동작합니다) +- **Aspose.HTML for .NET** NuGet 패키지(`Aspose.Html`) 설치 +- 원하는 IDE (Visual Studio, Rider, VS Code 등) +- PNG 파일을 저장할 쓰기 가능한 폴더 + +추가 설정은 필요 없습니다—Aspose.HTML가 페이지 파싱, CSS 적용, 레이아웃 래스터화 작업을 모두 처리합니다. + +## 1단계: 렌더링할 HTML 문서 로드 + +먼저 캡처하려는 페이지를 가리키는 `HTMLDocument` 인스턴스를 만들어야 합니다. Aspose.HTML는 URL, 로컬 파일, 혹은 원시 HTML 문자열에서 로드할 수 있습니다. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **왜 중요한가:** URL에서 직접 문서를 로드하면 외부 리소스(CSS, JavaScript, 이미지)가 자동으로 가져와져, 실제 페이지와 동일한 렌더링 결과를 얻을 수 있습니다. + +## 2단계: 이미지 렌더링 옵션 설정 + +다음으로 `ImageRenderingOptions`를 설정합니다. 이 옵션들은 출력 크기, 품질, 안티앨리어싱 적용 여부 등을 제어합니다. 옵션을 조정하면 파일 크기와 시각적 충실도 사이의 균형을 맞출 수 있습니다. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **전문가 팁:** 고해상도 썸네일이 필요하면 `Width`와 `Height`를 비례적으로 늘리세요. Aspose.HTML가 레이아웃을 자동으로 스케일링하므로 벡터 품질이 손실되지 않습니다. + +## 3단계: 이미지 렌더러 초기화 + +이제 앞서 정의한 문서와 옵션을 전달해 `ImageRenderer`를 생성합니다. 이 객체가 실제로 페이지를 비트맵에 그리는 엔진 역할을 합니다. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **내부 동작:** 렌더러는 DOM을 파싱하고, CSS 스타일을 계산하며, 레이아웃을 수행한 뒤 각 요소를 픽셀 캔버스로 래스터화합니다. 모든 작업이 메모리 내에서 이루어지므로 브라우저 창이 필요하지 않습니다. + +## 4단계: PNG 파일 렌더링 및 저장 + +마지막으로 `Render` 메서드에 PNG를 저장할 전체 경로를 전달합니다. 이 메서드는 파일을 동기식으로 쓰고 내부 리소스를 자동으로 해제합니다. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **예상 결과:** 프로그램을 실행하면 `output` 폴더 안에 `example.png` 파일이 생성됩니다. 이미지 뷰어로 열면 `https://example.com` 페이지가 800×600 px 크기로 정확히 스냅샷된 모습을 확인할 수 있습니다. + +--- + +### 전체 실행 가능한 예제 + +아래는 새 콘솔 프로젝트에 복사·붙여넣기 할 수 있는 완전한 프로그램입니다. 모든 `using` 지시문, 오류 처리, 주석이 포함되어 있습니다. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +프로젝트 폴더에서 `dotnet run` 명령을 실행하면 실시간 페이지와 동일한 PNG가 생성됩니다. 이것이 **html을 렌더링하는 방법**이며, 몇 줄의 C# 코드만으로 가능합니다. + +--- + +## 자주 묻는 질문 및 예외 상황 + +### 로컬 HTML 파일을 렌더링할 수 있나요? + +물론입니다. URL 대신 파일 경로를 지정하면 됩니다: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### 페이지가 로드 후 JavaScript로 DOM을 변경한다면? + +Aspose.HTML은 대부분의 클라이언트‑사이드 스크립트를 실행하지만, 완전한 브라우저 엔진은 아닙니다. 스크립트가 많이 사용된 페이지는 헤드리스 Chromium 등으로 미리 렌더링한 후 결과 HTML을 Aspose.HTML에 전달하는 방법을 고려하세요. + +### PNG 압축 레벨을 어떻게 제어하나요? + +`ImageRenderingOptions`에는 `CompressionLevel` 속성(0–9)이 있습니다. 숫자가 낮을수록 파일 크기는 커지지만 품질은 높아집니다. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### 투명 배경이 필요합니다—가능한가요? + +가능합니다. 렌더링 전에 배경 색을 투명으로 설정하면 됩니다: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### 여러 페이지를 하나의 이미지에 렌더링할 수 있나요? + +URL이나 HTML 문자열 컬렉션을 순회하면서 각각을 비트맵으로 렌더링하고, `System.Drawing`이나 `ImageSharp`을 사용해 하나의 이미지로 합칠 수 있습니다. 핵심 **html을 png로 변환** 단계는 동일합니다. + +--- + +## 보너스: PNG를 Web API에 포함하기 + +ASP.NET Core 엔드포인트에서 이 기능을 제공하려면 파일 바이트를 그대로 반환하면 됩니다: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +이제 클라이언트는 `GET /render?url=https://example.com` 요청만으로 실시간 PNG를 받아볼 수 있어, **웹페이지를 이미지로 변환** 서비스에 최적입니다. + +--- + +## 결론 + +Aspose.HTML for .NET을 사용해 **html을 PNG로 렌더링**하는 방법을 모두 살펴보았습니다. 원격 페이지 로드, 렌더링 옵션 설정, 일반적인 함정 처리까지 전체 예제를 통해 **html을 png로 변환**, **html을 png로 저장**, 그리고 웹 API를 통한 노출까지 단계별로 구현할 수 있습니다. + +직접 URL을 넣어 실험해 보고, 다양한 해상도로 썸네일을 생성하거나 제품 카탈로그의 자동 썸네일 생성에 활용해 보세요. **html을 png로 렌더링**하는 기본을 마스터하면 무한한 가능성이 열립니다. + +--- + +*레벨업 준비되셨나요?* NuGet 패키지를 받아 프로젝트에 코드를 삽입하고 오늘 바로 웹페이지를 이미지로 변환해 보세요. 문제 발생 시 언제든 댓글을 남겨 주세요—행복한 렌더링 되시길! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/net/canvas-and-image-manipulation/_index.md b/html/polish/net/canvas-and-image-manipulation/_index.md index ba0361a72..81ebe3ca3 100644 --- a/html/polish/net/canvas-and-image-manipulation/_index.md +++ b/html/polish/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Dowiedz się, jak przekonwertować SVG na PDF za pomocą Aspose.HTML dla .NET. W Dowiedz się, jak przekonwertować SVG do XPS za pomocą Aspose.HTML dla .NET. Przyspiesz rozwój swoich stron internetowych dzięki tej potężnej bibliotece. ### [Jak włączyć antyaliasing w C# – Gładkie krawędzie](./how-to-enable-antialiasing-in-c-smooth-edges/) Dowiedz się, jak w C# włączyć antyaliasing, aby uzyskać płynne krawędzie w renderowanych grafikach. +### [Tworzenie tekstu na płótnie – Pełny przewodnik renderowania tekstu na obrazach](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Poznaj, jak renderować tekst na obrazach przy użyciu płótna w Aspose.HTML dla .NET – krok po kroku od podstaw do zaawansowanych technik. ## Wniosek diff --git a/html/polish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/polish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..47a8cc43d --- /dev/null +++ b/html/polish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,237 @@ +--- +category: general +date: 2026-01-03 +description: Szybko twórz tekst na płótnie i dowiedz się, jak renderować obraz tekstu, + ustawiać opcje tekstu oraz wypełniać płótno tekstem, jednocześnie ulepszając renderowanie + tekstu w systemie Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: pl +og_description: Twórz tekst na płótnie przy użyciu Aspose HTML, naucz się renderować + obraz tekstowy, ustawiać opcje tekstu i poprawiać jakość tekstu w systemie Linux + w jednym samouczku. +og_title: Tworzenie tekstu na płótnie – Kompletny przewodnik renderowania +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Tworzenie tekstu na płótnie – Kompletny przewodnik po renderowaniu tekstu na + obrazach +url: /pl/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Tworzenie tekstu na płótnie – Kompletny przewodnik renderowania + +Kiedykolwiek potrzebowałeś **create canvas text**, ale nie byłeś pewien, jak uzyskać wyraźne glify na każdej platformie? Nie jesteś sam. Wielu programistów napotyka problem, gdy ich tekst wygląda rozmycie na Linuksie, szczególnie przy konwertowaniu HTML na obraz. + +W tym samouczku przeprowadzimy Cię przez praktyczne rozwiązanie, które nie tylko pozwala **render text image** na płótnie Aspose HTML, ale także pokazuje, jak **set text options**, prawidłowo używać `FillText` oraz **improve Linux text** przy renderowaniu dzięki hintingowi. Po zakończeniu będziesz mieć samodzielny, gotowy do uruchomienia fragment kodu, który możesz wkleić do dowolnego projektu .NET. + +## Co się nauczysz + +- Jak utworzyć obiekt `Canvas` i przygotować go do rysowania. +- Rola `TextOptions` oraz dlaczego włączenie hintingu ma znaczenie na Linuksie. +- Krok po kroku kod, który **fill text canvas** ze stylizowanymi, wysokiej jakości znakami. +- Typowe pułapki (brak hintingu, niewłaściwy system współrzędnych) i szybkie rozwiązania. +- Sposoby rozszerzenia przykładu: własne czcionki, kolory i tekst wieloliniowy. + +> **Prerequisite:** .NET 6+ (lub .NET Framework 4.7.2) oraz zainstalowany pakiet NuGet Aspose.HTML for .NET. + +--- + +## Krok 1: Konfiguracja projektu i importów + +Zanim zaczniemy rysować, upewnij się, że Twój projekt odwołuje się do właściwych zestawów. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro tip:** Jeśli pracujesz na Linuksie, dodaj pakiet `libgdiplus` (`sudo apt-get install libgdiplus`), aby renderowanie oparte na GDI działało płynnie. + +--- + +## Krok 2: Utwórz płótno i określ jego rozmiar + +Płótno to w zasadzie bitmapa poza ekranem, na której możesz malować. Traktuj je jak cyfrową tablicę do rysowania. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Dlaczego to ważne:** Ustawienie jednolitego tła zapobiega przezroczystym artefaktom przy późniejszym eksportowaniu obrazu. + +--- + +## Krok 3: Skonfiguruj Text Options – klucz do wyraźnego tekstu na Linuksie + +Renderowanie czcionek na Linuksie może wyglądać rozmycie, jeśli hinting jest wyłączony. `TextOptions.UseHinting` informuje renderer, aby wyrównał glify do granic pikseli, co znacząco wyostrza wynik. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Co się stanie, jeśli to pominiesz?** Na wielu dystrybucjach Linuksa tekst będzie wyglądał nieco rozmycie lub nieprawidłowo wyrównany, szczególnie przy małych rozmiarach czcionki. + +--- + +## Krok 4: Wypełnij tekst na płótnie + +Teraz, gdy płótno jest gotowe, a opcje tekstu dopasowane, możemy faktycznie **fill text canvas**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Jeśli chcesz niestandardowe stylowanie (kolor, rozmiar czcionki, wyrównanie), otocz wywołanie w `Font` i `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Krok 5: Eksportuj płótno jako plik obrazu + +Ostatnim krokiem jest zapisanie renderowanej bitmapy na dysk, abyś mógł zweryfikować wynik. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Otwórz `canvas-output.png` i powinieneś zobaczyć wyraźny, prawidłowo hintowany tekst — niezależnie od tego, czy używasz Windows, macOS, czy Linuxa. + +--- + +## Częste pytania i przypadki brzegowe + +### Jak hinting wpływa na wydajność? + +Włączenie hintingu dodaje znikomy narzut (zwykle < 2 ms dla płótna 800×600). Korzyść wizualna znacznie przewyższa koszt, szczególnie przy generowaniu obrazów po stronie serwera, gdzie jakość ma kluczowe znaczenie. + +### Co zrobić, jeśli potrzebuję tekstu wieloliniowego? + +Użyj `canvas.FillText` w pętli, dostosowując współrzędną Y, lub skorzystaj z przeciążenia `canvas.FillText`, które przyjmuje obiekt `TextLayout` umożliwiający automatyczne łamanie linii. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Czy mogę użyć własnej czcionki TrueType? + +Oczywiście. Załaduj czcionkę przy użyciu `FontFamily` i przypisz ją do `TextOptions.FontFamily` lub bezpośrednio do `Font`, który przekazujesz do `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Upewnij się, że plik czcionki jest dostępny dla środowiska uruchomieniowego (umieść go w folderze projektu lub zarejestruj systemowo). + +--- + +## Pełny działający przykład + +Poniżej znajduje się kompletny, gotowy do skopiowania program, który zawiera wszystkie powyższe kroki. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Expected output:** Plik PNG o nazwie `canvas-output.png` zawierający dwie linie tekstu — jedną zwykłą, drugą pogrubioną niebieską — obie renderowane wyraźnie dzięki hintowaniu. + +--- + +## Podsumowanie + +Właśnie **created canvas text** od podstaw, nauczyliśmy się, jak **render text image** przy użyciu Aspose.HTML, i odkryliśmy, dlaczego **set text options** takie jak `UseHinting` są niezbędne do **improve Linux text** jakości. Postępując zgodnie z powyższymi krokami, możesz niezawodnie **fill text canvas** w dowolnym środowisku .NET, niezależnie od tego, czy generujesz miniaturki, znaki wodne, czy dynamiczną grafikę dla API webowych. + +Gotowy na kolejne wyzwanie? Spróbuj dodać gradienty tła, obrócić tekst lub wyeksportować do SVG dla wektorowego skalowania. Te same zasady — właściwe `TextOptions`, przemyślane zarządzanie współrzędnymi i czyste zwalnianie zasobów — mają zastosowanie we wszystkich formatach. + +Jeśli napotkałeś jakiekolwiek problemy lub masz pomysły na rozszerzenia, zostaw komentarz. Szczęśliwego kodowania i ciesz się tymi ostrymi jak brzytwa znakami! + +--- + +*Obraz ilustrujący płótno z wyraźnym tekstem (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/net/html-document-manipulation/_index.md b/html/polish/net/html-document-manipulation/_index.md index 57653dd88..27ded25dd 100644 --- a/html/polish/net/html-document-manipulation/_index.md +++ b/html/polish/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Naucz się tworzyć dynamiczną i internetową zawartość przy użyciu Aspose.H Naucz się korzystać z Aspose.HTML dla .NET. Importuj przestrzenie nazw, scalaj HTML z XML i rozwijaj swoje umiejętności tworzenia stron internetowych dzięki temu kompleksowemu przewodnikowi. ### [Generuj dokumenty XPS przez XpsDevice w .NET z Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Odblokuj potencjał rozwoju sieci z Aspose.HTML dla .NET. Twórz, konwertuj i manipuluj dokumentami HTML w prosty sposób. +### [Tworzenie dokumentu HTML przy użyciu Aspose.HTML – przewodnik krok po kroku](./create-html-document-with-aspose-html-step-by-step-guide/) +Dowiedz się, jak krok po kroku utworzyć dokument HTML przy użyciu Aspose.HTML w .NET, z praktycznymi przykładami i wskazówkami. ## Wniosek @@ -78,4 +80,4 @@ Podsumowując, jeśli chcesz opanować manipulację dokumentami HTML za pomocą {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/polish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..939180853 --- /dev/null +++ b/html/polish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,240 @@ +--- +category: general +date: 2026-01-03 +description: Utwórz dokument HTML w C# przy użyciu Aspose.HTML. Dowiedz się, jak dodać + element do ciała, ustawić styl czcionki i sformatować tekst HTML za pomocą prostego + elementu span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: pl +og_description: Utwórz dokument HTML w C# i zobacz, jak dodać element do ciała, ustawić + styl czcionki oraz sformatować tekst HTML przy użyciu Aspose.HTML. +og_title: Utwórz dokument HTML z Aspose.HTML – szybki przewodnik +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Utwórz dokument HTML przy użyciu Aspose.HTML – Przewodnik krok po kroku +url: /pl/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Utwórz dokument HTML przy użyciu Aspose.HTML – Przewodnik krok po kroku + +Kiedykolwiek potrzebowałeś **create html document** programowo i zastanawiałeś się, dlaczego wynik wygląda surowo? Nie jesteś jedyny. W wielu projektach musimy generować fragmenty „w locie” — myśl o szablonach e‑mail, dynamicznych raportach czy małych widżetach UI. Dobrą wiadomością jest to, że Aspose.HTML umożliwia łatwe **create html document**, stylizowanie go i wstawienie na stronę bez ręcznego składania łańcuchów znaków. + +W tym samouczku przeprowadzimy Cię przez kompletny przykład, który pokazuje, jak **append element to body**, **set font style** i **format text html** przy użyciu **create span element**. Po zakończeniu będziesz mieć działający fragment C#, który generuje pogrubiony‑pochylony tekst wewnątrz elementu span, oraz zrozumiesz „dlaczego” każdego wywołania. + +> **Wymagania wstępne** +> • .NET 6 lub nowszy (działa na każdym aktualnym środowisku .NET) +> • Pakiet NuGet Aspose.HTML for .NET (`Aspose.Html`) zainstalowany +> • Podstawowa znajomość C# i koncepcji DOM + +Nie są potrzebne żadne dodatkowe biblioteki, a kod działa na Windows, Linux i macOS. + +--- + +## Co zbudujesz + +Utworzymy minimalny dokument HTML, dodamy `` zawierający frazę **Bold‑Italic text**, zastosujemy zarówno **bold**, jak i **italic** oraz w końcu **append element to body**. Końcowy znacznik wygląda tak: + +```html + + + Bold‑Italic text + + +``` + +Możesz skopiować‑wkleić pełne źródło na końcu przewodnika i uruchomić je od razu. + +--- + +![Create HTML document example](image.png){alt="przykład tworzenia dokumentu HTML"} + +--- + +## Krok 1 – Inicjalizacja HTMLDocument (podstawa **create html document**) + +Zanim będziemy mogli **append element to body**, potrzebujemy obiektu dokumentu, na którym będziemy pracować. Aspose.HTML udostępnia klasę `HTMLDocument`, która reprezentuje DOM w pamięci. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Dlaczego to ważne*: Utworzenie `HTMLDocument` daje czyste płótno — wyobraź sobie pustą kartkę, na której później **format text html**. Bez tego kroku nie możesz manipulować węzłami ani stosować stylów. + +--- + +## Krok 2 – Utwórz element `` (**create span element**) + +Teraz potrzebujemy kontenera dla naszego stylowanego tekstu. `` jest idealny, ponieważ jest elementem inline, który może przenosić CSS bez przerywania przepływu. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Pro tip*: Jeśli kiedykolwiek musisz wstawić wiele fragmentów tekstu, możesz ponownie używać tego samego `spanElement`, klonując go (`spanElement.Clone(true)`) i zmieniając `InnerHtml` przy każdym użyciu. + +--- + +## Krok 3 – Zastosuj **set font style** dla pogrubienia **i** kursywy + +Aspose.HTML udostępnia silnie typowany obiekt `Style`. Aby **set font style** łączymy `WebFontStyle.Bold` i `WebFontStyle.Italic` przy użyciu operatora bitowego OR. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Dlaczego używać wyliczenia*: Enum `WebFontStyle` mapuje bezpośrednio na właściwości CSS (`font-weight` i `font-style`). Użycie wyliczenia zapobiega literówkom i zapewnia, że generowany CSS jest prawidłowy — co jest kluczowe dla niezawodnego **format text html**. + +--- + +## Krok 4 – **Append element to body** i finalizacja dokumentu + +Gdy stylowany span jest gotowy, ostatnim krokiem jest umieszczenie go wewnątrz znacznika ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +W tym momencie drzewo DOM wygląda dokładnie tak, jak pokazano we wcześniejszym fragmencie. Jeśli sprawdzisz `htmlDocument.InnerHtml`, zobaczysz w pełni sformowany znacznik. + +--- + +## Krok 5 – Zapisz lub wyrenderuj dokument + +Możesz zapisać HTML do pliku, przesłać go do przeglądarki lub wyrenderować do PDF/Obrazu przy użyciu silnika renderującego Aspose.HTML. Oto najprostsza opcja zapisu do pliku: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Otwórz `output.html` w dowolnej przeglądarce, a zobaczysz **Bold‑Italic text** wyświetlony dokładnie tak, jak zamierzono. + +--- + +## Pełny działający przykład + +Łącząc wszystko razem, oto kompletny, gotowy do uruchomienia program: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Oczekiwany wynik** – otwarcie `output.html` pokazuje: + +> **Bold‑Italic text** (bold and italic) + +Jeśli sprawdzisz źródło, zobaczysz dokładny HTML, o którym rozmawialiśmy, co potwierdza, że krok **format text html** zakończył się sukcesem. + +--- + +## Częste pytania i przypadki brzegowe + +### 1. Co zrobić, jeśli potrzebuję więcej niż dwóch stylów? + +`WebFontStyle` jest enumem flag, więc możesz połączyć dowolną liczbę stylów (np. `Underline`). Wystarczy dalej używać operatora `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Czy mogę zmienić kolor jednocześnie? + +Oczywiście. Obiekt `Style` posiada właściwość `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Jak **append element to body** wielokrotnie? + +Utwórz pętlę, sklonuj stylowany span, dostosuj tekst i dołącz każdy klon: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Co zrobić, jeśli potrzebuję **format text html** wewnątrz `
`? + +Ten sam API działa dla dowolnego elementu. Po prostu zamień `CreateElement("span")` na `CreateElement("div")` i dostosuj style w razie potrzeby. + +### 5. Obawy dotyczące kompatybilności? + +Aspose.HTML celuje w .NET Standard 2.0+, więc kod działa na .NET Core, .NET Framework oraz .NET 5/6+. Nie są wymagane dodatkowe shim’y przeglądarkowe. + +--- + +## Porady i pułapki + +- **Pro tip:** Zawsze ustawiaj `InnerHtml` *po* skonfigurowaniu stylu. Zmiana zawartości najpierw może wywołać ponowne układanie w niektórych przeglądarkach; robienie tego po stylizacji unika niepotrzebnej pracy. +- **Watch out for:** Mieszanie `WebFontStyle` z łańcuchami CSS inline. Jeśli później ręcznie ustawisz `spanElement.SetAttribute("style", "...")`, nadpiszesz style wygenerowane przez enum. Trzymaj się jednej metody. +- **Performance note:** Dla dużych dokumentów lepsze jest tworzenie wsadowe (utwórz wszystkie węzły najpierw, a potem dołącz je jednorazowo), co zmniejsza liczbę mutacji DOM i przyspiesza renderowanie. + +--- + +## Zakończenie + +Teraz wiesz, jak **create html document** przy użyciu Aspose.HTML, **append element to body**, **set font style** i **format text html** za pomocą **create span element**. Przykład jest w pełni funkcjonalny, a wyjaśnienia obejmują zarówno „jak”, jak i „dlaczego”, co ułatwia adaptację tego wzorca do bardziej złożonych scenariuszy. + +Gotowy na kolejny krok? Spróbuj zamienić `` na `

` z wieloma klasami CSS lub wyrenderować ten sam DOM do PDF używając `Document` → `PdfSaveOptions`. Te same zasady obowiązują, a Aspose.HTML okaże się niezawodnym partnerem w każdym zadaniu generowania HTML po stronie serwera. + +Masz pytania lub odkryłeś sprytny trik? zostaw komentarz poniżej — miłego kodowania! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/net/html-extensions-and-conversions/_index.md b/html/polish/net/html-extensions-and-conversions/_index.md index 62bc3df3b..96ad6f8af 100644 --- a/html/polish/net/html-extensions-and-conversions/_index.md +++ b/html/polish/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ Aspose.HTML dla .NET to nie tylko biblioteka; to przełom w świecie tworzenia s ## Samouczki dotyczące rozszerzeń i konwersji HTML ### [Konwertuj HTML do PDF w .NET za pomocą Aspose.HTML](./convert-html-to-pdf/) Konwertuj HTML do PDF bez wysiłku dzięki Aspose.HTML dla .NET. Postępuj zgodnie z naszym przewodnikiem krok po kroku i uwolnij moc konwersji HTML do PDF. +### [Utwórz PDF z URL – Kompletny przewodnik C#](./create-pdf-from-url-complete-c-guide/) +Pełny przewodnik w C#, jak wygenerować PDF z adresu URL przy użyciu Aspose.HTML. ### [Konwersja EPUB do obrazu w .NET za pomocą Aspose.HTML](./convert-epub-to-image/) Dowiedz się, jak konwertować EPUB na obrazy za pomocą Aspose.HTML dla .NET. Samouczek krok po kroku z przykładami kodu i opcjami dostosowywania. ### [Konwertuj EPUB do PDF w .NET za pomocą Aspose.HTML](./convert-epub-to-pdf/) @@ -74,4 +76,4 @@ Więc na co czekasz? Wyruszmy w tę ekscytującą podróż, aby odkryć rozszerz {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/polish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..cba8f6760 --- /dev/null +++ b/html/polish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,201 @@ +--- +category: general +date: 2026-01-03 +description: Szybko twórz PDF z adresu URL w C#. Dowiedz się, jak konwertować HTML + na PDF, zapisywać stronę internetową jako PDF oraz generować PDF z HTML przy użyciu + prostego kodu. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: pl +og_description: Szybko utwórz PDF z URL w C#. Ten samouczek pokazuje, jak konwertować + HTML na PDF, zapisać stronę internetową jako PDF oraz generować PDF z HTML przy + użyciu Aspose.HTML. +og_title: Utwórz PDF z adresu URL – Kompletny przewodnik C# +tags: +- pdf +- csharp +- html +- conversion +title: Utwórz PDF z adresu URL – Kompletny przewodnik C# +url: /pl/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Tworzenie PDF z adresu URL – Kompletny przewodnik C# + +Kiedykolwiek potrzebowałeś **utworzyć PDF z URL**, ale nie wiedziałeś, którą bibliotekę wybrać? Nie jesteś sam. Wielu programistów napotyka ten problem, gdy chce zarchiwizować stronę internetową, wygenerować faktury z szablonu online lub po prostu udostępnić przycisk „pobierz jako PDF” na swojej witrynie. + +W tym samouczku przeprowadzimy Cię przez cały proces **konwersji HTML do PDF** przy użyciu C#. Zobaczysz, jak **zapisać stronę internetową jako PDF**, jak **generować PDF z HTML** oraz dlaczego biblioteka `Aspose.HTML for .NET` sprawia, że jest to dziecinnie proste. Po zakończeniu będziesz mieć gotowy fragment kodu, który pobiera dowolny publiczny URL, renderuje go i zapisuje plik PDF na dysku. + +> **Pro tip:** Jeśli pracujesz za korporacyjnym proxy, upewnij się, że konstruktor `HTMLDocument` otrzymuje prawidłowe ustawienia `WebRequest` — w przeciwnym razie pobieranie zakończy się cichym niepowodzeniem. + +## Czego będziesz potrzebować + +- **.NET 6.0** lub nowszy (kod działa również na .NET Framework 4.7+). +- Pakiet NuGet **Aspose.HTML for .NET** (`Aspose.HTML`). +- Zapisywalny folder na dysku, w którym zostanie zapisany PDF. +- Podstawowa znajomość C# (nie są potrzebne zaawansowane sztuczki). + +Bez dodatkowych plików konfiguracyjnych, bez ukrytej magii — tylko kilka linii czystego, komentowanego kodu. + +![Create PDF from URL example](image.png){alt="tworzenie pdf z url"} + +## Krok 1: Zainstaluj pakiet NuGet Aspose.HTML + +Otwórz terminal lub konsolę Package Manager i uruchom: + +```bash +dotnet add package Aspose.HTML +``` + +> **Dlaczego ten krok jest ważny:** Klasy `HTMLDocument`, `PdfSaveOptions` i `PdfConverter` znajdują się w przestrzeni nazw `Aspose.Html`. Bez tego pakietu kompilator nie będzie wiedział, czym są te typy. + +## Krok 2: Załaduj stronę internetową do `HTMLDocument` + +Pierwszym prawdziwym działaniem jest pobranie zdalnego HTML. `HTMLDocument` może przyjąć URL bezpośrednio, obsługując przekierowania i wykrywanie typu treści za Ciebie. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Co się dzieje?** +- `HTMLDocument` parsuje pobrany markup do drzewa DOM, tak jak przeglądarka. +- Wszystkie zewnętrzne CSS, obrazy czy skrypty odwołujące się do bezwzględnych URL‑ów są również pobierane, co zapewnia, że PDF będzie wyglądał jak żywa strona. + +## Krok 3: Skonfiguruj opcje eksportu PDF (marginesy, rozmiar strony itp.) + +Zanim przekażemy dokument konwerterowi, dopasowujemy wyjście. Obiekt `PdfSaveOptions` pozwala określić marginesy, orientację strony, a nawet wersję PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Dlaczego ustawia się marginesy?** +Ściśle dopasowany PDF może obcinać nagłówki lub stopki, szczególnie na stronach zoptymalizowanych pod mobile. Dodanie umiarkowanego marginesu zapewnia czytelność wszystkiego. + +## Krok 4: Konwertuj dokument HTML bezpośrednio do PDF + +Teraz najcięższa część. `PdfConverter.ConvertHtml` strumieniuje wyrenderowaną stronę prosto do pliku PDF. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Pod maską:** +- Aspose renderuje DOM przy użyciu własnego silnika układu (bez potrzeby Chromium). +- Wyrenderowany bitmap jest następnie rasteryzowany do wektorów PDF, gdzie to możliwe, zachowując możliwość zaznaczania tekstu. + +## Krok 5: Zweryfikuj wynik i obsłuż przypadki brzegowe + +Krótka kontrola sanityzacyjna oszczędza później wielu problemów. Otwórz wygenerowany plik; powinieneś zobaczyć żywą stronę, zastosowane marginesy i wszystkie obrazy nienaruszone. + +### Typowe pułapki i jak ich unikać + +| Problem | Przyczyna | Rozwiązanie | +|-------|-------|-----| +| **Pusty PDF** | URL zablokowany przez firewall lub wymaga uwierzytelnienia | Przekaż własny `WebRequest` z poświadczeniami do konstruktora `HTMLDocument` | +| **Brak CSS** | Zewnętrzny arkusz stylów używa względnych URL‑ów | Upewnij się, że bazowy URL jest prawidłowy (Aspose to obsługuje, ale sprawdź przekierowania) | +| **Duży rozmiar pliku** | Obrazy wysokiej rozdzielczości nie są skalowane w dół | Użyj `PdfSaveOptions.ImageCompression`, aby skompresować osadzone obrazy do JPEG | +| **Zniekształcone znaki Unicode** | Czcionka nie jest osadzona | Ustaw `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Pełny działający przykład (Gotowy do kopiowania) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Uruchom program (`dotnet run`) i znajdziesz `example.pdf` w `C:\Temp`. Otwórz go dowolnym przeglądarką PDF, a zobaczysz dokładną replikę `https://example.com` z marginesami, które zdefiniowałeś. + +## Zakończenie + +Właśnie pokazaliśmy, **jak tworzyć PDF z URL** przy użyciu C#. Omówiliśmy kroki: ładowanie strony, konfigurowanie marginesów i konwersję DOM do pliku PDF — wszystko, czego potrzebujesz, aby **konwertować HTML do PDF**, **zapisać stronę internetową jako PDF** i **generować PDF z HTML** w sposób gotowy do produkcji. + +Śmiało eksperymentuj: zmień rozmiar strony na `Letter`, przełącz orientację na poziomą lub dodaj nagłówek/stopkę przy użyciu `PdfPageEventHandler`. Ten sam wzorzec działa dla dynamicznych stron, portali chronionych logowaniem (wystarczy podać ciasteczka) lub nawet przy przetwarzaniu wsadowym listy URL‑ów. + +**Kolejne kroki, które możesz rozważyć** + +- **HTML to PDF C#** z asynchroniczną konwersją dla usług o wysokiej przepustowości. +- Osadzanie **metadanych** (autor, tytuł) w PDF za pomocą `PdfDocumentInfo`. +- Użycie **Aspose.PDF** do scalania wielu PDF‑ów wygenerowanych z różnych URL‑ów w jeden raport. + +Masz pytania? zostaw komentarz poniżej i powodzenia w kodowaniu! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/net/rendering-html-documents/_index.md b/html/polish/net/rendering-html-documents/_index.md index a4012e6fc..cd3ae972f 100644 --- a/html/polish/net/rendering-html-documents/_index.md +++ b/html/polish/net/rendering-html-documents/_index.md @@ -52,9 +52,14 @@ Dowiedz się, jak skutecznie kontrolować limity czasu renderowania w Aspose.HTM Naucz się renderować wiele dokumentów HTML za pomocą Aspose.HTML dla .NET. Zwiększ możliwości przetwarzania dokumentów dzięki tej potężnej bibliotece. ### [Renderuj SVG Doc jako PNG w .NET za pomocą Aspose.HTML](./render-svg-doc-as-png/) Odblokuj moc Aspose.HTML dla .NET! Dowiedz się, jak bez wysiłku renderować SVG Doc jako PNG. Zanurz się w przykładach krok po kroku i FAQ. Zacznij teraz! +### [Jak renderować HTML – Kompletny przewodnik z własnym obsługiwaczem zasobów](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Poznaj pełny przewodnik renderowania HTML w .NET z własnym obsługiwaczem zasobów, aby kontrolować ładowanie plików i stylów. +### [Jak renderować HTML do PNG – Kompletny przewodnik krok po kroku](./how-to-render-html-to-png-complete-step-by-step-guide/) +Dowiedz się, jak w prosty sposób renderować HTML do formatu PNG, korzystając z Aspose.HTML dla .NET, krok po kroku. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/polish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..35fba2263 --- /dev/null +++ b/html/polish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,227 @@ +--- +category: general +date: 2026-01-03 +description: Jak renderować HTML do obrazów przy użyciu Aspose.HTML. Dowiedz się, + jak konwertować HTML na obrazy, obsługiwać niestandardowy handler zasobów oraz konwertować + HTML na bitmapę w C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: pl +og_description: Jak renderować HTML do obrazów przy użyciu Aspose.HTML. Opanuj konwersję + HTML na obrazy, własny obsługiwacz zasobów oraz konwersję HTML na bitmapę w C#. +og_title: Jak renderować HTML – Kompletny przewodnik z niestandardowym obsługiwaczem + zasobów +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Jak renderować HTML – Kompletny przewodnik z niestandardowym obsługiwaczem + zasobów +url: /pl/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Jak renderować HTML – Kompletny przewodnik z niestandardowym obsługiwaczem zasobów + +Zastanawiałeś się kiedyś **jak renderować HTML** do bitmapy bez samodzielnego obsługiwania silnika przeglądarki? Nie jesteś sam. Wielu programistów napotyka problem, gdy potrzebują szybkiego zrzutu ekranu dynamicznej strony do e‑maili, raportów lub miniatur. Dobra wiadomość? Dzięki Aspose.HTML możesz zamienić dowolny ciąg HTML na obraz — bez UI, bez headless Chrome, tylko czysty kod C#. + +W tym samouczku przeprowadzimy praktyczny scenariusz **konwersji html na obraz**, pokażemy, jak **zaimplementować niestandardowy obsługiwacz zasobów**, oraz zaprezentujemy pełny przepływ **konwersji html do bitmapy**. Po zakończeniu będziesz mieć metodę wielokrotnego użytku, która renderuje HTML do obrazu w całości w pamięci, gotową do dalszego przetwarzania lub przechowywania. + +> **Wymagania wstępne** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Pakiet NuGet Aspose.HTML for .NET (`Aspose.Html`) +> * Podstawowa znajomość C# i strumieni + +Jeśli masz już te podstawy, zanurzmy się. + +--- + +## Jak renderować HTML przy użyciu Aspose.HTML + +Rdzeniem każdej operacji **render html to image** jest klasa `ImageRenderer`. Przyjmuje ona `HTMLDocument` i generuje grafikę rastrową (PNG, JPEG, BMP, itp.). Poniżej znajduje się minimalny szkielet: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Ten fragment działa, ale otrzymasz plik na dysku tylko wtedy, gdy wskażesz rendererowi miejsce zapisu. Aby wszystko trzymać w pamięci — i przechwycić każdy zasób (obrazy, CSS, czcionki), którego żąda HTML — podłączymy **niestandardowy obsługiwacz zasobów**. + +## Implementacja niestandardowego obsługiwacza zasobów + +**Niestandardowy obsługiwacz zasobów** daje pełną kontrolę nad tym, jak zewnętrzne zasoby są pobierane i przechowywane. W wielu przypadkach będziesz chciał przechwycić te zasoby w pamięci do późniejszego użycia (np. spakować je do ZIP). Obsługiwacz dziedziczy po `ResourceHandler` i nadpisuje metodę `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Po co to robić?** +* **Wydajność** – brak operacji I/O na dysku, wszystko pozostaje w RAM. +* **Bezpieczeństwo** – kontrolujesz, które URL‑e mogą być pobierane. +* **Rozszerzalność** – możesz buforować zasoby, zmieniać ich nazwy lub osadzać je w innych kontenerach. + +## Konwersja HTML do bitmapy przy użyciu ImageRenderer + +Teraz łączymy elementy: ładujemy HTML, podłączamy `MyHandler` i renderujemy. Poniższa metoda zwraca `MemoryStream` zawierający obraz PNG renderowanej strony. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Oczekiwany wynik + +If you call the method like this: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +You’ll get a `demo.png` that looks roughly like: + +![przykład wyjścia renderowania html](https://example.com/assets/render-html-output.png "przykład wyjścia renderowania html") + +*Tekst alternatywny:* **przykład wyjścia renderowania html** – mała bitmapa pokazująca renderowany fragment HTML. + +## Konwersja HTML na obraz – typowe pułapki i wskazówki + +### 1. Względne URL‑e i tagi base + +Jeśli Twój HTML odwołuje się do zewnętrznych CSS lub obrazów ze względnymi ścieżkami, renderer nie będzie znał folderu bazowego. Możesz: + +* Dodać tag ``, lub +* Rozwiązać URL‑e wewnątrz `MyHandler.HandleResource` i zwrócić odpowiedni strumień. + +### 2. Dostępność czcionek + +Aspose.HTML używa domyślnie czcionek systemowych. Dla niestandardowych czcionek webowych (`@font-face`) upewnij się, że pliki czcionek są dostępne przez obsługiwacz, lub osadź je jako URI danych w formacie base64. + +### 3. Duże strony + +Renderowanie bardzo wysokiej strony może zużywać dużo pamięci. Możesz ograniczyć rozmiar viewportu: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Format obrazu + +`renderer.Save(stream, ImageFormat.Jpeg)` działa równie dobrze, jeśli potrzebujesz kompresji JPEG. Zastąp `ImageFormat.Png` przez `ImageFormat.Bmp`, aby uzyskać prawdziwy wynik **convert html to bitmap**. + +## Renderowanie HTML do obrazu – zaawansowane scenariusze + +### A. Renderowanie wielu stron + +Jeśli HTML zawiera podziały stron (`
`), możesz iterować po stronach: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Osadzanie obrazu w PDF + +Połącz z `Aspose.Pdf`, aby bezpośrednio osadzić PNG: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +## Zakończenie + +Omówiliśmy **jak renderować HTML** do bitmapy w całości w pamięci, zbadaliśmy podstawy **konwersji html na obraz**, zbudowaliśmy **niestandardowy obsługiwacz zasobów** i pokazaliśmy, jak **konwertować html do bitmapy** przy użyciu `ImageRenderer` z Aspose.HTML. Podejście jest szybkie, wątkowo‑bezpieczne i łatwo rozszerzalne dla projektów produkcyjnych — od generowania miniatur w e‑mailach po automatyczne tworzenie raportów. + +Gotowy na kolejny krok? Spróbuj zamienić wyjście PNG na JPEG, eksperymentuj z różnymi rozmiarami stron lub podłącz obsługiwacz do warstwy cache, aby powtarzane renderowania były natychmiastowe. Nie ma ograniczeń, gdy kontrolujesz każdy zasób samodzielnie. + +Masz pytania lub ciekawy przypadek użycia, którym chcesz się podzielić? zostaw komentarz poniżej i powodzenia w renderowaniu! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/polish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..2ac666087 --- /dev/null +++ b/html/polish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: Dowiedz się, jak renderować HTML do PNG, konwertować stronę internetową + na obraz i zapisywać HTML jako PNG przy użyciu Aspose.HTML w C#. Szybko, niezawodnie + i gotowe do produkcji. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: pl +og_description: Opanuj renderowanie HTML do PNG, konwertowanie strony internetowej + na obraz oraz zapisywanie HTML jako PNG przy użyciu pełnego przykładu w C# z Aspose.HTML. +og_title: Jak renderować HTML do PNG – Kompletny przewodnik +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Jak renderować HTML do PNG – Kompletny przewodnik krok po kroku +url: /pl/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Jak renderować HTML do PNG – Kompletny przewodnik krok po kroku + +Jeśli szukasz **how to render html** w obraz, trafiłeś we właściwe miejsce. Niezależnie od tego, czy potrzebujesz **convert webpage to image** do miniatur, archiwizować stronę jako PNG, czy generować podglądy w mediach społecznościowych w locie, proces może być zaskakująco prosty przy użyciu odpowiedniej biblioteki. + +W tym samouczku przeprowadzimy Cię krok po kroku przez konwersję dowolnego aktywnego URL do pliku PNG przy użyciu Aspose.HTML for .NET. Zobaczysz kompletny, działający fragment kodu, dowiesz się, dlaczego każde ustawienie ma znaczenie, oraz odkryjesz kilka sztuczek radzenia sobie z przypadkami brzegowymi. Po zakończeniu będziesz w stanie **save html as png**, **convert html to png**, a nawet osadzić wynik w raporcie lub e‑mailu bez problemu. + +## Wymagania wstępne – Co będzie potrzebne + +- **.NET 6.0** lub nowszy (kod działa również z .NET Core i .NET Framework) +- Pakiet NuGet **Aspose.HTML for .NET** (`Aspose.Html`) zainstalowany +- IDE według własnego wyboru (Visual Studio, Rider lub VS Code) +- Zapisywalny folder, w którym zostanie zapisany plik PNG + +Nie wymagana jest dodatkowa konfiguracja — Aspose.HTML zajmuje się ciężką pracą parsowania strony, stosowania CSS i rasteryzacji układu. + +## Krok 1: Załaduj dokument HTML, który chcesz wyrenderować + +Pierwszą rzeczą, której potrzebujesz, jest instancja `HTMLDocument` wskazująca na stronę, którą chcesz przechwycić. Aspose.HTML może ładować z URL, lokalnego pliku lub surowego łańcucha HTML. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Why this matters:** Ładowanie dokumentu bezpośrednio z URL zapewnia automatyczne pobranie wszystkich zewnętrznych zasobów (CSS, JavaScript, obrazy), co daje wierne odwzorowanie bieżącej strony. + +## Krok 2: Skonfiguruj opcje renderowania obrazu + +Następnie ustawiamy `ImageRenderingOptions`. Opcje te kontrolują rozmiar wyjściowy, jakość oraz czy zastosować antyaliasing. Dostosowywanie ich pozwala wyważyć rozmiar pliku względem jakości wizualnej. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** Jeśli potrzebujesz miniatury o wyższej rozdzielczości, zwiększ proporcjonalnie `Width` i `Height`. Aspose.HTML przeskaluje układ odpowiednio, nie tracąc jakości wektorowej. + +## Krok 3: Zainicjalizuj renderer obrazu + +Teraz tworzymy `ImageRenderer`, przekazując dokument oraz opcje, które właśnie zdefiniowaliśmy. Ten obiekt jest silnikiem, który faktycznie rysuje stronę na bitmapie. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **What’s happening under the hood?** Renderer parsuje DOM, oblicza style CSS, wykonuje układ, a na końcu rasteryzuje każdy element na płótnie pikselowym. Wszystko to odbywa się w pamięci, więc nie potrzebujesz okna przeglądarki. + +## Krok 4: Renderuj i zapisz plik PNG + +Na koniec wywołaj `Render` z pełną ścieżką, w której ma zostać zapisany PNG. Metoda zapisuje plik synchronicznie i automatycznie zwalnia wewnętrzne zasoby. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Expected result:** Po uruchomieniu programu znajdziesz `example.png` w folderze `output`. Otwórz go dowolnym przeglądarką obrazów i powinieneś zobaczyć wierny zrzut `https://example.com` w rozdzielczości 800×600 px. + +--- + +### Pełny, gotowy do uruchomienia przykład + +Poniżej znajduje się kompletny program, który możesz skopiować i wkleić do nowego projektu konsolowego. Zawiera wszystkie dyrektywy `using`, obsługę błędów i komentarze dla przejrzystości. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Uruchom program (`dotnet run` z folderu projektu) i otrzymasz PNG odzwierciedlający bieżącą stronę. To **how to render html** przy użyciu kilku linii C#. + +--- + +## Najczęściej zadawane pytania i przypadki brzegowe + +### Czy mogę renderować lokalny plik HTML zamiast URL? + +Oczywiście. Zastąp URL ścieżką do pliku: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Co jeśli strona używa JavaScript do modyfikacji DOM po załadowaniu? + +Aspose.HTML wykonuje większość skryptów po stronie klienta, ale nie zapewnia pełnego silnika przeglądarki. W przypadku intensywnie skryptowanych stron może być konieczne wstępne renderowanie HTML (np. przy użyciu bezgłowego Chromium) i przekazanie powstałego markupu do Aspose.HTML. + +### Jak kontrolować poziom kompresji PNG? + +`ImageRenderingOptions` zawiera właściwość `CompressionLevel` (0–9). Niższe liczby oznaczają większe pliki, ale wyższą jakość. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Potrzebuję przezroczystego tła — czy to możliwe? + +Tak. Ustaw kolor tła na przezroczysty przed renderowaniem: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Czy istnieje sposób na renderowanie wielu stron w jednym obrazie? + +Możesz iterować po kolekcji URL‑ów lub łańcuchów HTML, renderować każdy do bitmapy, a następnie łączyć je przy użyciu `System.Drawing` lub `ImageSharp`. Podstawowy krok **convert html to png** pozostaje taki sam. + +--- + +## Bonus: Osadzanie PNG w Web API + +Jeśli chcesz udostępnić tę funkcjonalność przez endpoint ASP.NET Core, po prostu zwróć bajty pliku: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Teraz każdy klient może wykonać żądanie `GET /render?url=https://example.com` i otrzymać PNG w locie — idealne dla usług **convert webpage to image**. + +--- + +## Podsumowanie + +Omówiliśmy wszystko, co musisz wiedzieć o **how to render html** do pliku PNG przy użyciu Aspose.HTML for .NET. Od ładowania zdalnej strony, konfiguracji opcji renderowania, po radzenie sobie z typowymi pułapkami, pełny przykład pokazuje dokładnie, jak **convert html to png**, **save html as png**, a nawet udostępnić logikę przez Web API. + +Wypróbuj to na własnych URL‑ach, eksperymentuj z różnymi wymiarami i być może zautomatyzuj generowanie miniatur dla swojego katalogu produktów. Nie ma granic, gdy opanujesz podstawy **render html to png**. + +*Gotowy, aby podnieść poziom?* Pobierz pakiet NuGet, wstaw kod do swojego projektu i zacznij już dziś konwertować strony internetowe na obrazy. Jeśli napotkasz problemy, zostaw komentarz — powodzenia w renderowaniu! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/net/canvas-and-image-manipulation/_index.md b/html/portuguese/net/canvas-and-image-manipulation/_index.md index 9aad2faa5..cd931ce96 100644 --- a/html/portuguese/net/canvas-and-image-manipulation/_index.md +++ b/html/portuguese/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aprenda como converter SVG para PDF com Aspose.HTML para .NET. Tutorial passo a Aprenda como converter SVG para XPS usando Aspose.HTML para .NET. Impulsione seu desenvolvimento web com esta biblioteca poderosa. ### [Como habilitar antialiasing em C# – bordas suaves](./how-to-enable-antialiasing-in-c-smooth-edges/) Aprenda a habilitar antialiasing em C# para obter bordas suaves em renderizações gráficas usando Aspose.HTML. +### [Criar texto no canvas – Guia completo para renderizar texto em imagens](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Aprenda a adicionar e estilizar texto em canvas usando Aspose.HTML, criando imagens com texto renderizado de forma avançada. ## Conclusão diff --git a/html/portuguese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/portuguese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..773d1373b --- /dev/null +++ b/html/portuguese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,236 @@ +--- +category: general +date: 2026-01-03 +description: Crie texto em canvas rapidamente e aprenda como renderizar imagem de + texto, definir opções de texto e preencher o canvas de texto enquanto melhora a + renderização de texto no Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: pt +og_description: Crie texto em canvas com Aspose HTML, aprenda a renderizar imagem + de texto, defina opções de texto e melhore a qualidade do texto no Linux em um único + tutorial. +og_title: Criar texto em canvas – Guia completo de renderização +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Criar texto em canvas – Guia completo para renderizar texto em imagens +url: /pt/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Criar texto em canvas – Guia Completo de Renderização + +Já precisou **criar texto em canvas** mas não sabia como obter glifos nítidos em todas as plataformas? Você não está sozinho. Muitos desenvolvedores encontram um obstáculo quando o texto fica borrado no Linux, especialmente ao converter HTML em imagem. + +Neste tutorial vamos percorrer uma solução prática que não só permite **renderizar imagem de texto** em um canvas Aspose HTML, mas também mostra como **definir opções de texto**, usar `FillText` corretamente e **melhorar a renderização de texto no Linux** com hinting. Ao final, você terá um trecho de código autocontido e executável que pode ser inserido em qualquer projeto .NET. + +## O que você vai aprender + +- Como instanciar um objeto `Canvas` e prepará‑lo para desenho. +- O papel de `TextOptions` e por que habilitar hinting é importante no Linux. +- Código passo a passo que **preenche canvas com texto** usando caracteres estilizados e de alta qualidade. +- Armadilhas comuns (hinting ausente, sistema de coordenadas errado) e correções rápidas. +- Formas de estender o exemplo: fontes personalizadas, cores e texto multilinha. + +> **Pré‑requisito:** .NET 6+ (ou .NET Framework 4.7.2) e o pacote NuGet Aspose.HTML for .NET instalado. + +--- + +## Etapa 1: Configurar o projeto e as importações + +Antes de começar a desenhar, certifique‑se de que seu projeto referencia os assemblies corretos. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Dica profissional:** Se você estiver no Linux, adicione o pacote `libgdiplus` (`sudo apt-get install libgdiplus`) para que a renderização baseada em GDI funcione sem problemas. + +--- + +## Etapa 2: Criar um canvas e definir seu tamanho + +Um canvas é essencialmente um bitmap off‑screen no qual você pode pintar. Pense nele como sua prancheta digital. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Por que isso importa:** Definir um fundo sólido evita artefatos transparentes quando você exportar a imagem posteriormente. + +--- + +## Etapa 3: Configurar as opções de texto – A chave para texto nítido no Linux + +A renderização de fontes no Linux pode ficar borrada se o hinting estiver desativado. `TextOptions.UseHinting` indica ao renderizador que alinhe os glifos aos limites dos pixels, aguçando drasticamente o resultado. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **E se você pular isso?** Em muitas distribuições Linux o texto aparecerá ligeiramente borrado ou desalinhado, especialmente em tamanhos de fonte pequenos. + +--- + +## Etapa 4: Preencher texto no canvas + +Agora que o canvas está pronto e as opções de texto ajustadas, podemos realmente **preencher canvas com texto**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Se quiser estilizar (cor, tamanho da fonte, alinhamento), envolva a chamada em um `Font` e um `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Etapa 5: Exportar o canvas como arquivo de imagem + +A etapa final é gravar o bitmap renderizado no disco para que você possa verificar o resultado. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Abra `canvas-output.png` e você deverá ver texto nítido e corretamente com hinting — esteja você no Windows, macOS ou Linux. + +--- + +## Perguntas frequentes e casos de borda + +### Como o hinting afeta o desempenho? + +Habilitar hinting adiciona uma sobrecarga insignificante (geralmente < 2 ms para um canvas 800×600). O ganho visual supera amplamente o custo, especialmente em geração de imagens no lado do servidor onde a qualidade é primordial. + +### E se eu precisar de texto multilinha? + +Use `canvas.FillText` em um loop, ajustando a coordenada Y, ou utilize a sobrecarga de `canvas.FillText` que aceita um objeto `TextLayout` para quebra automática de linhas. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Posso usar uma fonte TrueType personalizada? + +Com certeza. Carregue a fonte com `FontFamily` e atribua-a a `TextOptions.FontFamily` ou diretamente ao `Font` que você passa para `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Certifique‑se de que o arquivo de fonte esteja acessível em tempo de execução (coloque‑o na pasta do projeto ou registre‑o no sistema). + +--- + +## Exemplo completo em funcionamento + +Abaixo está o programa completo, pronto para copiar e colar, que incorpora todas as etapas acima. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Saída esperada:** Um arquivo PNG chamado `canvas-output.png` contendo duas linhas de texto — uma simples e outra em negrito azul — ambas renderizadas nitidamente graças ao hinting. + +--- + +## Conclusão + +Acabamos de **criar texto em canvas** do zero, aprendemos como **renderizar imagem de texto** com Aspose.HTML e descobrimos por que **definir opções de texto** como `UseHinting` é essencial para **melhorar a qualidade do texto no Linux**. Seguindo os passos acima, você pode preencher canvas com texto de forma confiável em qualquer ambiente .NET, seja gerando miniaturas, marcas d'água ou gráficos dinâmicos para APIs web. + +Pronto para o próximo desafio? Experimente adicionar gradientes de fundo, girar o texto ou exportar para SVG para dimensionamento vetorial perfeito. Os mesmos princípios — `TextOptions` adequados, tratamento cuidadoso das coordenadas e descarte limpo — se aplicam a todos os formatos. + +Se você encontrou alguma peculiaridade ou tem ideias para extensões, deixe um comentário. Boa codificação e aproveite esses caracteres afiados como navalha! + +--- + +*Imagem ilustrando um canvas com texto nítido (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/net/html-document-manipulation/_index.md b/html/portuguese/net/html-document-manipulation/_index.md index f8cc49725..17d9b7635 100644 --- a/html/portuguese/net/html-document-manipulation/_index.md +++ b/html/portuguese/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Aprenda a criar conteúdo dinâmico e web usando Aspose.HTML para .NET. Fortale Aprenda a usar Aspose.HTML para .NET. Importe namespace, mescle HTML com XML e aprimore suas habilidades de desenvolvimento web com este guia abrangente. ### [Gerar documentos XPS por XpsDevice em .NET com Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Desbloqueie o potencial do desenvolvimento web com Aspose.HTML para .NET. Crie, converta e manipule documentos HTML facilmente. +### [Criar documento HTML com Aspose.HTML – Guia passo a passo](./create-html-document-with-aspose-html-step-by-step-guide/) +Aprenda a criar documentos HTML usando Aspose.HTML com um guia passo a passo e exemplos práticos. ## Conclusão @@ -78,4 +80,4 @@ Concluindo, se você quer dominar a manipulação de documentos HTML usando Aspo {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/portuguese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..3976cd30b --- /dev/null +++ b/html/portuguese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,240 @@ +--- +category: general +date: 2026-01-03 +description: Crie um documento HTML em C# usando Aspose.HTML. Aprenda como anexar + um elemento ao corpo, definir o estilo da fonte e formatar texto HTML com um span + simples. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: pt +og_description: Crie um documento HTML em C# e veja como acrescentar um elemento ao + corpo, definir o estilo da fonte e formatar texto HTML usando Aspose.HTML. +og_title: Criar documento HTML com Aspose.HTML – Guia rápido +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Criar documento HTML com Aspose.HTML – Guia passo a passo +url: /pt/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Criar Documento HTML com Aspose.HTML – Guia Passo a Passo + +Já precisou **create html document** programaticamente e se perguntou por que a saída parece simples? Você não está sozinho. Em muitos projetos precisamos gerar trechos de código em tempo real — pense em modelos de e‑mail, relatórios dinâmicos ou pequenos widgets de UI. A boa notícia é que o Aspose.HTML facilita muito **create html document**, estilizar e inserir na sua página sem escrever strings brutas. + +Neste tutorial, percorreremos um exemplo completo que mostra como **append element to body**, **set font style** e **format text html** usando um **create span element**. Ao final, você terá um trecho de código C# executável que produz texto em negrito‑itálico dentro de um span, e entenderá o “porquê” de cada chamada. + +> **Pré-requisitos** +> • .NET 6 or later (any recent .NET runtime works) +> • Aspose.HTML for .NET NuGet package (`Aspose.Html`) installed +> • Basic familiarity with C# and DOM concepts + +Nenhuma outra biblioteca é necessária, e o código roda no Windows, Linux ou macOS. + +--- + +## O que você vai construir + +Criaremos um documento HTML mínimo, adicionaremos um `` que contém a frase **Bold‑Italic text**, aplicaremos tanto o estilo **bold** quanto **italic**, e finalmente **append element to body**. O markup final fica assim: + +```html + + + Bold‑Italic text + + +``` + +Você pode copiar‑colar o código completo ao final do guia e executá‑lo imediatamente. + +--- + +![Create HTML document example](image.png){alt="exemplo de documento html"} + +--- + +## Etapa 1 – Inicializar o HTMLDocument (a base de **create html document**) + +Antes de podermos **append element to body**, precisamos de um objeto documento para trabalhar. O Aspose.HTML fornece a classe `HTMLDocument` que representa um DOM em memória. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Por que isso importa*: Instanciar `HTMLDocument` fornece uma tela limpa — pense nela como uma folha em branco onde você mais tarde **format text html**. Sem esta etapa, você não pode manipular nós ou aplicar estilos. + +--- + +## Etapa 2 – Criar o elemento `` (**create span element**) + +Agora precisamos de um contêiner para nosso texto estilizado. Um `` é perfeito porque é um elemento inline que pode carregar CSS sem quebrar o fluxo. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Dica de profissional*: Se você precisar inserir múltiplas partes de texto, pode reutilizar o mesmo `spanElement` clonando‑o (`spanElement.Clone(true)`) e alterando o `InnerHtml` a cada vez. + +--- + +## Etapa 3 – Aplicar **set font style** para negrito **e** itálico + +O Aspose.HTML expõe um objeto `Style` fortemente tipado. Para **set font style** combinamos `WebFontStyle.Bold` e `WebFontStyle.Italic` usando um OR bit a bit. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Por que usar o enum*: O enum `WebFontStyle` mapeia diretamente para propriedades CSS (`font-weight` e `font-style`). Usar o enum evita erros de digitação e garante que o CSS gerado seja válido — essencial para um **format text html** confiável. + +--- + +## Etapa 4 – **Append element to body** e finalizar o documento + +Com o span estilizado pronto, a última etapa é colocá‑lo dentro da tag ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +Neste ponto, a árvore DOM está exatamente como o trecho mostrado anteriormente. Se você inspecionar `htmlDocument.InnerHtml`, verá o markup totalmente formado. + +--- + +## Etapa 5 – Salvar ou renderizar o documento + +Você pode escrever o HTML em um arquivo, enviá‑lo para um navegador ou renderizá‑lo em PDF/Imagem usando o motor de renderização do Aspose.HTML. Aqui está a opção mais simples de saída para arquivo: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Abra `output.html` em qualquer navegador e você deverá ver **Bold‑Italic text** exibido exatamente como esperado. + +--- + +## Exemplo Completo Funcional + +Juntando tudo, aqui está o programa completo, pronto‑para‑executar: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Saída esperada** – ao abrir `output.html` mostra: + +> **Bold‑Italic text** (negrito e itálico) + +Se você inspecionar o código‑fonte, verá o HTML exato que discutimos, confirmando que a etapa **format text html** foi bem‑sucedida. + +--- + +## Perguntas Frequentes & Casos de Borda + +### 1. E se eu precisar de mais de dois estilos? + +`WebFontStyle` é um enum de flags, então você pode combinar qualquer número de estilos (por exemplo, `Underline`). Basta continuar usando o operador `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Posso mudar a cor ao mesmo tempo? + +Claro. O objeto `Style` possui a propriedade `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Como faço **append element to body** várias vezes? + +Crie um loop, clone o span estilizado, ajuste o texto e anexe cada clone: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. E se eu precisar **format text html** dentro de um `
` ao invés? + +A mesma API funciona para qualquer elemento. Basta substituir `CreateElement("span")` por `CreateElement("div")` e ajustar os estilos conforme necessário. + +### 5. Preocupações de compatibilidade? + +O Aspose.HTML tem como alvo .NET Standard 2.0+, então o código roda em .NET Core, .NET Framework e .NET 5/6+. Nenhum shim específico de navegador adicional é necessário. + +--- + +## Dicas Profissionais & Armadilhas + +- **Pro tip:** Sempre defina `InnerHtml` *depois* de configurar o estilo. Alterar o conteúdo interno primeiro pode disparar um re‑layout em alguns navegadores; fazer isso após a estilização evita trabalho desnecessário. +- **Watch out for:** Misturar `WebFontStyle` com strings CSS inline. Se você definir manualmente `spanElement.SetAttribute("style", "...")` depois, sobrescreverá os estilos gerados pelo enum. Mantenha um único método. +- **Performance note:** Para documentos grandes, a criação em lote (criar todos os nós primeiro, depois anexá‑los de uma vez) reduz o número de mutações do DOM e acelera a renderização. + +--- + +## Conclusão + +Agora você sabe como **create html document** com Aspose.HTML, **append element to body**, **set font style** e **format text html** usando um **create span element**. O exemplo está totalmente funcional, e as explicações cobrem tanto o “como” quanto o “por quê”, facilitando a adaptação do padrão a cenários mais complexos. + +Pronto para o próximo passo? Experimente substituir o `` por um `

` com múltiplas classes CSS, ou renderizar o mesmo DOM para PDF usando `Document` → `PdfSaveOptions`. Os mesmos princípios se aplicam, e você descobrirá que o Aspose.HTML é um parceiro confiável para qualquer tarefa de geração de HTML no lado do servidor. + +Tem perguntas, ou descobriu um truque inteligente? Deixe um comentário abaixo — feliz codificação! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/net/html-extensions-and-conversions/_index.md b/html/portuguese/net/html-extensions-and-conversions/_index.md index e7ba92534..98bfe083e 100644 --- a/html/portuguese/net/html-extensions-and-conversions/_index.md +++ b/html/portuguese/net/html-extensions-and-conversions/_index.md @@ -63,6 +63,7 @@ Descubra como usar Aspose.HTML para .NET para manipular e converter documentos H Aprenda como converter HTML para TIFF com Aspose.HTML para .NET. Siga nosso guia passo a passo para otimização eficiente de conteúdo web. ### [Converter HTML para XPS em .NET com Aspose.HTML](./convert-html-to-xps/) Descubra o poder do Aspose.HTML para .NET: Converta HTML para XPS sem esforço. Pré-requisitos, guia passo a passo e FAQs inclusos. +### [Criar PDF a partir de URL – Guia Completo em C#](./create-pdf-from-url-complete-c-guide/) ## Conclusão @@ -74,4 +75,4 @@ Então, o que você está esperando? Vamos embarcar nessa jornada emocionante pa {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/portuguese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..30f5b8702 --- /dev/null +++ b/html/portuguese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,200 @@ +--- +category: general +date: 2026-01-03 +description: Crie PDF a partir de URL em C# rapidamente. Aprenda como converter HTML + em PDF, salvar página da web como PDF e gerar PDF a partir de HTML com código fácil. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: pt +og_description: Crie PDF a partir de URL em C# rapidamente. Este tutorial mostra como + converter HTML em PDF, salvar página da web como PDF e gerar PDF a partir de HTML + usando Aspose.HTML. +og_title: Criar PDF a partir de URL – Guia Completo de C# +tags: +- pdf +- csharp +- html +- conversion +title: Criar PDF a partir de URL – Guia Completo de C# +url: /pt/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Criar PDF a partir de URL – Guia Completo em C# + +Já precisou **criar PDF a partir de URL** mas não sabia qual biblioteca escolher? Você não está sozinho. Muitos desenvolvedores se deparam com esse obstáculo quando querem arquivar uma página web, gerar notas fiscais a partir de um modelo online ou simplesmente oferecer um botão “baixar como PDF” em seu site. + +Neste tutorial vamos percorrer todo o processo de **converter HTML para PDF** usando C#. Você verá como **salvar página da web como PDF**, como **gerar PDF a partir de HTML**, e por que a biblioteca `Aspose.HTML for .NET` torna tudo muito simples. Ao final, você terá um trecho pronto‑para‑executar que obtém qualquer URL pública, renderiza-a e grava um arquivo PDF no disco. + +> **Dica profissional:** Se você estiver trabalhando atrás de um proxy corporativo, certifique‑se de que o construtor `HTMLDocument` receba as configurações corretas de `WebRequest` — caso contrário o download falhará silenciosamente. + +## O que você vai precisar + +- **.NET 6.0** ou superior (o código também funciona no .NET Framework 4.7+). +- Pacote NuGet **Aspose.HTML for .NET** (`Aspose.HTML`). +- Uma pasta gravável no disco onde o PDF será salvo. +- Familiaridade básica com C# (nenhum truque avançado necessário). + +Nenhum arquivo de configuração extra, nenhuma mágica oculta — apenas algumas linhas de código limpo e comentado. + +![Create PDF from URL example](image.png){alt="criar pdf a partir de url"} + +## Etapa 1: Instalar o pacote NuGet Aspose.HTML + +Abra seu terminal ou o Package Manager Console e execute: + +```bash +dotnet add package Aspose.HTML +``` + +> **Por que esta etapa importa:** As classes `HTMLDocument`, `PdfSaveOptions` e `PdfConverter` estão no namespace `Aspose.Html`. Sem o pacote, o compilador não saberá o que são esses tipos. + +## Etapa 2: Carregar a página web em um `HTMLDocument` + +A primeira ação real é buscar o HTML remoto. `HTMLDocument` pode receber uma URL diretamente, lidando com redirecionamentos e detecção de tipo de conteúdo para você. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**O que está acontecendo?** +- `HTMLDocument` analisa o markup obtido em uma árvore DOM, assim como um navegador faria. +- Qualquer CSS externo, imagens ou scripts referenciados por URLs absolutas também são baixados, garantindo que o PDF tenha a mesma aparência da página ao vivo. + +## Etapa 3: Configurar as opções de exportação PDF (Margens, Tamanho da Página, etc.) + +Antes de entregar o documento ao conversor, ajustamos a saída. O objeto `PdfSaveOptions` permite definir margens, orientação da página e até a versão do PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Por que definir margens?** +Um PDF apertado pode cortar cabeçalhos ou rodapés, especialmente em sites otimizados para dispositivos móveis. Adicionar uma margem modesta garante que tudo permaneça legível. + +## Etapa 4: Converter o documento HTML diretamente para PDF + +Agora vem a parte pesada. `PdfConverter.ConvertHtml` transmite a página renderizada diretamente para um arquivo PDF. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Nos bastidores:** +- Aspose renderiza o DOM usando seu próprio motor de layout (sem necessidade de Chromium). +- O bitmap renderizado é então rasterizado em vetores PDF sempre que possível, preservando a capacidade de selecionar texto. + +## Etapa 5: Verificar o resultado e tratar casos especiais + +Uma verificação rápida evita dores de cabeça depois. Abra o arquivo gerado; você deverá ver a página ao vivo, com margens aplicadas e todas as imagens intactas. + +### Armadilhas comuns e como evitá‑las + +| Problema | Causa | Solução | +|----------|-------|---------| +| **PDF em branco** | URL bloqueada por firewall ou requer autenticação | Passe um `WebRequest` customizado com credenciais ao construtor `HTMLDocument` | +| **CSS ausente** | Folha de estilo externa usa URLs relativas | Garanta que a URL base esteja correta (Aspose lida com isso, mas verifique redirecionamentos) | +| **Tamanho de arquivo grande** | Imagens de alta resolução não são reduzidas | Use `PdfSaveOptions.ImageCompression` para compactar imagens incorporadas em JPEG | +| **Caracteres Unicode corrompidos** | Fonte não incorporada | Defina `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Exemplo completo (Pronto para copiar e colar) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Execute o programa (`dotnet run`) e você encontrará `example.pdf` em `C:\Temp`. Abra-o com qualquer visualizador de PDF e você deverá ver a réplica exata de `https://example.com` com as margens que definiu. + +## Conclusão + +Acabamos de mostrar **como criar PDF a partir de URL** usando C#. As etapas cobriram o carregamento de uma página web, a configuração de margens e a conversão do DOM para um arquivo PDF — tudo que você precisa para **converter HTML para PDF**, **salvar página da web como PDF** e **gerar PDF a partir de HTML** de forma pronta para produção. + +Sinta‑se à vontade para experimentar: altere o tamanho da página para `Letter`, troque a orientação para paisagem ou adicione um cabeçalho/rodapé usando `PdfPageEventHandler`. O mesmo padrão funciona para páginas dinâmicas, portais protegidos por login (basta fornecer cookies) ou até mesmo para processar em lote uma lista de URLs. + +**Próximos passos que você pode explorar** + +- **HTML para PDF C#** com conversão assíncrona para serviços de alta taxa de transferência. +- Inserir **metadados** (autor, título) no PDF via `PdfDocumentInfo`. +- Usar **Aspose.PDF** para mesclar vários PDFs gerados a partir de diferentes URLs em um único relatório. + +Tem perguntas? Deixe um comentário abaixo e feliz codificação! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/net/rendering-html-documents/_index.md b/html/portuguese/net/rendering-html-documents/_index.md index 2ffd9dc54..0c1965789 100644 --- a/html/portuguese/net/rendering-html-documents/_index.md +++ b/html/portuguese/net/rendering-html-documents/_index.md @@ -24,7 +24,7 @@ Para começar, você precisará instalar a biblioteca Aspose.HTML para .NET e co ## Por que escolher Aspose.HTML para .NET? -Aspose.HTML para .NET se destaca como uma escolha principal para renderização de HTML devido aos seus recursos ricos, excelente documentação e suporte ativo da comunidade. Aqui está o motivo pelo qual você deve considerar usá-lo: +Aspose.HTML para .NET se destaca como uma escolha principal para renderização de HTML devido aos seus recursos ricos, excelente documentação e suporte ativo da comunidade. Aqui está o motivo pelo qual você deve considerá-lo: - Renderização poderosa: o Aspose.HTML para .NET fornece recursos de renderização HTML de alta qualidade, garantindo que seus documentos tenham ótima aparência sempre. @@ -42,6 +42,8 @@ Agora que você configurou o Aspose.HTML para .NET, é hora de explorar os tutor ### [Renderizar HTML como PNG em .NET com Aspose.HTML](./render-html-as-png/) Aprenda a trabalhar com Aspose.HTML para .NET: Manipule HTML, converta para vários formatos e muito mais. Mergulhe neste tutorial abrangente! +### [Como Renderizar HTML para PNG – Guia Completo Passo a Passo](./how-to-render-html-to-png-complete-step-by-step-guide/) +Aprenda a converter HTML em PNG usando Aspose.HTML para .NET com instruções detalhadas passo a passo. ### [Renderizar EPUB como XPS em .NET com Aspose.HTML](./render-epub-as-xps/) Aprenda como criar e renderizar documentos HTML com Aspose.HTML para .NET neste tutorial abrangente. Mergulhe no mundo da manipulação de HTML, web scraping e muito mais. ### [Tempo limite de renderização em .NET com Aspose.HTML](./rendering-timeout/) @@ -52,9 +54,12 @@ Aprenda a controlar efetivamente os tempos limite de renderização no Aspose.HT Aprenda a renderizar vários documentos HTML usando Aspose.HTML para .NET. Aumente suas capacidades de processamento de documentos com esta poderosa biblioteca. ### [Renderizar documento SVG como PNG em .NET com Aspose.HTML](./render-svg-doc-as-png/) Desbloqueie o poder do Aspose.HTML para .NET! Aprenda como renderizar SVG Doc como PNG sem esforço. Mergulhe em exemplos passo a passo e FAQs. Comece agora! +### [Como Renderizar HTML – Guia Completo com Manipulador de Recursos Personalizado](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Aprenda a renderizar HTML usando um manipulador de recursos personalizado para controlar imagens, scripts e estilos durante a renderização. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/portuguese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..f3fc19e23 --- /dev/null +++ b/html/portuguese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,230 @@ +--- +category: general +date: 2026-01-03 +description: Como renderizar HTML em imagens usando Aspose.HTML. Aprenda a conversão + de HTML para imagem, manipulador de recursos personalizado e converta HTML em bitmap + em C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: pt +og_description: Como renderizar HTML em imagens usando Aspose.HTML. Domine a conversão + de HTML para imagem, manipulador de recursos personalizado e converta HTML para + bitmap em C#. +og_title: Como Renderizar HTML – Guia Completo com Manipulador de Recursos Personalizado +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Como Renderizar HTML – Guia Completo com Manipulador de Recursos Personalizado +url: /pt/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Como Renderizar HTML – Guia Completo com Manipulador de Recursos Personalizado + +Já se perguntou **como renderizar HTML** em um bitmap sem precisar lidar com um motor de navegador? Você não está sozinho. Muitos desenvolvedores se deparam com a necessidade de uma captura rápida de uma página dinâmica para e‑mails, relatórios ou miniaturas. A boa notícia? Com Aspose.HTML você pode transformar qualquer string HTML em uma imagem — sem UI, sem Chrome headless, apenas código C# puro. + +Neste tutorial vamos percorrer um cenário prático de **conversão de html para imagem**, mostrar como **implementar um manipulador de recursos personalizado** e demonstrar todo o fluxo de **conversão de html para bitmap**. Ao final, você terá um método reutilizável que renderiza HTML para uma imagem totalmente em memória, pronto para processamento ou armazenamento adicional. + +> **Pré‑requisitos** +> * .NET 6+ (ou .NET Framework 4.7.2+) +> * Pacote NuGet Aspose.HTML for .NET (`Aspose.Html`) +> * Familiaridade básica com C# e streams + +Se você já tem esses fundamentos, vamos mergulhar. + +--- + +## Como Renderizar HTML com Aspose.HTML + +O núcleo de qualquer operação de **render html to image** é a classe `ImageRenderer`. Ela recebe um `HTMLDocument` e gera gráficos raster (PNG, JPEG, BMP, etc.). A seguir está o esqueleto mínimo: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Esse trecho funciona, mas você só obtém um arquivo no disco se indicar ao renderizador onde gravá‑lo. Para manter tudo em memória — e interceptar cada recurso (imagens, CSS, fontes) que o HTML solicita — vamos conectar um **manipulador de recursos personalizado**. + +--- + +## Implementando um Manipulador de Recursos Personalizado + +Um **manipulador de recursos personalizado** dá controle total sobre como os ativos externos são obtidos e armazenados. Na maioria dos casos você desejará capturar esses ativos em memória para uso posterior (por exemplo, empacotá‑los em um ZIP). O manipulador herda de `ResourceHandler` e sobrescreve `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Por que fazer isso?** +* **Desempenho** – sem I/O de disco, tudo permanece em RAM. +* **Segurança** – você controla quais URLs podem ser buscadas. +* **Extensibilidade** – pode armazenar em cache recursos, renomeá‑los ou incorporá‑los em outros contêineres. + +--- + +## Converter HTML para Bitmap Usando ImageRenderer + +Agora juntamos as peças: carregamos o HTML, anexamos `MyHandler` e renderizamos. O método a seguir devolve um `MemoryStream` contendo uma imagem PNG da página renderizada. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Saída Esperada + +Se você chamar o método assim: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Você obterá um `demo.png` que se parece aproximadamente com: + +![exemplo de saída de como renderizar html](https://example.com/assets/render-html-output.png "exemplo de saída de como renderizar html") + +*Texto alternativo:* **exemplo de saída de como renderizar html** – um pequeno bitmap mostrando o trecho de HTML renderizado. + +--- + +## Conversão de HTML para Imagem – Armadilhas Comuns & Dicas + +### 1. URLs Relativas & Tags Base +Se seu HTML referencia CSS ou imagens externas com caminhos relativos, o renderizador não saberá a pasta base. Você pode: + +* Adicionar uma tag ``, ou +* Resolver URLs dentro de `MyHandler.HandleResource` e servir o stream correto. + +### 2. Disponibilidade de Fontes +Aspose.HTML usa fontes do sistema por padrão. Para fontes web personalizadas (`@font-face`), garanta que os arquivos de fonte estejam acessíveis via o manipulador, ou incorpore‑os como URIs de dados base64. + +### 3. Páginas Grandes +Renderizar uma página muito alta pode consumir memória significativa. Você pode limitar o tamanho da viewport: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Formatos de Imagem +`renderer.Save(stream, ImageFormat.Jpeg)` funciona igualmente bem se precisar de compressão JPEG. Substitua `ImageFormat.Png` por `ImageFormat.Bmp` para obter uma saída verdadeira de **convert html to bitmap**. + +--- + +## Renderizar HTML para Imagem – Cenários Avançados + +### A. Renderizando Múltiplas Páginas +Se o HTML contém quebras de página (`
`), você pode iterar sobre as páginas: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Incorporando a Imagem em um PDF +Combine com `Aspose.Pdf` para incorporar o PNG diretamente: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## Conclusão + +Cobremos **como renderizar HTML** em um bitmap totalmente em memória, exploramos os fundamentos da **conversão de html para imagem**, construímos um **manipulador de recursos personalizado** e mostramos como **converter html para bitmap** usando `ImageRenderer` do Aspose.HTML. A abordagem é rápida, thread‑safe e facilmente extensível para projetos reais — desde geração de miniaturas para e‑mail até criação automatizada de relatórios. + +Pronto para o próximo passo? Experimente trocar a saída PNG por JPEG, teste diferentes tamanhos de página ou conecte o manipulador a uma camada de cache para que renderizações repetidas sejam instantâneas. O céu é o limite quando você controla cada recurso. + +Tem perguntas ou um caso de uso interessante que gostaria de compartilhar? Deixe um comentário abaixo e boa renderização! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/portuguese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..a6afed765 --- /dev/null +++ b/html/portuguese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,231 @@ +--- +category: general +date: 2026-01-03 +description: Aprenda a renderizar HTML em PNG, converter página da web em imagem e + salvar HTML como PNG usando Aspose.HTML em C#. Rápido, confiável e pronto para produção. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: pt +og_description: Domine como renderizar HTML em PNG, converter página da web em imagem + e salvar HTML como PNG com um exemplo completo em C# usando Aspose.HTML. +og_title: Como Renderizar HTML para PNG – Guia Completo +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Como Renderizar HTML para PNG – Guia Completo Passo a Passo +url: /pt/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Como Renderizar HTML para PNG – Guia Completo Passo a Passo + +Se você está procurando **como renderizar html** em uma imagem, chegou ao lugar certo. Seja para **converter página da web em imagem** para miniaturas, arquivar uma página como PNG ou gerar pré‑visualizações de redes sociais em tempo real, o processo pode ser surpreendentemente simples com a biblioteca correta. + +Neste tutorial vamos percorrer o processo de transformar qualquer URL ao vivo em um arquivo PNG usando Aspose.HTML para .NET. Você verá um trecho de código completo e executável, entenderá por que cada configuração é importante e descobrirá alguns truques para lidar com casos extremos. Ao final, você será capaz de **salvar html como png**, **converter html para png** e até mesmo incorporar o resultado em um relatório ou e‑mail sem esforço. + +## Pré‑requisitos – O Que Você Precisa + +Antes de mergulharmos, certifique‑se de que tem o seguinte: + +- **.NET 6.0** ou superior (o código funciona também com .NET Core e .NET Framework) +- Pacote NuGet **Aspose.HTML for .NET** (`Aspose.Html`) instalado +- Uma IDE de sua escolha (Visual Studio, Rider ou VS Code) +- Uma pasta gravável onde o PNG será salvo + +Nenhuma configuração extra é necessária — Aspose.HTML cuida de todo o trabalho pesado de analisar a página, aplicar CSS e rasterizar o layout. + +## Etapa 1: Carregar o Documento HTML que Você Deseja Renderizar + +A primeira coisa que você precisa é uma instância de `HTMLDocument` que aponte para a página que deseja capturar. Aspose.HTML pode carregar a partir de uma URL, de um arquivo local ou de uma string HTML bruta. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Por que isso importa:** Carregar o documento diretamente da URL garante que todos os recursos externos (CSS, JavaScript, imagens) sejam buscados automaticamente, proporcionando uma renderização fiel da página ao vivo. + +## Etapa 2: Configurar as Opções de Renderização de Imagem + +Em seguida, configuramos `ImageRenderingOptions`. Essas opções controlam o tamanho de saída, a qualidade e se o anti‑aliasing será aplicado. Ajustá‑las permite equilibrar o tamanho do arquivo com a fidelidade visual. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Dica de especialista:** Se precisar de uma miniatura de alta resolução, aumente `Width` e `Height` proporcionalmente. Aspose.HTML escalará o layout adequadamente sem perder a qualidade vetorial. + +## Etapa 3: Inicializar o Renderizador de Imagem + +Agora criamos um `ImageRenderer` passando o documento e as opções que acabamos de definir. Esse objeto é o motor que realmente desenha a página em um bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **O que está acontecendo nos bastidores?** O renderizador analisa o DOM, calcula os estilos CSS, realiza o layout e, finalmente, rasteriza cada elemento em uma tela de pixels. Tudo isso ocorre na memória, portanto não é necessário abrir uma janela de navegador. + +## Etapa 4: Renderizar e Salvar o Arquivo PNG + +Por fim, chame `Render` com o caminho completo onde deseja que o PNG seja armazenado. O método grava o arquivo de forma síncrona e libera os recursos internos automaticamente. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Resultado esperado:** Após executar o programa, você encontrará `example.png` dentro da pasta `output`. Abra‑o com qualquer visualizador de imagens e verá uma captura fiel de `https://example.com` em 800×600 px. + +--- + +### Exemplo Completo Pronto‑para‑Executar + +Abaixo está o programa completo que você pode copiar‑colar em um novo projeto de console. Ele inclui todas as diretivas `using`, tratamento de erros e comentários para clareza. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Execute o programa (`dotnet run` a partir da pasta do projeto) e você obterá um PNG que espelha a página ao vivo. Esse é **como renderizar html** com apenas algumas linhas de C#. + +--- + +## Perguntas Frequentes & Casos Especiais + +### Posso renderizar um arquivo HTML local em vez de uma URL? + +Com certeza. Substitua a URL por um caminho de arquivo: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### E se a página usar JavaScript para modificar o DOM após o carregamento? + +Aspose.HTML executa a maioria dos scripts client‑side, mas não fornece um motor de navegador completo. Para páginas muito scriptadas, talvez seja necessário pré‑renderizar o HTML (por exemplo, usando uma instância headless do Chromium) e então alimentar o markup resultante ao Aspose.HTML. + +### Como controlo o nível de compressão do PNG? + +`ImageRenderingOptions` inclui a propriedade `CompressionLevel` (0–9). Números menores geram arquivos maiores, porém com qualidade superior. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Preciso de fundo transparente — isso é possível? + +Sim. Defina a cor de fundo como transparente antes de renderizar: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Existe uma maneira de renderizar várias páginas em uma única imagem? + +Você pode percorrer uma coleção de URLs ou strings HTML, renderizar cada uma para um bitmap e então juntá‑las usando `System.Drawing` ou `ImageSharp`. A etapa central **convert html to png** permanece a mesma. + +--- + +## Bônus: Incorporando o PNG em uma Web API + +Se quiser expor essa funcionalidade via um endpoint ASP.NET Core, basta retornar os bytes do arquivo: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Agora qualquer cliente pode solicitar `GET /render?url=https://example.com` e receber um PNG em tempo real — perfeito para serviços de **convert webpage to image**. + +--- + +## Conclusão + +Cobrimos tudo o que você precisa saber sobre **como renderizar html** em um arquivo PNG usando Aspose.HTML para .NET. Desde o carregamento de uma página remota, configuração das opções de renderização, até o tratamento de armadilhas comuns, o exemplo completo mostra exatamente como **convert html to png**, **save html as png** e até mesmo expor a lógica através de uma Web API. + +Experimente com suas próprias URLs, teste diferentes dimensões e, quem sabe, automatize a geração de miniaturas para o catálogo de produtos. O céu é o limite depois que você dominar o básico de **render html to png**. + +--- + +*Pronto para evoluir?* Baixe o pacote NuGet, insira o código no seu projeto e comece a converter páginas da web em imagens hoje mesmo. Se encontrar algum problema, deixe um comentário — boa renderização! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/net/canvas-and-image-manipulation/_index.md b/html/russian/net/canvas-and-image-manipulation/_index.md index 8e9c8d45d..9cabcf56f 100644 --- a/html/russian/net/canvas-and-image-manipulation/_index.md +++ b/html/russian/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aspose.HTML для .NET упрощает редактирование изобр Узнайте, как преобразовать SVG в XPS с помощью Aspose.HTML для .NET. Ускорьте свою веб-разработку с помощью этой мощной библиотеки. ### [Как включить антиалиасинг в C# – плавные края](./how-to-enable-antialiasing-in-c-smooth-edges/) Узнайте, как включить антиалиасинг в C# для получения плавных краев графики. +### [Создание текста на холсте – Полное руководство по рендерингу текста на изображениях](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Подробное руководство по добавлению и стилизации текста на изображениях с помощью холста в Aspose.HTML для .NET. ## Заключение diff --git a/html/russian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/russian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..31ddfab2b --- /dev/null +++ b/html/russian/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,236 @@ +--- +category: general +date: 2026-01-03 +description: Быстро создавайте текст на холсте, изучайте, как рендерить изображение + текста, задавать параметры текста и заполнять текстовый холст, улучшая рендеринг + текста в Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: ru +og_description: Создайте текст на холсте с помощью Aspose HTML, научитесь рендерить + текстовое изображение, задавать параметры текста и улучшать качество текста в Linux + в одном руководстве. +og_title: Создание текста на холсте — Полное руководство по рендерингу +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Создание текста на холсте – Полное руководство по отображению текста на изображениях +url: /ru/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Создание текста на canvas – Полное руководство по рендерингу + +Когда‑то вам нужно было **создать текст на canvas**, но вы не знали, как получить чёткие глифы на любой платформе? Вы не одиноки. Многие разработчики сталкиваются с проблемой, когда их текст выглядит размытым в Linux, особенно при конвертации HTML в изображение. + +В этом руководстве мы пройдём практическое решение, которое не только позволяет **рендерить изображение текста** на canvas Aspose HTML, но и показывает, как **установить параметры текста**, правильно использовать `FillText` и **улучшить рендеринг текста в Linux** с помощью хинтинга. К концу вы получите автономный, готовый к запуску фрагмент кода, который можно вставить в любой .NET‑проект. + +## Что вы узнаете + +- Как создать объект `Canvas` и подготовить его к рисованию. +- Роль `TextOptions` и почему включение хинтинга важно в Linux. +- Пошаговый код, который **заполняет canvas текстом** стилизованными, высококачественными символами. +- Распространённые подводные камни (отсутствие хинтинга, неверная система координат) и быстрые исправления. +- Способы расширить пример: пользовательские шрифты, цвета и многострочный текст. + +> **Предварительные требования:** .NET 6+ (или .NET Framework 4.7.2) и установленный NuGet‑пакет Aspose.HTML for .NET. + +--- + +## Шаг 1: Настройка проекта и импортов + +Прежде чем начать рисовать, убедитесь, что ваш проект ссылается на нужные сборки. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Совет:** Если вы работаете в Linux, установите пакет `libgdiplus` (`sudo apt-get install libgdiplus`), чтобы рендеринг на основе GDI работал без проблем. + +--- + +## Шаг 2: Создание canvas и определение его размеров + +Canvas — это по сути bitmap вне экрана, на котором можно рисовать. Представьте его как вашу цифровую доску. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Почему это важно:** Установка сплошного фона предотвращает появление прозрачных артефактов при последующем экспорте изображения. + +--- + +## Шаг 3: Настройка параметров текста – ключ к чёткому тексту в Linux + +Рендеринг шрифтов в Linux может выглядеть размытым, если хинтинг отключён. `TextOptions.UseHinting` сообщает рендереру выравнивать глифы по границам пикселей, что значительно повышает резкость результата. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Что произойдёт, если пропустить этот шаг?** На многих дистрибутивах Linux текст будет слегка размытым или смещённым, особенно при небольших размерах шрифта. + +--- + +## Шаг 4: Заполнение текста на canvas + +Теперь, когда canvas готов, а параметры текста настроены, мы можем действительно **заполнить canvas текстом**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Если требуется пользовательское оформление (цвет, размер шрифта, выравнивание), оберните вызов в `Font` и `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Шаг 5: Экспорт canvas в файл изображения + +Последний шаг — записать отрендеренный bitmap на диск, чтобы проверить результат. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Откройте `canvas-output.png`, и вы увидите чёткий, правильно хинтованный текст — независимо от того, работаете ли вы в Windows, macOS или Linux. + +--- + +## Часто задаваемые вопросы и особые случаи + +### Как хинтинг влияет на производительность? + +Включение хинтинга добавляет незначительные накладные расходы (обычно < 2 мс для canvas 800×600). Визуальная выгода значительно превышает стоимость, особенно при серверной генерации изображений, где качество имеет первостепенное значение. + +### Что делать, если нужен многострочный текст? + +Используйте `canvas.FillText` в цикле, корректируя координату Y, либо примените перегрузку `canvas.FillText`, принимающую объект `TextLayout` для автоматического переноса строк. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Можно ли использовать пользовательский TrueType‑шрифт? + +Конечно. Загрузите шрифт через `FontFamily` и назначьте его `TextOptions.FontFamily` или напрямую в `Font`, который передаёте в `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Убедитесь, что файл шрифта доступен во время выполнения (разместите его в папке проекта или зарегистрируйте системно). + +--- + +## Полный рабочий пример + +Ниже представлена полностью готовая к копированию программа, включающая все шаги, описанные выше. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Ожидаемый результат:** PNG‑файл `canvas-output.png` с двумя строками текста — одна обычная, другая жирная синяя — обе отрисованы чётко благодаря хинтингу. + +--- + +## Заключение + +Мы только что **создали текст на canvas** с нуля, научились **рендерить изображение текста** с помощью Aspose.HTML и выяснили, почему **установка параметров текста**, таких как `UseHinting`, необходима для **улучшения качества текста в Linux**. Следуя приведённым шагам, вы сможете надёжно **заполнять canvas текстом** в любой среде .NET, будь то генерация миниатюр, водяных знаков или динамической графики для веб‑API. + +Готовы к следующему вызову? Попробуйте добавить градиенты фона, вращать текст или экспортировать в SVG для векторного масштабирования без потерь. Те же принципы — правильные `TextOptions`, продуманный контроль координат и корректное освобождение ресурсов — применимы ко всем форматам. + +Если вы столкнулись с какими‑либо странностями или у вас есть идеи для расширения, оставляйте комментарий. Приятного кодинга и наслаждайтесь острыми, как бритва, символами! + +--- + +*Изображение, иллюстрирующее canvas с чётким текстом (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/net/html-document-manipulation/_index.md b/html/russian/net/html-document-manipulation/_index.md index 922b70d2a..c76db99ad 100644 --- a/html/russian/net/html-document-manipulation/_index.md +++ b/html/russian/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Aspose.HTML для .NET выделяется своей простотой и м Изучите использование Aspose.HTML для .NET. Импортируйте пространство имен, объединяйте HTML с XML и улучшайте свои навыки веб-разработки с помощью этого всеобъемлющего руководства. ### [Генерация документов XPS с помощью XpsDevice в .NET с Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Раскройте потенциал веб-разработки с Aspose.HTML для .NET. Создавайте, конвертируйте и обрабатывайте HTML-документы легко. +### [Создание HTML‑документа с Aspose.HTML – пошаговое руководство](./create-html-document-with-aspose-html-step-by-step-guide/) +Узнайте, как создать HTML‑документ с помощью Aspose.HTML, следуя пошаговым инструкциям и примерам. ## Заключение @@ -78,4 +80,4 @@ Aspose.HTML для .NET выделяется своей простотой и м {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/russian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..b6d15c644 --- /dev/null +++ b/html/russian/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,240 @@ +--- +category: general +date: 2026-01-03 +description: Создайте HTML‑документ на C# с использованием Aspose.HTML. Узнайте, как + добавить элемент в body, установить стиль шрифта и отформатировать текст HTML с + помощью простого span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: ru +og_description: Создайте HTML‑документ на C# и посмотрите, как добавить элемент в body, + установить стиль шрифта и отформатировать текст HTML с помощью Aspose.HTML. +og_title: Создание HTML‑документа с Aspose.HTML – Краткое руководство +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Создание HTML‑документа с Aspose.HTML – пошаговое руководство +url: /ru/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Создание HTML‑документа с помощью Aspose.HTML – пошаговое руководство + +Когда‑нибудь вам нужно было **create html document** программно и вы задавались вопросом, почему результат выглядит простым? Вы не одиноки. Во многих проектах нам приходится генерировать фрагменты «на лету» — например, шаблоны писем, динамические отчёты или небольшие UI‑виджеты. Хорошая новость в том, что Aspose.HTML делает процесс **create html document** простым: вы можете создавать документ, стилизовать его и вставлять в страницу без написания сырых строк. + +В этом руководстве мы пройдем полный пример, показывающий, как **append element to body**, **set font style** и **format text html** с использованием **create span element**. К концу у вас будет готовый C#‑фрагмент, который выводит полужирный‑курсивный текст внутри ``, и вы поймёте, «почему» каждого вызова. + +> **Prerequisites** +> • .NET 6 или новее (подойдёт любой современный .NET‑runtime) +> • NuGet‑пакет Aspose.HTML for .NET (`Aspose.Html`) установлен +> • Базовое знакомство с C# и концепциями DOM + +Никаких дополнительных библиотек не требуется, а код работает на Windows, Linux и macOS. + +--- + +## Что вы построите + +Мы создадим минимальный HTML‑документ, добавим ``, содержащий фразу **Bold‑Italic text**, применим стили **bold** и **italic**, а затем **append element to body**. Финальная разметка выглядит так: + +```html + + + Bold‑Italic text + + +``` + +Вы можете скопировать‑вставить полный исходный код в конце руководства и сразу запустить его. + +--- + +![Create HTML document example](image.png){alt="пример создания html документа"} + +--- + +## Шаг 1 – Инициализация HTMLDocument (основа **create html document**) + +Прежде чем мы сможем **append element to body**, нам нужен объект документа. Aspose.HTML предоставляет класс `HTMLDocument`, представляющий DOM в памяти. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Почему это важно*: Создание экземпляра `HTMLDocument` даёт вам чистый холст — представьте его как пустой лист, где позже вы будете **format text html**. Без этого шага нельзя манипулировать узлами или применять стили. + +--- + +## Шаг 2 – Создание элемента `` (**create span element**) + +Теперь нам нужен контейнер для стилизованного текста. `` идеально подходит, потому что это встроенный элемент, который может нести CSS без нарушения потока. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Совет*: Если вам понадобится вставить несколько фрагментов текста, вы можете переиспользовать один и тот же `spanElement`, клонируя его (`spanElement.Clone(true)`) и меняя `InnerHtml` каждый раз. + +--- + +## Шаг 3 – Применение **set font style** для полужирного **и** курсивного + +Aspose.HTML раскрывает строго типизированный объект `Style`. Чтобы **set font style**, мы комбинируем `WebFontStyle.Bold` и `WebFontStyle.Italic` с помощью побитового ИЛИ. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Почему использовать enum*: Перечисление `WebFontStyle` напрямую отображается в CSS‑свойства (`font-weight` и `font-style`). Использование enum предотвращает опечатки и гарантирует корректность генерируемого CSS — это критично для надёжного **format text html**. + +--- + +## Шаг 4 – **Append element to body** и завершение документа + +Когда стилизованный `` готов, последний шаг — разместить его внутри тега ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +На данном этапе дерево DOM выглядит точно так же, как показано в предыдущем фрагменте. Если вы проверите `htmlDocument.InnerHtml`, увидите полностью сформированную разметку. + +--- + +## Шаг 5 – Сохранение или рендеринг документа + +Вы можете записать HTML в файл, передать его в браузер или отрендерить в PDF/изображение с помощью движка рендеринга Aspose.HTML. Вот самый простой вариант вывода в файл: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Откройте `output.html` в любом браузере, и вы увидите **Bold‑Italic text**, отображённый точно так, как задумано. + +--- + +## Полный рабочий пример + +Объединив всё вместе, получаем полностью готовую к запуску программу: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Ожидаемый результат** – открывая `output.html`, вы видите: + +> **Bold‑Italic text** (bold and italic) + +Если вы посмотрите исходный код, то увидите точную HTML‑разметку, о которой шла речь, что подтверждает успешное выполнение шага **format text html**. + +--- + +## Часто задаваемые вопросы и особые случаи + +### 1. Что если мне нужно более двух стилей? + +`WebFontStyle` — это флаговое перечисление, поэтому вы можете комбинировать любое количество стилей (например, `Underline`). Просто продолжайте использовать оператор `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Можно ли одновременно изменить цвет? + +Конечно. У объекта `Style` есть свойство `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Как **append element to body** несколько раз? + +Создайте цикл, клонируйте стилизованный ``, измените текст и добавьте каждый клон: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Что если нужно **format text html** внутри `
` вместо этого? + +Тот же API работает с любым элементом. Просто замените `CreateElement("span")` на `CreateElement("div")` и при необходимости скорректируйте стили. + +### 5. Проблемы совместимости? + +Aspose.HTML нацелен на .NET Standard 2.0+, поэтому код работает на .NET Core, .NET Framework и .NET 5/6+. Дополнительные шимы для браузеров не требуются. + +--- + +## Советы и подводные камни + +- **Pro tip**: Всегда задавайте `InnerHtml` *после* настройки стиля. Изменение внутреннего содержимого раньше может вызвать перерасчёт макета в некоторых браузерах; выполнение этого после стилизации избавляет от лишних операций. +- **Watch out for**: Смешивание `WebFontStyle` с инлайн‑строками CSS. Если позже вручную вызвать `spanElement.SetAttribute("style", "...")`, вы перезапишете стили, сгенерированные enum. Придерживайтесь одного метода. +- **Performance note**: Для больших документов лучше создавать все узлы заранее, а затем добавлять их за один проход — это уменьшает количество мутаций DOM и ускоряет рендеринг. + +--- + +## Заключение + +Теперь вы знаете, как **create html document** с помощью Aspose.HTML, **append element to body**, **set font style** и **format text html** используя **create span element**. Пример полностью рабочий, а объяснения охватывают как «как», так и «почему», что облегчает адаптацию шаблона к более сложным сценариям. + +Готовы к следующему шагу? Попробуйте заменить `` на `

` с несколькими CSS‑классами или отрендерить тот же DOM в PDF с помощью `Document` → `PdfSaveOptions`. Принципы остаются теми же, и вы обнаружите, что Aspose.HTML — надёжный партнёр для любой сервер‑сайд генерации HTML. + +Есть вопросы или нашли интересный приём? Оставьте комментарий ниже — happy coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/net/html-extensions-and-conversions/_index.md b/html/russian/net/html-extensions-and-conversions/_index.md index 7b57df459..ac5b2de26 100644 --- a/html/russian/net/html-extensions-and-conversions/_index.md +++ b/html/russian/net/html-extensions-and-conversions/_index.md @@ -63,6 +63,8 @@ Aspose.HTML для .NET — это не просто библиотека; эт Узнайте, как преобразовать HTML в TIFF с помощью Aspose.HTML для .NET. Следуйте нашему пошаговому руководству для эффективной оптимизации веб-контента. ### [Конвертируйте HTML в XPS в .NET с помощью Aspose.HTML](./convert-html-to-xps/) Откройте для себя мощь Aspose.HTML для .NET: конвертируйте HTML в XPS без усилий. Предварительные условия, пошаговое руководство и часто задаваемые вопросы включены. +### [Создайте PDF из URL – Полное руководство C#](./create-pdf-from-url-complete-c-guide/) +Создайте PDF из веб‑страницы по URL с помощью Aspose.HTML для .NET. Полное пошаговое руководство на C#. ## Заключение @@ -74,4 +76,4 @@ Aspose.HTML для .NET — это не просто библиотека; эт {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/russian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..68263e6d9 --- /dev/null +++ b/html/russian/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,201 @@ +--- +category: general +date: 2026-01-03 +description: Быстро создавайте PDF из URL на C#. Узнайте, как конвертировать HTML + в PDF, сохранять веб‑страницу как PDF и генерировать PDF из HTML с помощью простого + кода. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: ru +og_description: Создайте PDF из URL в C# быстро. Этот учебник показывает, как преобразовать + HTML в PDF, сохранить веб‑страницу как PDF и сгенерировать PDF из HTML с помощью + Aspose.HTML. +og_title: Создать PDF из URL — Полное руководство по C# +tags: +- pdf +- csharp +- html +- conversion +title: Создание PDF из URL – Полное руководство по C# +url: /ru/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Создание PDF из URL – Полное руководство на C# + +Когда‑то вам нужно **создать PDF из URL**, но вы не знаете, какую библиотеку выбрать? Вы не одиноки. Многие разработчики сталкиваются с этой проблемой, когда хотят архивировать веб‑страницу, генерировать счета из онлайн‑шаблона или просто добавить кнопку «скачать как PDF» на свой сайт. + +В этом руководстве мы пройдем весь процесс **преобразования HTML в PDF** с помощью C#. Вы увидите, как **сохранить веб‑страницу как PDF**, как **генерировать PDF из HTML**, и почему библиотека `Aspose.HTML for .NET` делает это проще простого. К концу вы получите готовый фрагмент кода, который получает любой публичный URL, рендерит его и записывает PDF‑файл на диск. + +> **Pro tip:** Если вы работаете за корпоративным прокси, убедитесь, что конструктор `HTMLDocument` получает правильные настройки `WebRequest` — иначе загрузка завершится тихой ошибкой. + +## Что понадобится + +- **.NET 6.0** или новее (код также работает на .NET Framework 4.7+). +- NuGet‑пакет **Aspose.HTML for .NET** (`Aspose.HTML`). +- Папка на диске, в которую можно записать PDF. +- Базовые знания C# (никаких продвинутых трюков не требуется). + +Никаких дополнительных конфигурационных файлов, никакой скрытой магии — только несколько строк чистого, прокомментированного кода. + +![Create PDF from URL example](image.png){alt="создать pdf из url"} + +## Шаг 1: Установите NuGet‑пакет Aspose.HTML + +Откройте терминал или консоль диспетчера пакетов и выполните: + +```bash +dotnet add package Aspose.HTML +``` + +> **Почему это важно:** Классы `HTMLDocument`, `PdfSaveOptions` и `PdfConverter` находятся в пространстве имён `Aspose.Html`. Без пакета компилятор не будет знать, что это за типы. + +## Шаг 2: Загрузите веб‑страницу в `HTMLDocument` + +Первое реальное действие — получить удалённый HTML. `HTMLDocument` может принимать URL напрямую, автоматически обрабатывая перенаправления и определяя тип содержимого. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Что происходит?** +- `HTMLDocument` разбирает полученную разметку в дерево DOM, как это делает браузер. +- Любые внешние CSS, изображения или скрипты, указанные абсолютными URL, также загружаются, обеспечивая идентичный внешний вид PDF. + +## Шаг 3: Настройте параметры экспорта PDF (поля, размер страницы и т.д.) + +Прежде чем передать документ конвертеру, мы уточняем вывод. Объект `PdfSaveOptions` позволяет задать поля, ориентацию страницы и даже версию PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Зачем задавать поля?** +Плотно подогнанный PDF может обрезать заголовки или нижние колонтитулы, особенно на мобильных сайтах. Небольшие поля гарантируют, что всё останется читаемым. + +## Шаг 4: Преобразуйте HTML‑документ напрямую в PDF + +Теперь тяжёлая работа. `PdfConverter.ConvertHtml` потоково передаёт отрендеренную страницу сразу в PDF‑файл. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Под капотом:** +- Aspose рендерит DOM с помощью собственного движка компоновки (Chromium не нужен). +- Полученный растровый образ затем векторизуется в PDF, где это возможно, сохраняя возможность выделения текста. + +## Шаг 5: Проверьте результат и обработайте граничные случаи + +Быстрая проверка спасёт от головной боли позже. Откройте сгенерированный файл; вы должны увидеть живую страницу, применённые поля и все изображения. + +### Распространённые подводные камни и как их избежать + +| Проблема | Причина | Решение | +|----------|---------|----------| +| **Пустой PDF** | URL блокируется файрволом или требует аутентификации | Передайте пользовательский `WebRequest` с учётными данными в конструктор `HTMLDocument` | +| **Отсутствует CSS** | Внешний стиль использует относительные URL | Убедитесь, что базовый URL правильный (Aspose обычно справляется, но проверьте перенаправления) | +| **Большой размер файла** | Высокое разрешение изображений не уменьшается | Используйте `PdfSaveOptions.ImageCompression` для JPEG‑сжатия встроенных изображений | +| **Иероглифы вместо Unicode** | Шрифт не встроен | Установите `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Полный рабочий пример (готов к копированию) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Запустите программу (`dotnet run`), и вы найдёте `example.pdf` в `C:\Temp`. Откройте его в любом PDF‑просмотрщике — вы увидите точную копию `https://example.com` с заданными полями. + +## Заключение + +Мы только что показали, **как создать PDF из URL** с помощью C#. Было рассмотрено загрузка веб‑страницы, настройка полей и преобразование DOM в PDF‑файл — всё, что нужно для **преобразования HTML в PDF**, **сохранения веб‑страницы как PDF** и **генерации PDF из HTML** в продакшн‑готовом виде. + +Экспериментируйте: измените размер страницы на `Letter`, переключите ориентацию на альбомную или добавьте верхний/нижний колонтитул через `PdfPageEventHandler`. Та же схема работает для динамических страниц, защищённых порталов (достаточно передать cookies) или даже пакетной обработки списка URL‑ов. + +**Следующие шаги, которые стоит изучить** + +- **HTML to PDF C#** с асинхронным преобразованием для высокопроизводительных сервисов. +- Встраивание **метаданных** (автор, название) в PDF через `PdfDocumentInfo`. +- Использование **Aspose.PDF** для объединения нескольких PDF, сгенерированных из разных URL, в один отчёт. + +Есть вопросы? Оставляйте комментарий ниже, и happy coding! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/net/rendering-html-documents/_index.md b/html/russian/net/rendering-html-documents/_index.md index 9baf8828f..02d1a0801 100644 --- a/html/russian/net/rendering-html-documents/_index.md +++ b/html/russian/net/rendering-html-documents/_index.md @@ -42,19 +42,31 @@ Aspose.HTML для .NET выделяется как лучший выбор дл ### [Рендеринг HTML как PNG в .NET с помощью Aspose.HTML](./render-html-as-png/) Научитесь работать с Aspose.HTML для .NET: манипулируйте HTML, конвертируйте в различные форматы и многое другое. Погрузитесь в этот всеобъемлющий учебник! + +### [Как отрендерить HTML в PNG — Полное пошаговое руководство](./how-to-render-html-to-png-complete-step-by-step-guide/) +Подробное руководство по рендерингу HTML в PNG с использованием Aspose.HTML для .NET, включающее все необходимые шаги и примеры. + ### [Рендеринг EPUB как XPS в .NET с помощью Aspose.HTML](./render-epub-as-xps/) Узнайте, как создавать и отображать HTML-документы с помощью Aspose.HTML для .NET в этом всеобъемлющем руководстве. Погрузитесь в мир манипуляций HTML, веб-скрапинга и многого другого. + ### [Отрисовка тайм-аута в .NET с помощью Aspose.HTML](./rendering-timeout/) Узнайте, как эффективно контролировать тайм-ауты рендеринга в Aspose.HTML для .NET. Изучите параметры рендеринга и обеспечьте плавный рендеринг HTML-документа. + ### [Рендеринг MHTML как XPS в .NET с помощью Aspose.HTML](./render-mhtml-as-xps/) Научитесь отображать MHTML как XPS в .NET с Aspose.HTML. Улучшите свои навыки работы с HTML и ускорьте свои проекты по веб-разработке! + ### [Рендеринг нескольких документов в .NET с помощью Aspose.HTML](./render-multiple-documents/) Научитесь визуализировать несколько HTML-документов с помощью Aspose.HTML для .NET. Расширьте свои возможности обработки документов с помощью этой мощной библиотеки. + ### [Рендеринг SVG Doc как PNG в .NET с помощью Aspose.HTML](./render-svg-doc-as-png/) Откройте для себя мощь Aspose.HTML для .NET! Узнайте, как легко визуализировать SVG Doc как PNG. Погрузитесь в пошаговые примеры и часто задаваемые вопросы. Начните прямо сейчас! + +### [Как отрендерить HTML — Полное руководство с пользовательским обработчиком ресурсов](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Узнайте, как полностью настроить рендеринг HTML, используя собственный обработчик ресурсов в Aspose.HTML для .NET. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/russian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..35b2e355a --- /dev/null +++ b/html/russian/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,231 @@ +--- +category: general +date: 2026-01-03 +description: Как рендерить HTML в изображения с помощью Aspose.HTML. Узнайте о преобразовании + HTML в изображение, пользовательском обработчике ресурсов и конвертации HTML в битмап + на C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: ru +og_description: Как преобразовать HTML в изображения с помощью Aspose.HTML. Овладейте + конвертацией HTML в изображения, пользовательским обработчиком ресурсов и преобразованием + HTML в bitmap на C#. +og_title: Как отрисовать HTML – Полное руководство с пользовательским обработчиком + ресурсов +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Как рендерить HTML – Полное руководство с пользовательским обработчиком ресурсов +url: /ru/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Как отрисовать HTML – Полное руководство с пользовательским обработчиком ресурсов + +Когда‑то задавались вопросом **как отрисовать HTML** в битмап без необходимости управлять браузерным движком? Вы не одиноки. Многие разработчики сталкиваются с проблемой, когда нужен быстрый скриншот динамической страницы для писем, отчётов или миниатюр. Хорошая новость: с Aspose.HTML вы можете превратить любую строку HTML в изображение — без UI, без headless Chrome, только чистый C# код. + +В этом руководстве мы пройдём практический сценарий **html to image conversion**, покажем, как **реализовать пользовательский обработчик ресурсов**, и продемонстрируем полный рабочий процесс **convert html to bitmap**. К концу вы получите переиспользуемый метод, который отрисовывает HTML в изображение полностью в памяти, готовое к дальнейшей обработке или сохранению. + +> **Prerequisites** +> * .NET 6+ (или .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * Базовое знакомство с C# и потоками + +Если у вас уже есть эти основы, давайте начнём. + +--- + +## Как отрисовать HTML с помощью Aspose.HTML + +Ядром любой операции **render html to image** является класс `ImageRenderer`. Он принимает `HTMLDocument` и выдаёт растровую графику (PNG, JPEG, BMP и т.д.). Ниже минимальный скелет: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Этот фрагмент работает, но вы получаете файл на диске только если укажете рендереру, куда его записать. Чтобы держать всё в памяти — и перехватывать каждый ресурс (изображения, CSS, шрифты), который запрашивает HTML — мы подключим **пользовательский обработчик ресурсов**. + +--- + +## Реализация пользовательского обработчика ресурсов + +**Пользовательский обработчик ресурсов** даёт полный контроль над тем, как внешние активы загружаются и сохраняются. Во многих случаях вы захотите захватить эти активы в памяти для последующего использования (например, собрать их в ZIP). Обработчик наследуется от `ResourceHandler` и переопределяет `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Зачем это нужно?** +* **Performance** — без дискового ввода‑вывода, всё остаётся в RAM. +* **Security** — вы контролируете, какие URL разрешено загружать. +* **Extensibility** — можно кэшировать ресурсы, переименовывать их или встраивать в другие контейнеры. + +--- + +## Конвертация HTML в битмап с помощью ImageRenderer + +Теперь объединяем части: загружаем HTML, привязываем `MyHandler` и рендерим. Следующий метод возвращает `MemoryStream`, содержащий PNG‑изображение отрисованной страницы. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Ожидаемый результат + +Если вызвать метод так: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Вы получите `demo.png`, который выглядит примерно так: + +![how to render html output example](https://example.com/assets/render-html-output.png "how to render html output example") + +*Alt text:* **how to render html output example** — небольшой битмап, показывающий отрисованный фрагмент HTML. + +--- + +## Конвертация HTML в изображение — типичные подводные камни и советы + +### 1. Относительные URL и теги `` +Если ваш HTML ссылается на внешние CSS или изображения через относительные пути, рендерер не будет знать базовую папку. Нужно: + +* Добавить тег ``, или +* Разрешать URL внутри `MyHandler.HandleResource` и отдавать правильный поток. + +### 2. Доступность шрифтов +Aspose.HTML по умолчанию использует системные шрифты. Для пользовательских веб‑шрифтов (`@font-face`) убедитесь, что файлы шрифтов доступны через обработчик, либо внедрите их как base64 data URI. + +### 3. Большие страницы +Отрисовка очень высокой страницы может потребовать значительного объёма памяти. Можно ограничить размер области просмотра: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Форматы изображений +`renderer.Save(stream, ImageFormat.Jpeg)` работает так же, если нужен JPEG‑компресс. Замените `ImageFormat.Png` на `ImageFormat.Bmp` для настоящего **convert html to bitmap** вывода. + +--- + +## Отрисовка HTML в изображение — продвинутые сценарии + +### A. Отрисовка нескольких страниц +Если HTML содержит разрывы страниц (`
`), можно перебрать страницы: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Встраивание изображения в PDF +Скомбинируйте с `Aspose.Pdf`, чтобы напрямую вставить PNG: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## Заключение + +Мы рассмотрели **как отрисовать HTML** в битмап полностью в памяти, изучили основы **html to image conversion**, создали **пользовательский обработчик ресурсов** и показали, как **convert html to bitmap** с помощью `ImageRenderer` из Aspose.HTML. Подход быстрый, потокобезопасный и легко расширяемый для реальных проектов — от генерации миниатюр для писем до автоматического создания отчётов. + +Готовы к следующему шагу? Попробуйте заменить PNG‑вывод на JPEG, поэкспериментируйте с различными размерами страниц или подключите обработчик к слою кэширования, чтобы повторные отрисовки были мгновенными. Возможности безграничны, когда вы контролируете каждый ресурс самостоятельно. + +Есть вопросы или интересный кейс, которым хотите поделиться? Оставляйте комментарий ниже, и приятной отрисовки! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/russian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..0d31be7cd --- /dev/null +++ b/html/russian/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,229 @@ +--- +category: general +date: 2026-01-03 +description: Узнайте, как преобразовать HTML в PNG, конвертировать веб‑страницу в + изображение и сохранить HTML как PNG с помощью Aspose.HTML в C#. Быстро, надёжно + и готово к использованию в продакшене. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: ru +og_description: Освойте, как преобразовать HTML в PNG, конвертировать веб‑страницу + в изображение и сохранять HTML как PNG с полным примером на C# с использованием + Aspose.HTML. +og_title: Как преобразовать HTML в PNG – Полное руководство +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Как преобразовать HTML в PNG – полное пошаговое руководство +url: /ru/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Как преобразовать HTML в PNG – Полное пошаговое руководство + +Если вы ищете **how to render html** в изображение, вы попали по адресу. Независимо от того, нужно ли вам **convert webpage to image** для миниатюр, архивировать страницу в PNG или генерировать превью для социальных сетей «на лету», процесс может оказаться удивительно простым при правильной библиотеке. + +В этом руководстве мы пройдем процесс преобразования любой живой URL‑адреса в файл PNG с помощью Aspose.HTML for .NET. Вы увидите полный, исполняемый фрагмент кода, узнаете, почему каждый параметр важен, и откроете несколько приёмов для обработки крайних случаев. К концу вы сможете **save html as png**, **convert html to png**, а также встроить результат в отчёт или письмо без усилий. + +## Требования – Что вам понадобится + +- **.NET 6.0** или новее (код работает также с .NET Core и .NET Framework) +- **Aspose.HTML for .NET** пакет NuGet (`Aspose.Html`) установлен +- Любая IDE по вашему выбору (Visual Studio, Rider или VS Code) +- Папка с правом записи, куда будет сохраняться PNG + +Дополнительная настройка не требуется — Aspose.HTML берёт на себя всю тяжёлую работу по разбору страницы, применению CSS и растеризации макета. + +## Шаг 1: Загрузите HTML‑документ, который хотите отобразить + +Первое, что вам нужно, — это экземпляр `HTMLDocument`, указывающий на страницу, которую вы хотите захватить. Aspose.HTML может загружать из URL, локального файла или сырой HTML‑строки. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Почему это важно:** Загрузка документа напрямую из URL гарантирует автоматическое получение всех внешних ресурсов (CSS, JavaScript, изображения), обеспечивая точное отображение живой страницы. + +## Шаг 2: Настройте параметры рендеринга изображения + +Далее мы настраиваем `ImageRenderingOptions`. Эти параметры управляют размером вывода, качеством и применением сглаживания. Их настройка позволяет сбалансировать размер файла и визуальную точность. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Совет профессионала:** Если вам нужна миниатюра более высокого разрешения, пропорционально увеличьте `Width` и `Height`. Aspose.HTML масштабирует макет соответственно, не теряя векторного качества. + +## Шаг 3: Инициализируйте рендерер изображения + +Теперь мы создаём `ImageRenderer`, передавая документ и только что определённые параметры. Этот объект — движок, который действительно рисует страницу на битмапе. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **Что происходит под капотом?** Рендерер разбирает DOM, вычисляет стили CSS, выполняет компоновку и, наконец, растеризует каждый элемент на пиксельном холсте. Всё это происходит в памяти, поэтому вам не нужен браузерный окно. + +## Шаг 4: Выполните рендеринг и сохраните PNG‑файл + +Наконец, вызовите `Render`, указав полный путь, где вы хотите сохранить PNG. Метод записывает файл синхронно и автоматически освобождает внутренние ресурсы. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Ожидаемый результат:** После выполнения программы вы найдете `example.png` в папке `output`. Откройте его в любом просмотрщике изображений, и вы увидите точную копию `https://example.com` размером 800×600 px. + +--- + +### Полный готовый к запуску пример + +Ниже приведена полная программа, которую вы можете скопировать и вставить в новый консольный проект. Она включает все директивы `using`, обработку ошибок и комментарии для ясности. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Запустите программу (`dotnet run` из папки проекта), и вы получите PNG, отражающий живую страницу. Это **how to render html** всего несколькими строками C#. + +--- + +## Часто задаваемые вопросы и крайние случаи + +### Могу ли я отобразить локальный HTML‑файл вместо URL? + +Конечно. Замените URL на путь к файлу: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Что если страница использует JavaScript для изменения DOM после загрузки? + +Aspose.HTML выполняет большинство клиентских скриптов, но не предоставляет полноценный браузерный движок. Для сильно скриптованных страниц может потребоваться предварительно отрендерить HTML (например, с помощью безголового Chromium) и затем передать полученную разметку в Aspose.HTML. + +### Как управлять уровнем сжатия PNG? + +`ImageRenderingOptions` включает свойство `CompressionLevel` (0–9). Меньшие числа означают большие файлы, но более высокое качество. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Мне нужен прозрачный фон — возможно ли это? + +Да. Установите цвет фона как прозрачный перед рендерингом: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Есть ли способ отобразить несколько страниц в одном изображении? + +Вы можете перебрать коллекцию URL‑адресов или HTML‑строк, отрендерить каждую в битмап, а затем собрать их вместе с помощью `System.Drawing` или `ImageSharp`. Основной шаг **convert html to png** остаётся тем же. + +--- + +## Бонус: Встраивание PNG в Web API + +Если вы хотите предоставить эту функцию через endpoint ASP.NET Core, просто верните байты файла: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Теперь любой клиент может запросить `GET /render?url=https://example.com` и получить PNG «на лету» — идеально для сервисов **convert webpage to image**. + +--- + +## Заключение + +Мы рассмотрели всё, что вам нужно знать о **how to render html** в файл PNG с помощью Aspose.HTML for .NET. От загрузки удалённой страницы, настройки параметров рендеринга и обработки распространённых подводных камней, полный пример показывает, как именно **convert html to png**, **save html as png**, а также как открыть логику через веб‑API. + +Попробуйте с вашими собственными URL, экспериментируйте с разными размерами и, возможно, автоматизируйте генерацию миниатюр для вашего каталога продукции. Возможности безграничны, как только вы освоите основы **render html to png**. + +*Готовы к следующему уровню?* Скачайте пакет NuGet, вставьте код в ваш проект и начните преобразовывать веб‑страницы в изображения уже сегодня. Если возникнут проблемы, оставляйте комментарий — приятного рендеринга! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/net/canvas-and-image-manipulation/_index.md b/html/spanish/net/canvas-and-image-manipulation/_index.md index d063a18c1..ead0d0f6c 100644 --- a/html/spanish/net/canvas-and-image-manipulation/_index.md +++ b/html/spanish/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aprenda a convertir SVG a PDF con Aspose.HTML para .NET. Tutorial paso a paso de Aprenda a convertir SVG a XPS con Aspose.HTML para .NET. Mejore su desarrollo web con esta potente biblioteca. ### [Cómo habilitar el antialiasing en C# – Bordes suaves](./how-to-enable-antialiasing-in-c-smooth-edges/) Aprenda a activar el antialiasing en C# para obtener bordes suaves en sus gráficos y mejorar la calidad visual. +### [Crear texto en canvas – Guía completa para renderizar texto en imágenes](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Aprenda a dibujar texto sobre imágenes usando canvas con Aspose.HTML para .NET, paso a paso y con ejemplos claros. ## Conclusión diff --git a/html/spanish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/spanish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..73fc77971 --- /dev/null +++ b/html/spanish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,236 @@ +--- +category: general +date: 2026-01-03 +description: Crea texto en canvas rápidamente y aprende cómo renderizar imágenes de + texto, establecer opciones de texto y rellenar el canvas de texto mientras mejoras + la renderización de texto en Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: es +og_description: Crea texto en canvas con Aspose HTML, aprende a renderizar imágenes + de texto, configura opciones de texto y mejora la calidad del texto en Linux en + un solo tutorial. +og_title: Crear texto en canvas – Guía completa de renderizado +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Crear texto en canvas – Guía completa para renderizar texto en imágenes +url: /es/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Crear texto en canvas – Guía completa de renderizado + +¿Alguna vez necesitaste **crear texto en canvas** pero no estabas seguro de cómo obtener glifos nítidos en cada plataforma? No estás solo. Muchos desarrolladores se topan con un problema cuando su texto se ve borroso en Linux, especialmente al convertir HTML a una imagen. + +En este tutorial recorreremos una solución práctica que no solo te permite **renderizar una imagen de texto** en un canvas de Aspose HTML, sino que también te muestra cómo **establecer opciones de texto**, usar `FillText` correctamente y **mejorar el renderizado de texto en Linux** con hinting. Al final tendrás un fragmento autocontenido y ejecutable que puedes insertar en cualquier proyecto .NET. + +## Lo que aprenderás + +- Cómo instanciar un objeto `Canvas` y prepararlo para dibujar. +- El papel de `TextOptions` y por qué habilitar el hinting es importante en Linux. +- Código paso a paso que **rellena texto en canvas** con caracteres estilizados y de alta calidad. +- Trampas comunes (hinting ausente, sistema de coordenadas incorrecto) y soluciones rápidas. +- Formas de ampliar el ejemplo: fuentes personalizadas, colores y texto multilínea. + +> **Prerequisite:** .NET 6+ (o .NET Framework 4.7.2) y el paquete NuGet Aspose.HTML for .NET instalado. + +--- + +## Paso 1: Configura el proyecto y las importaciones + +Antes de comenzar a dibujar, asegúrate de que tu proyecto haga referencia a los ensamblados correctos. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro tip:** Si estás en Linux, agrega el paquete `libgdiplus` (`sudo apt-get install libgdiplus`) para que el renderizado basado en GDI funcione sin problemas. + +--- + +## Paso 2: Crea un canvas y define su tamaño + +Un canvas es esencialmente un bitmap fuera de pantalla en el que puedes pintar. Piensa en él como tu tabla de dibujo digital. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Why this matters:** Establecer un fondo sólido evita artefactos transparentes cuando exportes la imagen más adelante. + +--- + +## Paso 3: Configura las opciones de texto – La clave para un texto claro en Linux + +El renderizado de fuentes en Linux puede verse borroso si el hinting está deshabilitado. `TextOptions.UseHinting` indica al renderizador que alinee los glifos a los límites de píxel, agudizando drásticamente el resultado. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **What if you skip this?** En muchas distribuciones de Linux el texto aparecerá ligeramente borroso o desalineado, especialmente con tamaños de fuente pequeños. + +--- + +## Paso 4: Rellena texto en el canvas + +Ahora que el canvas está listo y las opciones de texto están afinadas, podemos **rellenar texto en canvas**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Si deseas un estilo personalizado (color, tamaño de fuente, alineación), envuelve la llamada en un `Font` y un `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Paso 5: Exporta el canvas como archivo de imagen + +El paso final es escribir el bitmap renderizado en disco para que puedas verificar el resultado. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Abre `canvas-output.png` y deberías ver texto nítido y correctamente hinted, ya sea que estés en Windows, macOS o Linux. + +--- + +## Preguntas frecuentes y casos límite + +### ¿Cómo afecta el hinting al rendimiento? + +Habilitar el hinting añade una sobrecarga insignificante (usualmente < 2 ms para un canvas de 800×600). La mejora visual supera con creces el costo, especialmente en generación de imágenes del lado del servidor donde la calidad es primordial. + +### ¿Qué pasa si necesito texto multilínea? + +Usa `canvas.FillText` en un bucle, ajustando la coordenada Y, o emplea la sobrecarga de `canvas.FillText` que acepta un objeto `TextLayout` para el salto de línea automático. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### ¿Puedo usar una fuente TrueType personalizada? + +Claro. Carga la fuente con `FontFamily` y asígnala a `TextOptions.FontFamily` o directamente al `Font` que pases a `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Asegúrate de que el archivo de fuente sea accesible en tiempo de ejecución (colócalo en la carpeta del proyecto o regístralo a nivel del sistema). + +--- + +## Ejemplo completo y funcional + +A continuación tienes el programa completo, listo para copiar y pegar, que incorpora cada paso descrito arriba. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Expected output:** Un archivo PNG llamado `canvas-output.png` que contiene dos líneas de texto—una normal y otra en negrita azul—ambas renderizadas nítidamente gracias al hinting. + +--- + +## Conclusión + +Acabamos de **crear texto en canvas** desde cero, aprendimos a **renderizar una imagen de texto** con Aspose.HTML y descubrimos por qué **establecer opciones de texto** como `UseHinting` es esencial para **mejorar la calidad del texto en Linux**. Siguiendo los pasos anteriores puedes **rellenar texto en canvas** de forma fiable en cualquier entorno .NET, ya sea que estés generando miniaturas, marcas de agua o gráficos dinámicos para APIs web. + +¿Listo para el siguiente desafío? Prueba agregar degradados de fondo, rotar texto o exportar a SVG para un escalado vectorial perfecto. Los mismos principios—`TextOptions` adecuados, manejo cuidadoso de coordenadas y una correcta disposición de recursos—se aplican a todos los formatos. + +Si encontraste alguna peculiaridad o tienes ideas para extensiones, deja un comentario. ¡Feliz codificación y disfruta de esos caracteres ultra nítidos! + +--- + +*Imagen que ilustra un canvas con texto nítido (alt text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/net/html-document-manipulation/_index.md b/html/spanish/net/html-document-manipulation/_index.md index 23287efba..d2b10a1ca 100644 --- a/html/spanish/net/html-document-manipulation/_index.md +++ b/html/spanish/net/html-document-manipulation/_index.md @@ -59,6 +59,8 @@ Descubra el potencial de Aspose.HTML para .NET con nuestra guía completa. Apren Aprenda a aprovechar el poder de Aspose.HTML para .NET. Mejore su desarrollo web con la manipulación y representación de HTML. ### [Creación de un documento en .NET con Aspose.HTML](./creating-a-document/) Descubra el poder de Aspose.HTML para .NET. Aprenda a crear, manipular y optimizar documentos HTML y SVG con facilidad. Explore ejemplos paso a paso y preguntas frecuentes. +### [Crear documento HTML con Aspose.HTML – Guía paso a paso](./create-html-document-with-aspose-html-step-by-step-guide/) +Aprenda a crear documentos HTML con Aspose.HTML mediante una guía paso a paso y ejemplos claros. ### [Edición de un documento en .NET con Aspose.HTML](./editing-a-document/) Cree contenido web atractivo con Aspose.HTML para .NET. Aprenda a manipular HTML, CSS y más. ### [Cómo guardar un documento en .NET con Aspose.HTML](./saving-a-document/) @@ -78,4 +80,4 @@ En conclusión, si desea dominar la manipulación de documentos HTML con Aspose. {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/spanish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..24ab1cfe9 --- /dev/null +++ b/html/spanish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,240 @@ +--- +category: general +date: 2026-01-03 +description: Crear documento HTML en C# usando Aspose.HTML. Aprende cómo agregar un + elemento al cuerpo, establecer el estilo de fuente y formatear texto HTML con un + simple span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: es +og_description: Crea un documento HTML en C# y descubre cómo añadir un elemento al + cuerpo, establecer el estilo de fuente y formatear texto HTML usando Aspose.HTML. +og_title: Crear documento HTML con Aspose.HTML – Guía rápida +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Crear documento HTML con Aspose.HTML – Guía paso a paso +url: /es/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Crear documento HTML con Aspose.HTML – Guía paso a paso + +¿Alguna vez necesitaste **crear documento html** de forma programática y te preguntaste por qué la salida se ve simple? No eres el único. En muchos proyectos debemos generar fragmentos al vuelo—piensa en plantillas de correo, informes dinámicos o pequeños widgets de UI. La buena noticia es que Aspose.HTML lo hace muy fácil: **crear documento html**, aplicarle estilo y colocarlo en tu página sin escribir cadenas crudas. + +En este tutorial recorreremos un ejemplo completo que muestra cómo **añadir elemento al cuerpo**, **establecer estilo de fuente** y **formatear texto html** usando un **crear elemento span**. Al final tendrás un fragmento C# ejecutable que produce texto en negrita‑cursiva dentro de un span, y comprenderás el “por qué” de cada llamada. + +> **Requisitos previos** +> • .NET 6 o superior (cualquier runtime .NET reciente funciona) +> • Paquete NuGet Aspose.HTML para .NET (`Aspose.Html`) instalado +> • Familiaridad básica con C# y conceptos DOM + +No se requieren otras bibliotecas, y el código se ejecuta en Windows, Linux o macOS. + +--- + +## Lo que vas a construir + +Crearemos un documento HTML mínimo, añadiremos un `` que contiene la frase **Bold‑Italic text**, aplicaremos tanto **negrita** como **cursiva**, y finalmente **añadiremos elemento al cuerpo**. El marcado final se ve así: + +```html + + + Bold‑Italic text + + +``` + +Puedes copiar‑pegar el código completo al final de la guía y ejecutarlo de inmediato. + +--- + +![Crear documento HTML ejemplo](image.png){alt="ejemplo de crear documento html"} + +--- + +## Paso 1 – Inicializar HTMLDocument (la base de **crear documento html**) + +Antes de poder **añadir elemento al cuerpo**, necesitamos un objeto documento con el que trabajar. Aspose.HTML proporciona la clase `HTMLDocument` que representa un DOM en memoria. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Por qué es importante*: Instanciar `HTMLDocument` te da un lienzo limpio—piensa en ello como una hoja en blanco donde luego **formatearás texto html**. Sin este paso no puedes manipular nodos ni aplicar estilos. + +--- + +## Paso 2 – Crear el elemento `` (**crear elemento span**) + +Ahora necesitamos un contenedor para nuestro texto con estilo. Un `` es perfecto porque es un elemento en línea que puede llevar CSS sin romper el flujo. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Consejo profesional*: Si alguna vez necesitas insertar múltiples fragmentos de texto, puedes reutilizar el mismo `spanElement` clonándolo (`spanElement.Clone(true)`) y cambiando el `InnerHtml` cada vez. + +--- + +## Paso 3 – Aplicar **establecer estilo de fuente** para negrita **y** cursiva + +Aspose.HTML expone un objeto tipado `Style`. Para **establecer estilo de fuente** combinamos `WebFontStyle.Bold` y `WebFontStyle.Italic` usando un OR a nivel de bits. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Por qué usar el enum*: El enum `WebFontStyle` se mapea directamente a propiedades CSS (`font-weight` y `font-style`). Usar el enum evita errores tipográficos y asegura que el CSS generado sea válido—esencial para un **formatear texto html** fiable. + +--- + +## Paso 4 – **Añadir elemento al cuerpo** y finalizar el documento + +Con el span estilizado listo, el último paso es colocarlo dentro de la etiqueta ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +En este punto el árbol DOM se ve exactamente como el fragmento mostrado antes. Si inspeccionas `htmlDocument.InnerHtml`, verás el marcado completamente formado. + +--- + +## Paso 5 – Guardar o renderizar el documento + +Puedes escribir el HTML a un archivo, enviarlo a un navegador, o renderizarlo a PDF/Imagen usando el motor de renderizado de Aspose.HTML. Aquí tienes la opción más simple de salida a archivo: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Abre `output.html` en cualquier navegador y deberías ver **Bold‑Italic text** mostrado tal como se pretende. + +--- + +## Ejemplo completo funcionando + +Juntando todo, aquí tienes el programa completo, listo para ejecutar: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Salida esperada** – al abrir `output.html` se muestra: + +> **Bold‑Italic text** (negrita y cursiva) + +Si inspeccionas el código fuente, verás el HTML exacto del que hablamos, confirmando que el paso **formatear texto html** se completó con éxito. + +--- + +## Preguntas frecuentes y casos especiales + +### 1. ¿Qué pasa si necesito más de dos estilos? + +`WebFontStyle` es un enum con flags, así que puedes combinar cualquier número de estilos (por ejemplo, `Underline`). Simplemente sigue usando el operador `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. ¿Puedo cambiar el color al mismo tiempo? + +Claro. El objeto `Style` tiene una propiedad `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. ¿Cómo **añadir elemento al cuerpo** varias veces? + +Crea un bucle, clona el span estilizado, ajusta el texto y añade cada clon: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. ¿Qué pasa si necesito **formatear texto html** dentro de un `
` en su lugar? + +La misma API funciona para cualquier elemento. Solo reemplaza `CreateElement("span")` por `CreateElement("div")` y ajusta los estilos según sea necesario. + +### 5. ¿Preocupaciones de compatibilidad? + +Aspose.HTML apunta a .NET Standard 2.0+, por lo que el código se ejecuta en .NET Core, .NET Framework y .NET 5/6+. No se requieren shim específicos del navegador. + +--- + +## Consejos profesionales y trampas comunes + +- **Consejo profesional:** Siempre establece `InnerHtml` *después* de haber configurado el estilo. Cambiar el contenido interno primero puede desencadenar un re‑layout en algunos navegadores; hacerlo después del estilo evita trabajo innecesario. +- **Cuidado con:** Mezclar `WebFontStyle` con cadenas CSS en línea. Si más tarde estableces manualmente `spanElement.SetAttribute("style", "...")`, sobrescribirás los estilos generados por el enum. Usa un solo método. +- **Nota de rendimiento:** Para documentos grandes, crea todos los nodos primero y luego añádelos de una sola vez; esto reduce el número de mutaciones del DOM y acelera el renderizado. + +--- + +## Conclusión + +Ahora sabes cómo **crear documento html** con Aspose.HTML, **añadir elemento al cuerpo**, **establecer estilo de fuente** y **formatear texto html** usando un **crear elemento span**. El ejemplo es totalmente funcional, y las explicaciones cubren tanto el “cómo” como el “por qué”, facilitando la adaptación del patrón a escenarios más complejos. + +¿Listo para el siguiente paso? Prueba cambiar el `` por un `

` con múltiples clases CSS, o renderiza el mismo DOM a PDF usando `Document` → `PdfSaveOptions`. Los mismos principios se aplican, y descubrirás que Aspose.HTML es un aliado fiable para cualquier tarea de generación de HTML del lado del servidor. + +¿Tienes preguntas o descubriste un truco ingenioso? ¡Deja un comentario abajo—feliz codificación! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/net/html-extensions-and-conversions/_index.md b/html/spanish/net/html-extensions-and-conversions/_index.md index 5d7b2bfaa..bf6ad8585 100644 --- a/html/spanish/net/html-extensions-and-conversions/_index.md +++ b/html/spanish/net/html-extensions-and-conversions/_index.md @@ -63,6 +63,8 @@ Descubra cómo utilizar Aspose.HTML para .NET para manipular y convertir documen Aprenda a convertir HTML a TIFF con Aspose.HTML para .NET. Siga nuestra guía paso a paso para optimizar eficazmente el contenido web. ### [Convierta HTML a XPS en .NET con Aspose.HTML](./convert-html-to-xps/) Descubra el poder de Aspose.HTML para .NET: convierta HTML a XPS sin esfuerzo. Requisitos previos, guía paso a paso y preguntas frecuentes incluidas. +### [Crear PDF desde URL – Guía completa en C#](./create-pdf-from-url-complete-c-guide/) +Aprenda a generar PDFs a partir de una URL usando Aspose.HTML para .NET con un tutorial paso a paso en C#. ## Conclusión @@ -74,4 +76,4 @@ Entonces, ¿qué estás esperando? Embárcate en este emocionante viaje para exp {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/spanish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..55bc79111 --- /dev/null +++ b/html/spanish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,201 @@ +--- +category: general +date: 2026-01-03 +description: Crear PDF a partir de una URL en C# rápidamente. Aprende cómo convertir + HTML a PDF, guardar una página web como PDF y generar PDF desde HTML con código + sencillo. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: es +og_description: Crea PDF a partir de una URL en C# rápidamente. Este tutorial muestra + cómo convertir HTML a PDF, guardar una página web como PDF y generar PDF a partir + de HTML usando Aspose.HTML. +og_title: Crear PDF a partir de URL – Guía completa de C# +tags: +- pdf +- csharp +- html +- conversion +title: Crear PDF a partir de URL – Guía completa de C# +url: /es/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Crear PDF desde URL – Guía Completa en C# + +¿Alguna vez necesitaste **crear PDF desde URL** pero no estabas seguro de qué biblioteca elegir? No estás solo. Muchos desarrolladores se encuentran con ese obstáculo cuando quieren archivar una página web, generar facturas a partir de una plantilla en línea o simplemente ofrecer un botón de “descargar como PDF” en su sitio. + +En este tutorial recorreremos todo el proceso de **convertir HTML a PDF** usando C#. Verás cómo **guardar una página web como PDF**, cómo **generar PDF a partir de HTML**, y por qué la biblioteca `Aspose.HTML for .NET` lo hace muy sencillo. Al final, tendrás un fragmento listo‑para‑ejecutar que obtiene cualquier URL pública, la renderiza y escribe un archivo PDF en el disco. + +> **Consejo profesional:** Si trabajas detrás de un proxy corporativo, asegúrate de que el constructor `HTMLDocument` reciba la configuración correcta de `WebRequest`; de lo contrario la descarga fallará silenciosamente. + +## Lo que Necesitarás + +- **.NET 6.0** o posterior (el código también funciona en .NET Framework 4.7+). +- **Aspose.HTML for .NET** paquete NuGet (`Aspose.HTML`). +- Una carpeta con permisos de escritura en el disco donde se guardará el PDF. +- Familiaridad básica con C# (no se requieren trucos avanzados). + +Sin archivos de configuración extra, sin magia oculta—solo unas pocas líneas de código limpio y comentado. + +![Create PDF from URL example](image.png){alt="crear pdf desde url"} + +## Paso 1: Instalar el paquete NuGet Aspose.HTML + +Abre tu terminal o la Consola del Administrador de Paquetes y ejecuta: + +```bash +dotnet add package Aspose.HTML +``` + +> **Por qué este paso es importante:** Las clases `HTMLDocument`, `PdfSaveOptions` y `PdfConverter` se encuentran en el espacio de nombres `Aspose.Html`. Sin el paquete, el compilador no sabrá qué son estos tipos. + +## Paso 2: Cargar la página web en un `HTMLDocument` + +La primera acción real es obtener el HTML remoto. `HTMLDocument` puede recibir una URL directamente, manejando redirecciones y la detección del tipo de contenido por ti. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**¿Qué está sucediendo?** +- `HTMLDocument` analiza el marcado obtenido en un árbol DOM, como lo haría un navegador. +- Cualquier CSS externo, imágenes o scripts referenciados por URLs absolutas también se descargan, garantizando que el PDF se vea como la página en vivo. + +## Paso 3: Configurar opciones de exportación PDF (Márgenes, tamaño de página, etc.) + +Antes de pasar el documento al convertidor, afinamos la salida. El objeto `PdfSaveOptions` te permite definir márgenes, orientación de página e incluso la versión del PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**¿Por qué establecer márgenes?** +Un PDF ajustado puede recortar encabezados o pies de página, especialmente en sitios optimizados para móviles. Añadir un margen modesto asegura que todo permanezca legible. + +## Paso 4: Convertir el documento HTML directamente a PDF + +Ahora la parte pesada. `PdfConverter.ConvertHtml` transmite la página renderizada directamente a un archivo PDF. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Detrás de escena:** +- Aspose renderiza el DOM usando su propio motor de diseño (no se necesita Chromium). +- El mapa de bits renderizado se rasteriza en vectores PDF cuando es posible, preservando la capacidad de seleccionar texto. + +## Paso 5: Verificar el resultado y manejar casos límite + +Una rápida verificación de sentido común ahorra dolores de cabeza más adelante. Abre el archivo generado; deberías ver la página en vivo, los márgenes aplicados y todas las imágenes intactas. + +### Errores comunes y cómo evitarlos + +| Problema | Causa | Solución | +|----------|-------|----------| +| **PDF en blanco** | URL bloqueada por firewall o requiere autenticación | Pasar un `WebRequest` personalizado con credenciales al constructor `HTMLDocument` | +| **CSS faltante** | Hoja de estilo externa usa URLs relativas | Asegúrate de que la URL base sea correcta (Aspose lo maneja, pero verifica los redireccionamientos) | +| **Tamaño de archivo grande** | Imágenes de alta resolución no reducidas | Usa `PdfSaveOptions.ImageCompression` para comprimir en JPEG las imágenes incrustadas | +| **Caracteres Unicode corruptos** | Fuente no incrustada | Establece `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Ejemplo completo funcional (listo para copiar‑pegar) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Ejecuta el programa (`dotnet run`) y encontrarás `example.pdf` en `C:\Temp`. Ábrelo con cualquier visor de PDF, y deberías ver la réplica exacta de `https://example.com` con los márgenes que definiste. + +## Conclusión + +Acabamos de mostrarte **cómo crear PDF desde URL** usando C#. Los pasos cubrieron la carga de una página web, la configuración de márgenes y la conversión del DOM a un archivo PDF—todo lo que necesitas para **convertir HTML a PDF**, **guardar una página web como PDF**, y **generar PDF a partir de HTML** de manera lista para producción. + +Siéntete libre de experimentar: cambia el tamaño de página a `Letter`, cambia la orientación a paisaje, o agrega un encabezado/pie de página usando `PdfPageEventHandler`. El mismo patrón funciona para páginas dinámicas, portales protegidos por inicio de sesión (solo proporciona cookies), o incluso para procesar por lotes una lista de URLs. + +**Próximos pasos que podrías explorar** + +- **HTML a PDF C#** con conversión asíncrona para servicios de alto rendimiento. +- Incrustar **metadatos** (autor, título) en el PDF mediante `PdfDocumentInfo`. +- Usar **Aspose.PDF** para combinar varios PDFs generados a partir de diferentes URLs en un solo informe. + +¿Tienes preguntas? Deja un comentario abajo, ¡y feliz codificación! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/net/rendering-html-documents/_index.md b/html/spanish/net/rendering-html-documents/_index.md index 162c131fd..3968cc6c7 100644 --- a/html/spanish/net/rendering-html-documents/_index.md +++ b/html/spanish/net/rendering-html-documents/_index.md @@ -52,9 +52,14 @@ Aprenda a controlar los tiempos de espera de renderización de manera eficaz en Aprenda a representar múltiples documentos HTML con Aspose.HTML para .NET. Aumente sus capacidades de procesamiento de documentos con esta potente biblioteca. ### [Convertir un documento SVG en formato PNG en .NET con Aspose.HTML](./render-svg-doc-as-png/) ¡Descubra el poder de Aspose.HTML para .NET! Aprenda a convertir documentos SVG en PNG sin esfuerzo. Conozca ejemplos paso a paso y preguntas frecuentes. ¡Comience ahora! +### [Cómo renderizar HTML – Guía completa con manejador de recursos personalizado](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Aprenda a renderizar HTML usando un manejador de recursos personalizado para un control total del proceso. +### [Cómo renderizar HTML a PNG – Guía completa paso a paso](./how-to-render-html-to-png-complete-step-by-step-guide/) +Aprenda a convertir HTML a PNG con Aspose.HTML para .NET siguiendo una guía detallada paso a paso. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/spanish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..0d0104e78 --- /dev/null +++ b/html/spanish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,230 @@ +--- +category: general +date: 2026-01-03 +description: Cómo renderizar HTML en imágenes usando Aspose.HTML. Aprende la conversión + de HTML a imagen, el manejador de recursos personalizado y cómo convertir HTML a + bitmap en C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: es +og_description: Cómo renderizar HTML en imágenes usando Aspose.HTML. Domina la conversión + de HTML a imagen, el controlador de recursos personalizado y convierte HTML a bitmap + en C#. +og_title: Cómo renderizar HTML – Guía completa con manejador de recursos personalizado +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Cómo renderizar HTML – Guía completa con manejador de recursos personalizado +url: /es/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cómo Renderizar HTML – Guía Completa con Manejador de Recursos Personalizado + +¿Alguna vez te has preguntado **cómo renderizar HTML** a un bitmap sin tener que manejar un motor de navegador tú mismo? No estás solo. Muchos desarrolladores se topan con un obstáculo cuando necesitan una captura rápida de una página dinámica para correos electrónicos, informes o miniaturas. ¿La buena noticia? Con Aspose.HTML puedes convertir cualquier cadena HTML en una imagen—sin UI, sin Chrome sin cabeza, solo código C# puro. + +En este tutorial recorreremos un escenario práctico de **conversión de html a imagen**, te mostraremos cómo **implementar un manejador de recursos personalizado** y demostraremos el flujo completo de **convertir html a bitmap**. Al final tendrás un método reutilizable que renderiza HTML a una imagen completamente en memoria, listo para su posterior procesamiento o almacenamiento. + +> **Requisitos previos** +> * .NET 6+ (o .NET Framework 4.7.2+) +> * Paquete NuGet Aspose.HTML for .NET (`Aspose.Html`) +> * Familiaridad básica con C# y streams + +Si ya cubres esos conceptos básicos, vamos a sumergirnos. + +--- + +## Cómo Renderizar HTML con Aspose.HTML + +El núcleo de cualquier operación de **render html to image** es la clase `ImageRenderer`. Toma un `HTMLDocument` y genera gráficos rasterizados (PNG, JPEG, BMP, etc.). A continuación tienes el esqueleto mínimo: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Ese fragmento funciona, pero solo obtienes un archivo en disco si le indicas al renderizador dónde escribirlo. Para mantener todo en memoria—y para interceptar cada recurso (imágenes, CSS, fuentes) que solicita el HTML—conectaremos un **manejador de recursos personalizado**. + +--- + +## Implementación de un Manejador de Recursos Personalizado + +Un **custom resource handler** te brinda control total sobre cómo se obtienen y almacenan los activos externos. En muchos casos querrás capturar esos recursos en memoria para usarlos después (por ejemplo, empaquetarlos en un ZIP). El manejador hereda de `ResourceHandler` y sobrescribe `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**¿Por qué molestarse?** +* **Rendimiento** – sin I/O de disco, todo permanece en RAM. +* **Seguridad** – controlas qué URLs pueden ser obtenidas. +* **Extensibilidad** – puedes almacenar en caché recursos, renombrarlos o incrustarlos en otros contenedores. + +--- + +## Convertir HTML a Bitmap Usando ImageRenderer + +Ahora combinamos los elementos: cargamos el HTML, adjuntamos `MyHandler` y renderizamos. El siguiente método devuelve un `MemoryStream` que contiene una imagen PNG de la página renderizada. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Salida Esperada + +Si llamas al método así: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Obtendrás un `demo.png` que se asemeja aproximadamente a: + +![ejemplo de salida de cómo renderizar html](https://example.com/assets/render-html-output.png "ejemplo de salida de cómo renderizar html") + +*Texto alternativo:* **ejemplo de salida de cómo renderizar html** – un pequeño bitmap que muestra el fragmento HTML renderizado. + +--- + +## Conversión de HTML a Imagen – Problemas Comunes y Consejos + +### 1. URLs Relativas y Etiquetas Base +Si tu HTML hace referencia a CSS o imágenes externas con rutas relativas, el renderizador no sabrá la carpeta base. Puedes: + +* Añadir una etiqueta ``, o +* Resolver las URLs dentro de `MyHandler.HandleResource` y servir el stream correcto. + +### 2. Disponibilidad de Fuentes +Aspose.HTML usa fuentes del sistema por defecto. Para fuentes web personalizadas (`@font-face`), asegúrate de que los archivos de fuentes sean accesibles mediante el manejador, o incrústalos como URIs de datos base64. + +### 3. Páginas Grandes +Renderizar una página muy alta puede consumir mucha memoria. Puedes limitar el tamaño del viewport: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Formatos de Imagen +`renderer.Save(stream, ImageFormat.Jpeg)` funciona igual de bien si necesitas compresión JPEG. Sustituye `ImageFormat.Png` por `ImageFormat.Bmp` para obtener una salida **convert html to bitmap** verdadera. + +--- + +## Renderizar HTML a Imagen – Escenarios Avanzados + +### A. Renderizar Múltiples Páginas +Si el HTML contiene saltos de página (`
`), puedes iterar sobre las páginas: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Incrustar la Imagen en un PDF +Combínalo con `Aspose.Pdf` para incrustar el PNG directamente: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## Conclusión + +Hemos cubierto **cómo renderizar HTML** a un bitmap completamente en memoria, explorado los fundamentos de la **conversión de html a imagen**, construido un **manejador de recursos personalizado** y mostrado cómo **convertir html a bitmap** con `ImageRenderer` de Aspose.HTML. El enfoque es rápido, seguro para subprocesos y fácilmente extensible para proyectos del mundo real—desde la generación de miniaturas para correos electrónicos hasta la creación automática de informes. + +¿Listo para el siguiente paso? Prueba cambiar la salida PNG por JPEG, experimenta con diferentes tamaños de página o conecta el manejador a una capa de caché para que los renders repetidos sean instantáneos. El cielo es el límite cuando controlas cada recurso tú mismo. + +¿Tienes preguntas o un caso de uso interesante que quieras compartir? Deja un comentario abajo, ¡y feliz renderizado! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/spanish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..36adaefd2 --- /dev/null +++ b/html/spanish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,223 @@ +--- +category: general +date: 2026-01-03 +description: Aprende a renderizar HTML a PNG, convertir una página web en imagen y + guardar HTML como PNG usando Aspose.HTML en C#. Rápido, fiable y listo para producción. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: es +og_description: Domina cómo renderizar HTML a PNG, convertir una página web en imagen + y guardar HTML como PNG con un ejemplo completo en C# usando Aspose.HTML. +og_title: Cómo renderizar HTML a PNG – Guía completa +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Cómo renderizar HTML a PNG – Guía completa paso a paso +url: /es/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cómo renderizar HTML a PNG – Guía completa paso a paso + +Si buscas **how to render html** en una imagen, has llegado al lugar correcto. Ya sea que necesites **convert webpage to image** para miniaturas, archivar una página como PNG, o generar vistas previas para redes sociales al instante, el proceso puede ser sorprendentemente simple con la biblioteca adecuada. + +En este tutorial recorreremos el proceso de convertir cualquier URL en vivo en un archivo PNG usando Aspose.HTML for .NET. Verás un fragmento de código completo y ejecutable, aprenderás por qué cada configuración es importante y descubrirás algunos trucos para manejar casos límite. Al final podrás **save html as png**, **convert html to png**, e incluso incrustar el resultado en un informe o correo electrónico sin esfuerzo. + +## Requisitos previos – Lo que necesitarás + +- **.NET 6.0** o posterior (el código funciona también con .NET Core y .NET Framework) +- **Aspose.HTML for .NET** paquete NuGet (`Aspose.Html`) instalado +- Un IDE de tu elección (Visual Studio, Rider o VS Code) +- Una carpeta con permisos de escritura donde se guardará el PNG + +No se requiere configuración adicional—Aspose.HTML se encarga del trabajo pesado de analizar la página, aplicar CSS y rasterizar el diseño. + +## Paso 1: Cargar el documento HTML que deseas renderizar + +Lo primero que necesitas es una instancia de `HTMLDocument` que apunte a la página que deseas capturar. Aspose.HTML puede cargar desde una URL, un archivo local o una cadena HTML sin procesar. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Por qué esto es importante:** Cargar el documento directamente desde la URL garantiza que todos los recursos externos (CSS, JavaScript, imágenes) se obtengan automáticamente, brindándote una representación fiel de la página en vivo. + +## Paso 2: Configurar las opciones de renderizado de imagen + +A continuación, configuramos `ImageRenderingOptions`. Estas opciones controlan el tamaño de salida, la calidad y si se aplica anti‑aliasing. Ajustarlas te permite equilibrar el tamaño del archivo con la fidelidad visual. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Pro tip:** Si necesitas una miniatura de mayor resolución, aumenta `Width` y `Height` proporcionalmente. Aspose.HTML escalará el diseño en consecuencia sin perder la calidad vectorial. + +## Paso 3: Inicializar el renderizador de imagen + +Ahora creamos un `ImageRenderer` pasando el documento y las opciones que acabamos de definir. Este objeto es el motor que realmente dibuja la página en un bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **¿Qué está sucediendo bajo el capó?** El renderizador analiza el DOM, calcula los estilos CSS, realiza el layout y finalmente rasteriza cada elemento en un lienzo de píxeles. Todo eso ocurre en memoria, por lo que no necesitas una ventana de navegador. + +## Paso 4: Renderizar y guardar el archivo PNG + +Finalmente, llama a `Render` con la ruta completa donde deseas almacenar el PNG. El método escribe el archivo de forma sincrónica y libera los recursos internos automáticamente. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Resultado esperado:** Después de ejecutar el programa, encontrarás `example.png` dentro de la carpeta `output`. Ábrelo con cualquier visor de imágenes y deberías ver una captura fiel de `https://example.com` a 800×600 px. + +--- + +### Ejemplo completo, listo para ejecutar + +A continuación se muestra el programa completo que puedes copiar y pegar en un nuevo proyecto de consola. Incluye todas las directivas `using`, manejo de errores y comentarios para mayor claridad. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Ejecuta el programa (`dotnet run` desde la carpeta del proyecto) y obtendrás un PNG que refleja la página en vivo. Eso es **how to render html** con solo unas pocas líneas de C#. + +--- + +## Preguntas frecuentes y casos límite + +### ¿Puedo renderizar un archivo HTML local en lugar de una URL? + +Absolutamente. Reemplaza la URL con una ruta de archivo: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### ¿Qué pasa si la página usa JavaScript para modificar el DOM después de cargar? + +Aspose.HTML ejecuta la mayoría de los scripts del lado del cliente, pero no proporciona un motor de navegador completo. Para páginas con muchos scripts, podrías necesitar pre‑renderizar el HTML (p. ej., usando una instancia headless de Chromium) y luego pasar el marcado resultante a Aspose.HTML. + +### ¿Cómo controlo el nivel de compresión PNG? + +`ImageRenderingOptions` incluye una propiedad `CompressionLevel` (0–9). Los números más bajos significan archivos más grandes pero mayor calidad. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Necesito un fondo transparente—¿es posible? + +Sí. Establece el color de fondo a transparente antes de renderizar: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### ¿Hay una forma de renderizar varias páginas en una sola imagen? + +Puedes iterar sobre una colección de URLs o cadenas HTML, renderizar cada una a un bitmap y luego unirlas usando `System.Drawing` o `ImageSharp`. El paso central **convert html to png** sigue siendo el mismo. + +## Bonus: Incrustar el PNG en una Web API + +Si deseas exponer esta funcionalidad a través de un endpoint ASP.NET Core, simplemente devuelve los bytes del archivo: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Ahora cualquier cliente puede solicitar `GET /render?url=https://example.com` y recibir un PNG al instante—perfecto para servicios de **convert webpage to image**. + +## Conclusión + +Hemos cubierto todo lo que necesitas saber sobre **how to render html** en un archivo PNG usando Aspose.HTML for .NET. Desde cargar una página remota, configurar opciones de renderizado y manejar problemas comunes, el ejemplo completo te muestra exactamente cómo **convert html to png**, **save html as png**, e incluso exponer la lógica a través de una Web API. + +Pruébalo con tus propias URLs, experimenta con diferentes dimensiones y quizá automatiza la generación de miniaturas para tu catálogo de productos. El cielo es el límite una vez que domines los conceptos básicos de **render html to png**. + +*¿Listo para subir de nivel?* Obtén el paquete NuGet, inserta el código en tu proyecto y comienza a convertir páginas web en imágenes hoy. Si encuentras algún problema, no dudes en dejar un comentario—¡feliz renderizado! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/net/canvas-and-image-manipulation/_index.md b/html/swedish/net/canvas-and-image-manipulation/_index.md index 0e3bbbb56..dd8a33c6a 100644 --- a/html/swedish/net/canvas-and-image-manipulation/_index.md +++ b/html/swedish/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Lär dig hur du konverterar SVG till PDF med Aspose.HTML för .NET. Högkvalitat Lär dig hur du konverterar SVG till XPS med Aspose.HTML för .NET. Öka din webbutveckling med detta kraftfulla bibliotek. ### [Hur du aktiverar kantutjämning i C# – Mjuka kanter](./how-to-enable-antialiasing-in-c-smooth-edges/) Lär dig hur du aktiverar kantutjämning i C# för att få mjuka kanter i dina grafiska renderingar. +### [Skapa canvas-text – Fullständig guide för att rendera text på bilder](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Lär dig hur du lägger till och formaterar text på canvas-bilder med Aspose.HTML för .NET i en steg-för-steg guide. ## Slutsats diff --git a/html/swedish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/swedish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..ad6600d55 --- /dev/null +++ b/html/swedish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,235 @@ +--- +category: general +date: 2026-01-03 +description: Skapa canvas‑text snabbt och lär dig hur du renderar textbilder, ställer + in textalternativ och fyller canvas med text samtidigt som du förbättrar textrenderingen + i Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: sv +og_description: Skapa canvas‑text med Aspose HTML, lär dig rendera textbilder, ställ + in textalternativ och förbättra Linux‑textkvaliteten i en enda handledning. +og_title: Skapa canvas‑text – Fullständig renderingsguide +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Skapa canvastext – Fullständig guide till att rendera text på bilder +url: /sv/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Skapa canvas‑text – Komplett renderingsguide + +Har du någonsin behövt **skapa canvas‑text** men varit osäker på hur du får skarpa glyfer på alla plattformar? Du är inte ensam. Många utvecklare fastnar när deras text ser suddig ut på Linux, särskilt när man konverterar HTML till en bild. + +I den här handledningen går vi igenom en praktisk lösning som inte bara låter dig **rendera textbild** på en Aspose HTML‑canvas utan också visar hur du **sätter textalternativ**, använder `FillText` korrekt och **förbättrar Linux‑text** med hinting. När du är klar har du ett självständigt, körbart kodexempel som du kan klistra in i vilket .NET‑projekt som helst. + +## Vad du kommer att lära dig + +- Hur du instansierar ett `Canvas`‑objekt och förbereder det för ritning. +- Rollen för `TextOptions` och varför aktivering av hinting är viktigt på Linux. +- Steg‑för‑steg‑kod som **fyller text‑canvas** med stiliserade, högkvalitativa tecken. +- Vanliga fallgropar (saknad hinting, fel koordinatsystem) och snabba lösningar. +- Sätt att utöka exemplet: egna typsnitt, färger och flerradig text. + +> **Förkunskapskrav:** .NET 6+ (eller .NET Framework 4.7.2) och Aspose.HTML for .NET‑NuGet‑paketet installerat. + +--- + +## Steg 1: Ställ in projektet och importerna + +Innan vi börjar rita, se till att ditt projekt refererar rätt assemblys. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Proffstips:** Om du kör på Linux, lägg till paketet `libgdiplus` (`sudo apt-get install libgdiplus`) så att GDI‑baserad rendering fungerar smidigt. + +--- + +## Steg 2: Skapa en Canvas och definiera dess storlek + +En canvas är i princip en off‑screen‑bitmap som du kan måla på. Tänk på den som din digitala ritplatta. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Varför detta är viktigt:** Att sätta en solid bakgrund förhindrar transparenta artefakter när du senare exporterar bilden. + +--- + +## Steg 3: Konfigurera TextOptions – Nyckeln till klar Linux‑text + +Linux‑fontrendering kan se suddig ut om hinting är inaktiverat. `TextOptions.UseHinting` instruerar renderaren att justera glyfer till pixelgränser, vilket dramatiskt skärper resultatet. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Vad händer om du hoppar över detta?** På många Linux‑distributioner blir texten lite suddig eller feljusterad, särskilt vid små teckenstorlekar. + +--- + +## Steg 4: Fyll text på Canvasen + +Nu när canvasen är klar och textalternativen är finjusterade kan vi faktiskt **fylla text‑canvas**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Om du vill ha anpassad styling (färg, teckenstorlek, justering), omslut anropet med ett `Font` och en `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Steg 5: Exportera Canvasen som en bildfil + +Det sista steget är att skriva den renderade bitmapen till disk så att du kan verifiera resultatet. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Öppna `canvas-output.png` så bör du se skarp, korrekt hintad text – oavsett om du kör på Windows, macOS eller Linux. + +--- + +## Vanliga frågor & kantfall + +### Hur påverkar hinting prestandan? + +Att aktivera hinting ger en försumbar overhead (vanligtvis < 2 ms för en 800×600‑canvas). Den visuella vinsten väger vida tyngre än kostnaden, särskilt för server‑side bildgenerering där kvalitet är avgörande. + +### Vad gör jag om jag behöver flerradig text? + +Använd `canvas.FillText` i en loop och justera Y‑koordinaten, eller utnyttja overload‑versionen av `canvas.FillText` som accepterar ett `TextLayout`‑objekt för automatisk radbrytning. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Kan jag använda ett eget TrueType‑typsnitt? + +Absolut. Ladda typsnittet med `FontFamily` och tilldela det till `TextOptions.FontFamily` eller direkt till det `Font` du skickar till `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Se till att typsnittsfilen är åtkomlig för körningen (placera den i projektmappen eller registrera den systemomfattande). + +--- + +## Fullt fungerande exempel + +Nedan är det kompletta, kopiera‑och‑klistra‑klara programmet som innehåller alla stegen ovan. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Förväntat resultat:** En PNG‑fil med namnet `canvas-output.png` som innehåller två textrader – en vanlig och en fet blå – båda renderade skarpt tack vare hinting. + +--- + +## Slutsats + +Vi har just **skapat canvas‑text** från grunden, lärt oss hur man **renderar textbild** med Aspose.HTML och upptäckt varför **sätta textalternativ** som `UseHinting` är avgörande för att **förbättra Linux‑text**‑kvaliteten. Genom att följa stegen ovan kan du på ett pålitligt sätt **fylla text‑canvas** i vilken .NET‑miljö som helst, oavsett om du genererar miniatyrbilder, vattenstämplar eller dynamisk grafik för webb‑API:er. + +Redo för nästa utmaning? Prova att lägga till bakgrundsgradienter, rotera text eller exportera till SVG för vektor‑perfekt skalning. Samma principer – korrekta `TextOptions`, genomtänkt koordinathantering och ren disposal – gäller över format. + +Om du stött på några konstigheter eller har idéer för utökningar, lämna en kommentar. Lycka till med kodandet, och njut av de rakbladsskarpa tecknen! + +--- + +*Bild som illustrerar en canvas med skarp text (alt‑text: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/net/html-document-manipulation/_index.md b/html/swedish/net/html-document-manipulation/_index.md index 2b0eeb2bb..cafb36f80 100644 --- a/html/swedish/net/html-document-manipulation/_index.md +++ b/html/swedish/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Lär dig att skapa dynamiskt och webbinnehåll med Aspose.HTML för .NET. Styr d Lär dig att använda Aspose.HTML för .NET. Importera namnutrymme, slå samman HTML med XML och förbättra dina färdigheter i webbutveckling med den här omfattande guiden. ### [Generera XPS-dokument av XpsDevice i .NET med Aspose.HTML](./generate-xps-documents-by-xpsdevice/) Lås upp potentialen för webbutveckling med Aspose.HTML för .NET. Skapa, konvertera och manipulera HTML-dokument enkelt. +### [Skapa HTML-dokument med Aspose.HTML – Steg‑för‑steg‑guide](./create-html-document-with-aspose-html-step-by-step-guide/) +Lär dig att skapa HTML-dokument med Aspose.HTML i .NET med en tydlig steg‑för‑steg‑guide. ## Slutsats @@ -78,4 +80,4 @@ Sammanfattningsvis, om du vill behärska HTML-dokumentmanipulation med Aspose.HT {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/swedish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..d7c5418cd --- /dev/null +++ b/html/swedish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,238 @@ +--- +category: general +date: 2026-01-03 +description: Skapa HTML-dokument i C# med Aspose.HTML. Lär dig hur du lägger till + ett element i body, ställer in teckensnittsstil och formaterar text‑HTML med ett + enkelt span. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: sv +og_description: Skapa ett HTML-dokument i C# och se hur du lägger till ett element + i body, sätter teckensnittsstil och formaterar text‑HTML med Aspose.HTML. +og_title: Skapa HTML-dokument med Aspose.HTML – Snabbguide +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Skapa HTML-dokument med Aspose.HTML – Steg‑för‑steg‑guide +url: /sv/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Skapa HTML-dokument med Aspose.HTML – Steg‑för‑steg‑guide + +Har du någonsin behövt **create html document** programatiskt och undrat varför resultatet ser enkelt ut? Du är inte ensam. I många projekt måste vi generera kodsnuttar i farten—tänk e‑postmallar, dynamiska rapporter eller små UI‑widgetar. Den goda nyheten är att Aspose.HTML gör det enkelt att **create html document**, styla det och lägga in det på din sida utan att skriva råa strängar. + +I den här handledningen går vi igenom ett komplett exempel som visar hur man **append element to body**, **set font style** och **format text html** med hjälp av ett **create span element**. I slutet har du ett körbart C#‑kodsnutt som producerar fet‑kursiv text i ett span, och du förstår “varför” bakom varje anrop. + +> **Förutsättningar** +> • .NET 6 eller senare (någon recent .NET runtime fungerar) +> • Aspose.HTML för .NET NuGet-paket (`Aspose.Html`) installerat +> • Grundläggande kunskap om C# och DOM‑koncept + +Inga andra bibliotek krävs, och koden körs på Windows, Linux eller macOS. + +--- + +## Vad du kommer att bygga + +Vi kommer att skapa ett minimalt HTML‑dokument, lägga till ett `` som innehåller frasen **Bold‑Italic text**, applicera både **bold** och **italic**‑stil, och slutligen **append element to body**. Den slutgiltiga markupen ser ut så här: + +```html + + + Bold‑Italic text + + +``` + +Du kan kopiera‑klistra in den kompletta källkoden i slutet av guiden och köra den direkt. + +--- + +![Create HTML document example](image.png){alt="exempel på skapa html-dokument"} + +--- + +## Steg 1 – Initiera HTMLDocument (grunden för **create html document**) + +Innan vi kan **append element to body**, behöver vi ett dokumentobjekt att arbeta med. Aspose.HTML tillhandahåller klassen `HTMLDocument` som representerar ett DOM i minnet. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Varför detta är viktigt*: Att instansiera `HTMLDocument` ger dig en ren canvas—tänk på det som ett tomt blad där du senare kommer att **format text html**. Utan detta steg kan du inte manipulera noder eller applicera stilar. + +--- + +## Steg 2 – Skapa ``‑elementet (**create span element**) + +Nu behöver vi en behållare för vår stylade text. Ett `` är perfekt eftersom det är ett inline‑element som kan bära CSS utan att bryta flödet. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Proffstips*: Om du någonsin behöver infoga flera textstycken kan du återanvända samma `spanElement` genom att klona den (`spanElement.Clone(true)`) och ändra `InnerHtml` varje gång. + +--- + +## Steg 3 – Applicera **set font style** för fet **och** kursiv + +Aspose.HTML exponerar ett starkt typat `Style`‑objekt. För att **set font style** kombinerar vi `WebFontStyle.Bold` och `WebFontStyle.Italic` med en bitvis OR. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Varför använda enum*: `WebFontStyle`‑enumen mappar direkt till CSS‑egenskaper (`font-weight` och `font-style`). Att använda enumen förhindrar stavfel och säkerställer att den genererade CSS‑koden är giltig—viktigt för pålitlig **format text html**. + +--- + +## Steg 4 – **Append element to body** och slutför dokumentet + +Med det stylade span‑elementet klart är sista steget att placera det i ``‑taggen. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +Vid den här tidpunkten ser DOM‑trädet exakt ut som kodsnutten som visades tidigare. Om du inspekterar `htmlDocument.InnerHtml` ser du den fullständiga markupen. + +--- + +## Steg 5 – Spara eller rendera dokumentet + +Du kan antingen skriva HTML till en fil, strömma den till en webbläsare, eller rendera den till PDF/Bild med Aspose.HTML:s renderingsmotor. Här är det enklaste fil‑utdataalternativet: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Öppna `output.html` i någon webbläsare så bör du se **Bold‑Italic text** visas exakt som avsett. + +--- + +## Fullt fungerande exempel + +När vi sätter ihop allt, här är det kompletta, körklara programmet: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Förväntat resultat** – öppning av `output.html` visar: + +> **Bold‑Italic text** (fet och kursiv) + +--- + +## Vanliga frågor & kantfall + +### 1. Vad händer om jag behöver mer än två stilar? + +`WebFontStyle` är en flagg‑enum, så du kan kombinera valfritt antal stilar (t.ex. `Underline`). Fortsätt bara använda `|`‑operatorn: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Kan jag ändra färgen samtidigt? + +Absolut. `Style`‑objektet har en `Color`‑egenskap: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Hur gör jag **append element to body** flera gånger? + +Skapa en loop, klona det stylade span‑elementet, justera texten, och lägg till varje klon: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Vad händer om jag behöver **format text html** i ett `
` istället? + +Samma API fungerar för alla element. Byt bara `CreateElement("span")` mot `CreateElement("div")` och justera stilarna vid behov. + +### 5. Kompatibilitetsfrågor? + +Aspose.HTML riktar sig mot .NET Standard 2.0+, så koden körs på .NET Core, .NET Framework och .NET 5/6+. Inga extra webbläsarspecifika shim‑bibliotek behövs. + +--- + +## Proffstips & fallgropar + +- **Pro tip:** Sätt alltid `InnerHtml` *efter* att du har konfigurerat stilen. Att ändra innehållet först kan trigga en om‑layout i vissa webbläsare; att göra det efter styling undviker onödigt arbete. +- **Se upp för:** Att blanda `WebFontStyle` med inbäddade CSS‑strängar. Om du manuellt sätter `spanElement.SetAttribute("style", "...")` senare, kommer du att skriva över de enum‑genererade stilarna. Håll dig till en metod. +- **Prestanda‑notering:** För stora dokument, batch‑skapande (skapa alla noder först, och lägg sedan till dem på en gång) minskar antalet DOM‑mutationer och snabbar upp renderingen. + +--- + +## Slutsats + +Du vet nu hur man **create html document** med Aspose.HTML, **append element to body**, **set font style**, och **format text html** med ett **create span element**. Exemplet är fullt funktionellt, och förklaringarna täcker både “hur” och “varför”, vilket gör det enkelt att anpassa mönstret till mer komplexa scenarier. + +Redo för nästa steg? Prova att byta ut `` mot ett `

` med flera CSS‑klasser, eller rendera samma DOM till en PDF med `Document` → `PdfSaveOptions`. Samma principer gäller, och du kommer att finna Aspose.HTML som en pålitlig partner för alla server‑sidiga HTML‑genereringsuppgifter. + +Har du frågor, eller har du upptäckt en smart twist? Lämna en kommentar nedan—lycka till med kodandet! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/net/html-extensions-and-conversions/_index.md b/html/swedish/net/html-extensions-and-conversions/_index.md index c6d74504f..98651285b 100644 --- a/html/swedish/net/html-extensions-and-conversions/_index.md +++ b/html/swedish/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ Aspose.HTML för .NET är inte bara ett bibliotek; det är en spelomvandlare i w ## Tutorials för HTML-tillägg och omvandlingar ### [Konvertera HTML till PDF i .NET med Aspose.HTML](./convert-html-to-pdf/) Konvertera HTML till PDF utan ansträngning med Aspose.HTML för .NET. Följ vår steg-för-steg-guide och släpp lös kraften i HTML-till-PDF-konvertering. +### [Skapa PDF från URL – Komplett C#-guide](./create-pdf-from-url-complete-c-guide/) +Lär dig hur du skapar en PDF från en webbadress med Aspose.HTML för .NET i en komplett C#-guide. ### [Konvertera EPUB till bild i .NET med Aspose.HTML](./convert-epub-to-image/) Lär dig hur du konverterar EPUB till bilder med Aspose.HTML för .NET. Steg-för-steg handledning med kodexempel och anpassningsbara alternativ. ### [Konvertera EPUB till PDF i .NET med Aspose.HTML](./convert-epub-to-pdf/) @@ -74,4 +76,4 @@ Så vad väntar du på? Låt oss ge oss ut på denna spännande resa för att ut {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/swedish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..66350180d --- /dev/null +++ b/html/swedish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: Skapa PDF från URL i C# snabbt. Lär dig hur du konverterar HTML till + PDF, sparar webbsida som PDF och genererar PDF från HTML med enkel kod. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: sv +og_description: Skapa PDF från URL i C# snabbt. Denna handledning visar hur du konverterar + HTML till PDF, sparar webbsidan som PDF och genererar PDF från HTML med Aspose.HTML. +og_title: Skapa PDF från URL – Komplett C#‑guide +tags: +- pdf +- csharp +- html +- conversion +title: Skapa PDF från URL – Komplett C#‑guide +url: /sv/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Skapa PDF från URL – Komplett C#-guide + +Har du någonsin behövt **create PDF from URL** men varit osäker på vilket bibliotek du ska välja? Du är inte ensam. Många utvecklare stöter på detta när de vill arkivera en webbsida, generera fakturor från en online‑mall eller helt enkelt erbjuda en “ladda ner som PDF”-knapp på sin webbplats. + +I den här handledningen går vi igenom hela processen för **converting HTML to PDF** med C#. Du kommer att se hur du **save webpage as PDF**, hur du **generate PDF from HTML**, och varför `Aspose.HTML for .NET`‑biblioteket gör det enkelt. I slutet har du ett färdigt kodexempel som hämtar vilken offentlig URL som helst, renderar den och skriver en PDF‑fil till disk. + +> **Pro tip:** Om du arbetar bakom en företagsproxy, se till att `HTMLDocument`‑konstruktorn får rätt `WebRequest`‑inställningar—annars misslyckas nedladdningen tyst. + +## Vad du behöver + +- **.NET 6.0** eller senare (koden fungerar även på .NET Framework 4.7+). +- **Aspose.HTML for .NET** NuGet‑paket (`Aspose.HTML`). +- En skrivbar mapp på disken där PDF‑filen ska sparas. +- Grundläggande kunskap om C# (inga avancerade knep krävs). + +Inga extra konfigurationsfiler, ingen dold magi—bara några rader ren, kommenterad kod. + +![Create PDF from URL example](image.png){alt="skapa pdf från url"} + +## Steg 1: Installera Aspose.HTML NuGet‑paketet + +Öppna din terminal eller Package Manager Console och kör: + +```bash +dotnet add package Aspose.HTML +``` + +> **Why this step matters:** `HTMLDocument`, `PdfSaveOptions` och `PdfConverter`‑klasserna finns i `Aspose.Html`‑namnrymden. Utan paketet har kompilatorn ingen aning om vad dessa typer är. + +## Steg 2: Ladda webbsidan i ett `HTMLDocument` + +Den första riktiga handlingen är att hämta den fjärranslutna HTML‑koden. `HTMLDocument` kan ta en URL direkt och hanterar omdirigeringar samt innehållstypdetektering åt dig. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Vad händer?** +- `HTMLDocument` analyserar den hämtade markupen till ett DOM‑träd, precis som en webbläsare. +- Alla externa CSS‑filer, bilder eller skript som refereras med absoluta URL:er hämtas också, vilket säkerställer att PDF‑en ser ut som den levande sidan. + +## Steg 3: Konfigurera PDF‑exportalternativ (marginaler, sidstorlek, osv.) + +Innan vi överlämnar dokumentet till konverteraren finjusterar vi utdata. `PdfSaveOptions`‑objektet låter dig ange marginaler, sidorientering och till och med PDF‑version. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Varför sätta marginaler?** +En tajt PDF kan klippa av rubriker eller sidfötter, särskilt på mobiloptimerade webbplatser. Genom att lägga till en lagom marginal säkerställer du att allt förblir läsbart. + +## Steg 4: Konvertera HTML‑dokumentet direkt till PDF + +Nu sker det tunga arbetet. `PdfConverter.ConvertHtml` strömmar den renderade sidan direkt till en PDF‑fil. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Under huven:** +- Aspose renderar DOM‑en med sin egen layout‑motor (ingen Chromium behövs). +- Den renderade bitmap‑en rasteriseras sedan till PDF‑vektorer där det är möjligt, vilket bevarar möjligheten att markera text. + +## Steg 5: Verifiera resultatet och hantera kantfall + +En snabb kontroll sparar huvudvärk senare. Öppna den genererade filen; du bör se den levande sidan, marginaler tillämpade och alla bilder intakta. + +### Vanliga fallgropar och hur du undviker dem + +| Issue | Cause | Fix | +|-------|-------|-----| +| **Tom PDF** | URL blockeras av brandvägg eller kräver autentisering | Skicka en anpassad `WebRequest` med autentiseringsuppgifter till `HTMLDocument`‑konstruktorn | +| **Saknad CSS** | Extern stylesheet använder relativa URL:er | Säkerställ att bas‑URL:en är korrekt (Aspose hanterar detta, men dubbelkolla omdirigeringar) | +| **Stor filstorlek** | Högupplösta bilder har inte skalats ner | Använd `PdfSaveOptions.ImageCompression` för att JPEG‑komprimera inbäddade bilder | +| **Unicode‑tecken förvrängda** | Typsnitt inte inbäddat | Ställ in `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Fullt fungerande exempel (Kopiera‑klistra redo) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Kör programmet (`dotnet run`) så hittar du `example.pdf` i `C:\Temp`. Öppna den med någon PDF‑visare, och du bör se en exakt kopia av `https://example.com` med de marginaler du definierat. + +## Slutsats + +Vi har just visat dig **how to create PDF from URL** med C#. Stegen täckte att ladda en webbsida, konfigurera marginaler och konvertera DOM‑en till en PDF‑fil—allt du behöver för att **convert HTML to PDF**, **save webpage as PDF**, och **generate PDF from HTML** på ett produktionsklart sätt. + +Känn dig fri att experimentera: ändra sidstorleken till `Letter`, byt orientering till liggande, eller lägg till en header/footer med `PdfPageEventHandler`. Samma mönster fungerar för dynamiska sidor, inloggningsskyddade portaler (bara leverera cookies), eller till och med batch‑bearbetning av en lista med URL:er. + +**Nästa steg du kan utforska** + +- **HTML to PDF C#** med asynkron konvertering för hög‑genomströmningstjänster. +- Inbäddning av **metadata** (författare, titel) i PDF‑en via `PdfDocumentInfo`. +- Användning av **Aspose.PDF** för att slå samman flera PDF‑er genererade från olika URL:er till en enda rapport. + +Har du frågor? lämna en kommentar nedan, och lycka till med kodandet! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/net/rendering-html-documents/_index.md b/html/swedish/net/rendering-html-documents/_index.md index 35b301cb9..939e2d2b0 100644 --- a/html/swedish/net/rendering-html-documents/_index.md +++ b/html/swedish/net/rendering-html-documents/_index.md @@ -42,6 +42,8 @@ Nu när du har konfigurerat Aspose.HTML för .NET är det dags att utforska hand ### [Rendera HTML som PNG i .NET med Aspose.HTML](./render-html-as-png/) Lär dig att arbeta med Aspose.HTML för .NET: Manipulera HTML, konvertera till olika format och mer. Dyk in i denna omfattande handledning! +### [Hur man renderar HTML till PNG – Komplett steg‑för‑steg‑guide](./how-to-render-html-to-png-complete-step-by-step-guide/) +Lär dig att rendera HTML till PNG med en komplett steg‑för‑steg‑guide i Aspose.HTML för .NET. ### [Rendera EPUB som XPS i .NET med Aspose.HTML](./render-epub-as-xps/) Lär dig hur du skapar och renderar HTML-dokument med Aspose.HTML för .NET i den här omfattande självstudien. Dyk in i en värld av HTML-manipulation, webbskrapning och mer. ### [Rendering Timeout i .NET med Aspose.HTML](./rendering-timeout/) @@ -52,9 +54,12 @@ Lär dig hur du kontrollerar renderingstidsgränser effektivt i Aspose.HTML för Lär dig att rendera flera HTML-dokument med Aspose.HTML för .NET. Förbättra dina dokumentbehandlingsmöjligheter med detta kraftfulla bibliotek. ### [Rendera SVG Doc som PNG i .NET med Aspose.HTML](./render-svg-doc-as-png/) Lås upp kraften i Aspose.HTML för .NET! Lär dig hur du renderar SVG-dokument som PNG utan ansträngning. Dyk ner i steg-för-steg-exempel och vanliga frågor. Kom igång nu! +### [Hur man renderar HTML – Komplett guide med anpassad resurs‑hanterare](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Lär dig att rendera HTML med en anpassad resurs‑hanterare i Aspose.HTML för .NET. Steg‑för‑steg‑exempel och bästa praxis. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/swedish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..28007c89c --- /dev/null +++ b/html/swedish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: Hur man renderar HTML till bilder med Aspose.HTML. Lär dig HTML‑till‑bild‑konvertering, + anpassad resurs‑hanterare och konvertera HTML till bitmap i C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: sv +og_description: Hur man renderar HTML till bilder med Aspose.HTML. Bemästra HTML‑till‑bild‑konvertering, + anpassad resurs‑hanterare och konvertera HTML till bitmap i C#. +og_title: Hur man renderar HTML – Komplett guide med anpassad resurs‑hanterare +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Hur man renderar HTML – Komplett guide med anpassad resurs‑hanterare +url: /sv/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Så renderar du HTML – Komplett guide med anpassad resurs‑hanterare + +Har du någonsin undrat **hur man renderar HTML** till en bitmap utan att själv jonglera med en webbläsarmotor? Du är inte ensam. Många utvecklare stöter på problem när de snabbt behöver en skärmdump av en dynamisk sida för e‑post, rapporter eller miniatyrer. Den goda nyheten? Med Aspose.HTML kan du omvandla vilken HTML‑sträng som helst till en bild – utan UI, utan headless Chrome, bara ren C#‑kod. + +I den här handledningen går vi igenom ett praktiskt **html to image conversion**‑scenario, visar hur du **implementerar en anpassad resurs‑hanterare**, och demonstrerar hela **convert html to bitmap**‑arbetsflödet. När du är klar har du en återanvändbar metod som renderar HTML till en bild helt i minnet, redo för vidare bearbetning eller lagring. + +> **Förutsättningar** +> * .NET 6+ (eller .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet‑paket (`Aspose.Html`) +> * Grundläggande kunskap om C# och strömmar + +Om du har dessa grunder på plats, låt oss dyka ner. + +--- + +## Så renderar du HTML med Aspose.HTML + +Kärnan i varje **render html to image**‑operation är klassen `ImageRenderer`. Den tar ett `HTMLDocument` och spottar ut rastergrafik (PNG, JPEG, BMP osv.). Nedan är det minsta skelettet: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Det kodstycket fungerar, men du får bara en fil på disk om du talar om för renderaren var den ska skrivas. För att hålla allt i minnet – och för att avlyssna varje resurs (bilder, CSS, teckensnitt) som HTML‑dokumentet begär – kopplar vi in en **custom resource handler**. + +--- + +## Implementering av en anpassad resurs‑hanterare + +En **custom resource handler** ger dig full kontroll över hur externa tillgångar hämtas och lagras. I många fall vill du fånga dessa tillgångar i minnet för senare bruk (t.ex. packa dem i ett ZIP‑arkiv). Hanteraren ärver från `ResourceHandler` och överskuggar `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Varför bry sig?** +* **Prestanda** – ingen disk‑I/O, allt stannar i RAM. +* **Säkerhet** – du bestämmer vilka URL:er som får hämtas. +* **Utbyggbarhet** – du kan cacha resurser, byta namn på dem eller bädda in dem i andra behållare. + +--- + +## Konvertera HTML till bitmap med ImageRenderer + +Nu kombinerar vi delarna: läs in HTML, fäst `MyHandler` och rendera. Följande metod returnerar en `MemoryStream` som innehåller en PNG‑bild av den renderade sidan. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Förväntat resultat + +Om du anropar metoden så här: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Får du en `demo.png` som ungefär ser ut så här: + +![exempel på hur man renderar html output](https://example.com/assets/render-html-output.png "exempel på hur man renderar html output") + +*Alt‑text:* **exempel på hur man renderar html output** – en liten bitmap som visar den renderade HTML‑snutten. + +--- + +## HTML‑till‑bild‑konvertering – Vanliga fallgropar & tips + +### 1. Relativa URL:er & base‑taggar +Om ditt HTML refererar till externa CSS‑ eller bildfiler med relativa sökvägar vet inte renderaren vilken basmapp som gäller. Antingen: + +* Lägg till en ``‑tagg, eller +* Lös URL:er i `MyHandler.HandleResource` och leverera rätt ström. + +### 2. Tillgänglighet för teckensnitt +Aspose.HTML använder systemteckensnitt som standard. För anpassade webbteckensnitt (`@font-face`) bör du se till att teckensnittsfilerna är åtkomliga via hanteraren, eller bädda in dem som base64‑data‑URI:er. + +### 3. Stora sidor +Att rendera en mycket hög sida kan kräva mycket minne. Du kan begränsa viewport‑storleken: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Bildformat +`renderer.Save(stream, ImageFormat.Jpeg)` fungerar lika bra om du behöver JPEG‑komprimering. Byt ut `ImageFormat.Png` mot `ImageFormat.Bmp` för ett riktigt **konvertera html till bitmap**‑resultat. + +--- + +## Rendera HTML till bild – Avancerade scenarier + +### A. Rendera flera sidor +Om HTML‑dokumentet innehåller sidbrytningar (`
`) kan du iterera över sidorna: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Bädda in bilden i en PDF +Kombinera med `Aspose.Pdf` för att bädda in PNG‑filen direkt: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## Slutsats + +Vi har gått igenom **hur man renderar HTML** till en bitmap helt i minnet, utforskat grunderna i **html to image conversion**, byggt en **custom resource handler**, och visat hur du **konverterar html till bitmap** med Aspose.HTML:s `ImageRenderer`. Metoden är snabb, trådsäker och lätt att utöka för verkliga projekt – från generering av e‑post‑miniatyrer till automatiserad rapportskapning. + +Redo för nästa steg? Prova att byta PNG‑utdata mot JPEG, experimentera med olika sidstorlekar, eller koppla hanteraren till ett cache‑lager så att återkommande renderingar blir omedelbara. Himlen är gränsen när du själv styr varje resurs. + +Har du frågor eller ett coolt användningsfall du vill dela? Lägg en kommentar nedan, och lycka till med renderingarna! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/swedish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..c1b0e0c70 --- /dev/null +++ b/html/swedish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,231 @@ +--- +category: general +date: 2026-01-03 +description: Lär dig hur du renderar HTML till PNG, konverterar en webbsida till bild + och sparar HTML som PNG med Aspose.HTML i C#. Snabbt, pålitligt och redo för produktion. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: sv +og_description: Lär dig hur du renderar HTML till PNG, konverterar en webbsida till + bild och sparar HTML som PNG med ett komplett C#‑exempel som använder Aspose.HTML. +og_title: Hur man renderar HTML till PNG – Komplett guide +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Så renderar du HTML till PNG – Komplett steg‑för‑steg‑guide +url: /sv/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Så renderar du HTML till PNG – Komplett steg‑för‑steg‑guide + +Om du letar efter **how to render html** till en bild, har du kommit till rätt ställe. Oavsett om du behöver **convert webpage to image** för miniatyrer, arkivera en sida som PNG, eller generera förhandsvisningar för sociala medier i realtid, kan processen vara förvånansvärt enkel med rätt bibliotek. + +I den här handledningen går vi igenom hur du omvandlar en levande URL till en PNG‑fil med Aspose.HTML för .NET. Du får ett komplett, körbart kodexempel, lär dig varför varje inställning är viktig och upptäcker några knep för att hantera kantfall. När du är klar kan du **save html as png**, **convert html to png** och till och med bädda in resultatet i en rapport eller ett e‑postmeddelande utan att svettas. + +## Förutsättningar – Vad du behöver + +Innan vi dyker ner, se till att du har följande: + +- **.NET 6.0** eller senare (koden fungerar även med .NET Core och .NET Framework) +- **Aspose.HTML for .NET** NuGet‑paket (`Aspose.Html`) installerat +- En IDE du föredrar (Visual Studio, Rider eller VS Code) +- En skrivbar mapp där PNG‑filen ska sparas + +Ingen extra konfiguration krävs – Aspose.HTML sköter det tunga arbetet med att parsra sidan, tillämpa CSS och rasterisera layouten. + +## Steg 1: Ladda HTML‑dokumentet du vill rendera + +Det första du behöver är en `HTMLDocument`‑instans som pekar på sidan du vill fånga. Aspose.HTML kan läsa från en URL, en lokal fil eller en rå HTML‑sträng. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Varför detta är viktigt:** Att ladda dokumentet direkt från URL:n säkerställer att alla externa resurser (CSS, JavaScript, bilder) hämtas automatiskt, vilket ger dig en trogen återgivning av den levande sidan. + +## Steg 2: Konfigurera bildrenderingsalternativ + +Nästa steg är att ställa in `ImageRenderingOptions`. Dessa alternativ styr utdata‑storlek, kvalitet och om anti‑aliasing appliceras. Genom att justera dem kan du balansera filstorlek mot visuell trohet. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Proffstips:** Om du behöver en högupplöst miniatyr, öka `Width` och `Height` proportionellt. Aspose.HTML skalar layouten därefter utan att förlora vektor‑kvalitet. + +## Steg 3: Initiera bildrenderaren + +Nu skapar vi en `ImageRenderer` genom att skicka dokumentet och de alternativ vi just definierat. Detta objekt är motorn som faktiskt ritar sidan på en bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **Vad händer under huven?** Renderaren parsar DOM‑trädet, beräknar CSS‑stilar, utför layout och rasteriserar slutligen varje element på en pixel‑canvas. Allt sker i minnet, så du behöver inget webbläsarfönster. + +## Steg 4: Rendera och spara PNG‑filen + +Till sist anropar du `Render` med den fullständiga sökvägen där du vill lagra PNG‑filen. Metoden skriver filen synkront och frigör interna resurser automatiskt. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Förväntat resultat:** Efter att programmet har körts hittar du `example.png` i `output`‑mappen. Öppna den i en bildvisare så ser du en trogen avbildning av `https://example.com` i 800×600 px. + +--- + +### Fullt, körklart exempel + +Nedan är det kompletta programmet som du kan kopiera‑och‑klistra in i ett nytt konsolprojekt. Det innehåller alla `using`‑direktiv, felhantering och kommentarer för tydlighet. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Kör programmet (`dotnet run` från projektmappen) så får du en PNG som speglar den levande sidan. Det är **how to render html** med bara några rader C#. + +--- + +## Vanliga frågor & kantfall + +### Kan jag rendera en lokal HTML‑fil istället för en URL? + +Absolut. Byt ut URL:n mot en filsökväg: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Vad händer om sidan använder JavaScript för att modifiera DOM efter laddning? + +Aspose.HTML kör de flesta klient‑scripts, men det är ingen fullständig webbläsarmotor. För kraftigt skriptade sidor kan du behöva för‑rendera HTML (t.ex. med en headless Chromium‑instans) och sedan skicka den resulterande markupen till Aspose.HTML. + +### Hur styr jag PNG‑komprimeringsnivån? + +`ImageRenderingOptions` har en egenskap `CompressionLevel` (0–9). Lägre tal betyder större filer men högre kvalitet. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Jag behöver en transparent bakgrund – går det att göra? + +Ja. Sätt bakgrundsfärgen till transparent innan renderingen: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Finns det ett sätt att rendera flera sidor till en enda bild? + +Du kan loopa över en samling URL:er eller HTML‑strängar, rendera var och en till en bitmap och sedan sätta ihop dem med `System.Drawing` eller `ImageSharp`. Kärnan **convert html to png**‑steget förblir detsamma. + +--- + +## Bonus: Bädda in PNG i ett Web‑API + +Om du vill exponera funktionen via en ASP.NET Core‑endpoint, returnera bara filens byte‑array: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Nu kan vilken klient som helst begära `GET /render?url=https://example.com` och få en PNG i realtid – perfekt för **convert webpage to image**‑tjänster. + +--- + +## Slutsats + +Vi har gått igenom allt du behöver veta om **how to render html** till en PNG‑fil med Aspose.HTML för .NET. Från att ladda en fjärrsida, konfigurera renderingsalternativ och hantera vanliga fallgropar, visar det fullständiga exemplet exakt hur du **convert html to png**, **save html as png** och till och med exponerar logiken via ett Web‑API. + +Prova med dina egna URL:er, experimentera med olika dimensioner och kanske automatisera miniatyrgenerering för din produktkatalog. Möjligheterna är oändliga när du har grunderna för **render html to png**. + +--- + +*Redo att ta nästa steg?* Hämta NuGet‑paketet, klistra in koden i ditt projekt och börja konvertera webbsidor till bilder redan idag. Om du stöter på problem, lämna gärna en kommentar – happy rendering! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/net/canvas-and-image-manipulation/_index.md b/html/thai/net/canvas-and-image-manipulation/_index.md index 9eb4b485b..08a9ac852 100644 --- a/html/thai/net/canvas-and-image-manipulation/_index.md +++ b/html/thai/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aspose.HTML สำหรับ .NET ช่วยให้การแก้ไ เรียนรู้วิธีการแปลง SVG เป็น XPS โดยใช้ Aspose.HTML สำหรับ .NET เพิ่มประสิทธิภาพการพัฒนาเว็บของคุณด้วยไลบรารีอันทรงพลังนี้ ### [วิธีเปิดใช้งาน Antialiasing ใน C# – ขอบเรียบ](./how-to-enable-antialiasing-in-c-smooth-edges/) เรียนรู้วิธีเปิดใช้งาน Antialiasing ใน C# เพื่อทำให้ขอบภาพและข้อความดูเรียบเนียนและสวยงาม +### [สร้างข้อความบนแคนวาส – คู่มือเต็มสำหรับการแสดงข้อความบนรูปภาพ](./create-canvas-text-full-guide-to-rendering-text-on-images/) +เรียนรู้วิธีสร้างและแสดงข้อความบนภาพโดยใช้แคนวาสใน Aspose.HTML สำหรับ .NET อย่างละเอียดและครบถ้วน ## บทสรุป diff --git a/html/thai/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/thai/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..ccb9ec471 --- /dev/null +++ b/html/thai/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,234 @@ +--- +category: general +date: 2026-01-03 +description: สร้างข้อความบนแคนวาสอย่างรวดเร็วและเรียนรู้วิธีการเรนเดอร์ภาพข้อความ + ตั้งค่าตัวเลือกข้อความ และเติมข้อความบนแคนวาสพร้อมปรับปรุงการเรนเดอร์ข้อความบน Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: th +og_description: สร้างข้อความบนแคนวาสด้วย Aspose HTML, เรียนรู้การเรนเดอร์ภาพข้อความ, + ตั้งค่าตัวเลือกข้อความ, และปรับปรุงคุณภาพข้อความบน Linux ในบทเรียนเดียว +og_title: สร้างข้อความบนแคนวาส – คู่มือการเรนเดอร์แบบครบถ้วน +tags: +- Aspose +- C# +- Graphics +- Canvas +title: สร้างข้อความบนแคนวาส – คู่มือเต็มสำหรับการเรนเดอร์ข้อความบนภาพ +url: /th/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# สร้างข้อความบนแคนวาส – คู่มือการเรนเดอร์แบบครบถ้วน + +เคยต้องการ **create canvas text** แต่ไม่แน่ใจว่าจะทำให้ glyph คมชัดบนทุกแพลตฟอร์มอย่างไร? คุณไม่ได้เป็นคนเดียว นักพัฒนาจำนวนมากเจอปัญหาข้อความดูเบลอบน Linux โดยเฉพาะเมื่อแปลง HTML เป็นภาพ + +ในบทแนะนำนี้เราจะพา คุณผ่านวิธีแก้ปัญหาที่ใช้งานได้จริงซึ่งไม่เพียงทำให้คุณ **render text image** บนแคนวาส Aspose HTML แต่ยังแสดงวิธี **set text options**, ใช้ `FillText` อย่างถูกต้อง, และ **improve Linux text** ด้วยการใช้ hinting. เมื่อจบคุณจะได้สคริปต์ที่ทำงานได้เองซึ่งสามารถนำไปใส่ในโปรเจค .NET ใดก็ได้ + +## สิ่งที่คุณจะได้เรียนรู้ + +- วิธีสร้างอ็อบเจกต์ `Canvas` และเตรียมพร้อมสำหรับการวาด +- บทบาทของ `TextOptions` และเหตุผลที่การเปิดใช้ hinting มีความสำคัญบน Linux +- โค้ดขั้นตอน‑โดย‑ขั้นตอนที่ **fill text canvas** ด้วยอักขระสไตล์คุณภาพสูง +- จุดบกพร่องทั่วไป (ขาด hinting, ระบบพิกัดผิด) และวิธีแก้อย่างรวดเร็ว +- วิธีขยายตัวอย่าง: ฟอนต์กำหนดเอง, สี, และข้อความหลายบรรทัด + +> **Prerequisite:** .NET 6+ (or .NET Framework 4.7.2) and the Aspose.HTML for .NET NuGet package installed. + +--- + +## ขั้นตอนที่ 1: ตั้งค่าโปรเจคและการนำเข้า + +ก่อนที่เราจะเริ่มวาด, ตรวจสอบให้แน่ใจว่าโปรเจคของคุณอ้างอิง assembly ที่ถูกต้อง + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro tip:** หากคุณใช้ Linux, ให้เพิ่มแพคเกจ `libgdiplus` (`sudo apt-get install libgdiplus`) เพื่อให้การเรนเดอร์แบบอิง GDI ทำงานได้อย่างราบรื่น. + +--- + +## ขั้นตอนที่ 2: สร้าง Canvas และกำหนดขนาด + +Canvas คือ bitmap ที่อยู่เบื้องหลังซึ่งคุณสามารถวาดลงไปได้ คิดว่าเป็นกระดานวาดดิจิทัลของคุณ + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Why this matters:** การตั้งค่าพื้นหลังเป็นสีทึบจะป้องกันไม่ให้เกิด artefact ที่โปร่งใสเมื่อคุณส่งออกภาพในภายหลัง. + +--- + +## ขั้นตอนที่ 3: กำหนดค่า Text Options – กุญแจสู่ข้อความบน Linux ที่คมชัด + +การเรนเดอร์ฟอนต์บน Linux อาจดูเบลอหากปิดการใช้ hinting. `TextOptions.UseHinting` บอก renderer ให้จัดตำแหน่ง glyph ให้ตรงกับขอบพิกเซล, ทำให้ผลลัพธ์คมชัดขึ้นอย่างมาก + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **What if you skip this?** บนหลายการแจกจ่ายของ Linux ข้อความจะดูเบลอหรือจัดตำแหน่งผิดพลาดเล็กน้อย, โดยเฉพาะที่ขนาดฟอนต์เล็ก. + +--- + +## ขั้นตอนที่ 4: เติมข้อความลงบน Canvas + +เมื่อ canvas พร้อมและตั้งค่า text options แล้ว, เราสามารถ **fill text canvas** ได้จริง + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +หากต้องการสไตล์แบบกำหนดเอง (สี, ขนาดฟอนต์, การจัดแนว), ให้ห่อการเรียกใน `Font` และ `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## ขั้นตอนที่ 5: ส่งออก Canvas เป็นไฟล์รูปภาพ + +ขั้นตอนสุดท้ายคือการเขียน bitmap ที่เรนเดอร์ลงดิสก์เพื่อให้คุณตรวจสอบผลลัพธ์ + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +เปิดไฟล์ `canvas-output.png` แล้วคุณควรเห็นข้อความที่คมชัดและมี hinting ถูกต้อง—ไม่ว่าคุณจะอยู่บน Windows, macOS, หรือ Linux. + +--- + +## คำถามทั่วไปและกรณีขอบ + +### การใช้ hinting มีผลต่อประสิทธิภาพอย่างไร? + +การเปิดใช้ hinting เพิ่มภาระที่ไม่มีนัยสำคัญ (โดยทั่วไป < 2 ms สำหรับ canvas ขนาด 800×600). ผลลัพธ์ด้านภาพที่ดีขึ้นมีค่ามากกว่าค่าใช้จ่าย, โดยเฉพาะสำหรับการสร้างภาพฝั่งเซิร์ฟเวอร์ที่คุณภาพเป็นสิ่งสำคัญ. + +### ถ้าต้องการข้อความหลายบรรทัดล่ะ? + +ใช้ `canvas.FillText` ในลูป, ปรับค่า Y‑coordinate, หรือใช้ overload ของ `canvas.FillText` ที่รับอ็อบเจกต์ `TextLayout` เพื่อทำการตัดบรรทัดอัตโนมัติ + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### สามารถใช้ฟอนต์ TrueType ที่กำหนดเองได้ไหม? + +แน่นอน. โหลดฟอนต์ด้วย `FontFamily` แล้วกำหนดให้กับ `TextOptions.FontFamily` หรือโดยตรงกับ `Font` ที่ส่งให้ `FillText` + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +ตรวจสอบให้แน่ใจว่าไฟล์ฟอนต์สามารถเข้าถึงได้โดย runtime (วางไว้ในโฟลเดอร์โปรเจคหรือทำการลงทะเบียนแบบระบบทั้งหมด). + +--- + +## ตัวอย่างการทำงานเต็มรูปแบบ + +ด้านล่างเป็นโปรแกรมที่พร้อมคัดลอก‑วางเต็มรูปแบบซึ่งรวมทุกขั้นตอนข้างต้น + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**ผลลัพธ์ที่คาดหวัง:** ไฟล์ PNG ชื่อ `canvas-output.png` ที่มีสองบรรทัดของข้อความ—หนึ่งแบบธรรมดา, อีกหนึ่งแบบหนาสีฟ้า—ทั้งสองเรนเดอร์คมชัดด้วย hinting. + +--- + +## สรุป + +เราเพิ่ง **created canvas text** ตั้งแต่ต้น, เรียนรู้วิธี **render text image** ด้วย Aspose.HTML, และค้นพบว่าทำไมการ **set text options** เช่น `UseHinting` จึงจำเป็นต่อการ **improve Linux text** คุณภาพ. ด้วยการทำตามขั้นตอนข้างต้นคุณสามารถ **fill text canvas** อย่างเชื่อถือได้ในสภาพแวดล้อม .NET ใดก็ได้, ไม่ว่าจะเป็นการสร้าง thumbnail, watermark, หรือกราฟิกไดนามิกสำหรับเว็บ API. + +พร้อมสำหรับความท้าทายต่อไปหรือยัง? ลองเพิ่ม gradient พื้นหลัง, หมุนข้อความ, หรือส่งออกเป็น SVG เพื่อการสเกลแบบเวกเตอร์ที่สมบูรณ์. หลักการเดียวกัน—`TextOptions` ที่เหมาะสม, การจัดการพิกัดอย่างรอบคอบ, และการทำลายทรัพยากรอย่างสะอาด—ใช้ได้กับทุกฟอร์แมต. + +หากคุณเจอข้อบกพร่องหรือมีไอเดียสำหรับการขยาย, ฝากคอมเมนต์ไว้ได้. ขอให้เขียนโค้ดอย่างสนุกสนาน, และเพลิดเพลินกับอักขระคมเหมือนมีดโกน! + +--- + +*ภาพที่แสดง canvas พร้อมข้อความคมชัด (alt text: “ตัวอย่างการสร้างข้อความบน canvas ที่แสดงการเรนเดอร์ด้วย hinting บน Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/net/html-document-manipulation/_index.md b/html/thai/net/html-document-manipulation/_index.md index b7debd2ad..54be9fa8d 100644 --- a/html/thai/net/html-document-manipulation/_index.md +++ b/html/thai/net/html-document-manipulation/_index.md @@ -69,6 +69,8 @@ Aspose.HTML สำหรับ .NET โดดเด่นด้วยควา เรียนรู้การใช้ Aspose.HTML สำหรับ .NET นำเข้าเนมสเปซ รวม HTML กับ XML และเพิ่มทักษะการพัฒนาเว็บของคุณด้วยคู่มือที่ครอบคลุมนี้ ### [สร้างเอกสาร XPS โดย XpsDevice ใน .NET ด้วย Aspose.HTML](./generate-xps-documents-by-xpsdevice/) ปลดล็อกศักยภาพของการพัฒนาเว็บด้วย Aspose.HTML สำหรับ .NET สร้าง แปลง และจัดการเอกสาร HTML ได้อย่างง่ายดาย +### [สร้างเอกสาร HTML ด้วย Aspose.HTML – คู่มือขั้นตอนต่อขั้นตอน](./create-html-document-with-aspose-html-step-by-step-guide/) +เรียนรู้วิธีสร้างเอกสาร HTML ด้วย Aspose.HTML ผ่านขั้นตอนที่ชัดเจนและตัวอย่างโค้ด ## บทสรุป @@ -78,4 +80,4 @@ Aspose.HTML สำหรับ .NET โดดเด่นด้วยควา {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/thai/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..9fa9ab6c4 --- /dev/null +++ b/html/thai/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,239 @@ +--- +category: general +date: 2026-01-03 +description: สร้างเอกสาร HTML ด้วย C# โดยใช้ Aspose.HTML. เรียนรู้วิธีเพิ่มองค์ประกอบลงใน + body, ตั้งค่าแบบอักษร, และจัดรูปแบบข้อความ HTML ด้วย span ง่าย ๆ. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: th +og_description: สร้างเอกสาร HTML ด้วย C# และดูวิธีการเพิ่มองค์ประกอบลงใน body ตั้งค่ารูปแบบฟอนต์ + และจัดรูปแบบข้อความ HTML ด้วย Aspose.HTML. +og_title: สร้างเอกสาร HTML ด้วย Aspose.HTML – คู่มือด่วน +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: สร้างเอกสาร HTML ด้วย Aspose.HTML – คู่มือขั้นตอนโดยละเอียด +url: /th/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# สร้างเอกสาร HTML ด้วย Aspose.HTML – คู่มือขั้นตอนโดยละเอียด + +เคยต้อง **create html document** ด้วยโปรแกรมและสงสัยว่าทำไมผลลัพธ์ถึงดูธรรมดา? คุณไม่ได้เป็นคนเดียว ในหลายโครงการเราต้องสร้างโค้ดสั้น ๆ แบบเรียลไทม์—เช่น แม่แบบอีเมล รายงานแบบไดนามิก หรือวิดเจ็ต UI ขนาดเล็ก ข่าวดีคือ Aspose.HTML ทำให้การ **create html document**, การจัดสไตล์, และการนำไปใส่ในหน้าเว็บของคุณเป็นเรื่องง่ายโดยไม่ต้องเขียนสตริงแบบดิบ + +ในบทเรียนนี้เราจะเดินผ่านตัวอย่างครบถ้วนที่แสดงวิธี **append element to body**, **set font style**, และ **format text html** ด้วยการ **create span element**. เมื่อเสร็จสิ้นคุณจะได้สคริปต์ C# ที่ทำงานได้ซึ่งสร้างข้อความหนา‑เอียงภายใน `` และคุณจะเข้าใจ “ทำไม” ของแต่ละคำสั่ง + +> **Prerequisites** +> • .NET 6 หรือใหม่กว่า (runtime .NET ใดก็ได้) +> • NuGet package Aspose.HTML for .NET (`Aspose.Html`) ติดตั้งแล้ว +> • ความคุ้นเคยพื้นฐานกับ C# และแนวคิด DOM + +ไม่ต้องใช้ไลบรารีอื่นใด และโค้ดทำงานได้บน Windows, Linux หรือ macOS + +--- + +## สิ่งที่คุณจะสร้าง + +เราจะสร้างเอกสาร HTML ขั้นต่ำ, เพิ่ม `` ที่มีข้อความ **Bold‑Italic text**, ใส่สไตล์ **bold** และ **italic**, แล้วสุดท้าย **append element to body**. โค้ด HTML สุดท้ายจะเป็นดังนี้: + +```html + + + Bold‑Italic text + + +``` + +คุณสามารถคัดลอก‑วางซอร์สเต็มได้ที่ส่วนท้ายของคู่มือและรันได้ทันที + +--- + +![Create HTML document example](image.png){alt="ตัวอย่างการสร้างเอกสาร HTML"} + +--- + +## ขั้นตอน 1 – เริ่มต้น HTMLDocument (พื้นฐานของ **create html document**) + +ก่อนที่เราจะ **append element to body**, เราต้องมีอ็อบเจกต์เอกสารเพื่อทำงาน Aspose.HTML มีคลาส `HTMLDocument` ที่เป็นตัวแทนของ DOM ในหน่วยความจำ + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*ทำไมจึงสำคัญ*: การสร้างอินสแตนซ์ `HTMLDocument` ให้คุณมีผืนผ้าเปล่า—เหมือนกระดาษเปล่าที่คุณจะ **format text html** ต่อไป หากไม่มีขั้นตอนนี้คุณจะไม่สามารถจัดการโหนดหรือใส่สไตล์ได้ + +--- + +## ขั้นตอน 2 – สร้างองค์ประกอบ `` (**create span element**) + +ต่อไปเราต้องการคอนเทนเนอร์สำหรับข้อความที่จัดสไตล์ `` เหมาะสมที่สุดเพราะเป็นอินไลน์อีลีเมนต์ที่สามารถใส่ CSS ได้โดยไม่ทำลายการไหลของข้อความ + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*เคล็ดลับ*: หากต้องการแทรกข้อความหลายส่วน คุณสามารถใช้ `spanElement` เดิมซ้ำโดยทำการโคลน (`spanElement.Clone(true)`) แล้วเปลี่ยน `InnerHtml` ทุกครั้ง + +--- + +## ขั้นตอน 3 – ใช้ **set font style** สำหรับ **bold** **และ** **italic** + +Aspose.HTML เปิดให้ใช้วัตถุ `Style` ที่เป็นแบบ strongly‑typed เพื่อ **set font style** เราใช้ `WebFontStyle.Bold` และ `WebFontStyle.Italic` รวมกันด้วยตัวดำเนินการบิต OR + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*ทำไมต้องใช้ enum*: enum `WebFontStyle` แมปตรงกับคุณสมบัติ CSS (`font-weight` และ `font-style`) การใช้ enum ป้องกันการพิมพ์ผิดและทำให้ CSS ที่สร้างขึ้นถูกต้อง—สำคัญสำหรับการ **format text html** ที่เชื่อถือได้ + +--- + +## ขั้นตอน 4 – **Append element to body** และสรุปเอกสาร + +เมื่อ `` ที่จัดสไตล์พร้อมแล้ว ขั้นตอนสุดท้ายคือใส่ลงในแท็ก `` + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +ตอนนี้โครงสร้าง DOM จะตรงกับสแนปช็อตที่แสดงไว้ก่อนหน้า หากคุณตรวจสอบ `htmlDocument.InnerHtml` คุณจะเห็น markup ที่สมบูรณ์ + +--- + +## ขั้นตอน 5 – บันทึกหรือเรนเดอร์เอกสาร + +คุณสามารถเขียน HTML ไปยังไฟล์, ส่งสตรีมไปยังเบราว์เซอร์, หรือเรนเดอร์เป็น PDF/Image ด้วยเอนจินเรนเดอร์ของ Aspose.HTML ตัวเลือกง่ายที่สุดคือบันทึกไฟล์: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +เปิด `output.html` ในเบราว์เซอร์ใดก็ได้ คุณจะเห็น **Bold‑Italic text** แสดงตามที่ตั้งใจ + +--- + +## ตัวอย่างทำงานเต็มรูปแบบ + +รวมทุกอย่างเข้าด้วยกัน นี่คือโปรแกรมที่พร้อมรัน: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**ผลลัพธ์ที่คาดหวัง** – การเปิด `output.html` จะเห็น: + +> **Bold‑Italic text** (หนาและเอียง) + +หากคุณตรวจสอบซอร์สโค้ด คุณจะเห็น HTML ที่เราพูดถึงตรงตามที่อธิบาย ยืนยันว่าขั้นตอน **format text html** ทำงานสำเร็จ + +--- + +## คำถามทั่วไป & กรณีขอบ + +### 1. ถ้าต้องการสไตล์มากกว่าสองแบบ? + +`WebFontStyle` เป็น flags enum จึงสามารถรวมสไตล์ได้หลายแบบ (เช่น `Underline`) เพียงใช้ตัวดำเนินการ `|` ต่อไป: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. สามารถเปลี่ยนสีพร้อมกันได้ไหม? + +ได้เลย `Style` มีคุณสมบัติ `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. จะ **append element to body** หลายครั้งอย่างไร? + +สร้างลูป, โคลน `` ที่จัดสไตล์, ปรับข้อความ, แล้ว **append** โคลนแต่ละอัน: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. ถ้าต้องการ **format text html** ภายใน `
` แทน? + +API เดียวกันใช้ได้กับทุกอีลีเมนต์ เพียงเปลี่ยน `CreateElement("span")` เป็น `CreateElement("div")` แล้วปรับสไตล์ตามต้องการ + +### 5. มีข้อกังวลเรื่องความเข้ากันได้หรือไม่? + +Aspose.HTML รองรับ .NET Standard 2.0+ ดังนั้นโค้ดทำงานบน .NET Core, .NET Framework, และ .NET 5/6+ ไม่ต้องใช้ shim เฉพาะเบราว์เซอร์เพิ่มเติม + +--- + +## เคล็ดลับระดับมืออาชีพ & สิ่งที่ควรระวัง + +- **เคล็ดลับ:** ตั้งค่า `InnerHtml` *หลัง* จากที่กำหนดสไตล์แล้ว การเปลี่ยนเนื้อหาก่อนอาจทำให้บางเบราว์เซอร์ทำการรี‑เลย์เอาต์; ทำหลังสไตล์จะลดงานที่ไม่จำเป็น +- **ระวัง:** การผสม `WebFontStyle` กับสตริง CSS แบบอินไลน์ หากคุณตั้งค่า `spanElement.SetAttribute("style", "...")` หลังจากนั้น จะทำให้สไตล์ที่สร้างจาก enum ถูกเขียนทับ ควรเลือกใช้วิธีใดวิธีหนึ่ง +- **หมายเหตุประสิทธิภาพ:** สำหรับเอกสารขนาดใหญ่ ควรสร้างโหนดทั้งหมดก่อนแล้วค่อย **append** ทีเดียว เพื่อลดจำนวนการเปลี่ยนแปลง DOM และเร่งการเรนเดอร์ + +--- + +## สรุป + +คุณได้เรียนรู้วิธี **create html document** ด้วย Aspose.HTML, **append element to body**, **set font style**, และ **format text html** ด้วยการ **create span element** ตัวอย่างทำงานเต็มรูปแบบและคำอธิบายครอบคลุมทั้ง “วิธีทำ” และ “ทำไม” ทำให้คุณปรับใช้กับสถานการณ์ที่ซับซ้อนได้ง่าย + +พร้อมก้าวต่อไปหรือยัง? ลองเปลี่ยน `` เป็น `

` พร้อมหลายคลาส CSS, หรือเรนเดอร์ DOM เดียวกันเป็น PDF ด้วย `Document` → `PdfSaveOptions` หลักการเดียวกันใช้ได้ทุกกรณี และคุณจะพบว่า Aspose.HTML เป็นพันธมิตรที่เชื่อถือได้สำหรับการสร้าง HTML ฝั่งเซิร์ฟเวอร์ทุกประเภท + +มีคำถามหรือพบวิธีเจ๋ง ๆ? แสดงความคิดเห็นด้านล่าง—ขอให้สนุกกับการเขียนโค้ด! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/net/html-extensions-and-conversions/_index.md b/html/thai/net/html-extensions-and-conversions/_index.md index 4915b2853..9f3748957 100644 --- a/html/thai/net/html-extensions-and-conversions/_index.md +++ b/html/thai/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ Aspose.HTML สำหรับ .NET ไม่ใช่แค่ไลบรา ## บทช่วยสอนเกี่ยวกับส่วนขยายและการแปลง HTML ### [แปลง HTML เป็น PDF ใน .NET ด้วย Aspose.HTML](./convert-html-to-pdf/) แปลง HTML เป็น PDF ได้อย่างง่ายดายด้วย Aspose.HTML สำหรับ .NET ปฏิบัติตามคำแนะนำทีละขั้นตอนของเราและปลดปล่อยพลังแห่งการแปลง HTML เป็น PDF +### [สร้าง PDF จาก URL – คู่มือ C# ฉบับสมบูรณ์](./create-pdf-from-url-complete-c-guide/) +สร้าง PDF จาก URL ด้วย Aspose.HTML สำหรับ .NET ตามขั้นตอนครบถ้วนในคู่มือ C# นี้ ### [แปลง EPUB เป็นรูปภาพใน .NET ด้วย Aspose.HTML](./convert-epub-to-image/) เรียนรู้วิธีการแปลง EPUB เป็นรูปภาพโดยใช้ Aspose.HTML สำหรับ .NET บทช่วยสอนแบบทีละขั้นตอนพร้อมตัวอย่างโค้ดและตัวเลือกที่ปรับแต่งได้ ### [แปลง EPUB เป็น PDF ใน .NET ด้วย Aspose.HTML](./convert-epub-to-pdf/) @@ -50,7 +52,7 @@ Aspose.HTML สำหรับ .NET ไม่ใช่แค่ไลบรา ### [แปลง HTML เป็น DOC และ DOCX ใน .NET ด้วย Aspose.HTML](./convert-html-to-doc-docx/) เรียนรู้วิธีใช้พลังของ Aspose.HTML สำหรับ .NET ในคู่มือทีละขั้นตอนนี้ แปลง HTML เป็น DOCX ได้อย่างง่ายดายและยกระดับโครงการ .NET ของคุณ เริ่มต้นวันนี้! ### [แปลง HTML เป็น GIF ใน .NET ด้วย Aspose.HTML](./convert-html-to-gif/) -ค้นพบพลังของ Aspose.HTML สำหรับ .NET: คำแนะนำทีละขั้นตอนในการแปลง HTML เป็น GIF ข้อกำหนดเบื้องต้น ตัวอย่างโค้ด คำถามที่พบบ่อย และอื่นๆ อีกมากมาย! เพิ่มประสิทธิภาพการจัดการ HTML ของคุณด้วย Aspose.HTML +ค้นพบพลังของ Aspose.HTML สำหรับ .NET: คำแนะนำทีละขั้นตอนในการแปลง HTML เป็น GIF ข้อกำหนดเบื้องต้น ตัวอย่างโค้ด คำถามที่พบบ่อยและอื่นๆ อีกมากมาย! เพิ่มประสิทธิภาพการจัดการ HTML ของคุณด้วย Aspose.HTML ### [แปลง HTML เป็น JPEG ใน .NET ด้วย Aspose.HTML](./convert-html-to-jpeg/) เรียนรู้วิธีการแปลง HTML เป็น JPEG ใน .NET ด้วย Aspose.HTML สำหรับ .NET คำแนะนำทีละขั้นตอนในการใช้ประโยชน์จากพลังของ Aspose.HTML สำหรับ .NET เพิ่มประสิทธิภาพงานพัฒนาเว็บของคุณได้อย่างง่ายดาย ### [แปลง HTML เป็น Markdown ใน .NET ด้วย Aspose.HTML](./convert-html-to-markdown/) @@ -74,4 +76,4 @@ Aspose.HTML สำหรับ .NET ไม่ใช่แค่ไลบรา {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/thai/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..a7826ad45 --- /dev/null +++ b/html/thai/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: สร้าง PDF จาก URL ด้วย C# อย่างรวดเร็ว เรียนรู้วิธีแปลง HTML เป็น PDF + บันทึกหน้าเว็บเป็น PDF และสร้าง PDF จาก HTML ด้วยโค้ดง่าย ๆ +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: th +og_description: สร้าง PDF จาก URL ด้วย C# อย่างรวดเร็ว บทเรียนนี้แสดงวิธีแปลง HTML + เป็น PDF, บันทึกหน้าเว็บเป็น PDF, และสร้าง PDF จาก HTML ด้วย Aspose.HTML. +og_title: สร้าง PDF จาก URL – คู่มือ C# ฉบับสมบูรณ์ +tags: +- pdf +- csharp +- html +- conversion +title: สร้าง PDF จาก URL – คู่มือ C# ฉบับสมบูรณ์ +url: /th/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# สร้าง PDF จาก URL – คู่มือ C# ฉบับสมบูรณ์ + +เคยต้อง **สร้าง PDF จาก URL** แต่ไม่แน่ใจว่าจะเลือกไลบรารีไหนใช่ไหม? คุณไม่ได้อยู่คนเดียว นักพัฒนาหลายคนเจออุปสรรคนี้เมื่อต้องบันทึกหน้าเว็บเป็นไฟล์, สร้างใบแจ้งหนี้จากเทมเพลตออนไลน์, หรือแค่เพิ่มปุ่ม “ดาวน์โหลดเป็น PDF” บนเว็บไซต์ของตน + +ในบทเรียนนี้เราจะเดินผ่านกระบวนการทั้งหมดของ **การแปลง HTML เป็น PDF** ด้วย C# คุณจะได้เห็นวิธี **บันทึกหน้าเว็บเป็น PDF**, วิธี **สร้าง PDF จาก HTML**, และทำไมไลบรารี `Aspose.HTML for .NET` ทำให้ทุกอย่างง่ายดาย เพียงแค่จบคุณจะได้โค้ดสั้น ๆ ที่พร้อมรัน ดึง URL สาธารณะใด ๆ เรนเดอร์ แล้วบันทึกเป็นไฟล์ PDF ลงดิสก์ + +> **Pro tip:** หากคุณทำงานอยู่หลังพร็อกซีขององค์กร อย่าลืมให้คอนสตรัคเตอร์ `HTMLDocument` รับการตั้งค่า `WebRequest` ที่ถูกต้อง — ไม่เช่นนั้นการดาวน์โหลดจะล้มเหลวโดยไม่มีข้อความแจ้ง + +## สิ่งที่คุณต้องเตรียม + +- **.NET 6.0** หรือใหม่กว่า (โค้ดนี้ทำงานบน .NET Framework 4.7+ ด้วย) +- แพ็กเกจ NuGet **Aspose.HTML for .NET** (`Aspose.HTML`) +- โฟลเดอร์ที่สามารถเขียนได้บนดิสก์เพื่อบันทึก PDF +- ความคุ้นเคยพื้นฐานกับ C# (ไม่ต้องมีเทคนิคขั้นสูง) + +ไม่มีไฟล์การกำหนดค่าเพิ่มเติม ไม่มีเวทมนตร์ลับ—แค่ไม่กี่บรรทัดของโค้ดที่สะอาดและมีคอมเมนต์ + +![Create PDF from URL example](image.png){alt="สร้าง PDF จาก URL"} + +## ขั้นตอนที่ 1: ติดตั้งแพ็กเกจ NuGet Aspose.HTML + +เปิดเทอร์มินัลหรือ Package Manager Console แล้วรัน: + +```bash +dotnet add package Aspose.HTML +``` + +> **ทำไมขั้นตอนนี้สำคัญ:** คลาส `HTMLDocument`, `PdfSaveOptions` และ `PdfConverter` อยู่ในเนมสเปซ `Aspose.Html` หากไม่มีแพ็กเกจ คอมไพเลอร์จะไม่รู้จักประเภทเหล่านี้ + +## ขั้นตอนที่ 2: โหลดหน้าเว็บเข้าสู่ `HTMLDocument` + +การกระทำแรกคือการดึง HTML จากระยะไกล `HTMLDocument` สามารถรับ URL โดยตรง จัดการการเปลี่ยนเส้นทางและการตรวจจับประเภทเนื้อหาให้คุณโดยอัตโนมัติ + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**กำลังเกิดอะไรขึ้น?** +- `HTMLDocument` จะพาร์ส markup ที่ดึงมาเป็นต้นไม้ DOM เหมือนกับเบราว์เซอร์ +- CSS ภายนอก, รูปภาพ หรือสคริปต์ที่อ้างอิงด้วย URL แบบเต็มก็จะถูกดาวน์โหลดเช่นกัน ทำให้ PDF มีลักษณะเหมือนหน้าเว็บจริง + +## ขั้นตอนที่ 3: ตั้งค่าตัวเลือกการส่งออก PDF (ขอบกระดาษ, ขนาดหน้า ฯลฯ) + +ก่อนส่งเอกสารให้คอนเวอร์เตอร์ เราจะปรับแต่งผลลัพธ์ `PdfSaveOptions` ช่วยกำหนดขอบกระดาษ, แนวหน้า, และแม้แต่เวอร์ชันของ PDF + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**ทำไมต้องตั้งค่าขอบ?** +PDF ที่ขอบแคบอาจตัดส่วนหัวหรือส่วนท้ายโดยเฉพาะบนเว็บไซต์ที่ออกแบบมาสำหรับมือถือ การเพิ่มขอบเล็กน้อยทำให้ทุกอย่างอ่านได้ชัดเจน + +## ขั้นตอนที่ 4: แปลง HTML Document โดยตรงเป็น PDF + +นี่คือขั้นตอนที่ทำงานหนัก `PdfConverter.ConvertHtml` จะสตรีมหน้าที่เรนเดอร์โดยตรงลงไฟล์ PDF + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**ภายในเครื่องมือ:** +- Aspose เรนเดอร์ DOM ด้วยเอนจินเลย์เอาต์ของตนเอง (ไม่ต้องใช้ Chromium) +- บิตแมปที่เรนเดอร์จะถูกแปลงเป็นเวกเตอร์ PDF เมื่อเป็นไปได้ ทำให้ข้อความยังคงเลือกได้ + +## ขั้นตอนที่ 5: ตรวจสอบผลลัพธ์และจัดการกรณีขอบเขตพิเศษ + +การตรวจสอบอย่างเร็วช่วยป้องกันปัญหาในภายหลัง เปิดไฟล์ที่สร้างขึ้น; คุณควรเห็นหน้าเว็บแบบสด, มีขอบที่กำหนด, และรูปภาพทั้งหมดครบ + +### ข้อผิดพลาดทั่วไปและวิธีหลีกเลี่ยง + +| ปัญหา | สาเหตุ | วิธีแก้ | +|-------|-------|---------| +| **PDF ว่าง** | URL ถูกบล็อกโดยไฟร์วอลล์หรือจำเป็นต้องยืนยันตัวตน | ส่ง `WebRequest` ที่กำหนดค่า credential ไปยังคอนสตรัคเตอร์ `HTMLDocument` | +| **CSS หาย** | Stylesheet ภายนอกใช้ URL แบบ relative | ตรวจสอบให้แน่ใจว่า base URL ถูกต้อง (Aspose จัดการส่วนนี้แล้ว, แต่ตรวจสอบการเปลี่ยนเส้นทาง) | +| **ไฟล์ขนาดใหญ่** | รูปภาพความละเอียดสูงไม่ได้ลดขนาด | ใช้ `PdfSaveOptions.ImageCompression` เพื่อบีบอัดภาพเป็น JPEG | +| **อักขระ Unicode แสดงผิด** | ฟอนต์ไม่ได้ฝัง | ตั้งค่า `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## ตัวอย่างทำงานเต็มรูปแบบ (คัดลอก‑วางได้) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +รันโปรแกรม (`dotnet run`) แล้วคุณจะพบ `example.pdf` ใน `C:\Temp` เปิดด้วยโปรแกรมอ่าน PDF ใดก็ได้ คุณควรเห็นสำเนาเดียวกันของ `https://example.com` พร้อมขอบที่คุณกำหนด + +## สรุป + +เราได้แสดงให้คุณ **สร้าง PDF จาก URL** ด้วย C# ขั้นตอนที่ครอบคลุมการโหลดหน้าเว็บ, การตั้งค่าขอบ, และการแปลง DOM เป็นไฟล์ PDF—ทั้งหมดที่คุณต้องการเพื่อ **แปลง HTML เป็น PDF**, **บันทึกหน้าเว็บเป็น PDF**, และ **สร้าง PDF จาก HTML** ในรูปแบบพร้อมใช้งานจริง + +ลองปรับเปลี่ยน: เปลี่ยนขนาดหน้าเป็น `Letter`, สลับแนวเป็นแนวนอน, หรือเพิ่มส่วนหัว/ส่วนท้ายด้วย `PdfPageEventHandler` รูปแบบเดียวกันทำงานได้กับหน้าไดนามิก, พอร์ทัลที่ต้องล็อกอิน (แค่ส่งคุกกี้) หรือแม้กระทั่งประมวลผลหลาย URL เป็นชุด + +**ขั้นตอนต่อไปที่คุณอาจสนใจ** + +- **HTML to PDF C#** ด้วยการแปลงแบบอะซิงโครนัสสำหรับบริการที่ต้องประมวลผลสูง +- ฝัง **metadata** (ผู้เขียน, ชื่อเรื่อง) ลงใน PDF ผ่าน `PdfDocumentInfo` +- ใช้ **Aspose.PDF** เพื่อรวม PDF หลายไฟล์ที่สร้างจาก URL ต่าง ๆ เป็นรายงานเดียว + +มีคำถามไหม? แสดงความคิดเห็นด้านล่าง แล้วขอให้สนุกกับการเขียนโค้ด! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/net/rendering-html-documents/_index.md b/html/thai/net/rendering-html-documents/_index.md index f9be378ab..245277a49 100644 --- a/html/thai/net/rendering-html-documents/_index.md +++ b/html/thai/net/rendering-html-documents/_index.md @@ -52,9 +52,14 @@ Aspose.HTML สำหรับ .NET ถือเป็นตัวเลือ เรียนรู้การเรนเดอร์เอกสาร HTML หลายฉบับโดยใช้ Aspose.HTML สำหรับ .NET เพิ่มประสิทธิภาพการประมวลผลเอกสารของคุณด้วยไลบรารีอันทรงพลังนี้ ### [เรนเดอร์เอกสาร SVG เป็น PNG ใน .NET ด้วย Aspose.HTML](./render-svg-doc-as-png/) ปลดล็อกพลังของ Aspose.HTML สำหรับ .NET! เรียนรู้วิธีการเรนเดอร์เอกสาร SVG เป็น PNG ได้อย่างง่ายดาย เจาะลึกตัวอย่างทีละขั้นตอนและคำถามที่พบบ่อย เริ่มต้นเลยตอนนี้! +### [วิธีการเรนเดอร์ HTML – คู่มือฉบับสมบูรณ์พร้อมตัวจัดการทรัพยากรแบบกำหนดเอง](./how-to-render-html-complete-guide-with-custom-resource-handl/) +เรียนรู้วิธีเรนเดอร์ HTML อย่างละเอียดด้วยตัวจัดการทรัพยากรแบบกำหนดเองใน Aspose.HTML สำหรับ .NET +### [วิธีการเรนเดอร์ HTML เป็น PNG – คู่มือขั้นตอนเต็ม](./how-to-render-html-to-png-complete-step-by-step-guide/) +เรียนรู้วิธีการเรนเดอร์ HTML เป็น PNG อย่างละเอียดด้วย Aspose.HTML สำหรับ .NET ในคู่มือขั้นตอนเต็ม! + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/thai/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..a5c0c6122 --- /dev/null +++ b/html/thai/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,228 @@ +--- +category: general +date: 2026-01-03 +description: วิธีเรนเดอร์ HTML เป็นภาพโดยใช้ Aspose.HTML. เรียนรู้การแปลง HTML เป็นภาพ, + ตัวจัดการทรัพยากรแบบกำหนดเอง, และการแปลง HTML เป็นบิตแมปใน C# +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: th +og_description: วิธีเรนเดอร์ HTML เป็นภาพด้วย Aspose.HTML. เชี่ยวชาญการแปลง HTML เป็นภาพ, + ตัวจัดการทรัพยากรแบบกำหนดเอง, และแปลง HTML เป็นบิตแมปใน C#. +og_title: วิธีการเรนเดอร์ HTML – คู่มือฉบับสมบูรณ์กับตัวจัดการทรัพยากรแบบกำหนดเอง +tags: +- C# +- Aspose.HTML +- Image Rendering +title: วิธีการแสดงผล HTML – คู่มือฉบับสมบูรณ์กับตัวจัดการทรัพยากรแบบกำหนดเอง +url: /th/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# วิธีการเรนเดอร์ HTML – คู่มือฉบับเต็มพร้อมตัวจัดการทรัพยากรแบบกำหนดเอง + +เคยสงสัย **วิธีการเรนเดอร์ HTML** ให้เป็นบิตแมพโดยไม่ต้องจัดการกับเอนจินของเบราว์เซอร์ด้วยตนเองหรือไม่? คุณไม่ได้เป็นคนเดียวที่เจอปัญหานี้ นักพัฒนาหลายคนมักเจออุปสรรคเมื่อจำเป็นต้องสร้างภาพหน้าจอของหน้าเว็บแบบไดนามิกสำหรับอีเมล รายงาน หรือรูปย่อ ข่าวดีคือ ด้วย Aspose.HTML คุณสามารถแปลงสตริง HTML ใด ๆ ให้เป็นภาพได้—ไม่มี UI, ไม่มี Chrome แบบ headless, เพียงแค่โค้ด C# ธรรมดา + +ในบทเรียนนี้เราจะเดินผ่านสถานการณ์ **การแปลง html เป็นภาพ** อย่างเป็นขั้นตอน แสดงวิธี **การสร้างตัวจัดการทรัพยากรแบบกำหนดเอง** และสาธิตกระบวนการ **แปลง html เป็นบิตแมพ** อย่างเต็มรูปแบบ เมื่อจบคุณจะมีเมธอดที่นำ HTML ไปเรนเดอร์เป็นภาพในหน่วยความจำ สามารถนำไปประมวลผลหรือจัดเก็บต่อได้ทันที + +> **ข้อกำหนดเบื้องต้น** +> * .NET 6+ (หรือ .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * ความคุ้นเคยพื้นฐานกับ C# และสตรีม + +หากคุณมีพื้นฐานเหล่านี้แล้ว ไปต่อกันเลย + +--- + +## วิธีการเรนเดอร์ HTML ด้วย Aspose.HTML + +หัวใจของการ **เรนเดอร์ html เป็นภาพ** ใด ๆ คือคลาส `ImageRenderer` ซึ่งรับ `HTMLDocument` แล้วส่งออกกราฟิกแบบแรสเตอร์ (PNG, JPEG, BMP ฯลฯ) ตัวอย่างโครงสร้างขั้นต่ำมีดังนี้: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +โค้ดส่วนนั้นทำงานได้ แต่คุณจะได้ไฟล์บนดิสก์เท่านั้นหากบอกตัวเรนเดอร์ว่าให้บันทึกที่ไหน เพื่อให้ทุกอย่างอยู่ในหน่วยความจำ—และเพื่อดักจับทรัพยากรทุกประเภท (รูปภาพ, CSS, ฟอนต์) ที่ HTML เรียกใช้ เราจะต่อ **ตัวจัดการทรัพยากรแบบกำหนดเอง** เข้าไป + +--- + +## การสร้างตัวจัดการทรัพยากรแบบกำหนดเอง + +**ตัวจัดการทรัพยากรแบบกำหนดเอง** ให้คุณควบคุมการดึงและจัดเก็บแอสเซ็ตภายนอกได้อย่างเต็มที่ ในหลายกรณีคุณอาจต้องการเก็บแอสเซ็ตเหล่านั้นไว้ในหน่วยความจำเพื่อใช้งานต่อ (เช่น การบรรจุเป็นไฟล์ ZIP) ตัวจัดการสืบทอดจาก `ResourceHandler` และทำการ override `HandleResource` + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**ทำไมต้องทำ?** +* **ประสิทธิภาพ** – ไม่ต้องทำ I/O กับดิสก์ ทุกอย่างอยู่ใน RAM +* **ความปลอดภัย** – คุณกำหนดได้ว่า URL ใดบ้างที่อนุญาตให้ดึงได้ +* **ความยืดหยุ่น** – สามารถแคชทรัพยากร, เปลี่ยนชื่อไฟล์, หรือฝังลงในคอนเทนเนอร์อื่นได้ + +--- + +## แปลง HTML เป็นบิตแมพด้วย ImageRenderer + +ตอนนี้เรามารวมส่วนต่าง ๆ กัน: โหลด HTML, แนบ `MyHandler`, แล้วเรนเดอร์ เมธอดต่อไปนี้จะคืนค่า `MemoryStream` ที่บรรจุภาพ PNG ของหน้าเว็บที่เรนเดอร์แล้ว + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### ผลลัพธ์ที่คาดหวัง + +หากคุณเรียกเมธอดดังนี้: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +คุณจะได้ไฟล์ `demo.png` ที่มีลักษณะประมาณนี้: + +![how to render html output example](https://example.com/assets/render-html-output.png "how to render html output example") + +*ข้อความแทนภาพ:* **ตัวอย่างผลลัพธ์การเรนเดอร์ HTML** – บิตแมพขนาดเล็กแสดงส่วนของ HTML ที่ถูกเรนเดอร์ + +--- + +## การแปลง HTML เป็นภาพ – ข้อผิดพลาดทั่วไปและเคล็ดลับ + +### 1. URL แบบ Relative และแท็ก `` +หาก HTML ของคุณอ้างอิง CSS หรือรูปภาพด้วยเส้นทาง relative ตัวเรนเดอร์จะไม่รู้ตำแหน่งฐาน ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้: + +* เพิ่มแท็ก `` หรือ +* แก้ไข URL ภายใน `MyHandler.HandleResource` แล้วให้สตรีมที่ถูกต้องกลับมา + +### 2. ความพร้อมของฟอนต์ +Aspose.HTML ใช้ฟอนต์ของระบบเป็นค่าเริ่มต้น สำหรับฟอนต์เว็บแบบกำหนดเอง (`@font-face`) ให้แน่ใจว่าไฟล์ฟอนต์สามารถเข้าถึงได้ผ่านตัวจัดการ หรือฝังเป็น data URI แบบ base64 + +### 3. หน้าใหญ่ +การเรนเดอร์หน้าที่สูงมากอาจใช้หน่วยความจำจำนวนมาก คุณสามารถจำกัดขนาด viewport ได้: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. รูปแบบภาพ +`renderer.Save(stream, ImageFormat.Jpeg)` ทำงานได้เช่นกันหากต้องการบีบอัดเป็น JPEG แทน `ImageFormat.Png` ด้วย `ImageFormat.Bmp` จะได้ผลลัพธ์ **แปลง html เป็นบิตแมพ** จริง ๆ + +--- + +## เรนเดอร์ HTML เป็นภาพ – สถานการณ์ขั้นสูง + +### A. การเรนเดอร์หลายหน้า +หาก HTML มีการแบ่งหน้า (`
`) คุณสามารถวนลูปผ่านหน้าได้: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. ฝังภาพลงใน PDF +ผสานกับ `Aspose.Pdf` เพื่อฝัง PNG ลงใน PDF โดยตรง: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +--- + +## สรุป + +เราได้อธิบาย **วิธีการเรนเดอร์ HTML** ให้เป็นบิตแมพโดยอยู่ในหน่วยความจำทั้งหมด สำรวจพื้นฐานของ **การแปลง html เป็นภาพ**, สร้าง **ตัวจัดการทรัพยากรแบบกำหนดเอง**, และแสดงวิธี **แปลง html เป็นบิตแมพ** ด้วย `ImageRenderer` ของ Aspose.HTML วิธีนี้เร็ว, ปลอดภัยต่อเธรด, และขยายได้ง่ายสำหรับโครงการจริง ๆ ตั้งแต่การสร้างรูปย่อสำหรับอีเมลจนถึงการสร้างรายงานอัตโนมัติ + +พร้อมก้าวต่อไปหรือยัง? ลองเปลี่ยนผลลัพธ์จาก PNG เป็น JPEG, ทดลองขนาดหน้าแตกต่างกัน, หรือเชื่อมต่อตัวจัดการกับชั้นแคชเพื่อให้การเรนเดอร์ซ้ำทำได้ทันที ความเป็นไปได้ไม่มีที่สิ้นสุดเมื่อคุณควบคุมทุกทรัพยากรด้วยตนเอง + +มีคำถามหรือกรณีการใช้งานที่น่าสนใจอยากแชร์ไหม? แสดงความคิดเห็นด้านล่าง แล้วขอให้สนุกกับการเรนเดอร์! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/thai/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..54ac09d26 --- /dev/null +++ b/html/thai/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,223 @@ +--- +category: general +date: 2026-01-03 +description: เรียนรู้วิธีแปลง HTML เป็น PNG, แปลงหน้าเว็บเป็นภาพและบันทึก HTML เป็น + PNG ด้วย Aspose.HTML ใน C#. รวดเร็ว เชื่อถือได้ และพร้อมใช้งานในผลิตภัณฑ์. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: th +og_description: เชี่ยวชาญวิธีเรนเดอร์ HTML เป็น PNG, แปลงหน้าเว็บเป็นภาพ, และบันทึก + HTML เป็น PNG พร้อมตัวอย่าง C# เต็มรูปแบบโดยใช้ Aspose.HTML. +og_title: วิธีแปลง HTML เป็น PNG – คู่มือครบถ้วน +tags: +- C# +- Aspose.HTML +- Image Rendering +title: วิธีแปลง HTML เป็น PNG – คู่มือขั้นตอนเต็มรูปแบบ +url: /th/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# วิธีแปลง HTML เป็น PNG – คู่มือขั้นตอนเต็ม + +หากคุณกำลังมองหา **how to render html** ให้เป็นภาพ คุณมาถูกที่แล้ว ไม่ว่าคุณต้องการ **convert webpage to image** เพื่อทำเป็นรูปย่อ, เก็บหน้าเว็บเป็นไฟล์ PNG, หรือสร้างตัวอย่างสำหรับโซเชียลมีเดียแบบเรียลไทม์ กระบวนการก็อาจง่ายกว่าที่คิดเมื่อใช้ไลบรารีที่เหมาะสม + +ในบทแนะนำนี้ เราจะพาคุณผ่านขั้นตอนการแปลง URL ใด ๆ ให้เป็นไฟล์ PNG ด้วย Aspose.HTML for .NET คุณจะได้เห็นโค้ดตัวอย่างที่ทำงานได้เต็มรูปแบบ, เข้าใจว่าการตั้งค่าแต่ละอย่างสำคัญอย่างไร, และค้นพบเคล็ดลับบางอย่างสำหรับจัดการกับกรณีขอบ ตอนจบคุณจะสามารถ **save html as png**, **convert html to png**, และแม้แต่ฝังผลลัพธ์ลงในรายงานหรืออีเมลได้โดยไม่ต้องกังวล + +## สิ่งที่ต้องเตรียม – สิ่งที่คุณต้องมี + +- **.NET 6.0** หรือรุ่นต่อไป (โค้ดทำงานได้กับ .NET Core และ .NET Framework ด้วยเช่นกัน) +- **Aspose.HTML for .NET** NuGet package (`Aspose.Html`) ที่ติดตั้งแล้ว +- IDE ที่คุณชอบ (Visual Studio, Rider, หรือ VS Code) +- โฟลเดอร์ที่สามารถเขียนไฟล์ได้สำหรับบันทึก PNG + +ไม่ต้องกำหนดค่าพิเศษเพิ่มเติม—Aspose.HTML จะจัดการขั้นตอนที่ซับซ้อนของการแยกวิเคราะห์หน้า, ประยุกต์ใช้ CSS, และแปลงเลย์เอาต์เป็นภาพ raster ให้คุณ + +## ขั้นตอนที่ 1: โหลดเอกสาร HTML ที่ต้องการแปลง + +สิ่งแรกที่คุณต้องการคืออินสแตนซ์ของ `HTMLDocument` ที่ชี้ไปยังหน้าที่คุณต้องการจับภาพ Aspose.HTML สามารถโหลดจาก URL, ไฟล์ในเครื่อง, หรือสตริง HTML ดิบได้ + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **ทำไมเรื่องนี้ถึงสำคัญ:** การโหลดเอกสารโดยตรงจาก URL ทำให้แน่ใจว่าทรัพยากรภายนอกทั้งหมด (CSS, JavaScript, รูปภาพ) ถูกดึงมาโดยอัตโนมัติ ทำให้คุณได้การเรนเดอร์ที่ตรงกับหน้าจริง + +## ขั้นตอนที่ 2: กำหนดค่า Image Rendering Options + +ต่อไป เราจะตั้งค่า `ImageRenderingOptions` ตัวเลือกเหล่านี้ควบคุมขนาดผลลัพธ์, คุณภาพ, และการใช้ anti‑aliasing การปรับแต่งช่วยให้คุณสมดุลระหว่างขนาดไฟล์กับความคมชัดของภาพ + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **เคล็ดลับ:** หากต้องการรูปย่อความละเอียดสูงขึ้น ให้เพิ่มค่า `Width` และ `Height` อย่างสัดส่วน Aspose.HTML จะปรับขนาดเลย์เอาต์โดยไม่สูญเสียคุณภาพเวกเตอร์ + +## ขั้นตอนที่ 3: เริ่มต้น Image Renderer + +ตอนนี้เราจะสร้าง `ImageRenderer` โดยส่งเอกสารและตัวเลือกที่กำหนดไว้ก่อนหน้านี้ วัตถุนี้เป็นเอนจินที่วาดหน้าเว็บลงบนบิตแมพจริง + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **อะไรกำลังเกิดขึ้นเบื้องหลัง?** เรนเดอร์จะทำการพาร์ส DOM, คำนวณสไตล์ CSS, ทำการจัดวางเลย์เอาต์, และสุดท้ายแปลงแต่ละองค์ประกอบเป็นพิกเซลบนแคนวาส ทั้งหมดนี้ทำในหน่วยความจำ จึงไม่ต้องเปิดหน้าต่างเบราว์เซอร์ + +## ขั้นตอนที่ 4: เรนเดอร์และบันทึกไฟล์ PNG + +สุดท้าย เรียก `Render` พร้อมเส้นทางเต็มที่คุณต้องการบันทึก PNG เมธอดจะเขียนไฟล์แบบซิงโครนัสและทำการปล่อยทรัพยากรภายในโดยอัตโนมัติ + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **ผลลัพธ์ที่คาดหวัง:** หลังจากรันโปรแกรม คุณจะพบไฟล์ `example.png` อยู่ในโฟลเดอร์ `output` เปิดด้วยโปรแกรมดูภาพใดก็ได้ คุณควรเห็นภาพสแนปช็อตที่ตรงกับ `https://example.com` ขนาด 800×600 px + +--- + +### ตัวอย่างเต็มพร้อมรัน + +ด้านล่างเป็นโปรแกรมเต็มที่คุณสามารถคัดลอก‑วางไปยังโปรเจกต์คอนโซลใหม่ได้ รวมคำสั่ง `using` ทั้งหมด, การจัดการข้อผิดพลาด, และคอมเมนต์เพื่อความชัดเจน + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +รันโปรแกรม (`dotnet run` จากโฟลเดอร์โปรเจกต์) แล้วคุณจะได้ไฟล์ PNG ที่สะท้อนหน้าจริง นั่นคือ **how to render html** ด้วยเพียงไม่กี่บรรทัดของ C# + +--- + +## คำถามที่พบบ่อย & กรณีขอบ + +### ฉันสามารถเรนเดอร์ไฟล์ HTML ในเครื่องแทน URL ได้หรือไม่? + +ได้เลย เพียงเปลี่ยน URL เป็นเส้นทางไฟล์: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### ถ้าหน้าเว็บใช้ JavaScript ปรับเปลี่ยน DOM หลังจากโหลดแล้วจะทำอย่างไร? + +Aspose.HTML สามารถรันสคริปต์ฝั่งคลไอเอนท์ส่วนใหญ่ได้ แต่ไม่ได้มีเอนจินเบราว์เซอร์เต็มรูปแบบ สำหรับหน้าที่มีสคริปต์ซับซ้อนอาจต้องทำการพรี‑เรนเดอร์ HTML ก่อน (เช่น ใช้ Chromium แบบ headless) แล้วจึงส่งมาร์คอัปที่ได้ให้กับ Aspose.HTML + +### ฉันจะควบคุมระดับการบีบอัด PNG ได้อย่างไร? + +`ImageRenderingOptions` มีคุณสมบัติ `CompressionLevel` (0–9) ตัวเลขที่ต่ำกว่าจะทำให้ไฟล์ใหญ่ขึ้นแต่คุณภาพสูงกว่า + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### ฉันต้องการพื้นหลังโปร่งใส—ทำได้หรือไม่? + +ทำได้ ตั้งค่าสีพื้นหลังเป็นโปร่งใสก่อนทำการเรนเดอร์: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### มีวิธีเรนเดอร์หลายหน้าเป็นภาพเดียวหรือไม่? + +คุณสามารถวนลูปผ่านคอลเลกชันของ URL หรือสตริง HTML, เรนเดอร์แต่ละอันเป็นบิตแมพ, แล้วต่อภาพเหล่านั้นเข้าด้วยกันโดยใช้ `System.Drawing` หรือ `ImageSharp` ขั้นตอนหลักของ **convert html to png** ยังคงเหมือนเดิม + +## โบนัส: ฝัง PNG ใน Web API + +หากคุณต้องการเปิดให้บริการฟังก์ชันนี้ผ่าน endpoint ของ ASP.NET Core เพียงคืนค่าไบต์ของไฟล์: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +ตอนนี้ไคลเอนต์ใดก็สามารถร้องขอ `GET /render?url=https://example.com` และรับ PNG แบบเรียลไทม์—เหมาะสำหรับบริการ **convert webpage to image** + +## สรุป + +เราได้ครอบคลุมทุกสิ่งที่คุณต้องรู้เกี่ยวกับ **how to render html** ให้เป็นไฟล์ PNG ด้วย Aspose.HTML for .NET ตั้งแต่การโหลดหน้าเว็บระยะไกล, การกำหนดค่าตัวเลือกการเรนเดอร์, และการจัดการกับข้อผิดพลาดทั่วไป ตัวอย่างเต็มแสดงให้คุณเห็นอย่างชัดเจนว่า **convert html to png**, **save html as png**, และแม้แต่การเปิดให้บริการผ่าน Web API + +ลองใช้กับ URL ของคุณเอง, ทดลองกับขนาดต่าง ๆ, และอาจอัตโนมัติการสร้างรูปย่อสำหรับแคตตาล็อกสินค้า ของคุณได้เลย ความเป็นไปได้ไม่มีขีดจำกัดเมื่อคุณเชี่ยวชาญพื้นฐานของ **render html to png** + +*พร้อมจะก้าวต่อระดับหรือยัง?* ดาวน์โหลดแพคเกจ NuGet, ใส่โค้ดลงในโปรเจกต์ของคุณ, และเริ่มแปลงเว็บเพจเป็นภาพได้เลย หากเจอปัญหาใด ๆ อย่าลังเลที่จะแสดงความคิดเห็น—ขอให้เรนเดอร์สนุก! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/net/canvas-and-image-manipulation/_index.md b/html/turkish/net/canvas-and-image-manipulation/_index.md index 41d03da25..b615aea0f 100644 --- a/html/turkish/net/canvas-and-image-manipulation/_index.md +++ b/html/turkish/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Aspose.HTML for .NET ile SVG'yi PDF'ye nasıl dönüştüreceğinizi öğrenin. Aspose.HTML for .NET kullanarak SVG'yi XPS'e nasıl dönüştüreceğinizi öğrenin. Bu güçlü kütüphaneyle web geliştirmenizi hızlandırın. ### [C#'ta Antialiasing'i Etkinleştirme – Pürüzsüz Kenarlar](./how-to-enable-antialiasing-in-c-smooth-edges/) C# ile antialiasing'i nasıl etkinleştireceğinizi ve kenarları pürüzsüz hale getireceğinizi öğrenin. +### [Canvas Metni Oluşturma – Görüntülerde Metin Renderleme Tam Kılavuzu](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Aspose.HTML for .NET ile görüntüler üzerine metin eklemeyi ve özelleştirmeyi öğrenin. Adım adım örneklerle tam kılavuz. ## Çözüm diff --git a/html/turkish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/turkish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..52df23244 --- /dev/null +++ b/html/turkish/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,236 @@ +--- +category: general +date: 2026-01-03 +description: Kanvas metnini hızlı bir şekilde oluşturun ve metin görüntüsünü nasıl + render edeceğinizi, metin seçeneklerini nasıl ayarlayacağınızı ve metin kanvasını + nasıl dolduracağınızı öğrenin; aynı zamanda Linux metin renderlamasını geliştirin. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: tr +og_description: Aspose HTML ile canvas metni oluşturun, metin görüntüsü oluşturmayı + öğrenin, metin seçeneklerini ayarlayın ve tek bir öğreticide Linux metin kalitesini + artırın. +og_title: Kanvas metni oluştur – Tam Rendering Rehberi +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Canvas Metni Oluşturma – Görsellerde Metin Renderleme İçin Tam Kılavuz +url: /tr/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Canvas metni oluşturma – Tam Render Rehberi + +Her platformda net glifler elde edebileceğiniz **canvas metni oluşturma** ihtiyacınız oldu mu? Yalnız değilsiniz. Birçok geliştirici, metinlerinin Linux'ta bulanık çıkması sorunuyla karşılaşıyor, özellikle HTML'yi bir görüntüye dönüştürürken. + +Bu öğreticide, **metin görüntüsü render etme** işlemini Aspose HTML canvas üzerine nasıl yapacağınızı, **metin seçeneklerini ayarlamayı**, `FillText` kullanımını ve Linux'ta metin renderını ipucu (hinting) ile nasıl iyileştireceğinizi adım adım göstereceğiz. Sonunda, herhangi bir .NET projesine ekleyebileceğiniz, bağımsız ve çalıştırılabilir bir kod parçacığına sahip olacaksınız. + +## Öğrenecekleriniz + +- Bir `Canvas` nesnesi nasıl oluşturulur ve çizim için nasıl hazırlanır. +- `TextOptions` rolü ve Linux'ta ipucu (hinting) etkinleştirmenin önemi. +- **fill text canvas** işlemini stilize, yüksek kaliteli karakterlerle yapan adım‑adım kod. +- Yaygın tuzaklar (ipucu eksikliği, yanlış koordinat sistemi) ve hızlı çözümleri. +- Örneği genişletme yolları: özel yazı tipleri, renkler ve çok satırlı metin. + +> **Önkoşul:** .NET 6+ (veya .NET Framework 4.7.2) ve Aspose.HTML for .NET NuGet paketi yüklü. + +--- + +## Adım 1: Projeyi ve İçe Aktarmaları Ayarlama + +Çizmeye başlamadan önce projenizin doğru derlemelere referans verdiğinden emin olun. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Pro ipucu:** Linux kullanıyorsanız `libgdiplus` paketini ekleyin (`sudo apt-get install libgdiplus`) böylece GDI‑tabanlı render sorunsuz çalışır. + +--- + +## Adım 2: Bir Canvas Oluşturma ve Boyutunu Tanımlama + +Canvas, üzerine boyama yapabileceğiniz bir off‑screen bitmap’dir. Dijital çizim tahtanız gibi düşünün. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Neden önemli:** Katı bir arka plan ayarlamak, daha sonra görüntüyü dışa aktarırken şeffaf artefaktların oluşmasını önler. + +--- + +## Adım 3: Metin Seçeneklerini Yapılandırma – Net Linux Metninin Anahtarı + +Linux font renderı, ipucu (hinting) devre dışı bırakılırsa bulanık görünebilir. `TextOptions.UseHinting` render’a glifleri piksel sınırlarına hizalamasını söyler ve çıktıyı belirgin şekilde keskinleştirir. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Bunu atlayarsanız ne olur?** Birçok Linux dağıtımında metin, özellikle küçük punto boyutlarında, hafif bulanık veya hizalanmamış görünür. + +--- + +## Adım 4: Canvas Üzerine Metin Doldurma + +Canvas hazır ve metin seçenekleri ayarlandığına göre, artık **fill text canvas** işlemini gerçekleştirebiliriz. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Özel stil (renk, punto, hizalama) istiyorsanız, çağrıyı bir `Font` ve `Brush` ile sarın: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Adım 5: Canvas’ı Görüntü Dosyası Olarak Dışa Aktarma + +Son adım, render edilen bitmap’i diske yazarak sonucu kontrol etmenizi sağlar. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +`canvas-output.png` dosyasını açın; Windows, macOS ya da Linux fark etmeksizin net, doğru ipucu (hinting) uygulanmış metni görmelisiniz. + +--- + +## Yaygın Sorular & Kenar Durumları + +### İpucu (hinting) performansı nasıl etkiler? + +İpucu (hinting) etkinleştirmek, genellikle 800×600 bir canvas için < 2 ms gibi ihmal edilebilir bir ek yük getirir. Görsel kazanç, özellikle kalite öncelikli sunucu‑tarafı görüntü üretiminde, maliyetten çok daha fazladır. + +### Çok satırlı metin ihtiyacım olursa? + +`canvas.FillText`’i bir döngü içinde kullanarak Y koordinatını ayarlayın veya otomatik satır bölme için `TextLayout` nesnesi kabul eden `canvas.FillText` aşırı yüklemesini kullanın. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Özel bir TrueType yazı tipi kullanabilir miyim? + +Kesinlikle. Yazı tipini `FontFamily` ile yükleyin ve `TextOptions.FontFamily`’e ya da doğrudan `FillText`’e gönderdiğiniz `Font` nesnesine atayın. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Yazı tipi dosyasının çalışma zamanına erişilebilir olduğundan emin olun (projeye ekleyin ya da sistem genelinde kaydedin). + +--- + +## Tam Çalışan Örnek + +Aşağıda, yukarıdaki tüm adımları içeren, kopyala‑yapıştır hazır program yer alıyor. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Beklenen çıktı:** `canvas-output.png` adlı bir PNG dosyası; birinci satır düz, ikinci satır kalın mavi; ikisi de ipucu (hinting) sayesinde net render edilmiş. + +--- + +## Sonuç + +Sıfırdan **canvas metni oluşturduk**, Aspose.HTML ile **metin görüntüsü render ettik** ve `UseHinting` gibi **metin seçeneklerini ayarlamanın** Linux’taki metin kalitesini **iyileştirmek** için ne kadar kritik olduğunu gördük. Yukarıdaki adımları izleyerek, .NET ortamında thumbnail, watermark ya da dinamik grafik üretimi gibi senaryolarda güvenle **fill text canvas** yapabilirsiniz. + +Bir sonraki meydan okumaya hazır mısınız? Arka plan degrade’leri ekleyin, metni döndürün ya da vektörel mükemmel ölçekleme için SVG’ye dışa aktarın. Aynı prensipler—doğru `TextOptions`, özenli koordinat yönetimi ve temiz disposal—tüm formatlarda geçerli. + +Herhangi bir tuhaflıkla karşılaştıysanız ya da genişletme fikirleriniz varsa yorum bırakın. Kodlamanın tadını çıkarın ve o bıçak‑keskin karakterlerin keyfini sürün! + +--- + +*Linux'ta ipucu (hinting) ile render edilen net metin örneğini gösteren bir canvas görüntüsü (alt metin: “create canvas text example showing hinted rendering on Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/net/html-document-manipulation/_index.md b/html/turkish/net/html-document-manipulation/_index.md index af4fe7045..e9f58a865 100644 --- a/html/turkish/net/html-document-manipulation/_index.md +++ b/html/turkish/net/html-document-manipulation/_index.md @@ -59,6 +59,8 @@ Kapsamlı rehberimizle .NET için Aspose.HTML'nin potansiyelini açığa çıkar .NET için Aspose.HTML'in gücünden nasıl yararlanacağınızı öğrenin. HTML manipülasyonu ve işleme ile web geliştirmenizi hızlandırın. ### [Aspose.HTML ile .NET'te Belge Oluşturma](./creating-a-document/) .NET için Aspose.HTML'nin Gücünü Serbest Bırakın. HTML ve SVG Belgelerini Kolayca Oluşturmayı, Düzenlemeyi ve Optimize Etmeyi Öğrenin. Adım Adım Örnekleri ve SSS'leri keşfedin. +### [Aspose.HTML ile .NET'te HTML Belgesi Oluşturma – Adım Adım Kılavuz](./create-html-document-with-aspose-html-step-by-step-guide/) +Aspose.HTML ile .NET'te HTML belgesi oluşturmayı, içerik eklemeyi ve kaydetmeyi adım adım öğrenin. ### [Aspose.HTML ile .NET'te Bir Belgeyi Düzenleme](./editing-a-document/) .NET için Aspose.HTML ile ilgi çekici web içerikleri oluşturun. HTML, CSS ve daha fazlasını nasıl yöneteceğinizi öğrenin. ### [Aspose.HTML ile .NET'te Bir Belgeyi Kaydetme](./saving-a-document/) @@ -78,4 +80,4 @@ Sonuç olarak, Aspose.HTML for .NET kullanarak HTML belge düzenleme konusunda u {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/turkish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..517871223 --- /dev/null +++ b/html/turkish/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,238 @@ +--- +category: general +date: 2026-01-03 +description: Aspose.HTML kullanarak C#'de HTML belgesi oluşturun. Elementi gövdeye + eklemeyi, yazı tipi stilini ayarlamayı ve basit bir span ile metin HTML'ini biçimlendirmeyi + öğrenin. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: tr +og_description: C#'de HTML belgesi oluşturun ve Aspose.HTML kullanarak gövdeye öğe + eklemeyi, yazı tipi stilini ayarlamayı ve metni HTML olarak biçimlendirmeyi görün. +og_title: Aspose.HTML ile HTML Belgesi Oluşturma – Hızlı Kılavuz +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Aspose.HTML ile HTML Belgesi Oluşturma – Adım Adım Rehber +url: /tr/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Aspose.HTML ile HTML Belgesi Oluşturma – Adım Adım Kılavuz + +Programlı olarak **create html document** oluşturmanız gerektiğinde ve çıktının neden sade göründüğünü merak ettiğiniz oldu mu? Tek başınıza değilsiniz. Birçok projede anlık olarak snippet'ler üretmemiz gerekiyor—e-posta şablonları, dinamik raporlar veya küçük UI widget'ları gibi. İyi haber, Aspose.HTML sayesinde **create html document** oluşturmak, stil vermek ve ham stringler yazmadan sayfanıza eklemek çok kolay. + +Bu öğreticide, **append element to body**, **set font style** ve **format text html** işlemlerini **create span element** kullanarak gösteren tam bir örnek üzerinden geçeceğiz. Sonunda, bir span içinde kalın‑italik metin üreten çalıştırılabilir bir C# snippet'ine sahip olacaksınız ve her çağrının “neden”ini anlayacaksınız. + +> **Önkoşullar** +> • .NET 6 veya üzeri (herhangi bir yeni .NET çalışma zamanı çalışır) +> • Aspose.HTML for .NET NuGet paketi (`Aspose.Html`) yüklü +> • C# ve DOM kavramlarına temel aşinalık + +Başka kütüphane gerekmez ve kod Windows, Linux veya macOS üzerinde çalışır. + +--- + +## Oluşturacağınız Şey + +Minimal bir HTML belgesi oluşturacağız, içinde **Bold‑Italic text** ifadesini barındıran bir `` ekleyeceğiz, hem **bold** hem de **italic** stilini uygulayacağız ve sonunda **append element to body** işlemini yapacağız. Son işaretleme şu şekilde görünüyor: + +```html + + + Bold‑Italic text + + +``` + +Kılavuzun sonunda tam kaynak kodunu kopyalayıp yapıştırabilir ve hemen çalıştırabilirsiniz. + +![HTML belge oluşturma örneği](image.png){alt="HTML belge oluşturma örneği"} + +--- + +## Adım 1 – HTMLDocument'i Başlatma (**create html document**'un temeli) + +**append element to body** yapabilmemiz için önce üzerinde çalışabileceğimiz bir belge nesnesine ihtiyacımız var. Aspose.HTML, bellekteki bir DOM'u temsil eden `HTMLDocument` sınıfını sağlar. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Neden önemli*: `HTMLDocument` örneği oluşturmak size temiz bir tuval sağlar—daha sonra **format text html** yapacağınız boş bir sayfa gibi düşünün. Bu adım olmadan düğümleri manipüle edemez veya stiller uygulayamazsınız. + +--- + +## Adım 2 – `` öğesini Oluşturma (**create span element**) + +Şimdi stillendirilmiş metnimiz için bir kapsayıcıya ihtiyacımız var. `` mükemmeldir çünkü akışı bozmadan CSS taşıyabilen bir satır içi (inline) öğedir. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*İpucu*: Birden fazla metin parçası eklemeniz gerektiğinde aynı `spanElement`'i klonlayarak (`spanElement.Clone(true)`) ve her seferinde `InnerHtml`'i değiştirerek yeniden kullanabilirsiniz. + +--- + +## Adım 3 – Kalın **ve** italik için **set font style** uygula + +Aspose.HTML, güçlü tipli bir `Style` nesnesi sunar. **set font style** yapmak için `WebFontStyle.Bold` ve `WebFontStyle.Italic` değerlerini bitwise OR ile birleştiririz. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Neden enum kullanmalı*: `WebFontStyle` enum'u doğrudan CSS özelliklerine (`font-weight` ve `font-style`) eşlenir. Enum kullanmak yazım hatalarını önler ve üretilen CSS'in geçerli olmasını sağlar—güvenilir **format text html** için gereklidir. + +--- + +## Adım 4 – **Append element to body** ve belgeyi sonlandırma + +Stil verilen span hazır olduğunda, son adım onu `` etiketi içine yerleştirmektir. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +Bu noktada DOM ağacı, daha önce gösterilen snippet gibi görünür. `htmlDocument.InnerHtml`'i incelerseniz tam oluşmuş işaretlemeyi göreceksiniz. + +--- + +## Adım 5 – Belgeyi Kaydetme veya Render Etme + +HTML'i bir dosyaya yazabilir, bir tarayıcıya akıtabilir veya Aspose.HTML'nin render motorunu kullanarak PDF/Resim olarak render edebilirsiniz. İşte en basit dosya çıktısı seçeneği: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +`output.html` dosyasını herhangi bir tarayıcıda açın ve **Bold‑Italic text**'in tam olarak amaçlandığı gibi görüntülendiğini görmelisiniz. + +--- + +## Tam Çalışan Örnek + +Her şeyi bir araya getirerek, işte tam ve çalıştırmaya hazır program: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Beklenen çıktı** – `output.html` dosyasını açtığınızda gösterir: + +> **Bold‑Italic text** (bold and italic) + +Kaynağı incelerseniz, tartıştığımız tam HTML'i göreceksiniz ve **format text html** adımının başarılı olduğunu doğrular. + +--- + +## Yaygın Sorular & Kenar Durumları + +### 1. İki'den fazla stil gerekirse ne olur? + +`WebFontStyle` bir bayrak (flags) enum'udur, bu yüzden herhangi bir sayıda stil (örneğin `Underline`) birleştirilebilir. Sadece `|` operatörünü kullanmaya devam edin: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Aynı anda rengi değiştirebilir miyim? + +Kesinlikle. `Style` nesnesinin bir `Color` özelliği vardır: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. **append element to body** işlemini birden çok kez nasıl yaparım? + +Bir döngü oluşturun, stil verilen span'i klonlayın, metni ayarlayın ve her klonu ekleyin: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Bunun yerine bir `
` içinde **format text html** yapmam gerekirse? + +Aynı API herhangi bir öğe için çalışır. Sadece `CreateElement("span")` ifadesini `CreateElement("div")` ile değiştirin ve gerektiği gibi stilleri ayarlayın. + +### 5. Uyumluluk endişeleri? + +Aspose.HTML, .NET Standard 2.0+ hedeflediği için kod .NET Core, .NET Framework ve .NET 5/6+ üzerinde çalışır. Ek tarayıcı‑spesifik shim'lere gerek yok. + +--- + +## Profesyonel İpuçları & Tuzaklar + +- **Pro tip:** Stili yapılandırdıktan *sonra* her zaman `InnerHtml`'i ayarlayın. İçeriği önce değiştirmek bazı tarayıcılarda yeniden düzenlemeye neden olabilir; stil sonrası ayarlamak gereksiz işi önler. +- **Dikkat edin:** `WebFontStyle` ile satır içi CSS string'lerini karıştırmak. Daha sonra `spanElement.SetAttribute("style", "...")` ile manuel olarak ayarlarsanız, enum‑tarafından oluşturulan stilleri üzerine yazarsınız. Tek bir yönteme bağlı kalın. +- **Performans notu:** Büyük belgeler için toplu oluşturma (tüm düğümleri önce oluşturup ardından tek seferde eklemek) DOM mutasyon sayısını azaltır ve render süresini hızlandırır. + +--- + +## Sonuç + +Artık Aspose.HTML ile **create html document** nasıl yapılır, **append element to body**, **set font style** ve **format text html** işlemlerini **create span element** kullanarak nasıl gerçekleştireceğinizi biliyorsunuz. Örnek tamamen işlevsel ve açıklamalar hem “nasıl” hem de “neden” yönlerini kapsıyor, böylece deseni daha karmaşık senaryolara uyarlamak kolaylaşıyor. + +Bir sonraki adım için hazır mısınız? `` öğesini birden çok CSS sınıfına sahip `

` ile değiştirin ya da aynı DOM'u `Document` → `PdfSaveOptions` kullanarak PDF'e render edin. Aynı prensipler geçerlidir ve Aspose.HTML'ı herhangi bir sunucu‑tarafı HTML üretim görevi için güvenilir bir ortak olarak bulacaksınız. + +Sorularınız mı var, ya da akıllı bir çözüm mü buldunuz? Aşağıya yorum bırakın—iyi kodlamalar! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/net/html-extensions-and-conversions/_index.md b/html/turkish/net/html-extensions-and-conversions/_index.md index ae139428e..cc88fffed 100644 --- a/html/turkish/net/html-extensions-and-conversions/_index.md +++ b/html/turkish/net/html-extensions-and-conversions/_index.md @@ -38,31 +38,19 @@ Aspose.HTML for .NET yalnızca bir kütüphane değil; web geliştirme dünyası ## HTML Uzantıları ve Dönüşümleri Eğitimleri ### [Aspose.HTML ile .NET'te HTML'yi PDF'ye dönüştürün](./convert-html-to-pdf/) -Aspose.HTML for .NET ile HTML'yi zahmetsizce PDF'ye dönüştürün. Adım adım kılavuzumuzu izleyin ve HTML'den PDF'ye dönüştürmenin gücünü serbest bırakın. +### [URL'den PDF Oluştur – Tam C# Kılavuzu](./create-pdf-from-url-complete-c-guide/) ### [Aspose.HTML ile .NET'te EPUB'ı Görüntüye Dönüştürme](./convert-epub-to-image/) -Aspose.HTML for .NET kullanarak EPUB'ı görsellere nasıl dönüştüreceğinizi öğrenin. Kod örnekleri ve özelleştirilebilir seçenekler içeren adım adım eğitim. ### [Aspose.HTML ile .NET'te EPUB'ı PDF'ye dönüştürün](./convert-epub-to-pdf/) -Aspose.HTML for .NET kullanarak EPUB'u PDF'ye nasıl dönüştüreceğinizi öğrenin. Bu adım adım kılavuz, kusursuz belge dönüşümü için özelleştirme seçeneklerini, SSS'leri ve daha fazlasını kapsar. ### [Aspose.HTML ile .NET'te EPUB'ı XPS'e dönüştürün](./convert-epub-to-xps/) -.NET'te Aspose.HTML for .NET kullanarak EPUB'ı XPS'e nasıl dönüştüreceğinizi öğrenin. Zahmetsiz dönüşümler için adım adım kılavuzumuzu izleyin. ### [Aspose.HTML ile .NET'te HTML'yi BMP'ye dönüştürün](./convert-html-to-bmp/) -Aspose.HTML for .NET kullanarak .NET'te HTML'yi BMP'ye nasıl dönüştüreceğinizi öğrenin. Web geliştiricileri için Aspose.HTML for .NET'ten yararlanmaya yönelik kapsamlı kılavuz. ### [Aspose.HTML ile .NET'te HTML'yi DOC ve DOCX'e dönüştürün](./convert-html-to-doc-docx/) -Bu adım adım kılavuzda .NET için Aspose.HTML'nin gücünden nasıl yararlanacağınızı öğrenin. HTML'yi DOCX'e zahmetsizce dönüştürün ve .NET projelerinizi bir üst seviyeye taşıyın. Hemen başlayın! ### [Aspose.HTML ile .NET'te HTML'yi GIF'e dönüştürün](./convert-html-to-gif/) -.NET için Aspose.HTML'nin gücünü keşfedin: HTML'yi GIF'e dönüştürmek için adım adım kılavuz. Ön koşullar, kod örnekleri, SSS ve daha fazlası! HTML manipülasyonunuzu Aspose.HTML ile optimize edin. ### [Aspose.HTML ile .NET'te HTML'yi JPEG'e dönüştürün](./convert-html-to-jpeg/) -.NET'te HTML'yi JPEG'e dönüştürmeyi Aspose.HTML for .NET ile öğrenin. Aspose.HTML for .NET'in gücünden yararlanmak için adım adım bir kılavuz. Web geliştirme görevlerinizi zahmetsizce optimize edin. ### [Aspose.HTML ile .NET'te HTML'yi Markdown'a Dönüştürme](./convert-html-to-markdown/) -Etkili içerik düzenlemesi için Aspose.HTML kullanarak .NET'te HTML'yi Markdown'a nasıl dönüştüreceğinizi öğrenin. Sorunsuz bir dönüştürme süreci için adım adım rehberlik alın. ### [Aspose.HTML ile .NET'te HTML'yi MHTML'ye dönüştürün](./convert-html-to-mhtml/) -Aspose.HTML ile .NET'te HTML'yi MHTML'ye dönüştürün - Etkili web içeriği arşivleme için adım adım bir kılavuz. MHTML arşivleri oluşturmak için .NET için Aspose.HTML'yi nasıl kullanacağınızı öğrenin. ### [Aspose.HTML ile .NET'te HTML'yi PNG'ye dönüştürün](./convert-html-to-png/) -HTML belgelerini düzenlemek ve dönüştürmek için Aspose.HTML for .NET'in nasıl kullanılacağını keşfedin. Etkili .NET geliştirme için adım adım kılavuz. ### [Aspose.HTML ile .NET'te HTML'yi TIFF'e dönüştürün](./convert-html-to-tiff/) -Aspose.HTML for .NET ile HTML'yi TIFF'e nasıl dönüştüreceğinizi öğrenin. Etkili web içeriği optimizasyonu için adım adım kılavuzumuzu izleyin. ### [Aspose.HTML ile .NET'te HTML'yi XPS'e dönüştürün](./convert-html-to-xps/) -.NET için Aspose.HTML'nin gücünü keşfedin: HTML'yi XPS'e zahmetsizce dönüştürün. Ön koşullar, adım adım kılavuz ve SSS dahildir. ## Çözüm @@ -74,4 +62,4 @@ Peki, daha ne bekliyorsunuz? Aspose.HTML for .NET kullanarak HTML uzantıların {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/turkish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..0a81887b2 --- /dev/null +++ b/html/turkish/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,201 @@ +--- +category: general +date: 2026-01-03 +description: C#'ta URL'den hızlıca PDF oluşturun. HTML'yi PDF'ye nasıl dönüştüreceğinizi, + web sayfasını PDF olarak nasıl kaydedeceğinizi ve kolay kodla HTML'den PDF oluşturmayı + öğrenin. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: tr +og_description: C#'ta URL'den hızlıca PDF oluşturun. Bu öğreticide HTML'yi PDF'ye + dönüştürme, web sayfasını PDF olarak kaydetme ve Aspose.HTML kullanarak HTML'den + PDF oluşturma gösterilmektedir. +og_title: URL'den PDF Oluştur – Tam C# Kılavuzu +tags: +- pdf +- csharp +- html +- conversion +title: URL'den PDF Oluştur – Tam C# Rehberi +url: /tr/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# URL'den PDF Oluştur – Tam C# Rehberi + +Hiç **URL'den PDF oluştur** ihtiyacı duydunuz mu ama hangi kütüphaneyi seçeceğinize karar veremediniz mi? Yalnız değilsiniz. Birçok geliştirici, bir web sayfasını arşivlemek, çevrimiçi bir şablondan fatura üretmek ya da sadece siteye “PDF olarak indir” butonu eklemek istediklerinde bu engelle karşılaşıyor. + +Bu öğreticide **HTML'yi PDF'ye dönüştürme** sürecini C# ile adım adım inceleyeceğiz. **Web sayfasını PDF olarak kaydet**, **HTML'den PDF oluştur** ve `Aspose.HTML for .NET` kütüphanesinin bu işi ne kadar kolaylaştırdığını göreceksiniz. Sonunda, herhangi bir genel URL'yi alıp render eden ve PDF dosyasını diske yazan hazır‑kod parçacığını elde edeceksiniz. + +> **Pro tip:** Kurumsal bir proxy arkasında çalışıyorsanız, `HTMLDocument` yapıcısının doğru `WebRequest` ayarlarını almasını sağlayın—aksi takdirde indirme sessizce başarısız olur. + +## Gereksinimler + +- **.NET 6.0** veya üzeri (kod .NET Framework 4.7+ üzerinde de çalışır). +- **Aspose.HTML for .NET** NuGet paketi (`Aspose.HTML`). +- PDF'nin kaydedileceği yazılabilir bir klasör. +- C# temellerine aşina olmak (karmaşık bir şey gerekmez). + +Ekstra yapılandırma dosyası yok, gizli bir sihir yok—sadece birkaç satır temiz, yorumlu kod. + +![URL'den PDF Oluşturma örneği](image.png){alt="url'den pdf oluştur"} + +## Adım 1: Aspose.HTML NuGet Paketini Yükleyin + +Terminalinizi ya da Paket Yöneticisi Konsolunuzu açın ve şu komutu çalıştırın: + +```bash +dotnet add package Aspose.HTML +``` + +> **Neden önemli:** `HTMLDocument`, `PdfSaveOptions` ve `PdfConverter` sınıfları `Aspose.Html` ad alanında bulunur. Paketi eklemezseniz, derleyici bu tipleri tanıyamaz. + +## Adım 2: Web Sayfasını bir `HTMLDocument`'e Yükleyin + +İlk gerçek işlem uzaktaki HTML'i indirmektir. `HTMLDocument` bir URL'i doğrudan alabilir, yönlendirmeleri ve içerik‑tipi algılamasını sizin yerinize yapar. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Ne oluyor?** +- `HTMLDocument` alınan işaretlemi bir DOM ağacına ayrıştırır, tıpkı bir tarayıcı gibi. +- Mutlak URL'lerle referans verilen dış CSS, görseller veya script'ler de indirilir, böylece PDF canlı sayfa gibi görünür. + +## Adım 3: PDF Dışa Aktarma Seçeneklerini Yapılandırın (Kenar Boşlukları, Sayfa Boyutu vb.) + +Dönüştürücüye belgeyi vermeden önce çıktıyı ince ayarlarız. `PdfSaveOptions` nesnesi kenar boşlukları, sayfa yönelimi ve hatta PDF sürümünü belirlemenizi sağlar. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Neden kenar boşlukları ayarlamalısınız?** +Sıkı bir PDF, özellikle mobil‑optimize sitelerde başlık veya altbilgileri kırpabilir. Makul bir kenar boşluğu eklemek her şeyin okunabilir kalmasını sağlar. + +## Adım 4: HTML Belgesini Doğrudan PDF'ye Dönüştürün + +Şimdi asıl iş. `PdfConverter.ConvertHtml` render edilen sayfayı doğrudan bir PDF dosyasına akıtır. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Arka planda:** +- Aspose, DOM'u kendi yerleşim motoru ile render eder (Chromium gerekmez). +- Render edilen bitmap, mümkün olduğunda PDF vektörlerine rasterleştirilir, böylece metin seçilebilir kalır. + +## Adım 5: Sonucu Doğrulayın ve Kenar Durumlarını Ele Alın + +Hızlı bir kontrol, ileride baş ağrısını önler. Oluşturulan dosyayı açın; canlı sayfayı, uygulanmış kenar boşluklarını ve tüm görselleri görmelisiniz. + +### Yaygın tuzaklar ve nasıl önlenir + +| Sorun | Neden | Çözüm | +|-------|-------|------| +| **Boş PDF** | URL güvenlik duvarı tarafından engelleniyor veya kimlik doğrulama gerekiyor | `HTMLDocument` yapıcısına kimlik bilgileri içeren özel bir `WebRequest` geçirin | +| **CSS eksik** | Harici stil sayfası göreceli URL'ler kullanıyor | Temel URL'nin doğru olduğundan emin olun (Aspose bunu halleder, ancak yönlendirmeleri kontrol edin) | +| **Büyük dosya boyutu** | Yüksek çözünürlüklü görseller küçültülmeden ekleniyor | `PdfSaveOptions.ImageCompression` ile gömülü görselleri JPEG sıkıştırmasıyla kaydedin | +| **Unicode karakterler bozuk** | Yazı tipi gömülmemiş | `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` ayarlayın | + +## Tam Çalışan Örnek (Kopyala‑Yapıştır Hazır) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Programı çalıştırın (`dotnet run`) ve `C:\Temp` içinde `example.pdf` dosyasını bulacaksınız. Herhangi bir PDF görüntüleyiciyle açın; `https://example.com` adresinin tam bir kopyasını, belirlediğiniz kenar boşluklarıyla görmelisiniz. + +## Sonuç + +C# kullanarak **URL'den PDF oluştur** sürecini gösterdik. Adımlar arasında bir web sayfasını yüklemek, kenar boşluklarını yapılandırmak ve DOM'u PDF dosyasına dönüştürmek yer aldı—**HTML'yi PDF'ye dönüştür**, **web sayfasını PDF olarak kaydet** ve **HTML'den PDF üret** için üretim‑hazır bir yol. + +Deneyimleyin: sayfa boyutunu `Letter` yapın, yönelimi yatay (landscape) olarak değiştirin veya `PdfPageEventHandler` ile bir üstbilgi/altbilgi ekleyin. Aynı desen dinamik sayfalar, oturum açma korumalı portallar (çerezleri sağlayarak) veya birden çok URL'yi toplu işleyerek tek bir rapor haline getirmek için de çalışır. + +**İleride keşfedebileceğiniz adımlar** + +- Yüksek verimlilikli hizmetler için asenkron dönüşümle **HTML to PDF C#**. +- `PdfDocumentInfo` ile PDF'ye **metadata** (yazar, başlık) ekleme. +- Farklı URL'lerden üretilen birden çok PDF'yi tek bir raporda birleştirmek için **Aspose.PDF** kullanma. + +Sorularınız mı var? Aşağıya yorum bırakın, iyi kodlamalar! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/net/rendering-html-documents/_index.md b/html/turkish/net/rendering-html-documents/_index.md index 5115afb45..6e25bd431 100644 --- a/html/turkish/net/rendering-html-documents/_index.md +++ b/html/turkish/net/rendering-html-documents/_index.md @@ -52,9 +52,14 @@ Aspose.HTML for .NET'te işleme zaman aşımlarını etkili bir şekilde nasıl Aspose.HTML for .NET kullanarak birden fazla HTML belgesini işlemeyi öğrenin. Bu güçlü kütüphaneyle belge işleme yeteneklerinizi artırın. ### [Aspose.HTML ile .NET'te SVG Belgesini PNG Olarak Oluşturun](./render-svg-doc-as-png/) .NET için Aspose.HTML'nin gücünü açığa çıkarın! SVG Doc'u zahmetsizce PNG olarak nasıl işleyeceğiniz öğrenin. Adım adım örneklere ve SSS'lere dalın. Hemen başlayın! +### [HTML'yi İşlemek – Özel Kaynak İşleyici ile Tam Kılavuz](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Özel kaynak işleyici kullanarak HTML'yi nasıl render edeceğinizi adım adım öğrenin. +### [HTML'yi PNG Olarak İşleme – Tam Adım‑Adım Kılavuz](./how-to-render-html-to-png-complete-step-by-step-guide/) +HTML'yi PNG'ye dönüştürmeyi adım adım öğrenin, örnek kodlar ve ipuçlarıyla süreci kolaylaştırın. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/turkish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..5fa7463f7 --- /dev/null +++ b/html/turkish/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,230 @@ +--- +category: general +date: 2026-01-03 +description: Aspose.HTML kullanarak HTML'yi görüntülere nasıl render ederiz. HTML'den + görüntüye dönüşümünü, özel kaynak işleyicisini öğrenin ve C#'ta HTML'yi bitmap'e + dönüştürün. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: tr +og_description: Aspose.HTML kullanarak HTML'yi görüntülere nasıl dönüştüreceğinizi + öğrenin. HTML'den görüntüye dönüşüm, özel kaynak işleyicisi ve C# ile HTML'yi bitmap'e + dönüştürme konularında uzmanlaşın. +og_title: HTML Nasıl Render Edilir – Özel Kaynak İşleyicili Tam Kılavuz +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTML Nasıl Render Edilir – Özel Kaynak İşleyicili Tam Kılavuz +url: /tr/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML Nasıl Render Edilir – Özel Kaynak İşleyici ile Tam Kılavuz + +Kendiniz bir tarayıcı motoru ile uğraşmadan **HTML nasıl render edilir** bir bitmap'e dönüştürmeyi hiç merak ettiniz mi? Yalnız değilsiniz. Birçok geliştirici, e-postalar, raporlar veya küçük resimler için dinamik bir sayfanın hızlı bir ekran görüntüsüne ihtiyaç duyduğunda bir engelle karşılaşıyor. İyi haber? Aspose.HTML ile herhangi bir HTML dizesini bir görüntüye dönüştürebilirsiniz—UI yok, headless Chrome yok, sadece saf C# kodu. + +Bu öğreticide, pratik bir **html to image conversion** senaryosunu adım adım inceleyecek, **custom resource handler** nasıl **implement** edileceğini gösterecek ve tam **convert html to bitmap** iş akışını göstereceğiz. Sonunda, HTML'yi tamamen bellek içinde bir görüntüye render eden, yeniden kullanılabilir bir metoda sahip olacaksınız; bu yöntem, daha sonraki işleme veya depolamaya hazır. + +> **Önkoşullar** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet paketi (`Aspose.Html`) +> * C# ve akışlarla ilgili temel bilgi + +Bu temellere sahipseniz, hemen başlayalım. + +--- + +## Aspose.HTML ile HTML Nasıl Render Edilir + +Herhangi bir **render html to image** işleminin çekirdeği `ImageRenderer` sınıfıdır. Bir `HTMLDocument` alır ve raster grafikler (PNG, JPEG, BMP, vb.) üretir. Aşağıda minimal iskelet yer almaktadır: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Bu snippet çalışır, ancak renderlayıcıya nereye yazacağını söylemezseniz sadece diskte bir dosya elde edersiniz. Her şeyi bellek içinde tutmak ve HTML'nin talep ettiği her kaynağı (görseller, CSS, fontlar) yakalamak için bir **custom resource handler** ekleyeceğiz. + +--- + +## Özel Bir Kaynak İşleyici Uygulama + +Bir **custom resource handler**, harici varlıkların nasıl alınacağı ve depolanacağı üzerinde tam kontrol sağlar. Çoğu durumda bu varlıkları daha sonra kullanmak üzere bellekte yakalamak isteyebilirsiniz (ör. bir ZIP'e paketlemek). İşleyici `ResourceHandler` sınıfından miras alır ve `HandleResource` metodunu geçersiz kılar. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Neden zahmet?** +* **Performans** – disk I/O yok, her şey RAM'de kalır. +* **Güvenlik** – hangi URL'lerin alınabileceğini kontrol edersiniz. +* **Genişletilebilirlik** – kaynakları önbelleğe alabilir, yeniden adlandırabilir veya diğer konteynerlere gömebilirsiniz. + +--- + +## ImageRenderer Kullanarak HTML'yi Bitmap'e Dönüştürme + +Şimdi parçaları birleştiriyoruz: HTML'yi yüklüyoruz, `MyHandler`'ı ekliyoruz ve renderlıyoruz. Aşağıdaki metod, renderlanmış sayfanın PNG görüntüsünü içeren bir `MemoryStream` döndürür. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Beklenen Çıktı + +Metodu şu şekilde çağırırsanız: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +`demo.png` dosyasını aşağıdaki gibi bir görünüme sahip olarak alacaksınız: + +![html çıktısını nasıl render eder örnek](https://example.com/assets/render-html-output.png "html çıktısını nasıl render eder örnek") + +*Alt metin:* **html çıktısını nasıl render eder örnek** – renderlanmış HTML snippet'ini gösteren küçük bir bitmap. + +## HTML'den Görüntüye Dönüştürme – Yaygın Tuzaklar ve İpuçları + +### 1. Göreli URL'ler ve Base Etiketleri + +HTML'niz dış CSS veya görselleri göreli yollarla referans veriyorsa, renderlayıcı temel klasörü bilemez. Ya: + +* `` etiketini ekleyin, ya da +* `MyHandler.HandleResource` içinde URL'leri çözümleyin ve doğru akışı sunun. + +### 2. Font Kullanılabilirliği + +Aspose.HTML varsayılan olarak sistem fontlarını kullanır. Özel web fontları (`@font-face`) için, font dosyalarının işleyici aracılığıyla erişilebilir olduğundan emin olun veya bunları base64 veri URI'ları olarak gömün. + +### 3. Büyük Sayfalar + +Çok uzun bir sayfanın renderlanması önemli miktarda bellek tüketebilir. Görüntüleme alanı boyutunu sınırlayabilirsiniz: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Görüntü Formatları + +`renderer.Save(stream, ImageFormat.Jpeg)` JPEG sıkıştırması gerektiğinde aynı şekilde çalışır. Gerçek bir **convert html to bitmap** çıktısı için `ImageFormat.Png` yerine `ImageFormat.Bmp` kullanın. + +## HTML'yi Görüntüye Render Et – İleri Senaryolar + +### A. Birden Çok Sayfa Render Etme + +HTML sayfa sonları (`
`) içeriyorsa, sayfalar üzerinde döngü yapabilirsiniz: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Görüntüyü PDF'ye Gömme + +PNG'yi doğrudan gömmek için `Aspose.Pdf` ile birleştirin: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +## Sonuç + +**HTML'yi nasıl render eder** bir bitmap'e tamamen bellek içinde dönüştürmeyi ele aldık, **html to image conversion** temellerini inceledik, bir **custom resource handler** oluşturduk ve Aspose.HTML'in `ImageRenderer`ı ile **convert html to bitmap** nasıl yapılacağını gösterdik. Yaklaşım hızlı, çok‑iş parçacıklı güvenli ve gerçek dünya projeleri için kolayca genişletilebilir—e-posta küçük resmi oluşturma'dan otomatik rapor üretimine kadar. + +Bir sonraki adıma hazır mısınız? PNG çıktısını JPEG ile değiştirin, farklı sayfa boyutlarıyla deney yapın veya işleyiciyi bir önbellek katmanına bağlayarak tekrar eden renderları anında yapın. Her kaynağı kendiniz kontrol ettiğinizde sınır yoktur. + +Sorularınız veya paylaşmak istediğiniz ilginç bir kullanım senaryonuz mu var? Aşağıya bir yorum bırakın, iyi renderlamalar! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/turkish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..d85a70073 --- /dev/null +++ b/html/turkish/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,233 @@ +--- +category: general +date: 2026-01-03 +description: Aspose.HTML'i C#'ta kullanarak HTML'yi PNG'ye render etmeyi, web sayfasını + görüntüye dönüştürmeyi ve HTML'yi PNG olarak kaydetmeyi öğrenin. Hızlı, güvenilir + ve üretime hazır. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: tr +og_description: HTML'yi PNG'ye nasıl render edeceğinizi, web sayfasını görüntüye nasıl + dönüştüreceğinizi ve Aspose.HTML kullanarak tam bir C# örneğiyle HTML'yi PNG olarak + nasıl kaydedeceğinizi öğrenin. +og_title: HTML'yi PNG'ye Dönüştürme – Tam Rehber +tags: +- C# +- Aspose.HTML +- Image Rendering +title: HTML'yi PNG'ye Render Etme – Tam Adım Adım Kılavuz +url: /tr/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML'yi PNG'ye Render Etme – Tam Adım‑Adım Kılavuz + +Eğer **html'yi nasıl render edeceğinizi** bir görüntüye dönüştürmek istiyorsanız, doğru yere geldiniz. Küçük resimler için **web sayfasını görüntüye dönüştürme**, bir sayfayı PNG olarak arşivleme ya da sosyal medya ön izlemelerini anında oluşturma ihtiyacınız olsun, doğru kütüphane ile süreç şaşırtıcı derecede basit olabilir. + +Bu öğreticide, herhangi bir canlı URL'yi Aspose.HTML for .NET kullanarak PNG dosyasına dönüştürmeyi adım adım göstereceğiz. Tam, çalıştırılabilir bir kod örneği görecek, her ayarın neden önemli olduğunu öğrenecek ve bazı kenar durumları için ipuçları keşfedeceksiniz. Sonunda **html'yi png olarak kaydetme**, **html'yi png'ye dönüştürme** ve hatta sonucu bir rapor ya da e-posta içine gömme işlemlerini zahmetsizce yapabileceksiniz. + +## Önkoşullar – Gerekenler + +İlerlemeye başlamadan önce aşağıdakilere sahip olduğunuzdan emin olun: + +- **.NET 6.0** veya daha yeni bir sürüm (kod .NET Core ve .NET Framework ile de çalışır) +- **Aspose.HTML for .NET** NuGet paketi (`Aspose.Html`) yüklü +- Seçtiğiniz bir IDE (Visual Studio, Rider veya VS Code) +- PNG'nin kaydedileceği yazılabilir bir klasör + +Ek bir yapılandırma gerekmez—Aspose.HTML, sayfanın ayrıştırılması, CSS uygulanması ve düzenin rasterleştirilmesi işlerini kendisi halleder. + +## Adım 1: Render Etmek İstediğiniz HTML Belgesini Yükleyin + +İlk olarak, yakalamak istediğiniz sayfayı işaret eden bir `HTMLDocument` örneğine ihtiyacınız var. Aspose.HTML, bir URL'den, yerel bir dosyadan veya ham HTML dizesinden yükleme yapabilir. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Neden önemli:** Belgeyi doğrudan URL'den yüklemek, tüm dış kaynakların (CSS, JavaScript, görseller) otomatik olarak alınmasını sağlar ve canlı sayfanın doğru bir render'ını elde edersiniz. + +## Adım 2: Görüntü Render Ayarlarını Yapılandırın + +Sonra, `ImageRenderingOptions` nesnesini ayarlıyoruz. Bu seçenekler çıktı boyutunu, kalitesini ve anti‑aliasing uygulanıp uygulanmayacağını kontrol eder. Ayarları değiştirerek dosya boyutu ile görsel sadakat arasında denge kurabilirsiniz. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Profesyonel ipucu:** Daha yüksek çözünürlüklü bir küçük resim istiyorsanız, `Width` ve `Height` değerlerini orantılı olarak artırın. Aspose.HTML, vektör kalitesini kaybetmeden düzeni buna göre ölçekler. + +## Adım 3: Görüntü Render'ını Başlatın + +Şimdi, az önce tanımladığımız belge ve seçenekleri geçirerek bir `ImageRenderer` oluşturuyoruz. Bu nesne, sayfayı bitmap üzerine çizen motor görevi görür. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **Arka planda neler oluyor?** Render, DOM'u ayrıştırır, CSS stillerini hesaplar, yerleşimi gerçekleştirir ve sonunda her öğeyi bir piksel tuvali üzerine rasterleştirir. Tüm bu işlemler bellekte gerçekleşir, bir tarayıcı penceresine ihtiyaç duymazsınız. + +## Adım 4: PNG Dosyasını Render Edin ve Kaydedin + +Son olarak, PNG'nin kaydedileceği tam yolu belirterek `Render` metodunu çağırın. Metod dosyayı senkron bir şekilde yazar ve dahili kaynakları otomatik olarak serbest bırakır. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Beklenen sonuç:** Programı çalıştırdıktan sonra `output` klasörünün içinde `example.png` dosyasını bulacaksınız. Herhangi bir görüntü görüntüleyiciyle açtığınızda `https://example.com` sayfasının 800×600 px boyutunda eksiksiz bir anlık görüntüsünü görmelisiniz. + +--- + +### Tam, Çalıştırılabilir Örnek + +Aşağıda, yeni bir konsol projesine kopyalayıp yapıştırabileceğiniz tam program yer alıyor. Tüm `using` yönergeleri, hata yönetimi ve açıklayıcı yorumlar dahildir. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Programı (`dotnet run` komutunu proje klasöründen çalıştırın) ve canlı sayfayı yansıtan bir PNG elde edin. İşte **html'yi render etme** sadece birkaç C# satırıyla nasıl yapılır. + +--- + +## Sık Sorulan Sorular & Kenar Durumları + +### Yerel bir HTML dosyasını URL yerine render edebilir miyim? + +Kesinlikle. URL'yi bir dosya yolu ile değiştirin: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Sayfa, DOM'u yüklemeden sonra JavaScript ile değiştiriyorsa ne olur? + +Aspose.HTML çoğu istemci‑tarafı betiğini çalıştırır, ancak tam bir tarayıcı motoru sağlamaz. Yoğun script içeren sayfalar için HTML'i önceden render eden (ör. başsız Chromium) bir çözüm kullanıp ardından oluşan markup'ı Aspose.HTML'e beslemeniz gerekebilir. + +### PNG sıkıştırma seviyesini nasıl kontrol ederim? + +`ImageRenderingOptions` içinde `CompressionLevel` özelliği (0–9) bulunur. Daha düşük sayılar daha büyük dosyalar ama daha yüksek kalite demektir. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Şeffaf bir arka plan istiyorum—bunu yapabilir miyim? + +Evet. Render'dan önce arka plan rengini şeffaf olarak ayarlayın: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Birden fazla sayfayı tek bir görüntüye render etmenin bir yolu var mı? + +URL'ler ya da HTML dizileri koleksiyonunu döngüyle işleyip her birini bitmap'e render edebilir, ardından `System.Drawing` veya `ImageSharp` kullanarak birleştirebilirsiniz. Temel **html'yi png'ye dönüştürme** adımı aynı kalır. + +--- + +## Bonus: PNG'yi bir Web API içinde Gömme + +Bu işlevi bir ASP.NET Core uç noktasından sunmak isterseniz, dosya baytlarını doğrudan döndürebilirsiniz: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Artık herhangi bir istemci `GET /render?url=https://example.com` isteğiyle anında bir PNG alabilir—**web sayfasını görüntüye dönüştürme** hizmetleri için mükemmel. + +--- + +## Sonuç + +Aspose.HTML for .NET kullanarak **html'yi PNG'ye render etme** hakkında bilmeniz gereken her şeyi ele aldık. Uzaktaki bir sayfayı yüklemek, render ayarlarını yapılandırmak ve yaygın sorunları ele almak üzerine tam örnek, **html'yi png'ye dönüştürme**, **html'yi png olarak kaydetme** ve hatta bir web API üzerinden mantığı sunma adımlarını net bir şekilde gösteriyor. + +Kendi URL'lerinizle deneyin, farklı boyutlarla oynayın ve belki ürün kataloğunuz için otomatik küçük resim üretimini otomatikleştirin. **render html to png** temellerini kavradıktan sonra sınır yok. + +--- + +*Daha da ileri gitmeye hazır mısınız?* NuGet paketini indirin, kodu projenize ekleyin ve bugün web sayfalarını görüntülere dönüştürmeye başlayın. Herhangi bir sorunla karşılaşırsanız yorum bırakın—mutlu render'lar! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/net/canvas-and-image-manipulation/_index.md b/html/vietnamese/net/canvas-and-image-manipulation/_index.md index 2f9d4cb19..e85c54315 100644 --- a/html/vietnamese/net/canvas-and-image-manipulation/_index.md +++ b/html/vietnamese/net/canvas-and-image-manipulation/_index.md @@ -45,6 +45,8 @@ Tìm hiểu cách chuyển đổi SVG sang PDF bằng Aspose.HTML cho .NET. Hư Tìm hiểu cách chuyển đổi SVG sang XPS bằng Aspose.HTML cho .NET. Tăng cường phát triển web của bạn với thư viện mạnh mẽ này. ### [Cách bật khử răng cưa trong C# – Đường viền mượt](./how-to-enable-antialiasing-in-c-smooth-edges/) Hướng dẫn bật khử răng cưa trong C# để tạo các cạnh mượt, cải thiện chất lượng hình ảnh và đồ họa. +### [Tạo văn bản trên canvas – Hướng dẫn đầy đủ về việc hiển thị văn bản trên hình ảnh](./create-canvas-text-full-guide-to-rendering-text-on-images/) +Hướng dẫn chi tiết cách tạo và hiển thị văn bản trên canvas trong Aspose.HTML cho .NET. ## Phần kết luận diff --git a/html/vietnamese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md b/html/vietnamese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md new file mode 100644 index 000000000..8d0b5e13f --- /dev/null +++ b/html/vietnamese/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/_index.md @@ -0,0 +1,233 @@ +--- +category: general +date: 2026-01-03 +description: Tạo văn bản canvas nhanh chóng và học cách hiển thị hình ảnh văn bản, + thiết lập các tùy chọn văn bản, và điền văn bản vào canvas trong khi cải thiện việc + hiển thị văn bản trên Linux. +draft: false +keywords: +- create canvas text +- render text image +- set text options +- fill text canvas +- improve linux text +language: vi +og_description: Tạo văn bản canvas với Aspose HTML, học cách hiển thị hình ảnh văn + bản, thiết lập các tùy chọn văn bản và cải thiện chất lượng văn bản trên Linux trong + một hướng dẫn duy nhất. +og_title: Tạo văn bản canvas – Hướng dẫn render đầy đủ +tags: +- Aspose +- C# +- Graphics +- Canvas +title: Tạo văn bản canvas – Hướng dẫn toàn diện về việc hiển thị văn bản trên hình + ảnh +url: /vi/net/canvas-and-image-manipulation/create-canvas-text-full-guide-to-rendering-text-on-images/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Tạo văn bản canvas – Hướng dẫn Kết xuất đầy đủ + +Bạn đã bao giờ cần **tạo canvas text** nhưng không chắc làm sao để có các glyph sắc nét trên mọi nền tảng? Bạn không phải là người duy nhất. Nhiều nhà phát triển gặp khó khăn khi văn bản của họ trông mờ trên Linux, đặc biệt khi chuyển đổi HTML sang hình ảnh. + +Trong hướng dẫn này, chúng tôi sẽ hướng dẫn một giải pháp thực tế không chỉ cho phép bạn **render text image** lên một canvas Aspose HTML mà còn chỉ cho bạn cách **set text options**, sử dụng `FillText` một cách chính xác, và **improve Linux text** khi kết xuất với hinting. Khi kết thúc, bạn sẽ có một đoạn mã tự chứa, có thể chạy được mà bạn có thể chèn vào bất kỳ dự án .NET nào. + +## Những gì bạn sẽ học + +- Cách tạo một đối tượng `Canvas` và chuẩn bị nó để vẽ. +- Vai trò của `TextOptions` và lý do tại sao bật hinting lại quan trọng trên Linux. +- Mã từng bước mà **fill text canvas** với các ký tự được định dạng, chất lượng cao. +- Những cạm bẫy thường gặp (thiếu hinting, hệ tọa độ sai) và cách khắc phục nhanh. +- Các cách mở rộng ví dụ: phông chữ tùy chỉnh, màu sắc và văn bản đa dòng. + +> **Yêu cầu trước:** .NET 6+ (or .NET Framework 4.7.2) and the Aspose.HTML for .NET NuGet package installed. + +--- + +## Bước 1: Thiết lập dự án và các import + +Trước khi bắt đầu vẽ, hãy chắc chắn dự án của bạn đã tham chiếu đúng các assembly. + +```csharp +// Install via NuGet: dotnet add package Aspose.HTML +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; // For Color if you want custom brushes +``` + +> **Mẹo chuyên nghiệp:** If you’re on Linux, add the `libgdiplus` package (`sudo apt-get install libgdiplus`) so GDI‑based rendering works smoothly. + +--- + +## Bước 2: Tạo Canvas và xác định kích thước của nó + +Canvas thực chất là một bitmap ngoài màn hình mà bạn có thể vẽ lên. Hãy nghĩ nó như một bảng vẽ kỹ thuật số của bạn. + +```csharp +// Step 2: Initialize a 800×600 canvas with a white background +var size = new Size(800, 600); +var canvas = new Canvas(size, Color.White); +``` + +> **Tại sao điều này quan trọng:** Setting a solid background prevents transparent artifacts when you later export the image. + +--- + +## Bước 3: Cấu hình Text Options – Chìa khóa để có văn bản Linux rõ ràng + +Việc render phông chữ trên Linux có thể trông mờ nếu hinting bị tắt. `TextOptions.UseHinting` chỉ cho bộ render căn chỉnh các glyph tới ranh giới pixel, làm tăng độ sắc nét của kết quả đáng kể. + +```csharp +// Step 3: Create and configure TextOptions +var textOptions = new TextOptions +{ + // Enable hinting – essential for crisp text on Linux + UseHinting = true, + + // Optional: improve readability with anti‑aliasing + Antialias = true, + + // You can also set a default font family here + // FontFamily = "Arial" +}; + +// Assign the options to the canvas +canvas.TextOptions = textOptions; +``` + +> **Nếu bạn bỏ qua điều này?** Trên nhiều bản phân phối Linux, văn bản sẽ hơi mờ hoặc không căn chỉnh đúng, đặc biệt ở kích thước phông chữ nhỏ. + +--- + +## Bước 4: Điền văn bản lên Canvas + +Bây giờ canvas đã sẵn sàng và các tùy chọn văn bản đã được điều chỉnh, chúng ta thực sự có thể **fill text canvas**. + +```csharp +// Step 4: Render the hinted text at (100, 200) +canvas.FillText("Hinted text", 100, 200); +``` + +Nếu bạn muốn tùy chỉnh kiểu dáng (màu, kích thước phông chữ, căn chỉnh), hãy bao quanh lời gọi bằng một `Font` và `Brush`: + +```csharp +var font = new Font("Segoe UI", 36, FontStyle.Bold); +var brush = new SolidBrush(Color.DarkBlue); + +// Render styled text +canvas.FillText("Styled Hint", 100, 300, font, brush); +``` + +--- + +## Bước 5: Xuất Canvas thành tệp hình ảnh + +Bước cuối cùng là ghi bitmap đã render ra đĩa để bạn có thể kiểm tra kết quả. + +```csharp +// Step 5: Save the canvas to a PNG file +using (var image = canvas.ToImage()) +{ + image.Save("canvas-output.png", ImageFormat.Png); +} +``` + +Mở `canvas-output.png` và bạn sẽ thấy văn bản sắc nét, đã được hint đúng—bất kể bạn đang trên Windows, macOS, hay Linux. + +--- + +## Câu hỏi thường gặp & Trường hợp đặc biệt + +### Hinting ảnh hưởng như thế nào đến hiệu suất? + +Bật hinting chỉ thêm một chi phí không đáng kể (thường < 2 ms cho một canvas 800×600). Lợi ích về hình ảnh vượt xa chi phí, đặc biệt đối với việc tạo hình ảnh phía máy chủ nơi chất lượng là tối quan trọng. + +### Nếu tôi cần văn bản đa dòng thì sao? + +Sử dụng `canvas.FillText` trong một vòng lặp, điều chỉnh tọa độ Y, hoặc dùng overload của `canvas.FillText` chấp nhận một đối tượng `TextLayout` để tự động ngắt dòng. + +```csharp +string paragraph = "First line.\nSecond line with more words."; +canvas.FillText(paragraph, 100, 400); +``` + +### Tôi có thể sử dụng phông chữ TrueType tùy chỉnh không? + +Chắc chắn. Tải phông chữ bằng `FontFamily` và gán nó cho `TextOptions.FontFamily` hoặc trực tiếp cho `Font` bạn truyền vào `FillText`. + +```csharp +textOptions.FontFamily = "MyCustomFont"; +``` + +Đảm bảo tệp phông chữ có thể truy cập được bởi runtime (đặt nó trong thư mục dự án hoặc đăng ký toàn hệ thống). + +## Ví dụ Hoạt động đầy đủ + +Dưới đây là chương trình hoàn chỉnh, sẵn sàng sao chép‑dán, bao gồm mọi bước ở trên. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; +using System.Drawing; +using System.Drawing.Imaging; + +class Program +{ + static void Main() + { + // 1️⃣ Create canvas + var canvasSize = new Size(800, 600); + var canvas = new Canvas(canvasSize, Color.White); + + // 2️⃣ Configure text options (hinting for Linux) + var textOpts = new TextOptions + { + UseHinting = true, + Antialias = true + }; + canvas.TextOptions = textOpts; + + // 3️⃣ Render plain hinted text + canvas.FillText("Hinted text", 100, 200); + + // 4️⃣ Render styled text (optional) + var font = new Font("Segoe UI", 36, FontStyle.Bold); + var brush = new SolidBrush(Color.DarkBlue); + canvas.FillText("Styled Hint", 100, 300, font, brush); + + // 5️⃣ Save to PNG + using (var img = canvas.ToImage()) + { + img.Save("canvas-output.png", ImageFormat.Png); + } + + // Clean up + canvas.Dispose(); + } +} +``` + +**Kết quả mong đợi:** Một tệp PNG tên `canvas-output.png` chứa hai dòng văn bản—một dòng thường, một dòng đậm màu xanh—cả hai đều được render sắc nét nhờ hinting. + +## Kết luận + +Chúng tôi vừa **tạo canvas text** từ đầu, học cách **render text image** với Aspose.HTML, và khám phá tại sao **set text options** như `UseHinting` lại thiết yếu để **improve Linux text** chất lượng. Bằng cách làm theo các bước trên, bạn có thể tin tưởng **fill text canvas** trong bất kỳ môi trường .NET nào, dù bạn đang tạo thumbnail, watermark, hay đồ họa động cho các API web. + +Sẵn sàng cho thử thách tiếp theo? Hãy thử thêm gradient nền, xoay văn bản, hoặc xuất ra SVG để có khả năng mở rộng vector hoàn hảo. Các nguyên tắc giống nhau—`TextOptions` đúng, xử lý tọa độ cẩn thận, và giải phóng tài nguyên sạch sẽ—đều áp dụng cho mọi định dạng. + +Nếu bạn gặp bất kỳ vấn đề nào hoặc có ý tưởng mở rộng, hãy để lại bình luận. Chúc lập trình vui vẻ, và tận hưởng những ký tự sắc như lưỡi dao! + +--- + +*Hình ảnh minh họa một canvas với văn bản sắc nét (alt text: “ví dụ tạo canvas text hiển thị việc render có hint trên Linux”).* + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/net/html-document-manipulation/_index.md b/html/vietnamese/net/html-document-manipulation/_index.md index 1309cc15a..234fa8e06 100644 --- a/html/vietnamese/net/html-document-manipulation/_index.md +++ b/html/vietnamese/net/html-document-manipulation/_index.md @@ -59,6 +59,8 @@ Mở khóa tiềm năng của Aspose.HTML cho .NET với hướng dẫn toàn di Tìm hiểu cách khai thác sức mạnh của Aspose.HTML cho .NET. Tăng cường phát triển web của bạn bằng cách xử lý và hiển thị HTML. ### [Tạo một tài liệu trong .NET với Aspose.HTML](./creating-a-document/) Giải phóng sức mạnh của Aspose.HTML cho .NET. Học cách tạo, thao tác và tối ưu hóa tài liệu HTML và SVG một cách dễ dàng. Khám phá các ví dụ từng bước và câu hỏi thường gặp. +### [Tạo tài liệu HTML với Aspose.HTML – Hướng dẫn từng bước](./create-html-document-with-aspose-html-step-by-step-guide/) +Khám phá cách tạo tài liệu HTML bằng Aspose.HTML qua hướng dẫn chi tiết từng bước. ### [Chỉnh sửa tài liệu trong .NET với Aspose.HTML](./editing-a-document/) Tạo nội dung web hấp dẫn với Aspose.HTML cho .NET. Tìm hiểu cách thao tác HTML, CSS và nhiều hơn nữa. ### [Lưu tài liệu trong .NET với Aspose.HTML](./saving-a-document/) @@ -78,4 +80,4 @@ Tóm lại, nếu bạn muốn thành thạo thao tác tài liệu HTML bằng A {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md b/html/vietnamese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md new file mode 100644 index 000000000..a9733809a --- /dev/null +++ b/html/vietnamese/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/_index.md @@ -0,0 +1,224 @@ +--- +category: general +date: 2026-01-03 +description: Tạo tài liệu HTML trong C# bằng Aspose.HTML. Tìm hiểu cách thêm phần + tử vào body, thiết lập kiểu phông chữ và định dạng văn bản HTML bằng một thẻ span + đơn giản. +draft: false +keywords: +- create html document +- append element to body +- set font style +- format text html +- create span element +language: vi +og_description: Tạo tài liệu HTML trong C# và xem cách thêm phần tử vào body, đặt + kiểu phông chữ và định dạng văn bản HTML bằng Aspose.HTML. +og_title: Tạo tài liệu HTML với Aspose.HTML – Hướng dẫn nhanh +tags: +- Aspose.HTML +- C# +- DOM manipulation +title: Tạo tài liệu HTML với Aspose.HTML – Hướng dẫn từng bước +url: /vi/net/html-document-manipulation/create-html-document-with-aspose-html-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Tạo tài liệu HTML với Aspose.HTML – Hướng dẫn từng bước + +Bạn đã bao giờ cần **create html document** một cách lập trình và tự hỏi tại sao kết quả lại trông đơn giản? Bạn không phải là người duy nhất. Trong nhiều dự án, chúng ta phải tạo các đoạn mã nhanh chóng—như mẫu email, báo cáo động, hoặc các widget UI nhỏ. Tin tốt là Aspose.HTML giúp bạn dễ dàng **create html document**, định dạng nó, và chèn vào trang mà không cần viết chuỗi thô. + +Trong hướng dẫn này, chúng tôi sẽ đi qua một ví dụ hoàn chỉnh cho thấy cách **append element to body**, **set font style**, và **format text html** bằng cách sử dụng **create span element**. Khi kết thúc, bạn sẽ có một đoạn mã C# có thể chạy được tạo ra văn bản in đậm‑nghiêng bên trong một thẻ span, và bạn sẽ hiểu “tại sao” đằng sau mỗi lệnh. + +> **Yêu cầu trước** +> • .NET 6 hoặc mới hơn (bất kỳ runtime .NET nào gần đây đều hoạt động) +> • Gói NuGet Aspose.HTML cho .NET (`Aspose.Html`) đã được cài đặt +> • Hiểu biết cơ bản về C# và các khái niệm DOM + +Không cần thư viện nào khác, và mã chạy trên Windows, Linux hoặc macOS. + +--- + +## Những gì bạn sẽ xây dựng + +Chúng tôi sẽ tạo một tài liệu HTML tối thiểu, thêm một `` chứa cụm từ **Bold‑Italic text**, áp dụng cả kiểu **bold** và **italic**, và cuối cùng **append element to body**. Mã HTML cuối cùng trông như sau: + +```html + + + Bold‑Italic text + + +``` + +Bạn có thể sao chép‑dán toàn bộ mã nguồn ở cuối hướng dẫn và chạy ngay lập tức. + +--- + +![Create HTML document example](image.png){alt="create html document example"} + +--- + +## Bước 1 – Khởi tạo HTMLDocument (nền tảng của **create html document**) + +Trước khi chúng ta có thể **append element to body**, chúng ta cần một đối tượng tài liệu để làm việc. Aspose.HTML cung cấp lớp `HTMLDocument` đại diện cho một DOM trong bộ nhớ. + +```csharp +using Aspose.Html; +using Aspose.Html.Drawing; + +// Step 1: Initialise a fresh HTMLDocument +HTMLDocument htmlDocument = new HTMLDocument(); +``` + +*Tại sao điều này quan trọng*: Khởi tạo `HTMLDocument` cung cấp cho bạn một canvas sạch—giống như một tờ giấy trắng mà sau này bạn sẽ **format text html**. Nếu bỏ qua bước này, bạn không thể thao tác các node hoặc áp dụng kiểu. + +## Bước 2 – Tạo phần tử `` (**create span element**) + +Bây giờ chúng ta cần một container cho văn bản đã định dạng. Một `` là lựa chọn hoàn hảo vì nó là phần tử inline có thể chứa CSS mà không phá vỡ luồng. + +```csharp +// Step 2: Create a element – this is our create span element +var spanElement = htmlDocument.CreateElement("span"); + +// Give the span some inner content +spanElement.InnerHtml = "Bold‑Italic text"; +``` + +*Mẹo*: Nếu bạn cần chèn nhiều đoạn văn bản, bạn có thể tái sử dụng cùng một `spanElement` bằng cách sao chép nó (`spanElement.Clone(true)`) và thay đổi `InnerHtml` mỗi lần. + +## Bước 3 – Áp dụng **set font style** cho in đậm **và** nghiêng + +Aspose.HTML cung cấp một đối tượng `Style` mạnh mẽ. Để **set font style**, chúng ta kết hợp `WebFontStyle.Bold` và `WebFontStyle.Italic` bằng toán tử OR bitwise. + +```csharp +// Step 3: Apply both bold and italic – this is our set font style call +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; +``` + +*Tại sao dùng enum*: Enum `WebFontStyle` ánh xạ trực tiếp tới các thuộc tính CSS (`font-weight` và `font-style`). Sử dụng enum ngăn lỗi chính tả và đảm bảo CSS tạo ra hợp lệ—cần thiết cho **format text html** đáng tin cậy. + +## Bước 4 – **Append element to body** và hoàn thiện tài liệu + +Với thẻ span đã được định dạng, bước cuối cùng là đặt nó vào thẻ ``. + +```csharp +// Step 4: Append the span to the document body – this is our append element to body operation +htmlDocument.Body.AppendChild(spanElement); +``` + +Lúc này cây DOM trông chính xác như đoạn mã đã hiển thị trước đó. Nếu bạn kiểm tra `htmlDocument.InnerHtml`, bạn sẽ thấy mã HTML đã được tạo đầy đủ. + +## Bước 5 – Lưu hoặc render tài liệu + +Bạn có thể ghi HTML ra file, truyền nó tới trình duyệt, hoặc render thành PDF/Image bằng engine render của Aspose.HTML. Đây là tùy chọn ghi file đơn giản nhất: + +```csharp +// Optional: Save the HTML to disk for verification +string outputPath = "output.html"; +htmlDocument.Save(outputPath); +Console.WriteLine($"HTML saved to {outputPath}"); +``` + +Mở `output.html` trong bất kỳ trình duyệt nào và bạn sẽ thấy **Bold‑Italic text** hiển thị đúng như mong muốn. + +## Ví dụ Hoạt động đầy đủ + +Kết hợp mọi thứ lại, đây là chương trình đầy đủ, sẵn sàng chạy: + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; + +class Program +{ + static void Main() + { + // Initialise a new HTML document + HTMLDocument htmlDocument = new HTMLDocument(); + + // Create a element (create span element) and set its content + var spanElement = htmlDocument.CreateElement("span"); + spanElement.InnerHtml = "Bold‑Italic text"; + + // Set font style – bold + italic (set font style) + spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic; + + // Append the span to the body (append element to body) + htmlDocument.Body.AppendChild(spanElement); + + // Save the result so you can view it in a browser + string outputPath = "output.html"; + htmlDocument.Save(outputPath); + Console.WriteLine($"HTML document created and saved to {outputPath}"); + } +} +``` + +**Kết quả mong đợi** – khi mở `output.html` sẽ hiển thị: + +> **Bold‑Italic text** (bold and italic) + +Nếu bạn kiểm tra nguồn, bạn sẽ thấy HTML chính xác như đã thảo luận, xác nhận bước **format text html** đã thành công. + +## Câu hỏi Thường gặp & Trường hợp Cạnh + +### 1. Nếu tôi cần nhiều hơn hai kiểu? + +`WebFontStyle` là một enum kiểu flags, vì vậy bạn có thể kết hợp bất kỳ số lượng kiểu nào (ví dụ, `Underline`). Chỉ cần tiếp tục dùng toán tử `|`: + +```csharp +spanElement.Style.FontStyle = WebFontStyle.Bold | WebFontStyle.Italic | WebFontStyle.Underline; +``` + +### 2. Tôi có thể thay đổi màu cùng lúc không? + +Chắc chắn. Đối tượng `Style` có thuộc tính `Color`: + +```csharp +spanElement.Style.Color = Color.Red; // adds color:red; +``` + +### 3. Làm sao để **append element to body** nhiều lần? + +Tạo một vòng lặp, sao chép thẻ span đã định dạng, điều chỉnh văn bản, và chèn mỗi bản sao: + +```csharp +for (int i = 1; i <= 3; i++) +{ + var clone = (IElement)spanElement.Clone(true); + clone.InnerHtml = $"Item {i}"; + htmlDocument.Body.AppendChild(clone); +} +``` + +### 4. Nếu tôi cần **format text html** bên trong một `
` thay vì? + +Cùng một API hoạt động cho bất kỳ phần tử nào. Chỉ cần thay `CreateElement("span")` bằng `CreateElement("div")` và điều chỉnh kiểu theo nhu cầu. + +### 5. Lo ngại về tính tương thích? + +Aspose.HTML nhắm tới .NET Standard 2.0+, vì vậy mã chạy trên .NET Core, .NET Framework và .NET 5/6+. Không cần shim đặc thù cho trình duyệt. + +## Mẹo chuyên nghiệp & Cạm bẫy + +- **Mẹo**: Luôn đặt `InnerHtml` *sau* khi bạn đã cấu hình kiểu. Thay đổi nội dung bên trong trước có thể gây re‑layout trong một số trình duyệt; làm việc này sau khi đã định dạng tránh công việc không cần thiết. +- **Cảnh báo**: Trộn `WebFontStyle` với chuỗi CSS nội tuyến. Nếu bạn tự đặt `spanElement.SetAttribute("style", "...")` sau này, bạn sẽ ghi đè lên các kiểu được tạo bởi enum. Hãy dùng một phương pháp duy nhất. +- **Lưu ý hiệu năng**: Đối với tài liệu lớn, tạo hàng loạt (tạo tất cả các node trước, sau đó chèn chúng một lần) giảm số lần biến đổi DOM và tăng tốc render. + +## Kết luận + +Bây giờ bạn đã biết cách **create html document** với Aspose.HTML, **append element to body**, **set font style**, và **format text html** bằng một **create span element**. Ví dụ hoạt động đầy đủ, và các giải thích bao gồm cả “cách làm” và “tại sao”, giúp bạn dễ dàng áp dụng mẫu này vào các kịch bản phức tạp hơn. + +Sẵn sàng cho bước tiếp theo? Hãy thử thay `` bằng `

` có nhiều lớp CSS, hoặc render cùng DOM thành PDF bằng `Document` → `PdfSaveOptions`. Các nguyên tắc vẫn áp dụng, và bạn sẽ thấy Aspose.HTML là đối tác đáng tin cậy cho bất kỳ nhiệm vụ tạo HTML phía server nào. + +Có câu hỏi, hoặc phát hiện cách hay? Để lại bình luận bên dưới—chúc lập trình vui! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/net/html-extensions-and-conversions/_index.md b/html/vietnamese/net/html-extensions-and-conversions/_index.md index 858b6886a..d9e543eeb 100644 --- a/html/vietnamese/net/html-extensions-and-conversions/_index.md +++ b/html/vietnamese/net/html-extensions-and-conversions/_index.md @@ -39,6 +39,8 @@ Aspose.HTML for .NET không chỉ là một thư viện; mà còn là một côn ## Hướng dẫn về phần mở rộng và chuyển đổi HTML ### [Chuyển đổi HTML sang PDF trong .NET với Aspose.HTML](./convert-html-to-pdf/) Chuyển đổi HTML sang PDF dễ dàng với Aspose.HTML cho .NET. Làm theo hướng dẫn từng bước của chúng tôi và giải phóng sức mạnh của việc chuyển đổi HTML sang PDF. +### [Tạo PDF từ URL – Hướng dẫn C# đầy đủ](./create-pdf-from-url-complete-c-guide/) +Hướng dẫn chi tiết cách tạo PDF từ URL bằng C# và Aspose.HTML, bao gồm các bước cấu hình và ví dụ mã nguồn. ### [Chuyển đổi EPUB sang hình ảnh trong .NET với Aspose.HTML](./convert-epub-to-image/) Tìm hiểu cách chuyển đổi EPUB sang hình ảnh bằng Aspose.HTML cho .NET. Hướng dẫn từng bước với các ví dụ về mã và tùy chọn có thể tùy chỉnh. ### [Chuyển đổi EPUB sang PDF trong .NET với Aspose.HTML](./convert-epub-to-pdf/) @@ -74,4 +76,4 @@ Vậy, bạn còn chờ gì nữa? Hãy bắt đầu hành trình thú vị này {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md b/html/vietnamese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md new file mode 100644 index 000000000..28e28770d --- /dev/null +++ b/html/vietnamese/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/_index.md @@ -0,0 +1,199 @@ +--- +category: general +date: 2026-01-03 +description: Tạo PDF từ URL trong C# nhanh chóng. Học cách chuyển đổi HTML sang PDF, + lưu trang web dưới dạng PDF và tạo PDF từ HTML với mã dễ dàng. +draft: false +keywords: +- create pdf from url +- convert html to pdf +- save webpage as pdf +- generate pdf from html +- html to pdf c# +language: vi +og_description: Tạo PDF từ URL trong C# nhanh chóng. Hướng dẫn này cho thấy cách chuyển + đổi HTML sang PDF, lưu trang web dưới dạng PDF và tạo PDF từ HTML bằng Aspose.HTML. +og_title: Tạo PDF từ URL – Hướng dẫn C# đầy đủ +tags: +- pdf +- csharp +- html +- conversion +title: Tạo PDF từ URL – Hướng dẫn C# đầy đủ +url: /vi/net/html-extensions-and-conversions/create-pdf-from-url-complete-c-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Tạo PDF từ URL – Hướng dẫn C# đầy đủ + +Bạn đã bao giờ cần **tạo PDF từ URL** nhưng không chắc nên chọn thư viện nào chưa? Bạn không phải là người duy nhất. Nhiều nhà phát triển gặp khó khăn này khi họ muốn lưu trữ một trang web, tạo hoá đơn từ mẫu trực tuyến, hoặc chỉ đơn giản cung cấp nút “tải xuống dưới dạng PDF” trên trang của họ. + +Trong hướng dẫn này, chúng tôi sẽ đi qua toàn bộ quá trình **chuyển đổi HTML sang PDF** bằng C#. Bạn sẽ thấy cách **lưu trang web dưới dạng PDF**, cách **tạo PDF từ HTML**, và tại sao thư viện `Aspose.HTML for .NET` lại làm cho việc này trở nên dễ dàng. Khi kết thúc, bạn sẽ có một đoạn mã sẵn sàng chạy, lấy bất kỳ URL công cộng nào, render nó và ghi file PDF ra đĩa. + +> **Mẹo chuyên nghiệp:** Nếu bạn đang làm việc sau một proxy công ty, hãy chắc chắn rằng hàm khởi tạo `HTMLDocument` nhận được các thiết lập `WebRequest` đúng — nếu không việc tải xuống sẽ thất bại một cách im lặng. + +## Những gì bạn cần + +- **.NET 6.0** hoặc mới hơn (mã cũng chạy trên .NET Framework 4.7+). +- Gói NuGet **Aspose.HTML for .NET** (`Aspose.HTML`). +- Một thư mục có quyền ghi trên đĩa để lưu PDF. +- Kiến thức cơ bản về C# (không cần các thủ thuật nâng cao). + +Không có tệp cấu hình bổ sung, không có phép màu ẩn—chỉ vài dòng mã sạch, có chú thích. + +![Create PDF from URL example](image.png){alt="tạo pdf từ url"} + +## Bước 1: Cài đặt gói NuGet Aspose.HTML + +Mở terminal hoặc Package Manager Console và chạy: + +```bash +dotnet add package Aspose.HTML +``` + +> **Tại sao bước này quan trọng:** Các lớp `HTMLDocument`, `PdfSaveOptions` và `PdfConverter` nằm trong không gian tên `Aspose.Html`. Nếu không có gói này, trình biên dịch sẽ không biết các kiểu này là gì. + +## Bước 2: Tải trang web vào một `HTMLDocument` + +Hành động thực tế đầu tiên là lấy HTML từ xa. `HTMLDocument` có thể nhận một URL trực tiếp, tự động xử lý chuyển hướng và phát hiện kiểu nội dung cho bạn. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class Program +{ + static void Main() + { + // ---- Step 2: Load the HTML document from a web address ---- + // Replace the URL with the page you want to convert. + string pageUrl = "https://example.com"; + + // The constructor performs an HTTP GET under the hood. + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); +``` + +**Điều gì đang xảy ra?** +- `HTMLDocument` phân tích markup đã lấy thành cây DOM, giống như một trình duyệt. +- Bất kỳ CSS, hình ảnh hoặc script bên ngoài nào được tham chiếu bằng URL tuyệt đối cũng sẽ được tải xuống, đảm bảo PDF trông giống như trang thực tế. + +## Bước 3: Cấu hình tùy chọn xuất PDF (Lề, Kích thước trang, v.v.) + +Trước khi chuyển tài liệu cho bộ chuyển đổi, chúng ta tinh chỉnh đầu ra. Đối tượng `PdfSaveOptions` cho phép bạn chỉ định lề, hướng trang, và thậm chí phiên bản PDF. + +```csharp + // ---- Step 3: Set up PDF conversion options (e.g., page margins) ---- + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + + // Margins are specified in points (1 point = 1/72 inch) + pdfSaveOptions.PageSetup.Margin.Top = 20; // ~0.28 inch + pdfSaveOptions.PageSetup.Margin.Bottom = 20; + pdfSaveOptions.PageSetup.Margin.Left = 15; + pdfSaveOptions.PageSetup.Margin.Right = 15; + + // Optional: force A4 size and portrait orientation + pdfSaveOptions.PageSetup.Size = PdfPageSize.A4; + pdfSaveOptions.PageSetup.Orientation = PdfPageOrientation.Portrait; +``` + +**Tại sao cần đặt lề?** +PDF quá chặt có thể cắt mất tiêu đề hoặc chân trang, đặc biệt trên các site tối ưu cho di động. Thêm một lề vừa phải đảm bảo mọi thứ vẫn dễ đọc. + +## Bước 4: Chuyển đổi tài liệu HTML trực tiếp sang PDF + +Bây giờ là phần nặng. `PdfConverter.ConvertHtml` truyền trang đã render trực tiếp vào một file PDF. + +```csharp + // ---- Step 4: Convert the HTML document directly to a PDF file ---- + string outputPath = @"YOUR_DIRECTORY\output.pdf"; + + // The conversion runs synchronously; for large pages you might want async. + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"✅ PDF created successfully at: {outputPath}"); + } +} +``` + +**Bên trong:** +- Aspose render DOM bằng engine layout riêng (không cần Chromium). +- Bitmap đã render sau đó được raster hoá thành vector PDF khi có thể, giữ khả năng chọn văn bản. + +## Bước 5: Kiểm tra kết quả và xử lý các trường hợp đặc biệt + +Kiểm tra nhanh giúp tránh rắc rối sau này. Mở file đã tạo; bạn sẽ thấy trang thực tế, lề đã áp dụng và tất cả hình ảnh còn nguyên. + +### Những lỗi thường gặp và cách tránh + +| Vấn đề | Nguyên nhân | Cách khắc phục | +|-------|-------|-----| +| **Blank PDF** | URL blocked by firewall or requires authentication | Pass a custom `WebRequest` with credentials to `HTMLDocument` constructor | +| **Missing CSS** | External stylesheet uses relative URLs | Ensure the base URL is correct (Aspose handles this, but double‑check redirects) | +| **Large file size** | High‑resolution images not downscaled | Use `PdfSaveOptions.ImageCompression` to JPEG‑compress embedded images | +| **Unicode characters garbled** | Font not embedded | Set `pdfSaveOptions.FontEmbeddingMode = FontEmbeddingMode.Always` | + +## Ví dụ hoàn chỉnh (Sẵn sàng sao chép‑dán) + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Pdf; +using System; + +class CreatePdfFromUrlDemo +{ + static void Main() + { + // URL you want to convert + string pageUrl = "https://example.com"; + + // Destination folder (ensure it exists) + string outputPath = @"C:\Temp\example.pdf"; + + // Load the remote HTML page + HTMLDocument htmlDocument = new HTMLDocument(pageUrl); + + // Configure PDF options + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions + { + PageSetup = { + Margin = { Top = 20, Bottom = 20, Left = 15, Right = 15 }, + Size = PdfPageSize.A4, + Orientation = PdfPageOrientation.Portrait + }, + // Optional: compress images to reduce size + ImageCompression = PdfImageCompression.Jpeg, + ImageQuality = 80 + }; + + // Perform the conversion + PdfConverter.ConvertHtml(htmlDocument, outputPath, pdfSaveOptions); + + Console.WriteLine($"PDF saved to: {outputPath}"); + } +} +``` + +Chạy chương trình (`dotnet run`) và bạn sẽ thấy `example.pdf` trong `C:\Temp`. Mở nó bằng bất kỳ trình xem PDF nào, và bạn sẽ thấy bản sao chính xác của `https://example.com` với các lề bạn đã định nghĩa. + +## Kết luận + +Chúng tôi vừa cho bạn thấy **cách tạo PDF từ URL** bằng C#. Các bước đã bao gồm tải trang web, cấu hình lề, và chuyển đổi DOM thành file PDF—tất cả những gì bạn cần để **chuyển đổi HTML sang PDF**, **lưu trang web dưới dạng PDF**, và **tạo PDF từ HTML** trong môi trường sẵn sàng sản xuất. + +Bạn có thể thử nghiệm: thay đổi kích thước trang thành `Letter`, chuyển hướng sang landscape, hoặc thêm header/footer bằng `PdfPageEventHandler`. Mẫu tương tự hoạt động cho các trang động, cổng bảo mật đăng nhập (chỉ cần cung cấp cookie), hoặc thậm chí xử lý hàng loạt danh sách URL. + +**Các bước tiếp theo bạn có thể khám phá** + +- **HTML to PDF C#** với chuyển đổi bất đồng bộ cho dịch vụ có lưu lượng cao. +- Nhúng **metadata** (tác giả, tiêu đề) vào PDF qua `PdfDocumentInfo`. +- Sử dụng **Aspose.PDF** để hợp nhất nhiều PDF được tạo từ các URL khác nhau thành một báo cáo duy nhất. + +Có câu hỏi? Để lại bình luận bên dưới, và chúc bạn lập trình vui vẻ! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/net/rendering-html-documents/_index.md b/html/vietnamese/net/rendering-html-documents/_index.md index 07b53f31c..2758e5989 100644 --- a/html/vietnamese/net/rendering-html-documents/_index.md +++ b/html/vietnamese/net/rendering-html-documents/_index.md @@ -52,9 +52,14 @@ Tìm hiểu cách kiểm soát thời gian chờ kết xuất hiệu quả trong Học cách hiển thị nhiều tài liệu HTML bằng Aspose.HTML cho .NET. Tăng cường khả năng xử lý tài liệu của bạn với thư viện mạnh mẽ này. ### [Kết xuất SVG Doc thành PNG trong .NET với Aspose.HTML](./render-svg-doc-as-png/) Mở khóa sức mạnh của Aspose.HTML cho .NET! Tìm hiểu cách Render SVG Doc thành PNG một cách dễ dàng. Tìm hiểu các ví dụ từng bước và câu hỏi thường gặp. Bắt đầu ngay! +### [Cách Render HTML – Hướng Dẫn Toàn Diện với Trình Xử Lý Tài Nguyên Tùy Chỉnh](./how-to-render-html-complete-guide-with-custom-resource-handl/) +Tìm hiểu cách render HTML trong Aspose.HTML cho .NET sử dụng trình xử lý tài nguyên tùy chỉnh, bao gồm các ví dụ thực tế và hướng dẫn chi tiết. +### [Cách Render HTML thành PNG – Hướng Dẫn Toàn Diện Từng Bước](./how-to-render-html-to-png-complete-step-by-step-guide/) +Hướng dẫn chi tiết cách render HTML thành PNG bằng Aspose.HTML cho .NET, bao gồm các bước thực hành và mẹo tối ưu. + {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md b/html/vietnamese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md new file mode 100644 index 000000000..61a152f54 --- /dev/null +++ b/html/vietnamese/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/_index.md @@ -0,0 +1,224 @@ +--- +category: general +date: 2026-01-03 +description: Cách chuyển đổi HTML thành hình ảnh bằng Aspose.HTML. Tìm hiểu chuyển + đổi HTML sang hình ảnh, trình xử lý tài nguyên tùy chỉnh và chuyển đổi HTML sang + bitmap trong C#. +draft: false +keywords: +- how to render html +- html to image conversion +- custom resource handler +- convert html to bitmap +- render html to image +language: vi +og_description: Cách chuyển đổi HTML thành hình ảnh bằng Aspose.HTML. Nắm vững việc + chuyển đổi HTML sang hình ảnh, xử lý tài nguyên tùy chỉnh và chuyển đổi HTML sang + bitmap trong C#. +og_title: Cách hiển thị HTML – Hướng dẫn đầy đủ với Trình xử lý tài nguyên tùy chỉnh +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Cách Render HTML – Hướng Dẫn Toàn Diện với Trình Xử Lý Tài Nguyên Tùy Chỉnh +url: /vi/net/rendering-html-documents/how-to-render-html-complete-guide-with-custom-resource-handl/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cách Render HTML – Hướng Dẫn Toàn Diện với Trình Xử Lý Tài Nguyên Tùy Chỉnh + +Bạn đã bao giờ tự hỏi **cách render HTML** thành bitmap mà không phải tự mình điều khiển một engine trình duyệt chưa? Bạn không phải là người duy nhất. Nhiều nhà phát triển gặp khó khăn khi cần một ảnh chụp nhanh của trang động cho email, báo cáo, hoặc hình thu nhỏ. Tin tốt? Với Aspose.HTML bạn có thể chuyển bất kỳ chuỗi HTML nào thành hình ảnh—không cần UI, không cần Chrome headless, chỉ cần mã C# thuần. + +Trong tutorial này, chúng tôi sẽ hướng dẫn qua một kịch bản thực tế **html to image conversion**, cho bạn thấy cách **implement a custom resource handler**, và trình bày quy trình đầy đủ **convert html to bitmap**. Khi kết thúc, bạn sẽ có một phương thức có thể tái sử dụng để render HTML thành hình ảnh hoàn toàn trong bộ nhớ, sẵn sàng cho các xử lý hoặc lưu trữ tiếp theo. + +> **Yêu cầu trước** +> * .NET 6+ (or .NET Framework 4.7.2+) +> * Aspose.HTML for .NET NuGet package (`Aspose.Html`) +> * Kiến thức cơ bản về C# và streams + +Nếu bạn đã nắm vững những kiến thức cơ bản này, hãy bắt đầu. + +--- + +## Cách Render HTML với Aspose.HTML + +Cốt lõi của bất kỳ **render html to image** nào là lớp `ImageRenderer`. Nó nhận một `HTMLDocument` và tạo ra đồ họa raster (PNG, JPEG, BMP, v.v.). Dưới đây là khung tối thiểu: + +```csharp +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load a simple HTML document (could also be loaded from a file or URL). +var html = "

Hello, world!

"; +var document = new HTMLDocument(html); + +// Initialise the renderer – no custom handler yet. +using var renderer = new ImageRenderer(document); + +// Render the page; the first page becomes a PNG stream. +renderer.Render(); +``` + +Đoạn mã đó hoạt động, nhưng bạn chỉ nhận được một tệp trên đĩa nếu bạn chỉ định cho renderer nơi ghi. Để giữ mọi thứ trong bộ nhớ—và để chặn mọi tài nguyên (hình ảnh, CSS, phông chữ) mà HTML yêu cầu—chúng ta sẽ gắn một **custom resource handler**. + +--- + +## Triển khai Custom Resource Handler + +Một **custom resource handler** cho phép bạn kiểm soát hoàn toàn cách các tài sản bên ngoài được lấy và lưu trữ. Trong nhiều trường hợp, bạn sẽ muốn nắm bắt các tài sản đó trong bộ nhớ để sử dụng sau (ví dụ, đóng gói chúng vào một ZIP). Trình xử lý kế thừa từ `ResourceHandler` và ghi đè `HandleResource`. + +```csharp +using System.IO; +using Aspose.Html.Rendering; + +// Step 1: Define a custom handler that returns a fresh MemoryStream for each resource. +class MyHandler : ResourceHandler +{ + // The `info` argument contains the URI and MIME type of the requested resource. + public override Stream HandleResource(ResourceInfo info) + { + // You could inspect info.MimeType or info.Uri here to decide what to do. + // For this demo we simply allocate a new MemoryStream – the renderer will fill it. + return new MemoryStream(); + } +} +``` + +**Tại sao lại làm?** +* **Performance** – không có I/O đĩa, mọi thứ ở trong RAM. +* **Security** – bạn kiểm soát các URL được phép lấy. +* **Extensibility** – bạn có thể cache tài nguyên, đổi tên chúng, hoặc nhúng chúng vào các container khác. + +--- + +## Chuyển HTML sang Bitmap bằng ImageRenderer + +Bây giờ chúng ta kết hợp các phần: tải HTML, gắn `MyHandler`, và render. Phương thức sau trả về một `MemoryStream` chứa hình ảnh PNG của trang đã render. + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +/// +/// Renders the supplied HTML string to a PNG bitmap kept in memory. +/// +/// Raw HTML markup. +/// MemoryStream with PNG data (position set to 0). +public static MemoryStream RenderHtmlToPng(string htmlContent) +{ + // 1️⃣ Create the document from the raw HTML. + var document = new HTMLDocument(htmlContent); + + // 2️⃣ Initialise our custom resource handler. + var handler = new MyHandler(); + + // 3️⃣ Build the ImageRenderer with the document and handler. + using var renderer = new ImageRenderer(document, handler); + + // 4️⃣ Render – the handler's HandleResource will be called for each asset. + renderer.Render(); + + // 5️⃣ Retrieve the generated image from the renderer's output stream. + // By default, ImageRenderer writes the first page to a PNG stream. + var output = new MemoryStream(); + renderer.Save(output, ImageFormat.Png); + output.Position = 0; // reset for downstream callers + + return output; +} +``` + +### Kết quả mong đợi + +Nếu bạn gọi phương thức như sau: + +```csharp +var html = "

Demo

Rendered at " + DateTime.Now + "

"; +using var pngStream = RenderHtmlToPng(html); +File.WriteAllBytes("demo.png", pngStream.ToArray()); +``` + +Bạn sẽ nhận được một `demo.png` trông tương tự như: + +![how to render html output example](https://example.com/assets/render-html-output.png "how to render html output example") + +*Văn bản thay thế:* **how to render html output example** – một bitmap nhỏ hiển thị đoạn HTML đã render. + +## Chuyển HTML sang Image – Những Cạm Bẫy Thường Gặp & Mẹo + +### 1. URL tương đối & Thẻ Base +Nếu HTML của bạn tham chiếu CSS hoặc hình ảnh bên ngoài bằng đường dẫn tương đối, renderer sẽ không biết thư mục gốc. Hoặc: + +* Thêm thẻ ``, hoặc +* Giải quyết URL trong `MyHandler.HandleResource` và cung cấp stream đúng. + +### 2. Sự sẵn có của Phông chữ +Aspose.HTML sử dụng phông chữ hệ thống theo mặc định. Đối với phông chữ web tùy chỉnh (`@font-face`), đảm bảo các tệp phông chữ có thể truy cập qua handler, hoặc nhúng chúng dưới dạng data URI base64. + +### 3. Trang lớn +Render một trang rất dài có thể tiêu tốn nhiều bộ nhớ. Bạn có thể giới hạn kích thước viewport: + +```csharp +renderer.PageSetup.Width = 1024; // pixels +renderer.PageSetup.Height = 768; // optional, or let it auto‑size +``` + +### 4. Định dạng hình ảnh +`renderer.Save(stream, ImageFormat.Jpeg)` hoạt động tương tự nếu bạn cần nén JPEG. Thay `ImageFormat.Png` bằng `ImageFormat.Bmp` để có đầu ra **convert html to bitmap** thực sự. + +## Render HTML sang Image – Các Kịch Bản Nâng Cao + +### A. Render Nhiều Trang +Nếu HTML chứa ngắt trang (`
`), bạn có thể lặp qua các trang: + +```csharp +using var renderer = new ImageRenderer(document, handler); +renderer.Render(); + +for (int i = 0; i < renderer.PageCount; i++) +{ + using var pageStream = new MemoryStream(); + renderer.Save(pageStream, ImageFormat.Png, i); + pageStream.Position = 0; + File.WriteAllBytes($"page_{i + 1}.png", pageStream.ToArray()); +} +``` + +### B. Nhúng Hình ảnh vào PDF +Kết hợp với `Aspose.Pdf` để nhúng PNG trực tiếp: + +```csharp +using Aspose.Pdf; +using Aspose.Pdf.Imaging; + +// Assume pngStream from RenderHtmlToPng(...) +var pdf = new Document(); +var page = pdf.Pages.Add(); +var image = new Image +{ + ImageStream = pngStream, + Width = 500, + Height = 300 +}; +page.Paragraphs.Add(image); +pdf.Save("output.pdf"); +``` + +## Kết luận + +Chúng tôi đã trình bày **cách render HTML** thành bitmap hoàn toàn trong bộ nhớ, khám phá các nền tảng **html to image conversion**, xây dựng một **custom resource handler**, và cho bạn thấy cách **convert html to bitmap** với `ImageRenderer` của Aspose.HTML. Cách tiếp cận này nhanh, an toàn đa luồng, và dễ mở rộng cho các dự án thực tế—từ tạo thumbnail email đến tạo báo cáo tự động. + +Sẵn sàng cho bước tiếp theo? Hãy thử thay đổi đầu ra PNG thành JPEG, thử nghiệm các kích thước trang khác nhau, hoặc kết nối handler với lớp cache để các lần render lặp lại diễn ra ngay lập tức. Không gì là không thể khi bạn kiểm soát mọi tài nguyên. + +Có câu hỏi hoặc một trường hợp sử dụng thú vị muốn chia sẻ? Để lại bình luận bên dưới, và chúc bạn render vui vẻ! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md b/html/vietnamese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md new file mode 100644 index 000000000..db53d1747 --- /dev/null +++ b/html/vietnamese/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/_index.md @@ -0,0 +1,224 @@ +--- +category: general +date: 2026-01-03 +description: Tìm hiểu cách chuyển đổi HTML sang PNG, chuyển trang web thành hình ảnh + và lưu HTML dưới dạng PNG bằng Aspose.HTML trong C#. Nhanh chóng, đáng tin cậy và + sẵn sàng cho sản xuất. +draft: false +keywords: +- how to render html +- convert webpage to image +- save html as png +- convert html to png +- render html to png +language: vi +og_description: Nắm vững cách chuyển đổi HTML sang PNG, chuyển trang web thành hình + ảnh và lưu HTML dưới dạng PNG với ví dụ C# đầy đủ sử dụng Aspose.HTML. +og_title: Cách chuyển đổi HTML sang PNG – Hướng dẫn đầy đủ +tags: +- C# +- Aspose.HTML +- Image Rendering +title: Cách Chuyển Đổi HTML Sang PNG – Hướng Dẫn Chi Tiết Từng Bước +url: /vi/net/rendering-html-documents/how-to-render-html-to-png-complete-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cách Render HTML thành PNG – Hướng Dẫn Chi Tiết Từng Bước + +Nếu bạn đang tìm kiếm **cách render html** thành một hình ảnh, bạn đã đến đúng nơi. Cho dù bạn cần **chuyển đổi trang web thành hình ảnh** cho các thumbnail, lưu trữ một trang dưới dạng PNG, hoặc tạo các bản xem trước trên mạng xã hội một cách nhanh chóng, quy trình có thể bất ngờ đơn giản với thư viện phù hợp. + +Trong hướng dẫn này, chúng tôi sẽ hướng dẫn cách chuyển bất kỳ URL trực tiếp nào thành tệp PNG bằng Aspose.HTML cho .NET. Bạn sẽ thấy một đoạn mã đầy đủ, có thể chạy được, tìm hiểu lý do mỗi cài đặt quan trọng, và khám phá một vài mẹo để xử lý các trường hợp đặc biệt. Khi kết thúc, bạn sẽ có thể **lưu html dưới dạng png**, **chuyển đổi html sang png**, và thậm chí nhúng kết quả vào báo cáo hoặc email mà không gặp khó khăn. + +## Yêu Cầu Trước – Những Gì Bạn Cần + +- **.NET 6.0** hoặc mới hơn (mã hoạt động với .NET Core và .NET Framework cũng được) +- Gói NuGet **Aspose.HTML for .NET** (`Aspose.Html`) đã được cài đặt +- Một IDE mà bạn lựa chọn (Visual Studio, Rider, hoặc VS Code) +- Thư mục có quyền ghi nơi PNG sẽ được lưu + +Không cần cấu hình bổ sung—Aspose.HTML chịu trách nhiệm nặng về việc phân tích trang, áp dụng CSS và raster hoá bố cục. + +## Bước 1: Tải Tài Liệu HTML Bạn Muốn Render + +Điều đầu tiên bạn cần là một thể hiện `HTMLDocument` trỏ tới trang bạn muốn chụp. Aspose.HTML có thể tải từ URL, tệp cục bộ, hoặc chuỗi HTML thô. + +```csharp +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +// Load the remote page – replace with any URL you need +var htmlDocument = new HTMLDocument("https://example.com"); +``` + +> **Tại sao điều này quan trọng:** Tải tài liệu trực tiếp từ URL đảm bảo rằng tất cả các tài nguyên bên ngoài (CSS, JavaScript, hình ảnh) được tự động lấy về, mang lại cho bạn một bản render trung thực của trang trực tiếp. + +## Bước 2: Cấu Hình Các Tùy Chọn Render Hình Ảnh + +Tiếp theo, chúng ta thiết lập `ImageRenderingOptions`. Các tùy chọn này kiểm soát kích thước đầu ra, chất lượng, và việc có áp dụng anti‑aliasing hay không. Điều chỉnh chúng cho phép bạn cân bằng kích thước tệp với độ trung thực hình ảnh. + +```csharp +var renderingOptions = new ImageRenderingOptions +{ + UseAntialiasing = true, // Improves edge smoothness – looks sharper + Width = 800, // Desired width in pixels + Height = 600 // Desired height in pixels +}; +``` + +> **Mẹo chuyên nghiệp:** Nếu bạn cần thumbnail độ phân giải cao hơn, tăng `Width` và `Height` một cách tỷ lệ. Aspose.HTML sẽ thu phóng bố cục tương ứng mà không mất chất lượng vector. + +## Bước 3: Khởi Tạo Image Renderer + +Bây giờ chúng ta tạo một `ImageRenderer` bằng cách truyền tài liệu và các tùy chọn vừa định nghĩa. Đối tượng này là động cơ thực sự vẽ trang lên bitmap. + +```csharp +var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); +``` + +> **Điều gì đang diễn ra bên trong?** Renderer phân tích DOM, tính toán các kiểu CSS, thực hiện layout, và cuối cùng raster hoá mỗi phần tử lên canvas pixel. Tất cả đều diễn ra trong bộ nhớ, vì vậy bạn không cần cửa sổ trình duyệt. + +## Bước 4: Render và Lưu Tệp PNG + +Cuối cùng, gọi `Render` với đường dẫn đầy đủ nơi bạn muốn lưu PNG. Phương thức này ghi tệp đồng bộ và tự động giải phóng các tài nguyên nội bộ. + +```csharp +// Ensure the output directory exists +string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); +Directory.CreateDirectory(outputDir); + +// Render the page to a PNG file +string outputPath = Path.Combine(outputDir, "example.png"); +imageRenderer.Render(outputPath); + +Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); +``` + +> **Kết quả mong đợi:** Sau khi chạy chương trình, bạn sẽ thấy `example.png` trong thư mục `output`. Mở nó bằng bất kỳ trình xem ảnh nào và bạn sẽ thấy một ảnh chụp trung thực của `https://example.com` với kích thước 800×600 px. + +--- + +### Ví Dụ Đầy Đủ, Sẵn Sàng Chạy + +Dưới đây là chương trình hoàn chỉnh mà bạn có thể sao chép‑dán vào một dự án console mới. Nó bao gồm tất cả các chỉ thị `using`, xử lý lỗi, và chú thích để rõ ràng. + +```csharp +// --------------------------------------------------------------- +// How to Render HTML to PNG – Complete Example +// --------------------------------------------------------------- +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + try + { + // 1️⃣ Load the HTML document from a live URL + var htmlDocument = new HTMLDocument("https://example.com"); + + // 2️⃣ Set rendering options – tweak width/height as needed + var renderingOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + Width = 800, + Height = 600 + }; + + // 3️⃣ Initialise the renderer with the document and options + var imageRenderer = new ImageRenderer(htmlDocument, renderingOptions); + + // 4️⃣ Prepare output folder and render to PNG + string outputDir = Path.Combine(Environment.CurrentDirectory, "output"); + Directory.CreateDirectory(outputDir); + string outputPath = Path.Combine(outputDir, "example.png"); + + imageRenderer.Render(outputPath); + + Console.WriteLine($"✅ HTML rendered successfully! File saved to: {outputPath}"); + } + catch (Exception ex) + { + // Simple error handling – in production you might log this + Console.Error.WriteLine($"❌ Rendering failed: {ex.Message}"); + } + } +} +``` + +Chạy chương trình (`dotnet run` từ thư mục dự án) và bạn sẽ nhận được một PNG phản ánh trang trực tiếp. Đó là **cách render html** chỉ với vài dòng C#. + +--- + +## Câu Hỏi Thường Gặp & Các Trường Hợp Đặc Biệt + +### Tôi có thể render tệp HTML cục bộ thay vì URL không? + +Chắc chắn rồi. Thay thế URL bằng đường dẫn tệp: + +```csharp +var htmlDocument = new HTMLDocument(@"C:\myfolder\page.html"); +``` + +### Nếu trang sử dụng JavaScript để thay đổi DOM sau khi tải thì sao? + +Aspose.HTML thực thi hầu hết các script phía client, nhưng không cung cấp một engine trình duyệt đầy đủ. Đối với các trang có nhiều script, bạn có thể cần pre‑render HTML (ví dụ, sử dụng một instance Chromium không giao diện) và sau đó đưa markup đã tạo cho Aspose.HTML. + +### Làm sao tôi kiểm soát mức nén PNG? + +`ImageRenderingOptions` bao gồm thuộc tính `CompressionLevel` (0–9). Số thấp hơn nghĩa là tệp lớn hơn nhưng chất lượng cao hơn. + +```csharp +renderingOptions.CompressionLevel = 2; // Fast, decent quality +``` + +### Tôi cần nền trong suốt—có thể thực hiện không? + +Có. Đặt màu nền thành trong suốt trước khi render: + +```csharp +renderingOptions.BackgroundColor = System.Drawing.Color.Transparent; +``` + +### Có cách nào để render nhiều trang thành một hình ảnh duy nhất không? + +Bạn có thể lặp qua một tập hợp các URL hoặc chuỗi HTML, render mỗi cái thành bitmap, và sau đó ghép chúng lại bằng `System.Drawing` hoặc `ImageSharp`. Bước **chuyển đổi html sang png** cốt lõi vẫn giữ nguyên. + +## Bonus: Nhúng PNG vào Web API + +Nếu bạn muốn cung cấp chức năng này qua một endpoint ASP.NET Core, chỉ cần trả về các byte của tệp: + +```csharp +[HttpGet("render")] +public IActionResult RenderHtml(string url) +{ + // (Same rendering code as above, but write to MemoryStream) + using var ms = new MemoryStream(); + var htmlDocument = new HTMLDocument(url); + var options = new ImageRenderingOptions { Width = 1024, Height = 768 }; + var renderer = new ImageRenderer(htmlDocument, options); + renderer.Render(ms); + return File(ms.ToArray(), "image/png"); +} +``` + +Bây giờ bất kỳ client nào cũng có thể yêu cầu `GET /render?url=https://example.com` và nhận được PNG ngay lập tức—hoàn hảo cho các dịch vụ **chuyển đổi trang web thành hình ảnh**. + +## Kết Luận + +Chúng tôi đã bao quát mọi thứ bạn cần biết về **cách render html** thành tệp PNG bằng Aspose.HTML cho .NET. Từ việc tải trang từ xa, cấu hình các tùy chọn render, và xử lý các vấn đề thường gặp, ví dụ đầy đủ cho bạn thấy chính xác cách **chuyển đổi html sang png**, **lưu html dưới dạng png**, và thậm chí cung cấp logic qua một web API. + +Hãy thử với các URL của bạn, thử nghiệm các kích thước khác nhau, và có thể tự động tạo thumbnail cho danh mục sản phẩm của bạn. Không gì là không thể khi bạn đã nắm vững các kiến thức cơ bản của **render html to png**. + +*Sẵn sàng nâng cấp?* Tải gói NuGet, chèn mã vào dự án của bạn, và bắt đầu chuyển đổi các trang web thành hình ảnh ngay hôm nay. Nếu gặp bất kỳ khó khăn nào, hãy để lại bình luận—chúc bạn render vui vẻ! + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file