diff --git a/html/arabic/java/conversion-epub-to-image-and-pdf/_index.md b/html/arabic/java/conversion-epub-to-image-and-pdf/_index.md index 693aba405..35a8c0d84 100644 --- a/html/arabic/java/conversion-epub-to-image-and-pdf/_index.md +++ b/html/arabic/java/conversion-epub-to-image-and-pdf/_index.md @@ -65,6 +65,8 @@ weight: 22 تعلم كيفية تحويل EPUB إلى صورة باستخدام Aspose.HTML for Java. دليل بسيط خطوة بخطوة للتحويلات الفعّالة. ### [EPUB to PDF Conversion with Aspose.HTML for Java](./convert-epub-to-pdf/) تعلم كيفية تحويل EPUB إلى PDF باستخدام Aspose.HTML for Java. يغطي هذا الدليل خطوة بخطوة المتطلبات المسبقة، استيراد الحزم، وأمثلة الشيفرة. ابدأ بتحويل EPUB إلى PDF. +### [تحويل EPUB إلى PNG في Java – تعيين أبعاد الصورة](./convert-epub-to-png-in-java-set-image-dimensions/) +تعلم كيفية تحويل ملفات EPUB إلى صور PNG وتحديد أبعاد الصورة باستخدام Aspose.HTML for Java. ## الأسئلة المتكررة @@ -94,4 +96,4 @@ weight: 22 {{< /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/java/conversion-epub-to-image-and-pdf/convert-epub-to-png-in-java-set-image-dimensions/_index.md b/html/arabic/java/conversion-epub-to-image-and-pdf/convert-epub-to-png-in-java-set-image-dimensions/_index.md new file mode 100644 index 000000000..eff82af07 --- /dev/null +++ b/html/arabic/java/conversion-epub-to-image-and-pdf/convert-epub-to-png-in-java-set-image-dimensions/_index.md @@ -0,0 +1,183 @@ +--- +category: general +date: 2026-04-09 +description: تعلم كيفية تحويل EPUB إلى PNG في Java، وضبط أبعاد الصورة بأسلوب Java، + واستخراج الصفحة الأولى فقط كغلاف PNG. مثال سريع على الشيفرة متضمن. +draft: false +keywords: +- convert epub to png +- set image dimensions java +- convert first page png +- aspose html java +- ebook cover generation +language: ar +og_description: تحويل EPUB إلى PNG في Java، ضبط أبعاد الصورة في Java، واستخراج الصفحة + الأولى فقط كغلاف PNG مع مثال كامل قابل للتنفيذ. +og_title: تحويل EPUB إلى PNG في Java – تعيين أبعاد الصورة +tags: +- Java +- Aspose.HTML +- Image Processing +title: تحويل EPUB إلى PNG في Java – ضبط أبعاد الصورة +url: /ar/java/conversion-epub-to-image-and-pdf/convert-epub-to-png-in-java-set-image-dimensions/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# تحويل EPUB إلى PNG في Java – ضبط أبعاد الصورة + +هل تساءلت يومًا كيف **convert EPUB to PNG** دون استدعاء مكتبة رسومات ثقيلة؟ لست وحدك. يحتاج العديد من المطورين إلى طريقة سريعة لإنشاء صورة غلاف أو صورة مصغرة من كتاب إلكتروني، لكنهم يواجهون صعوبات عندما يتطلب الـ API خطوات إضافية لاختيار الصفحة وتحديد الحجم. + +في هذا الدليل سنستعرض حلاً كاملاً لا يقتصر فقط على **convert EPUB to PNG** بل يسمح لك أيضًا **set image dimensions Java** وتطبيق **convert first page PNG** ببضع أسطر من الشيفرة فقط. في النهاية ستحصل على برنامج جاهز للتنفيذ ينتج صورة PNG واضحة بدقة 1024 × 1440 للصفحة الأولى من أي ملف EPUB. + +## ما ستحتاجه + +- Java 17 أو أحدث (الشيفرة تعمل مع الإصدارات الأقدم أيضًا، لكن 17 هو LTS الحالي). +- مكتبة Aspose.HTML for Java (إحداثيات Maven هي `com.aspose:aspose-html:23.10`). +- ملف EPUB تريد تحويله إلى صورة. +- أي بيئة تطوير متكاملة أو سطر أوامر بسيط `javac`/`java` يكفي. + +هذا كل شيء—لا أدوات معالجة صور إضافية، ولا ثنائيات أصلية. مجرد JAR واحد وقليل من Java. + +## الخطوة 1: تحميل مستند EPUB + +أول شيء علينا فعله هو إعطاء Aspose.HTML ما يحتاجه للعمل. تحميل EPUB سهل كما توجيه مُنشئ `HTMLDocument` إلى مسار الملف. + +```java +import com.aspose.html.HTMLDocument; + +// ... + +// Replace with the actual path to your EPUB file +String epubPath = "YOUR_DIRECTORY/input.epub"; + +// Load the EPUB into an HTMLDocument object +HTMLDocument epubDocument = new HTMLDocument(epubPath); +``` + +*لماذا هذا مهم:* `HTMLDocument` يجمع HTML وCSS والموارد الداخلية للـ EPUB في كائن واحد يمكن للمحول عرضه. إذا تخطيت هذه الخطوة، لن تعرف المكتبة ما الذي يجب رسمه. + +## الخطوة 2: ضبط أبعاد الصورة في Java + +الآن نقوم بتكوين مظهر PNG الناتج. تسمح لك فئة `ImageSaveOptions` بالتحكم في رقم الصفحة، العرض، الارتفاع، وبعض العلامات الأخرى الخاصة بالعرض. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +// ... + +ImageSaveOptions imageOptions = new ImageSaveOptions(); + +// Render only the first page (the cover is usually page 1) +imageOptions.setPageNumber(1); + +// Define the desired output size – this is where we **set image dimensions java** +imageOptions.setWidth(1024); // pixels +imageOptions.setHeight(1440); // pixels +``` + +*لماذا قد تغير هذه الأرقام:* المنصات المختلفة تتطلب أحجامًا مصغرة مختلفة. لغلاف Kindle قد تستخدم 1600 × 2400، بينما معاينة الويب قد تكون صغيرة مثل 300 × 400. اضبط العرض/الارتفاع وفقًا لحالتك. + +## الخطوة 3: تحويل الصفحة الأولى إلى PNG + +الآن يأتي التحويل الفعلي. نمرر `HTMLDocument`، الخيارات التي أنشأناها للتو، ومسار الوجهة إلى الطريقة الساكنة `Converter.convertHTML`. + +```java +import com.aspose.html.converters.Converter; + +// ... + +// Output file – this will be the PNG of the first page +String outputPath = "YOUR_DIRECTORY/cover.png"; + +// Perform the conversion +Converter.convertHTML(epubDocument, imageOptions, outputPath); +``` + +*لماذا هذا يعمل:* Aspose.HTML يعرض الصفحة الأولى للـ EPUB إلى صورة bitmap غير مرئية، ثم يكتب تلك الصورة إلى ملف PNG باستخدام الأبعاد التي حددتها. العملية متزامنة وتطرح استثناءً إذا حدث أي خطأ، لذا يمكنك تغليفها بكتلة try‑catch في الشيفرة الإنتاجية. + +## الخطوة 4: التحقق من النتيجة + +بعد انتهاء البرنامج، يجب أن ترى ملف `cover.png` في الموقع الذي حددته. افتحه بأي عارض صور للتأكد: + +- أبعاد الصورة تطابق القيم التي ضبطتها (1024 × 1440 في مثالنا). +- المحتوى يتطابق مع الصفحة الأولى للـ EPUB (عادةً الغلاف أو صفحة العنوان). + +إذا بدت الصورة مشوهة، تحقق مرة أخرى من نسبة الأبعاد التي اخترتها؛ قد تحتاج إلى الحفاظ على النسبة الأصلية عن طريق ضبط العرض **أو** الارتفاع فقط. + +## الخطوة 5: المشكلات الشائعة والنصائح الاحترافية + +| Issue | Why it Happens | Fix | +|------|----------------|-----| +| **Blank image** | يحتوي الـ EPUB على خطوط خارجية غير مدمجة. | قم بتثبيت الخطوط المفقودة على الجهاز المضيف أو دمجها في الـ EPUB. | +| **Wrong page rendered** | `setPageNumber` يعتمد على الفهرسة من الصفر في بعض الإصدارات القديمة. | تحقق من نسخة المكتبة؛ بالنسبة لـ Aspose.HTML 23.x الـ API يعتمد على الفهرسة من الواحد كما هو موضح. | +| **Out‑of‑memory errors** on large pages | العرض بدقة عالية جدًا يستهلك الكثير من الذاكرة RAM. | قلل العرض/الارتفاع أو زد حجم heap للـ JVM (`-Xmx2g`). | +| **File not found** | سلاسل المسار تستخدم شرطات مائلة عكسية في Windows دون الهروب. | استخدم شرطات مائلة أمامية أو `Paths.get(...)` لإنشاء مسارات مستقلة عن النظام. | + +*نصيحة احترافية:* إذا كنت بحاجة إلى إنشاء صور مصغرة لكل صفحة من EPUB، ببساطة قم بالتكرار على أرقام الصفحات وتغيير `imageOptions.setPageNumber(i)` داخل الحلقة. تذكر إعطاء كل ملف ناتج اسمًا فريدًا، مثل `cover_page_1.png`, `cover_page_2.png`, إلخ. + +## مثال كامل يعمل + +فيما يلي الفئة الكاملة الجاهزة للتنفيذ في Java. انسخها إلى ملف اسمه `EpubToPng.java`، عدل المسارات، ثم نفّذ. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +/** + * Demonstrates how to convert an EPUB file to a PNG image, + * set custom image dimensions, and export only the first page. + */ +public class EpubToPng { + public static void main(String[] args) throws Exception { + + // -------------------------------------------------------------------- + // Step 1: Load the EPUB document + // -------------------------------------------------------------------- + // Replace with your actual EPUB location + HTMLDocument epubDocument = new HTMLDocument("YOUR_DIRECTORY/input.epub"); + + // -------------------------------------------------------------------- + // Step 2: Configure conversion options (first page, dimensions) + // -------------------------------------------------------------------- + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setPageNumber(1); // Render only the first page + imageOptions.setWidth(1024); // Desired width in pixels + imageOptions.setHeight(1440); // Desired height in pixels + + // -------------------------------------------------------------------- + // Step 3: Convert the selected page to a PNG image + // -------------------------------------------------------------------- + // Output PNG path – this will hold the result of the conversion + Converter.convertHTML(epubDocument, imageOptions, "YOUR_DIRECTORY/cover.png"); + + System.out.println("✅ Conversion complete! Check YOUR_DIRECTORY/cover.png"); + } +} +``` + +**الناتج المتوقع:** بعد تشغيل `java EpubToPng`، ستطبع وحدة التحكم رسالة نجاح وستجد `cover.png` بحجم **1024 × 1440** بكسل، تعرض الصفحة الأولى من الـ EPUB الخاص بك. + +## الخلاصة + +أصبح لديك الآن طريقة قوية ومستقلة **convert EPUB to PNG** في Java، **set image dimensions Java** حسب الحاجة، و**convert first page PNG** لإنشاء أغلفة أو صور مصغرة. النهج خفيف الوزن، يعتمد على استدعاء واحد لـ Aspose.HTML، ويمكن توسيعه لمعالجة دفعات من ملفات EPUB أو صفحات متعددة مع تغييرات قليلة. + +--- + +### ما التالي؟ + +- **Batch conversion:** غلف المنطق بمسح دليل لمعالجة عشرات ملفات EPUB تلقائيًا. +- **Dynamic sizing:** احسب العرض/الارتفاع بناءً على نسبة أبعاد الصفحة الأصلية لتجنب التشويه. +- **Alternative output formats:** استبدل `ImageSaveOptions` بـ `PdfSaveOptions` أو `JpegSaveOptions` إذا كنت تحتاج PDF أو JPEG بدلاً من PNG. + +لا تتردد في التجربة—غيّر الأبعاد، جرّب رقم صفحة مختلف، أو دمج هذا المقتطف في أداة إدارة كتب إلكترونية أكبر. إذا واجهت مشاكل، فإن وثائق Aspose.HTML for Java تعتبر مرجعًا جيدًا، لكن الشيفرة أعلاه يجب أن تعمل مباشرةً في معظم الحالات. + +برمجة سعيدة، واستمتع بأغلفة PNG الواضحة! + +{{< /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/java/conversion-html-to-other-formats/_index.md b/html/arabic/java/conversion-html-to-other-formats/_index.md index 7c53c6411..77548fe49 100644 --- a/html/arabic/java/conversion-html-to-other-formats/_index.md +++ b/html/arabic/java/conversion-html-to-other-formats/_index.md @@ -79,8 +79,6 @@ XPS هو صيغة الطباعة الخاصة بمايكروسوفت. باستخ ### تحويل SVG إلى XPS حوّل رسومات SVG إلى صيغة XPS للطباعة المتسقة عبر الأجهزة. -في الختام، إتقان **html to pdf java** ومجموعة التحويلات الأوسع يفتح أمام أي مطور Java تدفقات عمل مستندات قوية. يقدم Aspose.HTML for Java دروسًا شاملة وسهلة المتابعة تتيح لك تحويل HTML وMarkdown وSVG إلى الصيغ التي تحتاجها، بجودة عالية وتحكم كامل. - ## التحويل - دروس تحويل HTML إلى صيغ أخرى ### [تحويل HTML إلى PDF](./convert-html-to-pdf/) تعلم كيفية تحويل HTML إلى PDF في Java باستخدام Aspose.HTML. أنشئ ملفات PDF عالية الجودة من محتوى HTML بسهولة. @@ -98,6 +96,9 @@ XPS هو صيغة الطباعة الخاصة بمايكروسوفت. باستخ تعلم كيفية تحويل SVG إلى XPS باستخدام Aspose.HTML for Java. دليل بسيط خطوة بخطوة لتحويلات سلسة. ### [تحويل HTML إلى PDF في Java – دليل خطوة بخطوة مع إعدادات حجم الصفحة](./convert-html-to-pdf-in-java-step-by-step-guide-with-page-siz/) تعلم تحويل HTML إلى PDF في Java مع إعدادات حجم الصفحة خطوة بخطوة باستخدام Aspose.HTML. +### [إنشاء PDF من HTML في Java – دليل خطوة بخطوة](./create-pdf-from-html-in-java-step-by-step-guide/) +تعلم كيفية إنشاء ملف PDF من HTML في Java خطوة بخطوة باستخدام Aspose.HTML. +### [تحويل HTML إلى PDF في Java – إضافة هوامش الصفحة وPDF/A‑2b](./aspose-html-to-pdf-in-java-add-page-margins-pdf-a-2b/) ## الأسئلة المتكررة diff --git a/html/arabic/java/conversion-html-to-other-formats/aspose-html-to-pdf-in-java-add-page-margins-pdf-a-2b/_index.md b/html/arabic/java/conversion-html-to-other-formats/aspose-html-to-pdf-in-java-add-page-margins-pdf-a-2b/_index.md new file mode 100644 index 000000000..1aa310829 --- /dev/null +++ b/html/arabic/java/conversion-html-to-other-formats/aspose-html-to-pdf-in-java-add-page-margins-pdf-a-2b/_index.md @@ -0,0 +1,200 @@ +--- +category: general +date: 2026-04-09 +description: aspose html إلى pdf في Java مع هوامش الصفحة والامتثال لـ PDF/A‑2b. تعلم + كيفية ضبط هوامش صفحة PDF، إضافة هوامش صفحة PDF، وتحويل HTML إلى PDF/A. +draft: false +keywords: +- aspose html to pdf +- add page margins pdf +- java html to pdf +- set pdf page margins +- convert html to pdfa +language: ar +og_description: تحويل HTML إلى PDF باستخدام Aspose في Java مع هوامش الصفحة والامتثال + لـ PDF/A‑2b. احصل على مثال كامل قابل للتنفيذ وتعرّف على سبب أهمية كل إعداد. +og_title: aspose html إلى pdf في Java – إضافة هوامش الصفحة و PDF/A‑2b +tags: +- Aspose.HTML +- Java +- PDF/A +- Document Conversion +title: Aspose HTML إلى PDF في Java – إضافة هوامش الصفحة و PDF/A‑2b +url: /ar/java/conversion-html-to-other-formats/aspose-html-to-pdf-in-java-add-page-margins-pdf-a-2b/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# aspose html to pdf في Java – إضافة هوامش الصفحة & PDF/A‑2b + +هل احتجت يومًا إلى **aspose html to pdf** ولكن أيضًا كان عليك ضمان توافق PDF/A‑2b من الدرجة الأرشيفية وهوامش موحدة؟ لست وحدك. العديد من المطورين يواجهون هذه العقبة بالضبط عند تحويل محتوى الويب إلى ملفات PDF مستقرة على المدى الطويل. + +في هذا الدليل سنستعرض حلًا كاملًا وجاهزًا للتنفيذ يضيف **adds page margins pdf**، ويضبط خيار *set pdf page margins*، وينتهي بملف **convert html to pdfa** — كل ذلك باستخدام Aspose.HTML للـ Java. في النهاية ستعرف ليس فقط *كيفية* كتابة الكود، *بل لماذا* كل جزء مهم للجودة والامتثال. + +## ما ستتعلمه + +- How to pull in the Aspose.HTML library for Java. +- How to configure **PdfSaveOptions** for PDF/A‑2b compliance. +- The exact steps to **set pdf page margins** programmatically. +- How to run the conversion and verify the output. +- Tips, edge‑case handling, and next‑step ideas for real‑world projects. + +## المتطلبات المسبقة + +| المتطلب | السبب | +|------------|--------| +| Java 17 (or newer) | Aspose.HTML 23.x تستهدف Java 11+، لكن استخدام أحدث JDK يمنحك أداءً أفضل. | +| Maven or Gradle build tool | يبسط إدارة التبعيات. | +| An HTML file (`input.html`) you want to convert | يمكن أن تكون صفحة ثابتة أو مقطعًا يتم إنشاؤه ديناميكيًا. | +| Basic Java knowledge | لا يتطلب معرفة عميقة بالداخلية، فقط إلمام بأساليب `main` والفئات. | + +إذا كنت تفتقد أيًا من هذه المتطلبات، احصل على أحدث JDK من [Adoptium](https://adoptium.net) وقم بإعداد Maven باستخدام `mvn -v` لتأكيد أنه يعمل. + +## الخطوة 1: إضافة تبعية Aspose.HTML + +أول شيء تقوم به هو إخبار Maven (أو Gradle) بتحميل ملفات JAR الخاصة بـ Aspose.HTML. الصق ما يلي في ملف `pom.xml` الخاص بك: + +```xml + + com.aspose + aspose-html + 23.12 + +``` + +> **نصيحة احترافية:** قم بتثبيت رقم الإصدار. الإصدارات الجديدة قد تُدخل تغييرات كسرية في الـ API، وتريد بناءً قابلًا لإعادة الإنتاج. + +إذا كنت تفضل Gradle، فإن المكافئ هو: + +```groovy +implementation 'com.aspose:aspose-html:23.12' +``` + +بمجرد حل التبعية، يمكنك استيراد الفئات التي سنحتاجها: + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.PdfSaveOptions; +import com.aspose.html.converters.PdfACompliance; +import com.aspose.html.drawing.PageMargins; +``` + +## الخطوة 2: تمكين توافق PDF/A‑2b + +لماذا نهتم بـ PDF/A؟ PDF/A هو نسخة موحدة وفق ISO من PDF صُممت للحفظ على المدى الطويل. يضمن PDF/A‑2b أن *الدقة البصرية* تُحافظ عليها عبر القارئات المستقبلية — وهو أمر ضروري للوثائق القانونية أو الأرشيفية أو التنظيمية. + +Create a `PdfSaveOptions` instance and tell Aspose to target PDF/A‑2b: + +```java +PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); +pdfSaveOptions.setPdfACompliance(PdfACompliance.PdfA2b); +``` + +إذا احتجت يومًا إلى مستوى امتثال مختلف (مثل PDF/A‑3a)، فقط استبدل قيمة الـ enum. سيقوم الـ API تلقائيًا بإدراج البيانات الوصفية المطلوبة. + +## الخطوة 3: تعريف هوامش صفحة موحدة + +معظم مولدات PDF تُعيّن هوامش افتراضية بمقدار 1 بوصة، لكن قد يتطلب تصميمك مسافات أضيق (أو أوسع). تقبل فئة `PageMargins` القيم بالنقاط (1 pt = 1/72 in). هنا نضبط **20 pt** على كل جانب — نقطة مثالية للعديد من التقارير. + +```java +// Step 3: Set uniform page margins (20 pt on each side) +pdfSaveOptions.setPageMargins(new PageMargins(20, 20, 20, 20)); +``` + +> **لماذا 20 pt؟** يساوي تقريبًا ~0.28 in، مما يمنح المحتوى مساحة تنفس بسيطة دون إهدار الورق. عدّل الأرقام لتتناسب مع إرشادات علامتك التجارية. + +## الخطوة 4: تنفيذ التحويل + +الآن الجزء الثقيل: قم بتمرير ملف HTML المصدر، الخيارات المُكوَّنة، ومسار PDF/A الوجهة إلى طريقة `convertHTML` الساكنة في Aspose. + +```java +// Step 4: Convert the HTML file to a PDF/A document using the configured options +Converter.convertHTML("YOUR_DIRECTORY/input.html", pdfSaveOptions, "YOUR_DIRECTORY/output-pdfa.pdf"); +``` + +استبدل `YOUR_DIRECTORY` بمسار مطلق أو نسبي يمكن لعملية Java قراءته/كتابته. الطريقة تُطلق استثناء `Exception`، لذا إما أن تُعيده (كما نفعل في `main`) أو تغلفه في كتلة try‑catch لمعالجة الأخطاء بشكل أكثر سلاسة. + +## الخطوة 5: التحقق من النتيجة + +بعد أن ينتهي البرنامج، افتح `output-pdfa.pdf` في أي عارض PDF. يجب أن ترى: + +- جميع تنسيقات HTML الأصلية محفوظة (الخطوط، الألوان، الصور). +- هوامش موحدة بمقدار 20 pt على كل صفحة. +- بيانات وصفية PDF/A‑2b (يمكنك التحقق منها في Adobe Acrobat تحت *File → Properties → Description* → *PDF/A*). + +إذا كان هناك شيء غير صحيح — مثل صورة مفقودة — تحقق مرة أخرى من أن مراجع HTML هي **file‑system relative** أو أنك قدمت عنوان URL أساسي. + +### مثال كامل يعمل + +فيما يلي الفئة الكاملة الجاهزة للتنفيذ في Java. انسخ‑الصقها إلى `src/main/java/ConvertHtmlToPdfA.java`، عدّل المسارات، وشغّل `mvn compile exec:java`. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.PdfSaveOptions; +import com.aspose.html.converters.PdfACompliance; +import com.aspose.html.drawing.PageMargins; + +public class ConvertHtmlToPdfA { + public static void main(String[] args) throws Exception { + // Step 1: Create PDF save options and enable PDF/A‑2b compliance + PdfSaveOptions pdfSaveOptions = new PdfSaveOptions(); + pdfSaveOptions.setPdfACompliance(PdfACompliance.PdfA2b); + + // Step 2: Set uniform page margins (20 pt on each side) + pdfSaveOptions.setPageMargins(new PageMargins(20, 20, 20, 20)); + + // Step 3: Convert the HTML file to a PDF/A document using the configured options + Converter.convertHTML( + "YOUR_DIRECTORY/input.html", // source HTML + pdfSaveOptions, // options we just configured + "YOUR_DIRECTORY/output-pdfa.pdf" // destination PDF/A file + ); + + System.out.println("Conversion completed successfully!"); + } +} +``` + +تشغيل الكود أعلاه يطبع *“Conversion completed successfully!”* ويترك لك ملف PDF/A متوافق جاهز للأرشفة. + +## أسئلة شائعة وحالات حافة + +| السؤال | الإجابة | +|----------|--------| +| **ماذا لو كان HTML الخاص بي يستخدم CSS أو خطوط خارجية؟** | مرّر عنوان URL أساسي إلى نسخة `convertHTML` المتعددة: `convertHTML(String htmlPath, String baseUrl, PdfSaveOptions, String outputPath)`. يضمن ذلك حل الروابط النسبية بشكل صحيح. | +| **هل يمكنني ضبط هوامش مختلفة لكل جانب؟** | بالطبع. استخدم `new PageMargins(left, top, right, bottom)` مع قيم متميزة. | +| **هل أحتاج إلى ترخيص لـ Aspose.HTML؟** | الإصدار التجريبي المجاني يعمل جيدًا للتقييم، لكنه يضيف علامة مائية. الترخيص التجاري يزيلها ويفتح الدعم الكامل لـ PDF/A. | +| **كيف أتعامل مع ملفات HTML الكبيرة (>50 MB)؟** | قم ببث HTML باستخدام نسخ `InputStream`. تقوم Aspose بمعالجة الدفق على دفعات، مما يتجنب أخطاء الذاكرة OOM. | +| **هل PDF/A‑2b هو المستوى الوحيد للامتثال؟** | لا. تشمل الخيارات `PdfA1a`، `PdfA1b`، `PdfA2a`، `PdfA3b`، إلخ. اختر بناءً على متطلباتك التنظيمية. | + +## نصائح احترافية للإنتاج + +1. **معالجة دفعات** – غلف التحويل في حلقة للتعامل مع العديد من ملفات HTML في تشغيل واحد. أعد استخدام نسخة واحدة من `PdfSaveOptions` لتقليل ضغط الـ GC. +2. **ضبط الذاكرة** – للمستندات الكبيرة جدًا، زد حجم كومة JVM (`-Xmx2g`) وفعل وضع توفير الذاكرة في Aspose عبر `pdfSaveOptions.setUseMemorySavingMode(true)`. +3. **التسجيل** – تُصدر Aspose سجلات مفصلة عندما تضبط `System.setProperty("com.aspose.html.log", "debug")`. مفيد لتشخيص الموارد المفقودة. + +## الخطوات التالية + +الآن بعد أن أتقنت **aspose html to pdf** مع هوامش مخصصة وتوافق PDF/A، قد ترغب في استكشاف: + +- **إدراج توقيعات رقمية** في PDF/A المُولد (ما زال متوافقًا). +- **تحويل صفحات HTML متعددة إلى PDF واحد** عبر ربط استدعاءات `Converter.convertHTML`. +- **استخدام Aspose.PDF** لإضافة إشارات مرجعية أو جدول محتويات بعد التحويل. +- **دمج مع خدمة ويب** بحيث يمكن للمستخدمين رفع HTML والحصول على PDF/A فورًا. + +كل من هذه يبني على الأساس الذي وضعناه، مما يتيح لك تقديم مستندات قوية ومتوافقة مع المعايير من أي تطبيق Java. + +![مثال تحويل aspose html إلى pdf](https://example.com/images/aspose-html-to-pdf.png "مثال تحويل aspose html إلى pdf") + +*اللقطة أعلاه تُظهر ملف PDF/A‑2b نموذجي تم إنشاؤه من مصدر HTML، مع هوامش 20 pt.* + +### الخلاصة + +لقد استعرضنا حلًا كاملًا ومستقلاً لـ **aspose html to pdf** في Java، يغطي **add page margins pdf**، **set pdf page margins**، و **convert html to pdfa**. لديك الآن فئة قابلة للتنفيذ، وفهم واضح لماذا كل إعداد مهم، ومجموعة من نصائح الممارسات الأفضل للحفاظ على شفرتك + +{{< /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/java/conversion-html-to-other-formats/create-pdf-from-html-in-java-step-by-step-guide/_index.md b/html/arabic/java/conversion-html-to-other-formats/create-pdf-from-html-in-java-step-by-step-guide/_index.md new file mode 100644 index 000000000..038a93aff --- /dev/null +++ b/html/arabic/java/conversion-html-to-other-formats/create-pdf-from-html-in-java-step-by-step-guide/_index.md @@ -0,0 +1,220 @@ +--- +category: general +date: 2026-04-09 +description: إنشاء ملف PDF من HTML باستخدام Java مع Aspose.HTML. تعلم تحويل HTML إلى + PDF باستخدام Java، حفظ HTML كملف PDF وتحويل ملف HTML إلى PDF في دقائق. +draft: false +keywords: +- create pdf from html +- html to pdf java +- java html to pdf +- save html as pdf +- convert html file pdf +language: ar +og_description: إنشاء ملف PDF من HTML باستخدام Java. يوضح هذا الدليل كيفية تحويل HTML + إلى PDF باستخدام Java، حفظ HTML كملف PDF، وتحويل ملف HTML إلى PDF باستخدام Aspose.HTML. +og_title: إنشاء ملف PDF من HTML في جافا – دليل برمجة شامل +tags: +- Java +- PDF +- Aspose.HTML +title: إنشاء ملف PDF من HTML في جافا – دليل خطوة بخطوة +url: /ar/java/conversion-html-to-other-formats/create-pdf-from-html-in-java-step-by-step-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# إنشاء PDF من HTML في جافا – دليل خطوة بخطوة + +هل احتجت يومًا إلى **إنشاء PDF من HTML** لكنك لم تكن متأكدًا أي مكتبة ستحافظ على تخطيطك كما هو؟ لست وحدك. في عالم جافا، يكافح العديد من المطورين مع تحويلات *html to pdf java* لينتهي بهم الأمر بخطوط مكسورة أو صور مفقودة. + +الأمر ببساطة—Aspose.HTML for Java يجعل العملية بأكملها سهلة للغاية. في هذا الدرس سنستعرض كل ما تحتاجه **لحفظ HTML كـ PDF**، بدءًا من إعداد المكتبة إلى التعامل مع الحالات الخاصة مثل CSS الخارجي والملفات الكبيرة. في النهاية ستتمكن من **تحويل ملف HTML إلى PDF** ببضع أسطر من الشيفرة فقط. + +## ما ستتعلمه + +- كيفية إضافة Aspose.HTML for Java إلى مشروعك (Maven أو JAR يدوي). +- الشيفرة الدقيقة المطلوبة **لإنشاء PDF من HTML** باستخدام الفئة `Converter`. +- لماذا `PdfSaveOptions` مهمة ومتى قد تحتاج إلى تعديلها. +- نصائح لاستكشاف الأخطاء الشائعة مثل المسارات النسبية وحروف Unicode. + +### المتطلبات المسبقة + +- Java 8 أو أعلى (المكتبة تدعم JDK 8‑21). +- أداة بناء مثل Maven أو Gradle (اختياري لكن يُنصح به). +- إلمام أساسي بـ Java I/O. + +لا توجد تبعيات أخرى مطلوبة؛ Aspose.HTML يجمع كل ما تحتاجه للتحويل. + +![Diagram illustrating the flow to create pdf from html using Aspose.HTML for Java](https://example.com/diagram-create-pdf-from-html.png "Diagram showing how to create pdf from html using Aspose.HTML for Java") + +## الخطوة 1: إضافة Aspose.HTML for Java إلى مشروعك + +### Maven + +إذا كنت تستخدم Maven، أضف المقتطف التالي إلى ملف `pom.xml` الخاص بك. + +```xml + + com.aspose + aspose-html + 23.10 + +``` + +### Gradle + +```gradle +implementation 'com.aspose:aspose-html:23.10' +``` + +### JAR يدوي + +حمّل ملف JAR من [صفحة تنزيل Aspose.HTML for Java](https://downloads.aspose.com/html/java) وأضفه إلى classpath الخاص بك. + +> **نصيحة احترافية:** استخدم دائمًا أحدث إصدار ثابت؛ الإصدارات الأحدث تصلح الأخطاء التي قد تؤثر على تحويلات *html to pdf java*، خاصةً مع CSS الحديث. + +## الخطوة 2: إعداد مصدر HTML الخاص بك + +يعمل `Converter` مع كل من الملفات المحلية وعناوين URL. لاختبار بسيط، ضع ملف `sample.html` بجوار شفرتك المصدرية. + +```html + + + + + + Demo PDF + + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **لماذا هذا مهم:** عندما *تحفظ HTML كـ PDF*، يقرأ المحول CSS والصور والخطوط كما يفعل المتصفح. الحفاظ على الأصول بجانب ملف HTML (أو استخدام عناوين URL مطلقة) يمنع الروابط المكسورة في PDF النهائي. + +## الخطوة 3: تكوين خيارات حفظ PDF + +`PdfSaveOptions` تتيح لك التحكم في أشياء مثل نسخة PDF، الضغط، وما إذا كان سيتم تضمين الخطوط. في معظم السيناريوهات الإعدادات الافتراضية تعمل بشكل جيد، لكن إليك كيفية تعديلها. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **احذر:** إذا *حولت ملف HTML إلى PDF* على خادم بدون واجهة (headless)، فإن تعطيل تضمين الخطوط يمكن أن يقلل حجم الملف بشكل كبير، لكنك قد تفقد حروفًا للغات غير ASCII. + +## الخطوة 4: تنفيذ التحويل + +الآن يحدث السحر. طريقة `Converter.convertHTML` تقرأ HTML، تطبق الخيارات، وتكتب PDF في نداء واحد. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Explanation:** +> - `htmlFilePath` يمكن أن يكون مسارًا نسبيًا أو مطلقًا؛ يقوم المحول بحله كما يفعل المتصفح. +> - `pdfOptions` يحمل جميع تفضيلات *save html as pdf* التي ضبطتها مسبقًا. +> - الحجة الثالثة هي ملف PDF الوجهة؛ Aspose ينشئ الملف تلقائيًا إذا لم يكن موجودًا. + +### النتيجة المتوقعة + +تشغيل البرنامج ينشئ `output.pdf` الذي يبدو تمامًا مثل `sample.html` المعروض — العنوان باللون الأزرق، الفقرة أدناه، ونفس الهوامش. افتحه بأي عارض PDF للتأكد. + +## الخطوة 5: التحقق من النتيجة ومعالجة المشكلات الشائعة + +### التحقق + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### المشكلات الشائعة + +| العَرَض | السبب المحتمل | الحل | +|---------|--------------|-----| +| الصور مفقودة | المسارات النسبية غير محلولة | استخدم عناوين URL مطلقة أو اضبط `baseUri` في `HTMLDocument` | +| الخطوط غير صحيحة | الخطوط غير مضمّنة | استدعِ `pdfOptions.setEmbedStandardPdfFonts(true)` | +| تغيير التخطيط | قواعد CSS `@media print` تم تجاهلها | تأكد من توافق CSS مع محرك عرض Aspose | +| التقليل يتوقف عند ملفات كبيرة | ذاكرة heap غير كافية | زيادة علم JVM `-Xmx` (مثال: `-Xmx2g`) | + +> **حالة خاصة:** إذا كنت بحاجة إلى تحويل سلسلة HTML مباشرة (بدون ملف)، غلفها في `HTMLDocument` ومرّر كائن المستند إلى `Converter.convertHTML`. هذا مفيد عند إنشاء HTML في الوقت الفعلي، مثلًا من محرك قوالب. + +## تنويعات متقدمة + +### تحويل عنوان URL ويب + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### إضافة رأس/تذييل + +يتيح لك Aspose.HTML حقن محتوى الرأس/التذييل عبر CSS `@page`. مثال: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +ضع CSS في ملف HTML الخاص بك أو حمّله عبر ورقة أنماط خارجية قبل التحويل. + +### تحويل دفعي + +عندما يكون لديك عدة ملفات HTML، حلقة بسيطة تنجز المهمة: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## الخلاصة + +أصبح لديك الآن وصفة كاملة وجاهزة للإنتاج **لإنشاء PDF من HTML** باستخدام جافا. من خلال استيراد Aspose.HTML، تكوين `PdfSaveOptions`، واستدعاء `Converter.convertHTML`، يمكنك *html to pdf java* في سطر واحد من الشيفرة. + +من هنا يمكنك استكشاف سيناريوهات أكثر تعقيدًا—إضافة علامات مائية، تشفير PDFs، أو دمج عدة صفحات HTML في مستند واحد. جميع هذه تعتمد على نفس الخطوات الأساسية التي تعلمتها. + +هل لديك أسئلة حول تفاصيل *save html as 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/arabic/java/conversion-html-to-various-image-formats/_index.md b/html/arabic/java/conversion-html-to-various-image-formats/_index.md index fdf215c5f..45c499b6d 100644 --- a/html/arabic/java/conversion-html-to-various-image-formats/_index.md +++ b/html/arabic/java/conversion-html-to-various-image-formats/_index.md @@ -95,6 +95,8 @@ Learn how to convert HTML to GIF in Java using Aspose.HTML. A comprehensive step Learn to convert HTML to JPEG with Aspose.HTML for Java. Step-by-step guide for seamless document processing. ### [تحويل HTML إلى PNG](./convert-html-to-png/) Learn how to convert HTML to PNG images in Java with Aspose.HTML. A comprehensive guide with step-by-step instructions. +### [تحويل HTML إلى PNG – دليل Java لتصوير جداول HTML كصور](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +تعلم كيفية تحويل جداول HTML إلى صور PNG في Java باستخدام Aspose.HTML. دليل خطوة بخطوة. ### [تحويل HTML إلى TIFF](./convert-html-to-tiff/) Learn how to easily convert HTML to TIFF using Aspose.HTML for Java. Step-by-step guide for efficient document handling. ### [تحويل HTML إلى WebP](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/arabic/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/arabic/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..a7ff6f19d --- /dev/null +++ b/html/arabic/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,206 @@ +--- +category: general +date: 2026-04-09 +description: تعلم كيفية تحويل HTML إلى PNG باستخدام Java. يغطي هذا الدرس تحويل HTML + إلى PNG، تعبئة جدول HTML باستخدام JavaScript، إنشاء مستند HTML باستخدام Java وإنشاء + HTML فارغ باستخدام Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: ar +og_description: تحويل HTML إلى PNG بسهولة. اتبع هذا الدليل خطوة بخطوة لتصوير HTML إلى PNG، + وتعبئة جدول HTML بـ JavaScript، وإنشاء مستند HTML بـ Java. +og_title: تحويل HTML إلى PNG – دليل شامل لتصوير Java +tags: +- Java +- Aspose.HTML +- Image rendering +title: تحويل HTML إلى PNG – دليل Java لتصوير جداول HTML كصور +url: /ar/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# تحويل html إلى png – دليل Java لتصوير جداول HTML كصور + +هل احتجت يومًا إلى **convert html to png** لكن لم تكن متأكدًا من أين تبدأ؟ لست وحدك. يواجه العديد من المطورين صعوبة عندما يتعين عليهم تحويل مقتطف HTML ديناميكي—خاصةً إذا كان مبنيًا باستخدام JavaScript—إلى صورة ثابتة. في هذا الدليل سنستعرض مثالًا كاملاً وقابلاً للتنفيذ يأخذ صفحة HTML صغيرة، يملأ جدولًا باستخدام JavaScript، ثم يُصوِّرها كملف PNG باستخدام Aspose.HTML for Java. + +سنتطرق أيضًا إلى مواضيع ذات صلة مثل **render html to png**، وكيفية **populate html table javascript**، وفروق **create html document java** مقابل **create empty html java**. في النهاية ستحصل على برنامج مستقل يمكنك إدراجه في أي مشروع Maven أو Gradle وتشغيله فورًا. + +## المتطلبات المسبقة + +- Java 17 أو أحدث (تعمل الواجهة البرمجية مع Java 8+ لكننا سنستخدم أحدث نسخة LTS) +- مكتبة Aspose.HTML for Java (متوفرة عبر Maven Central) +- بيئة تطوير متوسطة أو سطر أوامر بسيط `javac`/`java` +- صلاحية كتابة في المجلد الذي سيُحفظ فيه ملف PNG + +لا تحتاج إلى متصفحات ويب خارجية، ولا إلى Chrome بدون رأس، فقط كود Java نقي. + +## الخطوة 1: إنشاء مستند HTML فارغ (create empty html java) + +أول شيء نحتاجه هو صفحة نظيفة—كائن مستند HTML فارغ يمكننا التلاعب به برمجيًا. توفر Aspose.HTML الفئة `HTMLDocument` التي تعمل كمتصفح مصغر. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +لماذا نبدأ بمستند فارغ؟ لأن ذلك يضمن عدم وجود أي علامات غير مرغوبة أو حالة سابقة تتداخل مع الجدول الذي سنبنيه. إنه ما يعادل في Java استدعاء `document.open()` في المتصفح. + +## الخطوة 2: كتابة صفحة HTML بسيطة تحتوي على جدول فارغ (create html document java) + +بعد ذلك نقوم بحقن هيكل HTML صغير. تتضمن الصفحة عنصرًا `
` كعنصر نائب وبعض قواعد CSS لجعل الجدول يبدو مقبولًا عند التصوير. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +لاحظ كيف **create html document java** يتم عبر تمرير سلسلة نصية مباشرة إلى `write`. هذه الطريقة مفيدة عندما يتم توليد HTML في الوقت الفعلي، وتجنب الحاجة إلى ملفات قوالب خارجية. + +## الخطوة 3: ملء جدول HTML باستخدام JavaScript (populate html table javascript) + +الآن يأتي الجزء الممتع—إضافة صفوف إلى الجدول باستخدام JavaScript. سنصنع سكريبت قصير يكرر خمس مرات، يضيف صفًا في كل تكرار ويملأ خليتين: إحداهما برقم الصف والأخرى بـ “Even” أو “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +لماذا نستخدم JavaScript هنا؟ لأن العديد من الصفحات الواقعية تبني الجداول ديناميكيًا—مثل لوحات التحكم، التقارير، أو شبكات البيانات على جانب العميل. عبر **populate html table javascript** داخل محرك Aspose، نحاكي تمامًا ما يحدث في المتصفح، مما يضمن أن PNG الناتج سيكون مطابقًا لما يراه المستخدم. + +## الخطوة 4: تنفيذ السكريبت داخل صندوق رمل المستند + +توفر Aspose.HTML كائن `Window` يعمل كـ `window` في المتصفح. استدعاء `eval` ينفّذ السكريبت في بيئة معزولة، بحيث لا تُجرى أي طلبات شبكة خارجية. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +خطأ شائع هو نسيان الانتظار حتى ينتهي السكريبت قبل التصوير. في هذه الحالة البسيطة يُنفّذ السكريبت بشكل متزامن، لذا يمكن الانتقال مباشرة إلى الخطوة التالية. إذا قمت بإدراج كود غير متزامن (مثل `fetch`)، ستحتاج إلى ربطه بحدث `onload` أو استخدام انتظار قائم على `Promise`. + +## الخطوة 5: ضبط خيارات حفظ الصورة (render html to png) + +قبل أن نقوم بتحويل الصفحة إلى نقطية، نحدد حجم الصورة الناتجة. تسمح لنا الفئة `ImageSaveOptions` بتحديد العرض، الارتفاع، وبعض معلمات الجودة. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +اختيار حجم قماش مناسب أمر حاسم للحصول على نتيجة **render html to png** نظيفة. إذا كان الحجم صغيرًا جدًا سيُقص النص؛ وإذا كان كبيرًا جدًا سيُهدر الذاكرة. 800×600 يُعد خيارًا متوسطًا آمنًا لمعظم الجداول. + +## الخطوة 6: تحويل صفحة HTML المملوءة إلى صورة PNG (convert html to png) + +أخيرًا، نستدعي الطريقة الساكنة `Converter.convertHTML`. تأخذ `HTMLDocument`، خيارات الحفظ، ومسار الملف الهدف. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +استبدل `YOUR_DIRECTORY` بمسار مطلق أو نسبي موجود على جهازك. بعد انتهاء البرنامج، ستجد الملف `table.png` يعرض جدولًا منسقًا جيدًا يحتوي على خمس صفوف، مع تسميات “Even”/“Odd” متناوبة. + +> **نصيحة احترافية:** إذا كنت بحاجة إلى خلفية شفافة، فعّلها عبر `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## مثال كامل وجاهز للتنفيذ + +فيما يلي الفئة Java الكاملة التي تجمع كل ما سبق. انسخها إلى الملف `JsDomManipulation.java`، عدّل مسار الإخراج، ثم شغّلها. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### النتيجة المتوقعة + +عند فتح `table.png`، يجب أن ترى شيئًا مشابهًا لهذا: + +![مثال على convert html to png](https://example.com/assets/table.png "convert html to png – جدول مُصوَّر") + +الصورة تعرض جدولًا من 5 صفوف بنمط “Row 1 – Odd” … “Row 5 – Odd”، مع حدود رقيقة وتباعد. + +## المشكلات الشائعة وكيفية تجنّبها + +| المشكلة | سبب حدوثها | الحل | +|-------|----------------|-----| +| **Script runs after rendering** | الكود غير المتزامن (مثل `setTimeout`) لا يُنتظر. | استخدم `window.onload` أو احجز حتى `document.readyState === 'complete'`. | +| **Image is blank** | لا يوجد محتوى داخل مساحة العرض (العرض/الارتفاع مضبوط على 0). | تأكد من أن أبعاد `ImageSaveOptions` غير صفرية وتطابق تخطيط الصفحة. | +| **Table rows are cut off** | القماش صغير جدًا بالنسبة لارتفاع الجدول. | زد قيمة `imageOptions.setHeight` أو استخدم `imageOptions.setFitToPage(true)`. | +| **Missing CSS** | تم حذف النمط المضمن أو لم يتم تحميل CSS خارجي. | احتفظ بكل CSS الضروري داخل وسم ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **原因说明：** 当你 *save HTML as PDF* 时，转换器会像浏览器一样读取 CSS、图片和字体。将资源放在 HTML 同目录（或使用绝对 URL）可避免最终 PDF 中出现断链。 + +## 第 3 步：配置 PDF 保存选项 + +`PdfSaveOptions` 让你可以控制 PDF 版本、压缩方式以及是否嵌入字体等。大多数情况下默认设置已足够，但下面展示了如何进行微调。 + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **注意：** 如果在无头服务器上 *convert html file pdf*，关闭字体嵌入可以显著减小文件体积，但可能导致非 ASCII 语言字符缺失。 + +## 第 4 步：执行转换 + +现在魔法开始了。`Converter.convertHTML` 方法读取 HTML、应用选项并一次性写出 PDF。 + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **解释：** +> - `htmlFilePath` 可以是相对路径或绝对路径；转换器会像浏览器一样解析它。 +> - `pdfOptions` 包含了前面设置的所有 *save html as pdf* 首选项。 +> - 第三个参数是目标 PDF 文件；如果文件不存在，Aspose 会自动创建。 + +### 预期输出 + +运行程序后会生成 `output.pdf`，其外观与渲染后的 `sample.html` 完全一致——蓝色标题、下方段落以及相同的页边距。使用任意 PDF 查看器打开即可验证。 + +## 第 5 步：验证结果并处理常见问题 + +### 验证 + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### 常见陷阱 + +| 症状 | 可能原因 | 解决方案 | +|------|----------|----------| +| 图片缺失 | 相对路径未解析 | 使用绝对 URL 或在 `HTMLDocument` 中设置 `baseUri` | +| 字体显示异常 | 未嵌入字体 | 调用 `pdfOptions.setEmbedStandardPdfFonts(true)` | +| 布局错位 | CSS 中的 `@media print` 规则被忽略 | 确保 CSS 与 Aspose 渲染引擎兼容 | +| 大文件转换卡住 | 堆内存不足 | 增加 JVM `-Xmx` 参数（例如 `-Xmx2g`） | + +> **边缘案例：** 如果需要直接转换 HTML 字符串（没有文件），可将其包装为 `HTMLDocument` 并将文档对象传给 `Converter.convertHTML`。这在动态生成 HTML（如模板引擎）时非常实用。 + +## 高级变体 + +### 转换网页 URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### 添加页眉/页脚 + +Aspose.HTML 允许通过 CSS `@page` 注入页眉/页脚。示例： + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +将 CSS 放入 HTML 中或在转换前通过外部样式表加载。 + +### 批量转换 + +当有多个 HTML 文件时，只需一个简单循环即可： + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## 结论 + +现在你已经掌握了使用 Java **从 HTML 创建 PDF** 的完整、可投入生产的方案。通过引入 Aspose.HTML、配置 `PdfSaveOptions` 并调用 `Converter.convertHTML`，即可在一行代码内完成 *html to pdf java*。 + +接下来，你可以探索更高级的场景——添加水印、加密 PDF，或将多个 HTML 页面合并为一个文档。所有这些都基于你刚刚掌握的核心步骤。 + +对 *save html as 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/java/conversion-html-to-various-image-formats/_index.md b/html/chinese/java/conversion-html-to-various-image-formats/_index.md index c52c7a2ca..d96300434 100644 --- a/html/chinese/java/conversion-html-to-various-image-formats/_index.md +++ b/html/chinese/java/conversion-html-to-various-image-formats/_index.md @@ -38,7 +38,7 @@ weight: 24 - Aspose.HTML for Java JAR（从 Aspose 网站下载）。 - 生产环境的有效 Aspose.HTML 许可证（试用可选）。 -## 如何使用 Aspose.HTML **convert html gif**、**convert html jpeg** 和 **convert html png** +## 如何使用 Aspose.HTML **convert html gif**, **convert html jpeg** 和 **convert html png** 以下是每种目标格式的简明分步说明。代码片段除输出文件扩展名外完全相同；只需更改 `ImageSaveOptions` 的格式即可。 ### 步骤 1：设置 HTML 渲染器 @@ -98,6 +98,9 @@ weight: 24 ### [Converting HTML to PNG](./convert-html-to-png/) 了解如何使用 Aspose.HTML 在 Java 中将 HTML 转换为 PNG 图像。一个全面的指南，提供详细的步骤说明。 +### [将 HTML 转换为 PNG – Java 指南：将 HTML 表格渲染为图像](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +学习如何使用 Aspose.HTML for Java 将包含表格的 HTML 页面渲染为 PNG 图像，提供完整代码示例。 + ### [Converting HTML to TIFF](./convert-html-to-tiff/) 学习如何使用 Aspose.HTML for Java 轻松将 HTML 转换为 TIFF。一步步指南，帮助您高效处理文档。 diff --git a/html/chinese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/chinese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..4317ee5aa --- /dev/null +++ b/html/chinese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,205 @@ +--- +category: general +date: 2026-04-09 +description: 学习如何使用 Java 将 HTML 转换为 PNG。本教程涵盖将 HTML 渲染为 PNG、使用 JavaScript 填充 HTML + 表格、使用 Java 创建 HTML 文档以及使用 Java 创建空的 HTML。 +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: zh +og_description: 轻松将 HTML 转换为 PNG。请按照本分步指南，将 HTML 渲染为 PNG，使用 JavaScript 填充 HTML 表格，并使用 + Java 创建 HTML 文档。 +og_title: 将 HTML 转换为 PNG – 完整的 Java 渲染指南 +tags: +- Java +- Aspose.HTML +- Image rendering +title: 将 HTML 转换为 PNG – Java 渲染 HTML 表格为图像的指南 +url: /zh/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – Java guide to rendering HTML tables as images + +是否曾经需要 **convert html to png**，却不知从何入手？你并不孤单。许多开发者在将动态 HTML 片段——尤其是使用 JavaScript 构建的——转换为静态图片时会卡住。本文将通过一个完整、可运行的示例，演示如何使用 Aspose.HTML for Java 将一个小型 HTML 页面、通过 JavaScript 填充表格，最终渲染为 PNG 文件。 + +我们还会涉及 **render html to png**、**populate html table javascript**、以及 **create html document java** 与 **create empty html java** 的细微差别。完成后，你将拥有一个可直接放入任意 Maven 或 Gradle 项目并立即运行的独立程序。 + +## Prerequisites + +- Java 17 或更高（API 支持 Java 8+，但我们使用最新的 LTS 版本） +- Aspose.HTML for Java 库（可通过 Maven Central 获取） +- 一个普通的 IDE 或者直接使用 `javac`/`java` 命令行 +- 对将保存 PNG 的文件夹拥有写入权限 + +无需外部浏览器，无需无头 Chrome，纯 Java 代码即可。 + +## Step 1: Create an empty HTML document (create empty html java) + +我们首先需要一个干净的起点——一个空的 HTML 文档对象，以便后续以编程方式操作。Aspose.HTML 提供了 `HTMLDocument` 类，行为类似于一个迷你浏览器引擎。 + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +为什么要从空文档开始？因为这能确保没有杂散的标记或之前的状态干扰我们即将构建的表格。这相当于在浏览器中调用 `document.open()`。 + +## Step 2: Write a minimal HTML page that contains an empty table (create html document java) + +接下来我们注入一个极简的 HTML 骨架。页面包含一个 `
` 占位符以及几条 CSS 规则，使表格在渲染时看起来体面。 + +```java +htmlDoc.write( + "" + + "
" +); +``` + +请注意，我们通过向 `write` 传入原始字符串来 **create html document java**。当 HTML 动态生成时，这种方式非常方便，且无需外部模板文件。 + +## Step 3: Populate the HTML table with JavaScript (populate html table javascript) + +现在进入有趣的环节——使用 JavaScript 为表格添加行。我们将编写一个短脚本，循环五次，每次插入一行，并填充两个单元格：一个显示行号，另一个显示 “Even” 或 “Odd”。 + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +为什么在这里使用 JavaScript？因为很多实际页面会动态构建表格——比如仪表盘、报告或客户端数据网格。通过在 Aspose 引擎内部 **populate html table javascript**，我们能够完全模拟浏览器中的行为，确保渲染出的 PNG 与用户看到的页面一致。 + +## Step 4: Execute the script inside the document’s sandbox + +Aspose.HTML 为我们提供了一个 `Window` 对象，行为类似浏览器的 `window`。调用 `eval` 可以在隔离的环境中运行脚本，从而不会发起外部网络请求。 + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +常见的坑是忘记在渲染前等待脚本执行完毕。在这个简单示例中脚本是同步运行的，所以可以直接进入下一步。如果你嵌入了异步代码（例如 `fetch`），则需要监听 `onload` 事件或使用基于 `Promise` 的等待方式。 + +## Step 5: Configure image‑save options (render html to png) + +在实际光栅化页面之前，需要决定输出图像的尺寸。`ImageSaveOptions` 类允许我们设置宽度、高度以及一些质量参数。 + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +选择合适的画布大小对 **render html to png** 的效果至关重要。太小会导致文字被截断，太大则浪费内存。800×600 是大多数表格的安全折中尺寸。 + +## Step 6: Convert the populated HTML page to a PNG image (convert html to png) + +最后，调用静态的 `Converter.convertHTML` 方法。它接受 `HTMLDocument`、保存选项以及目标文件路径。 + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +将 `YOUR_DIRECTORY` 替换为机器上实际存在的绝对或相对路径。程序执行完毕后，你将在该目录下看到 `table.png`，其中展示了一个格式良好的五行表格，行标签交替为 “Even”/“Odd”。 + +> **Pro tip:** 如果需要透明背景，可通过 `imageOptions.setBackgroundColor(Color.getTransparent());` 启用。 + +## Full, Ready‑to‑Run Example + +下面是完整的 Java 类代码，将上述所有步骤整合在一起。复制粘贴到 `JsDomManipulation.java`，根据需要修改输出文件夹路径，然后运行。 + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Expected output + +打开 `table.png`，你应该看到类似下图的内容： + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +该图片展示了一个 5 行表格，行标签为 “Row 1 – Odd” … “Row 5 – Odd”，并带有细边框和内边距。 + +## Common pitfalls and how to avoid them + +| 问题 | 产生原因 | 解决方案 | +|------|----------|----------| +| **脚本在渲染后才运行** | 异步代码（如 `setTimeout`）未被等待。 | 使用 `window.onload` 或阻塞至 `document.readyState === 'complete'`。 | +| **图片为空白** | 视口内没有内容（宽高设为 0）。 | 确保 `ImageSaveOptions` 的宽高非零且与页面布局匹配。 | +| **表格行被截断** | 画布尺寸不足以容纳表格高度。 | 增大 `imageOptions.setHeight`，或使用 `imageOptions.setFitToPage(true)`。 | +| **缺少 CSS** | 内联样式遗漏或外部 CSS 未加载。 | 将所有必需的 CSS 放在 ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Proč je to důležité:** Když *uložíte HTML jako PDF*, konvertor čte CSS, obrázky a fonty stejně jako prohlížeč. Uchovávání zdrojů vedle HTML (nebo používání absolutních URL) zabraňuje poškozeným odkazům ve finálním PDF. + +## Krok 3: Nakonfigurujte možnosti uložení PDF + +`PdfSaveOptions` vám umožňují řídit věci jako verze PDF, komprese a zda vložit fonty. Ve většině scénářů výchozí nastavení funguje dobře, ale zde je, jak je můžete upravit. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Pozor:** Pokud *převádíte html soubor do pdf* na serveru bez grafického rozhraní, vypnutí vkládání fontů může výrazně snížit velikost souboru, ale riskujete chybějící znaky pro ne‑ASCII jazyky. + +## Krok 4: Proveďte konverzi + +Nyní se děje magie. Metoda `Converter.convertHTML` načte HTML, použije možnosti a zapíše PDF v jednom volání. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Vysvětlení:** +> - `htmlFilePath` může být relativní nebo absolutní cesta; konvertor ji vyřeší stejně jako prohlížeč. +> - `pdfOptions` nese všechna nastavení *save html as pdf*, která jste nastavili dříve. +> - Třetí argument je cílový PDF soubor; Aspose automaticky vytvoří soubor, pokud neexistuje. + +### Očekávaný výstup + +Spuštěním programu se vytvoří `output.pdf`, který vypadá přesně jako vykreslený `sample.html` — nadpis v modré, odstavec pod ním a stejné okraje. Otevřete jej v libovolném prohlížeči PDF a potvrďte. + +## Krok 5: Ověřte výsledek a řešte běžné problémy + +### Ověření + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Běžné úskalí + +| Projev | Předpokládaná příčina | Řešení | +|--------|-----------------------|--------| +| Chybějící obrázky | Relativní cesty nebyly vyřešeny | Použijte absolutní URL nebo nastavte `baseUri` v `HTMLDocument` | +| Fonty vypadají špatně | Fonty nejsou vloženy | Zavolejte `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Posun rozložení | Pravidla CSS `@media print` jsou ignorována | Zajistěte, aby CSS bylo kompatibilní s renderovacím enginem Aspose | +| Konverze se zasekne u velkých souborů | Nedostatečná paměť haldy | Zvyšte JVM flag `-Xmx` (např. `-Xmx2g`) | + +> **Okrajový případ:** Pokud potřebujete převést HTML řetězec přímo (bez souboru), zabalte jej do `HTMLDocument` a předávejte objekt dokumentu metodě `Converter.convertHTML`. To je užitečné při generování HTML za běhu, například z šablonového enginu. + +## Pokročilé varianty + +### Převod webové URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Přidání hlavičky/patičky + +Aspose.HTML vám umožňuje vložit obsah hlavičky/patičky pomocí CSS `@page`. Příklad: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Umístěte CSS do vašeho HTML nebo jej načtěte pomocí externího stylového souboru před konverzí. + +### Dávková konverze + +Když máte více HTML souborů, jednoduchá smyčka to zvládne: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Závěr + +Nyní máte kompletní, připravený recept pro **vytvoření PDF z HTML** pomocí Javy. Importováním Aspose.HTML, konfigurací `PdfSaveOptions` a voláním `Converter.convertHTML` můžete *html to pdf java* jedním řádkem kódu. + +Odtud můžete zkoumat složitější scénáře — přidání vodoznaků, šifrování PDF nebo sloučení více HTML stránek do jednoho dokumentu. Všechny tyto stavby vycházejí ze stejných základních kroků, které jste právě zvládli. + +Máte otázky ohledně zvláštností *save html as pdf*, nebo potřebujete pomoc s úpravou konverze pro konkrétní framework? Zanechte komentář 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/java/conversion-html-to-various-image-formats/_index.md b/html/czech/java/conversion-html-to-various-image-formats/_index.md index c7993f5b3..e5caad4a6 100644 --- a/html/czech/java/conversion-html-to-various-image-formats/_index.md +++ b/html/czech/java/conversion-html-to-various-image-formats/_index.md @@ -90,6 +90,8 @@ Naučte se, jak převést HTML do GIF v Javě pomocí Aspose.HTML. Komplexní kr Naučte se převést HTML do JPEG pomocí Aspose.HTML for Java. Krok‑za‑krokem průvodce pro plynulé zpracování dokumentů. ### [Převod HTML do PNG](./convert-html-to-png/) Naučte se převést HTML na PNG obrázky v Javě pomocí Aspose.HTML. Komplexní průvodce s krok‑za‑krokem instrukcemi. +### [Převod HTML na PNG – Java průvodce vykreslováním HTML tabulek jako obrázků](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Naučte se, jak v Javě pomocí Aspose.HTML převést HTML tabulky na PNG obrázky s podrobným krok‑za‑krokem návodem. ### [Převod HTML do TIFF](./convert-html-to-tiff/) Naučte se snadno převést HTML do TIFF pomocí Aspose.HTML for Java. Krok‑za‑krokem průvodce pro efektivní zpracování dokumentů. ### [Převod HTML do WebP](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/czech/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/czech/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..0bc2adcd0 --- /dev/null +++ b/html/czech/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Naučte se, jak převést HTML na PNG pomocí Javy. Tento tutoriál pokrývá + renderování HTML do PNG, naplnění HTML tabulky pomocí JavaScriptu, vytvoření HTML + dokumentu v Javě a vytvoření prázdného HTML v Javě. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: cs +og_description: Převod HTML na PNG je snadný. Postupujte podle tohoto krok‑za‑krokem + průvodce, jak renderovat HTML do PNG, naplnit HTML tabulku pomocí JavaScriptu a + vytvořit HTML dokument v Javě. +og_title: Převod HTML na PNG – kompletní průvodce renderováním v Javě +tags: +- Java +- Aspose.HTML +- Image rendering +title: převod html na png – Java průvodce renderováním HTML tabulek jako obrázků +url: /cs/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# převod html na png – Java průvodce renderováním HTML tabulek jako obrázků + +Už jste někdy potřebovali **convert html to png**, ale nebyli jste si jisti, kde začít? Nejste v tom sami. Mnoho vývojářů narazí na problém, když musí převést dynamický HTML úryvek — zejména takový vytvořený pomocí JavaScriptu — na statický obrázek. V tomto tutoriálu vás provedeme kompletním, spustitelným příkladem, který vezme malou HTML stránku, naplní tabulku pomocí JavaScriptu a nakonec ji vykreslí jako PNG soubor pomocí Aspose.HTML for Java. + +Také se dotkneme souvisejících témat, jako je **render html to png**, jak **populate html table javascript**, a nuance mezi **create html document java** a **create empty html java**. Na konci budete mít samostatný program, který můžete vložit do libovolného Maven nebo Gradle projektu a spustit okamžitě. + +## Prerequisites + +- Java 17 nebo novější (API funguje i s Java 8+, ale použijeme nejnovější LTS) +- Knihovna Aspose.HTML for Java (k dispozici přes Maven Central) +- Jednoduché IDE nebo čistý příkazový řádek `javac`/`java` +- Oprávnění k zápisu do složky, kam bude PNG uložen + +Žádné externí webové prohlížeče, žádný headless Chrome, jen čistý Java kód. + +## Step 1: Create an empty HTML document (create empty html java) + +The first thing we need is a clean slate—a blank HTML document object that we can manipulate programmatically. Aspose.HTML provides the `HTMLDocument` class which behaves like a mini browser engine. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Why start with an empty document? Because it guarantees that no stray markup or previous state interferes with the table we’re about to build. It’s the Java equivalent of calling `document.open()` in a browser. + +## Step 2: Write a minimal HTML page that contains an empty table (create html document java) + +Next we inject a tiny HTML skeleton. The page includes a `
` placeholder and a few CSS rules to make the table look decent when rendered. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Notice how we **create html document java** by feeding a raw string to `write`. This approach is handy when the HTML is generated on the fly, and it avoids the need for external template files. + +## Step 3: Populate the HTML table with JavaScript (populate html table javascript) + +Now comes the fun part—adding rows to the table using JavaScript. We’ll craft a short script that loops five times, inserting a row each iteration and filling two cells: one with the row number and another with “Even” or “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Why use JavaScript here? Because many real‑world pages build tables dynamically—think dashboards, reports, or client‑side data grids. By **populate html table javascript** inside the Aspose engine, we mimic exactly what would happen in a browser, ensuring the rendered PNG looks identical to what a user would see. + +## Step 4: Execute the script inside the document’s sandbox + +Aspose.HTML gives us a `Window` object that behaves like a browser’s `window`. Calling `eval` runs our script in an isolated environment, so no external network calls are made. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +A common pitfall is forgetting to wait for the script to finish before rendering. In this simple case the script runs synchronously, so we can move straight to the next step. If you ever embed asynchronous code (e.g., `fetch`), you’d need to hook into the `onload` event or use a `Promise`‑based wait. + +## Step 5: Configure image‑save options (render html to png) + +Before we actually rasterize the page, we decide how big the output image should be. The `ImageSaveOptions` class lets us set width, height, and a few quality parameters. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Choosing a reasonable canvas size is crucial for a clean **render html to png** result. Too small and text gets clipped; too large and you waste memory. 800×600 is a safe middle ground for most tables. + +## Step 6: Convert the populated HTML page to a PNG image (convert html to png) + +Finally, we call the static `Converter.convertHTML` method. It takes the `HTMLDocument`, the save options, and the target file path. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Replace `YOUR_DIRECTORY` with an absolute or relative path that exists on your machine. After the program finishes, you’ll find `table.png` showing a nicely formatted table with five rows, alternating “Even”/“Odd” labels. + +> **Pro tip:** If you need a transparent background, enable it via `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Full, Ready‑to‑Run Example + +Below is the complete Java class that puts everything together. Copy‑paste it into `JsDomManipulation.java`, adjust the output folder, and run it. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Expected output + +When you open `table.png`, you should see something like this: + +![příklad výstupu převodu html na png](https://example.com/assets/table.png "convert html to png – rendered table") + +The image displays a 5‑row table with the “Row 1 – Odd” … “Row 5 – Odd” pattern, styled with thin borders and padding. + +## Common pitfalls and how to avoid them + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Script runs after rendering** | Asynchronous code (e.g., `setTimeout`) isn’t awaited. | Use `window.onload` or block until `document.readyState === 'complete'`. | +| **Image is blank** | No content within the viewport (width/height set to 0). | Ensure `ImageSaveOptions` dimensions are non‑zero and match the page layout. | +| **Table rows are cut off** | Canvas too small for the table height. | Increase `imageOptions.setHeight` or use `imageOptions.setFitToPage(true)`. | +| **Missing CSS** | Inline style omitted or external CSS not loaded. | Keep all required CSS inside the ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Waarom dit belangrijk is:** Wanneer je *HTML opslaat als PDF*, leest de converter de CSS, afbeeldingen en lettertypen net als een browser. Het naast de HTML houden van assets (of het gebruiken van absolute URL's) voorkomt kapotte koppelingen in de uiteindelijke PDF. + +## Stap 3: Configureer PDF‑opslaanopties + +`PdfSaveOptions` stelt je in staat om zaken te regelen zoals PDF‑versie, compressie en of lettertypen moeten worden ingebed. Voor de meeste scenario's werken de standaardinstellingen prima, maar zo kun je ze aanpassen. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Let op:** Als je *html file pdf converteert* op een headless server, kan het uitschakelen van lettertype‑embedding de bestandsgrootte drastisch verkleinen, maar loop je het risico op ontbrekende tekens voor niet‑ASCII‑talen. + +## Stap 4: Voer de conversie uit + +Nu gebeurt de magie. De `Converter.convertHTML`‑methode leest de HTML, past de opties toe en schrijft de PDF in één oproep. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Uitleg:** +> - `htmlFilePath` kan een relatief of absoluut pad zijn; de converter lost het op zoals een browser dat zou doen. +> - `pdfOptions` bevat alle *save html as pdf* voorkeuren die je eerder hebt ingesteld. +> - Het derde argument is het doel‑PDF‑bestand; Aspose maakt het bestand automatisch aan als het niet bestaat. + +### Verwachte output + +Het uitvoeren van het programma maakt `output.pdf` die er precies uitziet als de gerenderde `sample.html`—de kop in blauw, de alinea eronder, en dezelfde marges. Open het in een PDF‑viewer om te bevestigen. + +## Stap 5: Verifieer het resultaat & behandel veelvoorkomende problemen + +### Verifiëren + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Veelvoorkomende valkuilen + +| Symptoom | Waarschijnlijke oorzaak | Oplossing | +|----------|--------------------------|-----------| +| Afbeeldingen ontbreken | Relatieve paden niet opgelost | Gebruik absolute URL's of stel `baseUri` in `HTMLDocument` in | +| Lettertypen zien er verkeerd uit | Lettertypen niet ingebed | Roep `pdfOptions.setEmbedStandardPdfFonts(true)` aan | +| Lay‑outverschuiving | CSS `@media print`‑regels genegeerd | Zorg ervoor dat CSS compatibel is met de rendering‑engine van Aspose | +| Conversie loopt vast bij grote bestanden | Onvoldoende heap‑geheugen | Verhoog de JVM `-Xmx`‑vlag (bijv. `-Xmx2g`) | + +> **Randgeval:** Als je een HTML‑string direct moet converteren (geen bestand), wikkel deze dan in een `HTMLDocument` en geef het documentobject door aan `Converter.convertHTML`. Dit is handig bij het dynamisch genereren van HTML, bijvoorbeeld vanuit een template‑engine. + +## Geavanceerde variaties + +### Een web‑URL converteren + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Een header/footer toevoegen + +Aspose.HTML laat je header/footer‑inhoud injecteren via CSS `@page`. Voorbeeld: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Plaats de CSS in je HTML of laad deze via een extern stylesheet vóór de conversie. + +### Batch‑conversie + +Wanneer je meerdere HTML‑bestanden hebt, doet een eenvoudige lus het werk: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Conclusie + +Je hebt nu een compleet, productie‑klaar recept om **PDF van HTML te maken** met Java. Door Aspose.HTML te importeren, `PdfSaveOptions` te configureren en `Converter.convertHTML` aan te roepen, kun je *html to pdf java* in één regel code. + +Vanaf hier kun je meer geavanceerde scenario's verkennen—watermerken toevoegen, PDF's versleutelen, of meerdere HTML‑pagina's samenvoegen tot één document. Al deze bouwen voort op dezelfde kernstappen die je zojuist hebt beheerst. + +Heb je vragen over *save html as pdf* eigenaardigheden, of heb je hulp nodig bij het afstemmen van de conversie voor een specifiek framework? Laat een reactie achter, 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/java/conversion-html-to-various-image-formats/_index.md b/html/dutch/java/conversion-html-to-various-image-formats/_index.md index 396d43363..a5539b4de 100644 --- a/html/dutch/java/conversion-html-to-various-image-formats/_index.md +++ b/html/dutch/java/conversion-html-to-various-image-formats/_index.md @@ -95,6 +95,8 @@ Leer hoe je HTML naar GIF kunt converteren in Java met Aspose.HTML. Een uitgebre Leer HTML naar JPEG te converteren met Aspose.HTML for Java. Stap‑voor‑stap gids voor naadloze documentverwerking. ### [HTML naar PNG converteren](./convert-html-to-png/) Leer hoe je HTML naar PNG‑afbeeldingen kunt converteren in Java met Aspose.HTML. Een uitgebreide gids met stap‑voor‑stap instructies. +### [HTML naar PNG converteren – Java‑gids voor het renderen van HTML‑tabellen als afbeeldingen](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Leer hoe je HTML‑tabellen omzet naar PNG‑afbeeldingen met Aspose.HTML for Java in een eenvoudige stap‑voor‑stap gids. ### [HTML naar TIFF converteren](./convert-html-to-tiff/) Leer hoe je HTML eenvoudig naar TIFF kunt converteren met Aspose.HTML for Java. Stap‑voor‑stap gids voor efficiënte documentafhandeling. ### [HTML naar WebP – Complete Java-gids met Aspose.HTML](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/dutch/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/dutch/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..08156bdb0 --- /dev/null +++ b/html/dutch/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,208 @@ +--- +category: general +date: 2026-04-09 +description: Leer hoe je HTML naar PNG kunt converteren met Java. Deze tutorial behandelt + HTML naar PNG renderen, HTML‑tabel vullen met JavaScript, een HTML‑document maken + met Java en een lege HTML maken met Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: nl +og_description: html naar png converteren, eenvoudig gemaakt. Volg deze stapsgewijze + handleiding om html naar png te renderen, een html‑tabel te vullen met javascript + en een html‑document te maken met java. +og_title: HTML naar PNG converteren – Complete Java Rendering-gids +tags: +- Java +- Aspose.HTML +- Image rendering +title: html naar png converteren – Java‑gids voor het renderen van HTML‑tabellen als + afbeeldingen +url: /nl/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# html naar png converteren – Java‑gids voor het renderen van HTML‑tabellen als afbeeldingen + +Heb je ooit **html naar png** moeten converteren, maar wist je niet waar je moest beginnen? Je bent niet de enige. Veel ontwikkelaars lopen tegen een muur aan wanneer ze een dynamisch HTML‑fragment—vooral één dat met JavaScript is gebouwd—moeten omzetten naar een statische afbeelding. In deze tutorial lopen we een volledig, uitvoerbaar voorbeeld door dat een kleine HTML‑pagina neemt, een tabel vult met JavaScript, en uiteindelijk rendert als een PNG‑bestand met Aspose.HTML for Java. + +We behandelen ook gerelateerde onderwerpen zoals **render html to png**, hoe je **populate html table javascript** uitvoert, en de nuances van **create html document java** versus **create empty html java**. Aan het einde heb je een zelfstandige applicatie die je in elk Maven‑ of Gradle‑project kunt plaatsen en direct kunt uitvoeren. + +## Vereisten + +- Java 17 of nieuwer (de API werkt met Java 8+ maar we gebruiken de nieuwste LTS) +- Aspose.HTML for Java‑bibliotheek (beschikbaar via Maven Central) +- Een eenvoudige IDE of de gewone `javac`/`java`‑commandoregel +- Schrijfrechten voor een map waar de PNG wordt opgeslagen + +Geen externe webbrowsers, geen headless Chrome, alleen pure Java‑code. + +## Stap 1: Maak een leeg HTML‑document (create empty html java) + +Het eerste wat we nodig hebben is een schone lei—een leeg HTML‑documentobject dat we programmatisch kunnen manipuleren. Aspose.HTML biedt de `HTMLDocument`‑klasse die zich gedraagt als een mini‑browser‑engine. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Waarom beginnen met een leeg document? Omdat het garandeert dat geen losse markup of eerdere staat interfereert met de tabel die we gaan bouwen. Het is het Java‑equivalent van `document.open()` aanroepen in een browser. + +## Stap 2: Schrijf een minimale HTML‑pagina die een lege tabel bevat (create html document java) + +Vervolgens injecteren we een klein HTML‑skelet. De pagina bevat een `
`‑placeholder en een paar CSS‑regels om de tabel er netjes uit te laten zien bij het renderen. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Let op hoe we **create html document java** door een ruwe string aan `write` te geven. Deze aanpak is handig wanneer de HTML dynamisch wordt gegenereerd, en het voorkomt de noodzaak voor externe sjabloonbestanden. + +## Stap 3: Vul de HTML‑tabel met JavaScript (populate html table javascript) + +Nu komt het leuke deel—rijen toevoegen aan de tabel met JavaScript. We maken een kort script dat vijf keer doorloopt, elke iteratie een rij invoegt en twee cellen vult: één met het rijnummer en een andere met “Even” of “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Waarom hier JavaScript gebruiken? Omdat veel real‑world pagina’s tabellen dynamisch opbouwen—denk aan dashboards, rapporten of client‑side datagrids. Door **populate html table javascript** binnen de Aspose‑engine te gebruiken, boots we precies na wat er in een browser zou gebeuren, zodat de gerenderde PNG er identiek uitziet als wat een gebruiker zou zien. + +## Stap 4: Voer het script uit binnen de sandbox van het document + +Aspose.HTML geeft ons een `Window`‑object dat zich gedraagt als een browser‑`window`. Het aanroepen van `eval` voert ons script uit in een geïsoleerde omgeving, zodat er geen externe netwerkverzoeken worden gedaan. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Een veelvoorkomende valkuil is vergeten te wachten tot het script is voltooid vóór het renderen. In dit eenvoudige geval draait het script synchroon, dus kunnen we direct doorgaan naar de volgende stap. Als je ooit asynchrone code (bijv. `fetch`) insluit, moet je koppelen aan het `onload`‑event of een `Promise`‑gebaseerde wacht gebruiken. + +## Stap 5: Configureer afbeeldings‑opslaanopties (render html to png) + +Voordat we de pagina daadwerkelijk rasteren, bepalen we hoe groot de uitvoerafbeelding moet zijn. De `ImageSaveOptions`‑klasse laat ons breedte, hoogte en enkele kwaliteitsparameters instellen. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Het kiezen van een redelijke canvasgrootte is cruciaal voor een schoon **render html to png**‑resultaat. Te klein en tekst wordt afgesneden; te groot en je verspilt geheugen. 800×600 is een veilig compromis voor de meeste tabellen. + +## Stap 6: Converteer de gevulde HTML‑pagina naar een PNG‑afbeelding (convert html to png) + +Tot slot roepen we de statische methode `Converter.convertHTML` aan. Deze neemt het `HTMLDocument`, de opslaanopties en het doel‑bestandspad. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Vervang `YOUR_DIRECTORY` door een absoluut of relatief pad dat bestaat op jouw machine. Na het uitvoeren van het programma vind je `table.png` met een mooi opgemaakte tabel van vijf rijen, afwisselend “Even”/“Odd”‑labels. + +> **Pro tip:** Als je een transparante achtergrond nodig hebt, schakel deze in via `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Volledig, kant‑klaar voorbeeld + +Hieronder staat de volledige Java‑klasse die alles samenvoegt. Kopieer‑en plak deze in `JsDomManipulation.java`, pas de uitvoermap aan, en voer hem uit. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Verwachte output + +Wanneer je `table.png` opent, zou je iets dergelijks moeten zien: + +![voorbeeldoutput html naar png](https://example.com/assets/table.png "html naar png – gerenderde tabel") + +De afbeelding toont een tabel met 5 rijen met het patroon “Row 1 – Odd” … “Row 5 – Odd”, gestyled met dunne randen en opvulling. + +## Veelvoorkomende valkuilen en hoe ze te vermijden + +| Probleem | Waarom het gebeurt | Oplossing | +|----------|--------------------|-----------| +| **Script wordt uitgevoerd na het renderen** | Asynchrone code (bijv. `setTimeout`) wordt niet afgewacht. | Gebruik `window.onload` of blokkeer tot `document.readyState === 'complete'`. | +| **Afbeelding is leeg** | Geen inhoud binnen het viewport (breedte/hoogte ingesteld op 0). | Zorg ervoor dat de afmetingen van `ImageSaveOptions` niet nul zijn en overeenkomen met de paginalay-out. | +| **Tabelrijen worden afgekapt** | Canvas te klein voor de tabelhoogte. | Verhoog `imageOptions.setHeight` of gebruik `imageOptions.setFitToPage(true)`. | +| **Ontbrekende CSS** | Inline‑stijl weggelaten of externe CSS niet geladen. | Houd alle benodigde CSS binnen de ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Why this matters:** When you *save HTML as PDF*, the converter reads the CSS, images, and fonts just like a browser. Keeping assets beside the HTML (or using absolute URLs) prevents broken links in the final PDF. + +## Step 3: Configure PDF Save Options + +`PdfSaveOptions` let you control things like PDF version, compression, and whether to embed fonts. For most scenarios the defaults work fine, but here's how you can tweak them. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Watch out:** If you *convert html file pdf* on a headless server, disabling font embedding can dramatically reduce file size, but you risk missing characters for non‑ASCII languages. + +## Step 4: Perform the Conversion + +Now the magic happens. The `Converter.convertHTML` method reads the HTML, applies the options, and writes the PDF in one call. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Explanation:** +> - `htmlFilePath` can be a relative or absolute path; the converter resolves it just like a browser would. +> - `pdfOptions` carries all the *save html as pdf* preferences you set earlier. +> - The third argument is the destination PDF file; Aspose automatically creates the file if it doesn’t exist. + +### Expected Output + +Running the program creates `output.pdf` that looks exactly like the rendered `sample.html`—the heading in blue, the paragraph below, and the same margins. Open it in any PDF viewer to confirm. + +## Step 5: Verify the Result & Handle Common Issues + +### Verify + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Common Pitfalls + +| Symptom | Likely Cause | Fix | +|---------|--------------|-----| +| Images missing | Relative paths not resolved | Use absolute URLs or set `baseUri` in `HTMLDocument` | +| Fonts look wrong | Fonts not embedded | Call `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Layout shift | CSS `@media print` rules ignored | Ensure CSS is compatible with Aspose’s rendering engine | +| Conversion hangs on large files | Insufficient heap memory | Increase JVM `-Xmx` flag (e.g., `-Xmx2g`) | + +> **Edge case:** If you need to convert an HTML string directly (no file), wrap it in an `HTMLDocument` and pass the document object to `Converter.convertHTML`. This is handy when generating HTML on the fly, such as from a template engine. + +## Advanced Variations + +### Converting a Web URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Adding a Header/Footer + +Aspose.HTML lets you inject header/footer content via CSS `@page`. Example: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Place the CSS in your HTML or load it via an external stylesheet before conversion. + +### Batch Conversion + +When you have multiple HTML files, a simple loop does the trick: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Conclusion + +You now have a complete, production‑ready recipe to **create PDF from HTML** using Java. By importing Aspose.HTML, configuring `PdfSaveOptions`, and invoking `Converter.convertHTML`, you can *html to pdf java* in a single line of code. + +From here you might explore more sophisticated scenarios—adding watermarks, encrypting PDFs, or merging multiple HTML pages into one document. All of those build on the same core steps you just mastered. + +Got questions about *save html as pdf* quirks, or need help tweaking the conversion for a specific framework? Drop a comment, 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/java/conversion-html-to-various-image-formats/_index.md b/html/english/java/conversion-html-to-various-image-formats/_index.md index 931d443cc..994e080b0 100644 --- a/html/english/java/conversion-html-to-various-image-formats/_index.md +++ b/html/english/java/conversion-html-to-various-image-formats/_index.md @@ -94,6 +94,7 @@ Learn how to convert HTML to GIF in Java using Aspose.HTML. A comprehensive step Learn to convert HTML to JPEG with Aspose.HTML for Java. Step-by-step guide for seamless document processing. ### [Converting HTML to PNG](./convert-html-to-png/) Learn how to convert HTML to PNG images in Java with Aspose.HTML. A comprehensive guide with step-by-step instructions. +### [convert html to png – Java guide to rendering HTML tables as images](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) ### [Converting HTML to TIFF](./convert-html-to-tiff/) Learn how to easily convert HTML to TIFF using Aspose.HTML for Java. Step-by-step guide for efficient document handling. ### [Convert HTML to WebP – Complete Java Guide with Aspose.HTML](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/english/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/english/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..470d5a09f --- /dev/null +++ b/html/english/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,206 @@ +--- +category: general +date: 2026-04-09 +description: Learn how to convert html to png using Java. This tutorial covers render + html to png, populate html table javascript, create html document java and create + empty html java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: en +og_description: convert html to png made easy. Follow this step‑by‑step guide to render + html to png, populate html table javascript, and create html document java. +og_title: convert html to png – Complete Java Rendering Guide +tags: +- Java +- Aspose.HTML +- Image rendering +title: convert html to png – Java guide to rendering HTML tables as images +url: /java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – Java guide to rendering HTML tables as images + +Ever needed to **convert html to png** but weren't sure where to start? You're not alone. Many developers hit a wall when they have to turn a dynamic HTML snippet—especially one built with JavaScript—into a static image. In this tutorial we’ll walk through a complete, runnable example that takes a tiny HTML page, populates a table with JavaScript, and finally renders it as a PNG file using Aspose.HTML for Java. + +We'll also touch on related topics like **render html to png**, how to **populate html table javascript**, and the nuances of **create html document java** versus **create empty html java**. By the end you’ll have a self‑contained program you can drop into any Maven or Gradle project and run instantly. + +## Prerequisites + +- Java 17 or newer (the API works with Java 8+ but we’ll use the latest LTS) +- Aspose.HTML for Java library (available via Maven Central) +- A modest IDE or plain `javac`/`java` command line +- Write permission to a folder where the PNG will be saved + +No external web browsers, no headless Chrome, just pure Java code. + +## Step 1: Create an empty HTML document (create empty html java) + +The first thing we need is a clean slate—a blank HTML document object that we can manipulate programmatically. Aspose.HTML provides the `HTMLDocument` class which behaves like a mini browser engine. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Why start with an empty document? Because it guarantees that no stray markup or previous state interferes with the table we’re about to build. It’s the Java equivalent of calling `document.open()` in a browser. + +## Step 2: Write a minimal HTML page that contains an empty table (create html document java) + +Next we inject a tiny HTML skeleton. The page includes a `
` placeholder and a few CSS rules to make the table look decent when rendered. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Notice how we **create html document java** by feeding a raw string to `write`. This approach is handy when the HTML is generated on the fly, and it avoids the need for external template files. + +## Step 3: Populate the HTML table with JavaScript (populate html table javascript) + +Now comes the fun part—adding rows to the table using JavaScript. We’ll craft a short script that loops five times, inserting a row each iteration and filling two cells: one with the row number and another with “Even” or “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Why use JavaScript here? Because many real‑world pages build tables dynamically—think dashboards, reports, or client‑side data grids. By **populate html table javascript** inside the Aspose engine, we mimic exactly what would happen in a browser, ensuring the rendered PNG looks identical to what a user would see. + +## Step 4: Execute the script inside the document’s sandbox + +Aspose.HTML gives us a `Window` object that behaves like a browser’s `window`. Calling `eval` runs our script in an isolated environment, so no external network calls are made. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +A common pitfall is forgetting to wait for the script to finish before rendering. In this simple case the script runs synchronously, so we can move straight to the next step. If you ever embed asynchronous code (e.g., `fetch`), you’d need to hook into the `onload` event or use a `Promise`‑based wait. + +## Step 5: Configure image‑save options (render html to png) + +Before we actually rasterize the page, we decide how big the output image should be. The `ImageSaveOptions` class lets us set width, height, and a few quality parameters. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Choosing a reasonable canvas size is crucial for a clean **render html to png** result. Too small and text gets clipped; too large and you waste memory. 800×600 is a safe middle ground for most tables. + +## Step 6: Convert the populated HTML page to a PNG image (convert html to png) + +Finally, we call the static `Converter.convertHTML` method. It takes the `HTMLDocument`, the save options, and the target file path. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Replace `YOUR_DIRECTORY` with an absolute or relative path that exists on your machine. After the program finishes, you’ll find `table.png` showing a nicely formatted table with five rows, alternating “Even”/“Odd” labels. + +> **Pro tip:** If you need a transparent background, enable it via `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Full, Ready‑to‑Run Example + +Below is the complete Java class that puts everything together. Copy‑paste it into `JsDomManipulation.java`, adjust the output folder, and run it. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Expected output + +When you open `table.png`, you should see something like this: + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +The image displays a 5‑row table with the “Row 1 – Odd” … “Row 5 – Odd” pattern, styled with thin borders and padding. + +## Common pitfalls and how to avoid them + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Script runs after rendering** | Asynchronous code (e.g., `setTimeout`) isn’t awaited. | Use `window.onload` or block until `document.readyState === 'complete'`. | +| **Image is blank** | No content within the viewport (width/height set to 0). | Ensure `ImageSaveOptions` dimensions are non‑zero and match the page layout. | +| **Table rows are cut off** | Canvas too small for the table height. | Increase `imageOptions.setHeight` or use `imageOptions.setFitToPage(true)`. | +| **Missing CSS** | Inline style omitted or external CSS not loaded. | Keep all required CSS inside the ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Pourquoi c'est important :** Lorsque vous *enregistrez du HTML en PDF*, le convertisseur lit le CSS, les images et les polices comme le ferait un navigateur. Garder les ressources à côté du HTML (ou utiliser des URL absolues) évite les liens brisés dans le PDF final. + +## Étape 3 : Configurer les options d'enregistrement PDF + +`PdfSaveOptions` vous permet de contrôler des éléments tels que la version du PDF, la compression et l'incorporation des polices. Pour la plupart des scénarios, les valeurs par défaut fonctionnent bien, mais voici comment les ajuster. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Attention :** Si vous *convertissez un fichier HTML en PDF* sur un serveur sans interface graphique, désactiver l'incorporation des polices peut réduire considérablement la taille du fichier, mais vous risquez de perdre des caractères pour les langues non‑ASCII. + +## Étape 4 : Effectuer la conversion + +Maintenant, la magie opère. La méthode `Converter.convertHTML` lit le HTML, applique les options et écrit le PDF en un seul appel. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Explication :** +> - `htmlFilePath` peut être un chemin relatif ou absolu ; le convertisseur le résout comme le ferait un navigateur. +> - `pdfOptions` contient toutes les préférences *save html as pdf* que vous avez définies précédemment. +> - Le troisième argument est le fichier PDF de destination ; Aspose crée automatiquement le fichier s'il n'existe pas. + +### Résultat attendu + +L'exécution du programme crée `output.pdf` qui ressemble exactement au `sample.html` rendu — le titre en bleu, le paragraphe en dessous, et les mêmes marges. Ouvrez-le dans n'importe quel lecteur PDF pour confirmer. + +## Étape 5 : Vérifier le résultat et gérer les problèmes courants + +### Vérifier + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Pièges courants + +| Symptôme | Cause probable | Solution | +|----------|----------------|----------| +| Images manquantes | Chemins relatifs non résolus | Utilisez des URL absolues ou définissez `baseUri` dans `HTMLDocument` | +| Polices incorrectes | Polices non incorporées | Appelez `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Déplacement de mise en page | Règles CSS `@media print` ignorées | Assurez-vous que le CSS est compatible avec le moteur de rendu d'Aspose | +| Conversion bloquée sur de gros fichiers | Mémoire heap insuffisante | Augmentez le drapeau JVM `-Xmx` (par ex., `-Xmx2g`) | + +> **Cas particulier :** Si vous devez convertir directement une chaîne HTML (sans fichier), encapsulez‑la dans un `HTMLDocument` et passez l'objet document à `Converter.convertHTML`. Cela est pratique lors de la génération de HTML à la volée, par exemple depuis un moteur de templates. + +## Variantes avancées + +### Conversion d'une URL Web + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Ajout d'un en-tête/pied de page + +Aspose.HTML vous permet d'injecter du contenu d'en-tête/pied de page via le CSS `@page`. Exemple : + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Placez le CSS dans votre HTML ou chargez‑le via une feuille de style externe avant la conversion. + +### Conversion par lots + +Lorsque vous avez plusieurs fichiers HTML, une simple boucle fait l'affaire : + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Conclusion + +Vous disposez maintenant d'une recette complète, prête pour la production, pour **créer un PDF à partir de HTML** en Java. En important Aspose.HTML, en configurant `PdfSaveOptions` et en appelant `Converter.convertHTML`, vous pouvez *html to pdf java* en une seule ligne de code. + +À partir de là, vous pouvez explorer des scénarios plus sophistiqués — ajouter des filigranes, chiffrer des PDF, ou fusionner plusieurs pages HTML en un seul document. Tous ces cas s'appuient sur les mêmes étapes de base que vous venez de maîtriser. + +Des questions sur les particularités du *save html as pdf*, ou besoin d'aide pour ajuster la conversion pour un framework spécifique ? Laissez un commentaire, 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/java/conversion-html-to-various-image-formats/_index.md b/html/french/java/conversion-html-to-various-image-formats/_index.md index 0ebefa3bd..33b021dad 100644 --- a/html/french/java/conversion-html-to-various-image-formats/_index.md +++ b/html/french/java/conversion-html-to-various-image-formats/_index.md @@ -2,7 +2,7 @@ date: 2025-12-19 description: Apprenez à convertir HTML, GIF et d’autres formats tels que BMP, JPEG, PNG et TIFF à l’aide d’Aspose.HTML pour Java. Ce guide couvre la conversion efficace - de HTML en image. +de HTML en image. linktitle: Conversion - HTML to Various Image Formats second_title: Java HTML Processing with Aspose.HTML title: convertir html gif – Conversion du HTML en différents formats d'image @@ -90,6 +90,8 @@ Apprenez à convertir HTML en GIF en Java avec Aspose.HTML. Un guide complet ét Apprenez à convertir HTML en JPEG avec Aspose.HTML for Java. Guide étape par étape pour un traitement de documents fluide. ### [Conversion d'HTML en PNG](./convert-html-to-png/) Apprenez à convertir HTML en images PNG en Java avec Aspose.HTML. Un guide complet avec des instructions étape par étape. +### [Conversion d'HTML en PNG – Guide Java pour rendre les tableaux HTML en images](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Apprenez à convertir des tableaux HTML en images PNG avec Aspose.HTML for Java, étape par étape. ### [Conversion d'HTML en TIFF](./convert-html-to-tiff/) Apprenez à convertir facilement HTML en TIFF avec Aspose.HTML for Java. Guide étape par étape pour une gestion efficace des documents. ### [Conversion d'HTML en WebP](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/french/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/french/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..a2c0ac32b --- /dev/null +++ b/html/french/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Apprenez à convertir le HTML en PNG avec Java. Ce tutoriel couvre le + rendu du HTML en PNG, le remplissage d’un tableau HTML avec JavaScript, la création + d’un document HTML en Java et la création d’un HTML vide en Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: fr +og_description: Convertir du HTML en PNG, c’est facile. Suivez ce guide étape par + étape pour rendre le HTML en PNG, remplir un tableau HTML avec JavaScript et créer + un document HTML avec Java. +og_title: Convertir HTML en PNG – Guide complet du rendu Java +tags: +- Java +- Aspose.HTML +- Image rendering +title: convertir html en png – Guide Java pour rendre les tableaux HTML en images +url: /fr/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convertir html en png – Guide Java pour rendre des tableaux HTML en images + +Vous avez déjà eu besoin de **convertir html en png** sans savoir par où commencer ? Vous n'êtes pas seul. De nombreux développeurs se heurtent à un mur lorsqu'ils doivent transformer un extrait HTML dynamique—surtout s'il est généré avec JavaScript—en une image statique. Dans ce tutoriel, nous parcourrons un exemple complet et exécutable qui prend une petite page HTML, remplit un tableau avec JavaScript, puis le rend enfin sous forme de fichier PNG grâce à Aspose.HTML for Java. + +Nous aborderons également des sujets connexes comme **render html to png**, comment **populate html table javascript**, et les nuances entre **create html document java** et **create empty html java**. À la fin, vous disposerez d’un programme autonome que vous pourrez intégrer à n’importe quel projet Maven ou Gradle et exécuter immédiatement. + +## Prérequis + +- Java 17 ou supérieur (l’API fonctionne avec Java 8+, mais nous utiliserons la dernière LTS) +- Bibliothèque Aspose.HTML for Java (disponible via Maven Central) +- Un IDE modeste ou simplement la ligne de commande `javac`/`java` +- Permission d’écriture dans un dossier où le PNG sera enregistré + +Pas de navigateurs web externes, pas de Chrome headless, uniquement du code Java pur. + +## Étape 1 : Créer un document HTML vide (create empty html java) + +La première chose dont nous avons besoin est une page blanche—un objet document HTML vierge que nous pouvons manipuler programmaticalement. Aspose.HTML fournit la classe `HTMLDocument` qui se comporte comme un mini moteur de navigateur. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Pourquoi commencer avec un document vide ? Parce que cela garantit qu’aucun balisage parasite ou état précédent n’interfère avec le tableau que nous allons construire. C’est l’équivalent Java de l’appel `document.open()` dans un navigateur. + +## Étape 2 : Écrire une page HTML minimale contenant un tableau vide (create html document java) + +Ensuite, nous injectons un petit squelette HTML. La page comprend un espace réservé `
` et quelques règles CSS pour que le tableau ait un rendu correct. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Remarquez comment nous **create html document java** en alimentant `write` avec une chaîne brute. Cette approche est pratique lorsque le HTML est généré à la volée, et elle évite le besoin de fichiers de modèle externes. + +## Étape 3 : Remplir le tableau HTML avec JavaScript (populate html table javascript) + +Vient maintenant la partie amusante — ajouter des lignes au tableau avec JavaScript. Nous allons créer un petit script qui boucle cinq fois, insérant une ligne à chaque itération et remplissant deux cellules : l’une avec le numéro de ligne et l’autre avec « Even » ou « Odd ». + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Pourquoi utiliser JavaScript ici ? Parce que de nombreuses pages réelles construisent des tableaux dynamiquement—pensez aux tableaux de bord, aux rapports ou aux grilles de données côté client. En **populate html table javascript** à l’intérieur du moteur Aspose, nous reproduisons exactement ce qui se passerait dans un navigateur, garantissant que le PNG rendu ressemble à ce que verrait l’utilisateur. + +## Étape 4 : Exécuter le script dans le bac à sable du document + +Aspose.HTML nous fournit un objet `Window` qui se comporte comme le `window` d’un navigateur. Appeler `eval` exécute notre script dans un environnement isolé, sans appels réseau externes. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Un piège fréquent consiste à oublier d’attendre la fin du script avant le rendu. Dans ce cas simple, le script s’exécute de façon synchrone, nous pouvons donc passer directement à l’étape suivante. Si vous intégrez du code asynchrone (par ex., `fetch`), il faudra se brancher sur l’événement `onload` ou utiliser une attente basée sur `Promise`. + +## Étape 5 : Configurer les options de sauvegarde d’image (render html to png) + +Avant de rasteriser la page, nous décidons de la taille de l’image de sortie. La classe `ImageSaveOptions` nous permet de définir la largeur, la hauteur et quelques paramètres de qualité. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Choisir une taille de canevas raisonnable est crucial pour obtenir un résultat **render html to png** propre. Trop petit et le texte est tronqué ; trop grand et vous gaspillez de la mémoire. 800×600 constitue un compromis sûr pour la plupart des tableaux. + +## Étape 6 : Convertir la page HTML remplie en image PNG (convert html to png) + +Enfin, nous appelons la méthode statique `Converter.convertHTML`. Elle prend le `HTMLDocument`, les options de sauvegarde et le chemin du fichier cible. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Remplacez `YOUR_DIRECTORY` par un chemin absolu ou relatif qui existe sur votre machine. Après l’exécution du programme, vous trouverez `table.png` affichant un tableau joliment formaté avec cinq lignes, les libellés « Even »/« Odd » en alternance. + +> **Astuce :** Si vous avez besoin d’un arrière‑plan transparent, activez‑le via `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Exemple complet, prêt à l’exécution + +Voici la classe Java complète qui assemble tous les éléments. Copiez‑collez‑la dans `JsDomManipulation.java`, ajustez le dossier de sortie, puis lancez‑la. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Résultat attendu + +Lorsque vous ouvrez `table.png`, vous devriez voir quelque chose comme ceci : + +![exemple de conversion html en png](https://example.com/assets/table.png "convert html to png – tableau rendu") + +L’image montre un tableau de 5 lignes avec le motif « Row 1 – Odd » … « Row 5 – Odd », stylisé avec des bordures fines et du padding. + +## Problèmes courants et comment les éviter + +| Problème | Pourquoi cela se produit | Solution | +|----------|--------------------------|----------| +| **Le script s’exécute après le rendu** | Le code asynchrone (par ex., `setTimeout`) n’est pas attendu. | Utilisez `window.onload` ou bloquez jusqu’à `document.readyState === 'complete'`. | +| **L’image est blanche** | Aucun contenu dans la zone de visualisation (largeur/hauteur à 0). | Assurez‑vous que les dimensions de `ImageSaveOptions` sont non nulles et correspondent à la mise en page. | +| **Les lignes du tableau sont coupées** | Canevas trop petit pour la hauteur du tableau. | Augmentez `imageOptions.setHeight` ou activez `imageOptions.setFitToPage(true)`. | +| **CSS manquant** | Style en ligne omis ou CSS externe non chargé. | Gardez tout le CSS requis dans la balise ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Warum das wichtig ist:** Wenn Sie *HTML als PDF speichern*, liest der Konverter CSS, Bilder und Schriftarten wie ein Browser. Wenn Sie die Assets neben dem HTML halten (oder absolute URLs verwenden), verhindern Sie defekte Links im finalen PDF. + +## Schritt 3: PDF‑Speicheroptionen konfigurieren + +`PdfSaveOptions` ermöglichen Ihnen die Kontrolle über Dinge wie PDF‑Version, Kompression und ob Schriftarten eingebettet werden. Für die meisten Szenarien funktionieren die Vorgaben, aber hier erfahren Sie, wie Sie sie anpassen können. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Achtung:** Wenn Sie *html file pdf* auf einem headless Server konvertieren, kann das Deaktivieren der Schriftarteinbettung die Dateigröße drastisch reduzieren, aber Sie riskieren fehlende Zeichen für Nicht‑ASCII‑Sprachen. + +## Schritt 4: Die Konvertierung durchführen + +Jetzt passiert die Magie. Die Methode `Converter.convertHTML` liest das HTML, wendet die Optionen an und schreibt das PDF in einem Aufruf. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Erklärung:** +> - `htmlFilePath` kann ein relativer oder absoluter Pfad sein; der Konverter löst ihn genauso auf wie ein Browser. +> - `pdfOptions` enthält alle *save html as pdf*-Einstellungen, die Sie zuvor festgelegt haben. +> - Das dritte Argument ist die Ziel‑PDF‑Datei; Aspose erstellt die Datei automatisch, falls sie nicht existiert. + +### Erwartete Ausgabe + +Das Ausführen des Programms erzeugt `output.pdf`, das genau wie das gerenderte `sample.html` aussieht — die Überschrift in Blau, der darunterstehende Absatz und dieselben Ränder. Öffnen Sie es in einem beliebigen PDF‑Betrachter, um dies zu bestätigen. + +## Schritt 5: Ergebnis überprüfen & häufige Probleme behandeln + +### Überprüfen + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Häufige Fallstricke + +| Symptom | Wahrscheinliche Ursache | Lösung | +|---------|--------------------------|--------| +| Bilder fehlen | Relative Pfade nicht aufgelöst | Verwenden Sie absolute URLs oder setzen Sie `baseUri` in `HTMLDocument` | +| Schriftarten sehen falsch aus | Schriftarten nicht eingebettet | Rufen Sie `pdfOptions.setEmbedStandardPdfFonts(true)` auf | +| Layoutverschiebung | CSS `@media print`‑Regeln werden ignoriert | Stellen Sie sicher, dass das CSS mit der Rendering‑Engine von Aspose kompatibel ist | +| Konvertierung hängt bei großen Dateien | Unzureichender Heap‑Speicher | Erhöern Sie das JVM‑Flag `-Xmx` (z. B. `-Xmx2g`) | + +> **Sonderfall:** Wenn Sie einen HTML‑String direkt konvertieren müssen (keine Datei), wickeln Sie ihn in ein `HTMLDocument` ein und übergeben das Dokumentobjekt an `Converter.convertHTML`. Das ist praktisch, wenn HTML on the fly generiert wird, z. B. aus einer Template‑Engine. + +## Erweiterte Varianten + +### Konvertieren einer Web‑URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Hinzufügen von Kopf‑/Fußzeile + +Aspose.HTML ermöglicht das Einfügen von Kopf‑/Fußzeilen‑Inhalt über CSS `@page`. Beispiel: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Platzieren Sie das CSS in Ihrem HTML oder laden Sie es vor der Konvertierung über ein externes Stylesheet. + +### Stapelkonvertierung + +Wenn Sie mehrere HTML‑Dateien haben, erledigt eine einfache Schleife die Aufgabe: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Fazit + +Sie haben nun ein vollständiges, produktionsreifes Rezept, um **PDF aus HTML** mit Java zu **erstellen**. Durch das Importieren von Aspose.HTML, das Konfigurieren von `PdfSaveOptions` und das Aufrufen von `Converter.convertHTML` können Sie *html to pdf java* in einer einzigen Codezeile durchführen. + +Ab hier können Sie komplexere Szenarien erkunden — Wasserzeichen hinzufügen, PDFs verschlüsseln oder mehrere HTML‑Seiten zu einem Dokument zusammenführen. All das baut auf denselben Kernschritten auf, die Sie gerade gemeistert haben. + +Haben Sie Fragen zu *save html as pdf*-Eigenheiten oder benötigen Hilfe beim Anpassen der Konvertierung für ein bestimmtes Framework? Hinterlassen Sie einen Kommentar, und viel Spaß beim Coden! + +{{< /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/java/conversion-html-to-various-image-formats/_index.md b/html/german/java/conversion-html-to-various-image-formats/_index.md index f78c48517..b62c905fd 100644 --- a/html/german/java/conversion-html-to-various-image-formats/_index.md +++ b/html/german/java/conversion-html-to-various-image-formats/_index.md @@ -90,6 +90,8 @@ Erfahren Sie, wie Sie HTML in GIF mit Java und Aspose.HTML konvertieren. Ein umf Erfahren Sie, wie Sie HTML mit Aspose.HTML for Java in JPEG konvertieren. Schritt‑für‑Schritt‑Leitfaden für nahtlose Dokumentenverarbeitung. ### [HTML in PNG konvertieren](./convert-html-to-png/) Erfahren Sie, wie Sie HTML in PNG‑Bilder mit Java und Aspose.HTML konvertieren. Ein umfassender Leitfaden mit Schritt‑für‑Schritt‑Anweisungen. +### [HTML in PNG konvertieren – Java‑Leitfaden zur Darstellung von HTML‑Tabellen als Bilder](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Erfahren Sie, wie Sie HTML‑Tabellen mit Aspose.HTML for Java in PNG‑Bilder rendern – Schritt‑für‑Schritt‑Anleitung. ### [HTML in TIFF konvertieren](./convert-html-to-tiff/) Erfahren Sie, wie Sie HTML einfach mit Aspose.HTML for Java in TIFF konvertieren. Schritt‑für‑Schritt‑Leitfaden für effiziente Dokumentenverarbeitung. ### [HTML in WebP konvertieren](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/german/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/german/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..24b57586d --- /dev/null +++ b/html/german/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,209 @@ +--- +category: general +date: 2026-04-09 +description: Erfahren Sie, wie Sie HTML mit Java in PNG konvertieren. Dieses Tutorial + behandelt das Rendern von HTML zu PNG, das Befüllen von HTML-Tabellen mit JavaScript, + das Erstellen von HTML-Dokumenten mit Java und das Erstellen von leerem HTML mit + Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: de +og_description: HTML in PNG konvertieren leicht gemacht. Folgen Sie dieser Schritt‑für‑Schritt‑Anleitung, + um HTML in PNG zu rendern, HTML‑Tabellen mit JavaScript zu füllen und HTML‑Dokumente + mit Java zu erstellen. +og_title: HTML in PNG konvertieren – Vollständiger Java‑Rendering‑Leitfaden +tags: +- Java +- Aspose.HTML +- Image rendering +title: HTML in PNG konvertieren – Java‑Anleitung zur Darstellung von HTML‑Tabellen + als Bilder +url: /de/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTML zu PNG konvertieren – Java‑Leitfaden zum Rendern von HTML‑Tabellen als Bilder + +Hatten Sie jemals das Bedürfnis, **convert html to png** durchzuführen, wussten aber nicht, wo Sie anfangen sollen? Sie sind nicht allein. Viele Entwickler stoßen an Grenzen, wenn sie ein dynamisches HTML‑Snippet – insbesondere eines, das mit JavaScript erstellt wurde – in ein statisches Bild umwandeln müssen. In diesem Tutorial führen wir Sie durch ein komplettes, ausführbares Beispiel, das eine kleine HTML‑Seite nimmt, eine Tabelle mit JavaScript füllt und sie schließlich mit Aspose.HTML für Java als PNG‑Datei rendert. + +Wir werden auch verwandte Themen wie **render html to png**, **populate html table javascript** und die Nuancen von **create html document java** gegenüber **create empty html java** ansprechen. Am Ende haben Sie ein eigenständiges Programm, das Sie in jedes Maven‑ oder Gradle‑Projekt einbinden und sofort ausführen können. + +## Voraussetzungen + +- Java 17 oder neuer (die API funktioniert mit Java 8+, aber wir verwenden das neueste LTS) +- Aspose.HTML for Java Bibliothek (verfügbar über Maven Central) +- Eine einfache IDE oder die reine `javac`/`java`‑Kommandozeile +- Schreibberechtigung für einen Ordner, in dem das PNG gespeichert wird + +Keine externen Webbrowser, kein headless Chrome, nur reiner Java‑Code. + +## Schritt 1: Erstellen eines leeren HTML‑Dokuments (create empty html java) + +Das Erste, was wir benötigen, ist ein sauberer Start – ein leeres HTML‑Dokument‑Objekt, das wir programmgesteuert manipulieren können. Aspose.HTML stellt die Klasse `HTMLDocument` bereit, die sich wie eine Mini‑Browser‑Engine verhält. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Warum mit einem leeren Dokument beginnen? Weil es garantiert, dass kein fremdes Markup oder vorheriger Zustand die Tabelle, die wir bauen wollen, beeinträchtigt. Es ist das Java‑Äquivalent zu `document.open()` in einem Browser. + +## Schritt 2: Schreiben einer minimalen HTML‑Seite, die eine leere Tabelle enthält (create html document java) + +Als Nächstes fügen wir ein winziges HTML‑Gerüst ein. Die Seite enthält einen `
`‑Platzhalter und einige CSS‑Regeln, damit die Tabelle beim Rendern ansprechend aussieht. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Beachten Sie, wie wir **create html document java** durchführen, indem wir einen Roh‑String an `write` übergeben. Dieser Ansatz ist praktisch, wenn das HTML zur Laufzeit erzeugt wird, und er vermeidet die Notwendigkeit externer Vorlagendateien. + +## Schritt 3: Befüllen der HTML‑Tabelle mit JavaScript (populate html table javascript) + +Jetzt kommt der spaßige Teil – das Hinzufügen von Zeilen zur Tabelle mit JavaScript. Wir erstellen ein kurzes Skript, das fünfmal durchläuft, bei jeder Iteration eine Zeile einfügt und zwei Zellen füllt: eine mit der Zeilennummer und eine mit „Even“ oder „Odd“. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Warum hier JavaScript verwenden? Weil viele reale Seiten Tabellen dynamisch erstellen – denken Sie an Dashboards, Berichte oder clientseitige Daten‑Grids. Durch **populate html table javascript** innerhalb der Aspose‑Engine imitieren wir exakt das, was in einem Browser geschehen würde, und stellen sicher, dass das gerenderte PNG identisch mit dem ist, was ein Benutzer sehen würde. + +## Schritt 4: Ausführen des Skripts innerhalb der Sandbox des Dokuments + +Aspose.HTML stellt uns ein `Window`‑Objekt zur Verfügung, das sich wie das `window` eines Browsers verhält. Der Aufruf von `eval` führt unser Skript in einer isolierten Umgebung aus, sodass keine externen Netzwerkaufrufe erfolgen. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Ein häufiger Stolperstein ist das Vergessen, vor dem Rendern auf das Ende des Skripts zu warten. In diesem einfachen Fall läuft das Skript synchron, sodass wir direkt zum nächsten Schritt übergehen können. Wenn Sie jemals asynchronen Code einbetten (z. B. `fetch`), müssten Sie sich in das `onload`‑Ereignis einklinken oder auf ein `Promise`‑basiertes Warten zurückgreifen. + +## Schritt 5: Konfigurieren der Bild‑Speicheroptionen (render html to png) + +Bevor wir die Seite tatsächlich rasterisieren, entscheiden wir, wie groß das Ausgabebild sein soll. Die Klasse `ImageSaveOptions` ermöglicht das Festlegen von Breite, Höhe und einigen Qualitätsparametern. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Die Wahl einer angemessenen Canvas‑Größe ist entscheidend für ein sauberes **render html to png**‑Ergebnis. Zu klein und der Text wird abgeschnitten; zu groß und Sie verschwenden Speicher. 800 × 600 ist ein sicherer Mittelwert für die meisten Tabellen. + +## Schritt 6: Konvertieren der befüllten HTML‑Seite in ein PNG‑Bild (convert html to png) + +Schließlich rufen wir die statische Methode `Converter.convertHTML` auf. Sie erhält das `HTMLDocument`, die Speicheroptionen und den Zielpfad. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Ersetzen Sie `YOUR_DIRECTORY` durch einen absoluten oder relativen Pfad, der auf Ihrem Rechner existiert. Nach dem Abschluss des Programms finden Sie `table.png`, das eine schön formatierte Tabelle mit fünf Zeilen und abwechselnden „Even“/„Odd“-Beschriftungen zeigt. + +> **Pro‑Tipp:** Wenn Sie einen transparenten Hintergrund benötigen, aktivieren Sie ihn über `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Vollständiges, sofort ausführbares Beispiel + +Unten finden Sie die komplette Java‑Klasse, die alles zusammenführt. Kopieren Sie sie nach `JsDomManipulation.java`, passen Sie den Ausgabepfad an und führen Sie sie aus. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Erwartete Ausgabe + +Wenn Sie `table.png` öffnen, sollten Sie etwas Ähnliches sehen: + +![Beispielausgabe convert html to png](https://example.com/assets/table.png "convert html to png – gerenderte Tabelle") + +Das Bild zeigt eine 5‑Zeilen‑Tabelle mit dem Muster „Row 1 – Odd“ … „Row 5 – Odd“, gestaltet mit dünnen Rahmen und Abstand. + +## Häufige Stolperfallen und wie man sie vermeidet + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Skript läuft nach dem Rendern** | Asynchroner Code (z. B. `setTimeout`) wird nicht abgewartet. | Verwenden Sie `window.onload` oder blockieren Sie bis `document.readyState === 'complete'`. | +| **Bild ist leer** | Kein Inhalt im Sichtbereich (Breite/Höhe auf 0 gesetzt). | Stellen Sie sicher, dass die Dimensionen von `ImageSaveOptions` nicht null sind und zum Seitenlayout passen. | +| **Tabellenzeilen werden abgeschnitten** | Canvas ist zu klein für die Tabellenhöhe. | Erhöhen Sie `imageOptions.setHeight` oder verwenden Sie `imageOptions.setFitToPage(true)`. | +| **Fehlendes CSS** | Inline‑Stil fehlt oder externes CSS wurde nicht geladen. | Bewahren Sie sämtliches erforderliches CSS im ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Γιατί είναι σημαντικό:** Όταν *αποθηκεύετε HTML ως PDF*, ο μετατροπέας διαβάζει το CSS, τις εικόνες και τις γραμματοσειρές όπως ένας φυλλομετρητής. Η διατήρηση των πόρων δίπλα στο HTML (ή η χρήση απόλυτων URLs) αποτρέπει σπασμένους συνδέσμους στο τελικό PDF. + +## Βήμα 3: Διαμόρφωση Επιλογών Αποθήκευσης PDF + +`PdfSaveOptions` σας επιτρέπει να ελέγχετε στοιχεία όπως η έκδοση PDF, η συμπίεση και το αν θα ενσωματωθούν οι γραμματοσειρές. Για τις περισσότερες περιπτώσεις οι προεπιλογές λειτουργούν καλά, αλλά εδώ είναι πώς μπορείτε να τις προσαρμόσετε. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Προσοχή:** Αν *μετατρέψετε html σε pdf* σε έναν headless server, η απενεργοποίηση της ενσωμάτωσης γραμματοσειρών μπορεί να μειώσει δραστικά το μέγεθος του αρχείου, αλλά διατρέχετε κίνδυνο να λείπουν χαρακτήρες για μη‑ASCII γλώσσες. + +## Βήμα 4: Εκτέλεση της Μετατροπής + +Τώρα συμβαίνει η μαγεία. Η μέθοδος `Converter.convertHTML` διαβάζει το HTML, εφαρμόζει τις επιλογές και γράφει το PDF σε μία κλήση. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Εξήγηση:** +> - `htmlFilePath` μπορεί να είναι σχετική ή απόλυτη διαδρομή· ο μετατροπέας την επιλύει όπως θα έκανε ένας φυλλομετρητής. +> - `pdfOptions` μεταφέρει όλες τις προτιμήσεις *save html as pdf* που ορίσατε νωρίτερα. +> - Το τρίτο όρισμα είναι το αρχείο PDF προορισμού· το Aspose δημιουργεί αυτόματα το αρχείο αν δεν υπάρχει. + +### Αναμενόμενο Αποτέλεσμα + +Η εκτέλεση του προγράμματος δημιουργεί το `output.pdf` που φαίνεται ακριβώς όπως το αποδοθέν `sample.html` — ο τίτλος σε μπλε, η παράγραφος κάτω, και τα ίδια περιθώρια. Ανοίξτε το σε οποιονδήποτε προβολέα PDF για να το επιβεβαιώσετε. + +## Βήμα 5: Επαλήθευση του Αποτελέσματος & Διαχείριση Συνηθισμένων Προβλημάτων + +### Επαλήθευση + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Συνηθισμένα Προβλήματα + +| Σύμπτωμα | Πιθανή Αιτία | Διόρθωση | +|---------|--------------|-----| +| Εικόνες λείπουν | Οι σχετικές διαδρομές δεν επιλύονται | Χρησιμοποιήστε απόλυτα URLs ή ορίστε `baseUri` στο `HTMLDocument` | +| Οι γραμματοσειρές φαίνονται λανθασμένες | Γραμματοσειρές δεν ενσωματώνονται | Καλέστε `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Μετατόπιση διάταξης | Οι κανόνες CSS `@media print` αγνοούνται | Βεβαιωθείτε ότι το CSS είναι συμβατό με τη μηχανή απόδοσης του Aspose | +| Η μετατροπή κρέμεται σε μεγάλα αρχεία | Ανεπαρκής μνήμη heap | Αυξήστε τη σημαία JVM `-Xmx` (π.χ., `-Xmx2g`) | + +> **Ειδική περίπτωση:** Αν χρειαστεί να μετατρέψετε μια συμβολοσειρά HTML απευθείας (χωρίς αρχείο), τυλίξτε την σε ένα `HTMLDocument` και περάστε το αντικείμενο εγγράφου στη `Converter.convertHTML`. Αυτό είναι χρήσιμο όταν δημιουργείτε HTML εν κινήσει, όπως από μια μηχανή προτύπων. + +## Προχωρημένες Παραλλαγές + +### Μετατροπή Web URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Προσθήκη Κεφαλίδας/Υποσέλιδου + +Το Aspose.HTML σας επιτρέπει να ενσωματώσετε περιεχόμενο κεφαλίδας/υποσέλιδου μέσω CSS `@page`. Παράδειγμα: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Τοποθετήστε το CSS στο HTML σας ή φορτώστε το μέσω εξωτερικού stylesheet πριν τη μετατροπή. + +### Μαζική Μετατροπή + +Όταν έχετε πολλά αρχεία HTML, ένας απλός βρόχος κάνει τη δουλειά: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Συμπέρασμα + +Τώρα έχετε μια πλήρη, έτοιμη για παραγωγή συνταγή για **δημιουργία PDF από HTML** χρησιμοποιώντας Java. Εισάγοντας το Aspose.HTML, διαμορφώνοντας το `PdfSaveOptions` και καλώντας τη `Converter.convertHTML`, μπορείτε να *html to pdf java* σε μία μόνο γραμμή κώδικα. + +Από εδώ μπορείτε να εξερευνήσετε πιο σύνθετα σενάρια — προσθήκη υδατογραφιών, κρυπτογράφηση PDF, ή συγχώνευση πολλαπλών σελίδων HTML σε ένα έγγραφο. Όλα αυτά βασίζονται στα ίδια βασικά βήματα που μόλις μάθατε. + +Έχετε ερωτήσεις σχετικά με τις ιδιαιτερότητες του *save html as 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/greek/java/conversion-html-to-various-image-formats/_index.md b/html/greek/java/conversion-html-to-various-image-formats/_index.md index 1827545cc..4219a5cf3 100644 --- a/html/greek/java/conversion-html-to-various-image-formats/_index.md +++ b/html/greek/java/conversion-html-to-various-image-formats/_index.md @@ -96,8 +96,9 @@ weight: 24 Μάθετε να μετατρέπετε HTML σε JPEG με το Aspose.HTML για Java. Οδηγός βήμα‑βήμα για αδιάλειπτη επεξεργασία εγγράφων. ### [Μετατροπή HTML σε PNG](./convert-html-to-png/) Μάθετε πώς να μετατρέπετε HTML σε εικόνες PNG σε Java με το Aspose.HTML. Ένας ολοκληρωμένος οδηγός με οδηγίες βήμα‑βήμα. +### [Μετατροπή HTML σε PNG – Οδηγός Java για απόδοση πινάκων HTML ως εικόνες](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) ### [Μετατροπή HTML σε TIFF](./convert-html-to-tiff/) -Μάθετε πώς να μετατρέπετε εύκολα HTML σε TIFF χρησιμοποιώντας το Aspose.HTML για Java. Οδηγός βήμα‑βήμα για αποτελεσματική διαχείριση εγγράφων. +Μάθετε πώς να μετατρέψετε εύκολα HTML σε TIFF χρησιμοποιώντας το Aspose.HTML για Java. Οδηγός βήμα‑βήμα για αποτελεσματική διαχείριση εγγράφων. ### [Μετατροπή HTML σε WebP – Πλήρης Οδηγός Java με Aspose.HTML](./convert-html-to-webp-complete-java-guide-with-aspose-html/) ## Συχνές Ερωτήσεις diff --git a/html/greek/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/greek/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..a370095ba --- /dev/null +++ b/html/greek/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Μάθετε πώς να μετατρέπετε HTML σε PNG χρησιμοποιώντας τη Java. Αυτό το + σεμινάριο καλύπτει τη μετατροπή HTML σε PNG, τη συμπλήρωση πίνακα HTML με JavaScript, + τη δημιουργία εγγράφου HTML με Java και τη δημιουργία κενής HTML με Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: el +og_description: Η μετατροπή HTML σε PNG έγινε εύκολη. Ακολουθήστε αυτόν τον οδηγό + βήμα‑βήμα για να αποδώσετε HTML σε PNG, να γεμίσετε πίνακα HTML με JavaScript και + να δημιουργήσετε έγγραφο HTML με Java. +og_title: Μετατροπή HTML σε PNG – Πλήρης Οδηγός Απόδοσης Java +tags: +- Java +- Aspose.HTML +- Image rendering +title: Μετατροπή HTML σε PNG – Οδηγός Java για τη δημιουργία εικόνων από πίνακες HTML +url: /el/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# μετατροπή html σε png – Οδηγός Java για απόδοση πινάκων HTML ως εικόνες + +Έχετε ποτέ χρειαστεί να **convert html to png** αλλά δεν ήξερες από πού να ξεκινήσεις; Δεν είστε μόνοι. Πολλοί προγραμματιστές αντιμετωπίζουν πρόβλημα όταν πρέπει να μετατρέψουν ένα δυναμικό απόσπασμα HTML—ιδιαίτερα ένα που δημιουργείται με JavaScript—σε μια στατική εικόνα. Σε αυτό το tutorial θα περάσουμε βήμα-βήμα από ένα πλήρες, εκτελέσιμο παράδειγμα που παίρνει μια μικρή σελίδα HTML, γεμίζει έναν πίνακα με JavaScript και τελικά τον αποδίδει ως αρχείο PNG χρησιμοποιώντας το Aspose.HTML for Java. + +Θα αγγίξουμε επίσης σχετικά θέματα όπως **render html to png**, πώς να **populate html table javascript**, και τις λεπτομέρειες του **create html document java** σε σύγκριση με το **create empty html java**. Στο τέλος θα έχετε ένα αυτόνομο πρόγραμμα που μπορείτε να ενσωματώσετε σε οποιοδήποτε έργο Maven ή Gradle και να το εκτελέσετε αμέσως. + +## Προαπαιτούμενα + +- Java 17 ή νεότερη (το API λειτουργεί με Java 8+ αλλά θα χρησιμοποιήσουμε την πιο πρόσφατη LTS) +- Βιβλιοθήκη Aspose.HTML for Java (διαθέσιμη μέσω Maven Central) +- Ένα απλό IDE ή η απλή γραμμή εντολών `javac`/`java` +- Δικαίωμα εγγραφής σε φάκελο όπου θα αποθηκευτεί το PNG + +Χωρίς εξωτερικά προγράμματα περιήγησης, χωρίς headless Chrome, μόνο καθαρός κώδικας Java. + +## Βήμα 1: Δημιουργία κενής HTML εγγράφου (create empty html java) + +Το πρώτο πράγμα που χρειαζόμαστε είναι ένα καθαρό φύλλο—ένα κενό αντικείμενο HTMLDocument που μπορούμε να χειριστούμε προγραμματιστικά. Το Aspose.HTML παρέχει την κλάση `HTMLDocument` η οποία λειτουργεί σαν μια μικρή μηχανή προγράμματος περιήγησης. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Γιατί να ξεκινήσουμε με ένα κενό έγγραφο; Επειδή εγγυάται ότι κανένα ανεπιθύμητο markup ή προηγούμενη κατάσταση δεν θα επηρεάσει τον πίνακα που πρόκειται να δημιουργήσουμε. Είναι το ισοδύναμο στην Java του `document.open()` σε έναν περιηγητή. + +## Βήμα 2: Γράψτε μια ελάχιστη HTML σελίδα που περιέχει έναν κενό πίνακα (create html document java) + +Στη συνέχεια ενσωματώνουμε ένα μικρό σκελετό HTML. Η σελίδα περιλαμβάνει έναν placeholder `
` και μερικούς κανόνες CSS για να φαίνεται ο πίνακας αποδεκτός κατά την απόδοση. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Παρατηρήστε πώς **create html document java** τροφοδοτώντας μια ακατέργαστη συμβολοσειρά στη μέθοδο `write`. Αυτή η προσέγγιση είναι χρήσιμη όταν το HTML δημιουργείται εν κινήσει και αποφεύγει την ανάγκη για εξωτερικά αρχεία προτύπων. + +## Βήμα 3: Συμπλήρωση του HTML πίνακα με JavaScript (populate html table javascript) + +Τώρα έρχεται το διασκεδαστικό μέρος—η προσθήκη γραμμών στον πίνακα χρησιμοποιώντας JavaScript. Θα δημιουργήσουμε ένα σύντομο script που θα επαναλαμβάνει πέντε φορές, εισάγοντας μια γραμμή σε κάθε επανάληψη και γεμίζοντας δύο κελιά: ένα με τον αριθμό της γραμμής και ένα άλλο με “Even” ή “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Γιατί να χρησιμοποιήσουμε JavaScript εδώ; Επειδή πολλές πραγματικές σελίδες δημιουργούν πίνακες δυναμικά—σκεφτείτε πίνακες ελέγχου, αναφορές ή πλέγματα δεδομένων στην πλευρά του πελάτη. Με το **populate html table javascript** μέσα στη μηχανή Aspose, μιμούμαστε ακριβώς αυτό που θα συνέβαινε σε έναν περιηγητή, διασφαλίζοντας ότι το παραγόμενο PNG είναι ταυτόσημο με αυτό που θα έβλεπε ο χρήστης. + +## Βήμα 4: Εκτέλεση του script μέσα στην άσφαλτο του εγγράφου + +Το Aspose.HTML μας παρέχει ένα αντικείμενο `Window` που συμπεριφέρεται όπως το `window` ενός περιηγητή. Η κλήση του `eval` εκτελεί το script μας σε απομονωμένο περιβάλλον, ώστε να μην γίνονται εξωτερικές κλήσεις δικτύου. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Ένα κοινό λάθος είναι να ξεχάσουμε να περιμένουμε το script να ολοκληρωθεί πριν από την απόδοση. Σε αυτήν την απλή περίπτωση το script εκτελείται συγχρονισμένα, οπότε μπορούμε να προχωρήσουμε αμέσως στο επόμενο βήμα. Αν ενσωματώσετε ασύγχρονο κώδικα (π.χ., `fetch`), θα πρέπει να συνδέσετε το `onload` event ή να χρησιμοποιήσετε αναμονή βασισμένη σε `Promise`. + +## Βήμα 5: Διαμόρφωση επιλογών αποθήκευσης εικόνας (render html to png) + +Πριν πραγματικά rasterize τη σελίδα, αποφασίζουμε το μέγεθος της εξόδου εικόνας. Η κλάση `ImageSaveOptions` μας επιτρέπει να ορίσουμε πλάτος, ύψος και μερικές παραμέτρους ποιότητας. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Η επιλογή ενός λογικού μεγέθους καμβά είναι κρίσιμη για ένα καθαρό αποτέλεσμα **render html to png**. Πολύ μικρό και το κείμενο κόβεται· πολύ μεγάλο και σπαταλάται μνήμη. Το 800×600 είναι ένα ασφαλές μέσο για τους περισσότερους πίνακες. + +## Βήμα 6: Μετατροπή της συμπληρωμένης HTML σελίδας σε εικόνα PNG (convert html to png) + +Τέλος, καλούμε τη στατική μέθοδο `Converter.convertHTML`. Παίρνει το `HTMLDocument`, τις επιλογές αποθήκευσης και τη διαδρομή του αρχείου προορισμού. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Αντικαταστήστε το `YOUR_DIRECTORY` με μια απόλυτη ή σχετική διαδρομή που υπάρχει στο σύστημά σας. Μετά το τέλος του προγράμματος, θα βρείτε το `table.png` που εμφανίζει έναν ωραία μορφοποιημένο πίνακα με πέντε γραμμές, εναλλασσόμενες ετικέτες “Even”/“Odd”. + +> **Συμβουλή:** Αν χρειάζεστε διαφανές φόντο, ενεργοποιήστε το μέσω `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Πλήρες, Έτοιμο‑για‑Εκτέλεση Παράδειγμα + +Παρακάτω βρίσκεται η πλήρης κλάση Java που συνδυάζει όλα. Αντιγράψτε‑και‑επικολλήστε την στο `JsDomManipulation.java`, προσαρμόστε το φάκελο εξόδου και εκτελέστε την. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Αναμενόμενη έξοδος + +Όταν ανοίξετε το `table.png`, θα πρέπει να δείτε κάτι όπως αυτό: + +![παράδειγμα εξόδου μετατροπής html σε png](https://example.com/assets/table.png "convert html to png – αποδοθείς πίνακας") + +Η εικόνα εμφανίζει έναν πίνακα 5 γραμμών με το μοτίβο “Row 1 – Odd” … “Row 5 – Odd”, μορφοποιημένο με λεπτά περιγράμματα και εσωτερικά περιθώρια. + +## Συνηθισμένα προβλήματα και πώς να τα αποφύγετε + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Το script εκτελείται μετά την απόδοση** | Ο ασύγχρονος κώδικας (π.χ., `setTimeout`) δεν περιμένει. | Χρησιμοποιήστε `window.onload` ή μπλοκάρετε μέχρι `document.readyState === 'complete'`. | +| **Η εικόνα είναι κενή** | Δεν υπάρχει περιεχόμενο στο παράθυρο προβολής (πλάτος/ύψος ορίσθηκαν σε 0). | Βεβαιωθείτε ότι οι διαστάσεις του `ImageSaveOptions` δεν είναι μηδενικές και ταιριάζουν με τη διάταξη της σελίδας. | +| **Οι γραμμές του πίνακα κόβονται** | Ο καμβάς είναι πολύ μικρός για το ύψος του πίνακα. | Αυξήστε το `imageOptions.setHeight` ή χρησιμοποιήστε `imageOptions.setFitToPage(true)`. | +| **Απουσία CSS** | Το ενσωματωμένο στυλ παραλείφθηκε ή το εξωτερικό CSS δεν φορτώθηκε. | Διατηρήστε όλο το απαιτούμενο CSS μέσα στην ετικέτα ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **यह क्यों महत्वपूर्ण है:** जब आप *HTML को PDF के रूप में सहेजते* हैं, तो कनवर्टर CSS, इमेज और फ़ॉन्ट को उसी तरह पढ़ता है जैसे ब्राउज़र करता है। HTML के बगल में एसेट्स रखना (या एब्सोल्यूट URLs का उपयोग) अंतिम PDF में टूटे लिंक को रोकता है। + +## चरण 3: PDF सहेजने के विकल्प कॉन्फ़िगर करें + +`PdfSaveOptions` आपको PDF संस्करण, कम्प्रेशन, और फ़ॉन्ट एम्बेड करने जैसी चीज़ें नियंत्रित करने देता है। अधिकांश मामलों में डिफ़ॉल्ट ठीक काम करते हैं, लेकिन यहाँ बताया गया है कि आप उन्हें कैसे बदल सकते हैं। + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **ध्यान रखें:** यदि आप *html file pdf* को हेडलेस सर्वर पर बदल रहे हैं, तो फ़ॉन्ट एम्बेडिंग को डिसेबल करने से फ़ाइल आकार काफी घट सकता है, लेकिन आप गैर‑ASCII भाषाओं के लिए कैरेक्टर मिसिंग का जोखिम उठाते हैं। + +## चरण 4: रूपांतरण करें + +अब जादू होता है। `Converter.convertHTML` मेथड HTML पढ़ता है, विकल्प लागू करता है, और एक कॉल में PDF लिख देता है। + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **व्याख्या:** +> - `htmlFilePath` रिलेटिव या एब्सोल्यूट पाथ हो सकता है; कनवर्टर इसे उसी तरह रिजॉल्व करता है जैसे ब्राउज़र करता है। +> - `pdfOptions` वह सभी *save html as pdf* प्राथमिकताएँ ले जाता है जो आपने पहले सेट की थीं। +> - तीसरा आर्गुमेंट गंतव्य PDF फ़ाइल है; यदि फ़ाइल मौजूद नहीं है तो Aspose स्वचालित रूप से इसे बनाता है। + +### अपेक्षित आउटपुट + +प्रोग्राम चलाने पर `output.pdf` बनता है जो बिल्कुल `sample.html` के रेंडर किए गए रूप जैसा दिखता है—नीला हेडिंग, नीचे पैराग्राफ, और वही मार्जिन। किसी भी PDF व्यूअर में खोलकर पुष्टि करें। + +## चरण 5: परिणाम सत्यापित करें और सामान्य समस्याओं को संभालें + +### सत्यापन + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### सामान्य समस्याएँ + +| लक्षण | संभावित कारण | समाधान | +|---------|--------------|-----| +| इमेज गायब | रिलेटिव पाथ हल नहीं हो रहा | एब्सोल्यूट URLs उपयोग करें या `HTMLDocument` में `baseUri` सेट करें | +| फ़ॉन्ट गलत दिख रहा | फ़ॉन्ट एम्बेड नहीं हुए | `pdfOptions.setEmbedStandardPdfFonts(true)` कॉल करें | +| लेआउट शिफ्ट | CSS `@media print` नियम अनदेखा | सुनिश्चित करें कि CSS Aspose के रेंडरिंग इंजन के साथ संगत है | +| बड़े फ़ाइलों पर रूपांतरण अटक रहा | अपर्याप्त हीप मेमोरी | JVM `-Xmx` फ़्लैग बढ़ाएँ (जैसे `-Xmx2g`) | + +> **एज केस:** यदि आपको सीधे HTML स्ट्रिंग (फ़ाइल नहीं) को बदलना है, तो उसे `HTMLDocument` में रैप करें और दस्तावेज़ ऑब्जेक्ट को `Converter.convertHTML` को पास करें। यह तब उपयोगी है जब आप टेम्प्लेट इंजन से ऑन‑द‑फ्लाई HTML जेनरेट कर रहे हों। + +## उन्नत वैरिएशन + +### वेब URL को बदलना + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### हेडर/फ़ूटर जोड़ना + +Aspose.HTML आपको CSS `@page` के माध्यम से हेडर/फ़ूटर सामग्री इन्जेक्ट करने देता है। उदाहरण: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +CSS को अपने HTML में रखें या रूपांतरण से पहले बाहरी स्टाइलशीट के रूप में लोड करें। + +### बैच रूपांतरण + +जब आपके पास कई HTML फ़ाइलें हों, तो एक साधारण लूप काम कर देता है: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## निष्कर्ष + +अब आपके पास Java का उपयोग करके **HTML से PDF बनाने** के लिए एक पूर्ण, प्रोडक्शन‑रेडी रेसिपी है। Aspose.HTML को इम्पोर्ट करके, `PdfSaveOptions` कॉन्फ़िगर करके, और `Converter.convertHTML` को कॉल करके आप *html to pdf java* को एक ही लाइन के कोड में कर सकते हैं। + +अब आप अधिक उन्नत परिदृश्यों—जैसे वॉटरमार्क जोड़ना, PDF एन्क्रिप्ट करना, या कई HTML पेजों को एक दस्तावेज़ में मर्ज करना—की खोज कर सकते हैं। सभी वही कोर स्टेप्स पर आधारित हैं जो आपने अभी सीखे हैं। + +*save html as 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/java/conversion-html-to-various-image-formats/_index.md b/html/hindi/java/conversion-html-to-various-image-formats/_index.md index 80e69492a..a094e4aab 100644 --- a/html/hindi/java/conversion-html-to-various-image-formats/_index.md +++ b/html/hindi/java/conversion-html-to-various-image-formats/_index.md @@ -116,6 +116,9 @@ Aspose.HTML for Java का उपयोग करके HTML को TIFF मे ### [HTML को WebP में बदलना](./convert-html-to-webp-complete-java-guide-with-aspose-html/) Aspose.HTML for Java का उपयोग करके HTML को WebP इमेज में बदलने के चरण‑दर‑चरण निर्देश। +### [HTML को PNG में बदलें – Java गाइड HTML तालिकाओं को इमेज के रूप में रेंडर करने के लिए](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Aspose.HTML for Java के साथ HTML तालिकाओं को PNG इमेज में बदलने के चरण‑दर‑चरण निर्देश। + ## अक्सर पूछे जाने वाले प्रश्न **प्रश्न: क्या मैं Java का उपयोग करके अतिरिक्त इमेज लाइब्रेरी के बिना HTML को PNG में बदल सकता हूँ?** diff --git a/html/hindi/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/hindi/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..f67365de6 --- /dev/null +++ b/html/hindi/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,208 @@ +--- +category: general +date: 2026-04-09 +description: जावा का उपयोग करके HTML को PNG में बदलना सीखें। इस ट्यूटोरियल में HTML + को PNG में रेंडर करना, JavaScript से HTML तालिका भरना, जावा से HTML दस्तावेज़ बनाना + और जावा से खाली HTML बनाना शामिल है। +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: hi +og_description: HTML को PNG में बदलना आसान हो गया। इस चरण‑दर‑चरण गाइड का पालन करें + ताकि आप HTML को PNG में रेंडर कर सकें, JavaScript से HTML तालिका भर सकें, और Java + से HTML दस्तावेज़ बना सकें। +og_title: HTML को PNG में बदलें – पूर्ण जावा रेंडरिंग गाइड +tags: +- Java +- Aspose.HTML +- Image rendering +title: HTML को PNG में बदलें – HTML तालिकाओं को छवियों के रूप में रेंडर करने के लिए + जावा गाइड +url: /hi/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – जावा गाइड HTML तालिकाओं को छवियों के रूप में रेंडर करने के लिए + +क्या आपको कभी **convert html to png** करने की ज़रूरत पड़ी लेकिन शुरू कहाँ से करें, समझ नहीं आया? आप अकेले नहीं हैं। कई डेवलपर्स को यह समस्या आती है जब उन्हें एक डायनामिक HTML स्निपेट—विशेषकर वह जो JavaScript से बना हो—को एक स्थिर छवि में बदलना पड़ता है। इस ट्यूटोरियल में हम एक पूर्ण, चलाने योग्य उदाहरण के माध्यम से दिखाएंगे कि कैसे एक छोटी HTML पेज ले, JavaScript से तालिका को भरें, और अंत में Aspose.HTML for Java का उपयोग करके उसे PNG फ़ाइल के रूप में रेंडर करें। + +हम साथ ही संबंधित विषयों जैसे **render html to png**, **populate html table javascript**, और **create html document java** बनाम **create empty html java** की बारीकियों को भी छुएँगे। अंत तक आपके पास एक स्व-निहित प्रोग्राम होगा जिसे आप किसी भी Maven या Gradle प्रोजेक्ट में डालकर तुरंत चला सकते हैं। + +## Prerequisites + +- Java 17 या नया (API Java 8+ के साथ काम करता है लेकिन हम नवीनतम LTS का उपयोग करेंगे) +- Aspose.HTML for Java लाइब्रेरी (Maven Central से उपलब्ध) +- एक साधारण IDE या plain `javac`/`java` कमांड लाइन +- उस फ़ोल्डर में लिखने की अनुमति जहाँ PNG सहेजा जाएगा + +कोई बाहरी वेब ब्राउज़र नहीं, कोई हेडलेस Chrome नहीं, केवल शुद्ध Java कोड। + +## Step 1: Create an empty HTML document (create empty html java) + +पहले हमें एक साफ़ स्लेट चाहिए—एक खाली HTML दस्तावेज़ ऑब्जेक्ट जिसे हम प्रोग्रामेटिकली मैनीपुलेट कर सकें। Aspose.HTML `HTMLDocument` क्लास प्रदान करता है जो एक मिनी ब्राउज़र इंजन की तरह व्यवहार करता है। + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +खाली दस्तावेज़ से शुरू क्यों करें? क्योंकि यह सुनिश्चित करता है कि कोई अनचाहा मार्कअप या पिछली स्थिति तालिका के निर्माण में बाधा न बनें। यह ब्राउज़र में `document.open()` कॉल करने के बराबर है। + +## Step 2: Write a minimal HTML page that contains an empty table (create html document java) + +अब हम एक छोटी HTML स्केलेटन डालते हैं। पेज में `
` प्लेसहोल्डर और कुछ CSS नियम शामिल हैं ताकि तालिका रेंडर होने पर ठीक दिखे। + +```java +htmlDoc.write( + "" + + "
" +); +``` + +ध्यान दें कि हम **create html document java** को `write` को एक रॉ स्ट्रिंग पास करके बनाते हैं। यह तरीका तब उपयोगी होता है जब HTML को रन‑टाइम पर जेनरेट किया जाता है, और यह बाहरी टेम्प्लेट फ़ाइलों की आवश्यकता को समाप्त करता है। + +## Step 3: Populate the HTML table with JavaScript (populate html table javascript) + +अब मज़ेदार भाग—JavaScript से तालिका में पंक्तियाँ जोड़ना। हम एक छोटा स्क्रिप्ट बनाएँगे जो पाँच बार लूप करेगा, प्रत्येक इटरेशन में एक पंक्ति जोड़ते हुए दो सेल भरेंगे: एक में पंक्ति संख्या और दूसरे में “Even” या “Odd”। + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +यहाँ JavaScript क्यों उपयोग करें? क्योंकि कई वास्तविक‑दुनिया की पेजें तालिकाएँ डायनामिक रूप से बनाती हैं—जैसे डैशबोर्ड, रिपोर्ट, या क्लाइंट‑साइड डेटा ग्रिड। Aspose इंजन के भीतर **populate html table javascript** करने से हम ठीक वही सिमुलेट करते हैं जो ब्राउज़र में होता, जिससे रेंडर किया गया PNG उपयोगकर्ता को दिखने वाले परिणाम के समान हो। + +## Step 4: Execute the script inside the document’s sandbox + +Aspose.HTML हमें एक `Window` ऑब्जेक्ट देता है जो ब्राउज़र के `window` जैसा व्यवहार करता है। `eval` को कॉल करने से हमारा स्क्रिप्ट एक अलग वातावरण में चलाया जाता है, इसलिए कोई बाहरी नेटवर्क कॉल नहीं होते। + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +एक सामान्य गलती यह है कि रेंडर करने से पहले स्क्रिप्ट के समाप्त होने की प्रतीक्षा न करना। इस सरल केस में स्क्रिप्ट सिंक्रोनस रूप से चलती है, इसलिए हम सीधे अगले चरण पर जा सकते हैं। यदि आप असिंक्रोनस कोड (जैसे `fetch`) एम्बेड करते हैं, तो आपको `onload` इवेंट या `Promise`‑आधारित इंतज़ार में हुक करना पड़ेगा। + +## Step 5: Configure image‑save options (render html to png) + +पेज को रास्टराइज़ करने से पहले, हमें तय करना है कि आउटपुट इमेज का आकार कितना होना चाहिए। `ImageSaveOptions` क्लास हमें चौड़ाई, ऊँचाई और कुछ क्वालिटी पैरामीटर सेट करने की अनुमति देती है। + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +एक उचित कैनवास आकार चुनना साफ़ **render html to png** परिणाम के लिए महत्वपूर्ण है। बहुत छोटा होने पर टेक्स्ट कट जाता है; बहुत बड़ा होने पर मेमोरी बर्बाद होती है। अधिकांश तालिकाओं के लिए 800×600 एक सुरक्षित मध्य बिंदु है। + +## Step 6: Convert the populated HTML page to a PNG image (convert html to png) + +अंत में, हम स्थैतिक `Converter.convertHTML` मेथड को कॉल करते हैं। यह `HTMLDocument`, सेव ऑप्शन्स, और लक्ष्य फ़ाइल पाथ लेता है। + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +`YOUR_DIRECTORY` को अपने मशीन पर मौजूद एक पूर्ण या रिलेटिव पाथ से बदलें। प्रोग्राम समाप्त होने के बाद, आपको `table.png` मिलेगा जिसमें पाँच पंक्तियों वाली एक सुंदर तालिका होगी, जिसमें “Even”/“Odd” लेबल वैकल्पिक रूप से दिखेंगे। + +> **Pro tip:** यदि आपको पारदर्शी बैकग्राउंड चाहिए, तो `imageOptions.setBackgroundColor(Color.getTransparent());` के माध्यम से इसे सक्षम करें। + +## Full, Ready‑to‑Run Example + +नीचे पूरा Java क्लास दिया गया है जो सभी चरणों को एक साथ जोड़ता है। इसे `JsDomManipulation.java` में कॉपी‑पेस्ट करें, आउटपुट फ़ोल्डर को समायोजित करें, और चलाएँ। + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Expected output + +जब आप `table.png` खोलेंगे, तो आपको कुछ इस तरह दिखना चाहिए: + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +छवि में 5‑पंक्तियों वाली तालिका दिखेगी जिसमें “Row 1 – Odd” … “Row 5 – Odd” पैटर्न होगा, पतले बॉर्डर और पैडिंग के साथ स्टाइल किया हुआ। + +## Common pitfalls and how to avoid them + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Script runs after rendering** | असिंक्रोनस कोड (जैसे `setTimeout`) का इंतज़ार नहीं किया गया। | `window.onload` का उपयोग करें या `document.readyState === 'complete'` तक ब्लॉक करें। | +| **Image is blank** | व्यूपोर्ट के भीतर कोई कंटेंट नहीं (चौड़ाई/ऊँचाई 0 सेट)। | सुनिश्चित करें कि `ImageSaveOptions` की डाइमेंशन शून्य नहीं हैं और पेज लेआउट से मेल खाती हैं। | +| **Table rows are cut off** | कैनवास तालिका की ऊँचाई से छोटा है। | `imageOptions.setHeight` बढ़ाएँ या `imageOptions.setFitToPage(true)` उपयोग करें। | +| **Missing CSS** | इनलाइन स्टाइल छोड़ दिया गया या बाहरी CSS लोड नहीं हुआ। | सभी आवश्यक CSS को ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **為何重要：** 當你 *save HTML as PDF* 時，轉換器會像瀏覽器一樣讀取 CSS、圖片與字型。將資源與 HTML 放在同一目錄（或使用絕對 URL）可避免最終 PDF 出現斷開的連結。 + +## 第三步：設定 PDF 儲存選項 + +`PdfSaveOptions` 讓你控制 PDF 版本、壓縮方式以及是否嵌入字型等。大多數情況下預設值已足夠，但以下示範如何自行調整。 + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **注意：** 若在無頭伺服器上 *convert html file pdf*，關閉字型嵌入可大幅減少檔案大小，但可能導致非 ASCII 語言的字元缺失。 + +## 第四步：執行轉換 + +現在魔法發生了。`Converter.convertHTML` 方法會讀取 HTML、套用選項，並一次寫出 PDF。 + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **說明：** +> - `htmlFilePath` 可以是相對或絕對路徑；轉換器會如同瀏覽器般解析。 +> - `pdfOptions` 包含先前設定的 *save html as pdf* 偏好。 +> - 第三個參數是目標 PDF 檔案；若檔案不存在，Aspose 會自動建立。 + +### 預期輸出 + +執行程式後會產生 `output.pdf`，其外觀與 `sample.html` 渲染結果完全相同——標題呈藍色、段落位於下方，且版面邊距一致。使用任何 PDF 閱讀器開啟即可驗證。 + +## 第五步：驗證結果與處理常見問題 + +### 驗證 + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### 常見陷阱 + +| 症狀 | 可能原因 | 解決方式 | +|------|----------|----------| +| 圖片遺失 | 相對路徑未解析 | 使用絕對 URL 或在 `HTMLDocument` 中設定 `baseUri` | +| 字型顯示異常 | 未嵌入字型 | 呼叫 `pdfOptions.setEmbedStandardPdfFonts(true)` | +| 版面移位 | CSS `@media print` 規則被忽略 | 確認 CSS 與 Aspose 的渲染引擎相容 | +| 大檔案轉換卡住 | 記憶體不足 | 增加 JVM `-Xmx` 參數（例如 `-Xmx2g`） | + +> **邊緣案例：** 若需直接轉換 HTML 字串（不使用檔案），可將字串包裝成 `HTMLDocument`，再傳入 `Converter.convertHTML`。這在即時產生 HTML（例如模板引擎）時非常方便。 + +## 進階變化 + +### 轉換 Web URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### 加入頁眉/頁腳 + +Aspose.HTML 允許透過 CSS `@page` 注入頁眉與頁腳內容。例如： + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +將 CSS 放入 HTML 中，或在轉換前以外部樣式表載入。 + +### 批次轉換 + +若有多個 HTML 檔案，只需簡單迴圈即可完成： + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## 結論 + +現在你已掌握使用 Java **從 HTML 建立 PDF** 的完整、可投入生產的作法。只要匯入 Aspose.HTML、設定 `PdfSaveOptions`，再呼叫 `Converter.convertHTML`，即可在一行程式碼內完成 *html to pdf java*。 + +接下來，你可以探索更進階的情境——加入浮水印、加密 PDF，或將多個 HTML 頁面合併成單一文件。所有這些功能皆建立在你剛剛學會的核心步驟之上。 + +對 *save html as 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/java/conversion-html-to-various-image-formats/_index.md b/html/hongkong/java/conversion-html-to-various-image-formats/_index.md index c9fd2e665..515cbc8df 100644 --- a/html/hongkong/java/conversion-html-to-various-image-formats/_index.md +++ b/html/hongkong/java/conversion-html-to-various-image-formats/_index.md @@ -93,6 +93,9 @@ weight: 24 ### [將 HTML 轉換為 PNG](./convert-html-to-png/) 學習如何在 Java 中使用 Aspose.HTML 將 HTML 轉換為 PNG 圖像。完整教學提供詳細步驟說明。 +### [將 HTML 轉換為 PNG – Java 教學：將 HTML 表格渲染為圖像](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +說明如何使用 Aspose.HTML for Java 將包含表格的 HTML 轉換為 PNG 圖像，提供完整程式碼範例與最佳化技巧。 + ### [將 HTML 轉換為 WebP](./convert-html-to-webp-complete-java-guide-with-aspose-html/) ### [將 HTML 轉換為 TIFF](./convert-html-to-tiff/) 了解如何使用 Aspose.HTML for Java 輕鬆將 HTML 轉換為 TIFF。提供高效的文件處理步驟說明。 diff --git a/html/hongkong/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/hongkong/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..a11cd63bf --- /dev/null +++ b/html/hongkong/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,205 @@ +--- +category: general +date: 2026-04-09 +description: 學習如何使用 Java 將 HTML 轉換為 PNG。本教程涵蓋將 HTML 渲染為 PNG、使用 JavaScript 填充 HTML + 表格、使用 Java 建立 HTML 文件以及使用 Java 建立空白 HTML。 +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: zh-hant +og_description: 將 HTML 轉換為 PNG 輕鬆搞定。跟隨此一步一步的指南，將 HTML 渲染為 PNG、使用 JavaScript 填充 HTML + 表格，以及使用 Java 建立 HTML 文件。 +og_title: 將 HTML 轉換為 PNG – 完整的 Java 渲染指南 +tags: +- Java +- Aspose.HTML +- Image rendering +title: 將 HTML 轉換為 PNG – Java 渲染 HTML 表格為圖像指南 +url: /zh-hant/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – Java 渲染 HTML 表格為圖像指南 + +曾經需要 **convert html to png** 但不知從何入手嗎？你並不孤單。許多開發者在必須將動態的 HTML 片段——尤其是使用 JavaScript 建立的——轉換為靜態圖像時，常會卡住。於本教學中，我們將逐步示範一個完整且可執行的範例，該範例會取得一個小型 HTML 頁面，使用 JavaScript 填充表格，最後使用 Aspose.HTML for Java 將其渲染為 PNG 檔案。 + +我們亦會涉及相關主題，如 **render html to png**、如何 **populate html table javascript**，以及 **create html document java** 與 **create empty html java** 之間的差異。完成後，你將擁有一個可直接放入任何 Maven 或 Gradle 專案並立即執行的獨立程式。 + +## 前置條件 + +- Java 17 或更新版本（API 支援 Java 8+，但我們將使用最新的 LTS） +- Aspose.HTML for Java 程式庫（可於 Maven Central 取得） +- 一個簡易的 IDE 或純粹使用 `javac`/`java` 命令列 +- 具有寫入權限的資料夾，以儲存 PNG 檔案 + +不需要外部瀏覽器、亦不需 headless Chrome，純粹使用 Java 程式碼。 + +## 步驟 1：建立空的 HTML 文件（create empty html java） + +我們首先需要的是一張乾淨的白紙——一個可程式化操作的空白 HTML 文件物件。Aspose.HTML 提供 `HTMLDocument` 類別，行為類似迷你瀏覽器引擎。 + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +為何要從空文件開始？因為這能保證不會有雜散的標記或先前的狀態干擾我們即將建立的表格。這相當於在瀏覽器中呼叫 `document.open()` 的 Java 版。 + +## 步驟 2：撰寫包含空表格的最小 HTML 頁面（create html document java） + +接著我們注入一個小型的 HTML 骨架。頁面內含 `
` 佔位符，以及一些 CSS 規則，使表格在渲染時看起來體面。 + +```java +htmlDoc.write( + "" + + "
" +); +``` + +請注意，我們透過將原始字串傳入 `write` 來 **create html document java**。當 HTML 需要即時產生時，此方法相當便利，且免除外部模板檔案的需求。 + +## 步驟 3：使用 JavaScript 填充 HTML 表格（populate html table javascript） + +現在進入有趣的部分——使用 JavaScript 為表格新增列。我們會編寫一段短腳本，迴圈五次，每次插入一列，並填入兩個儲存格：一個顯示列號，另一個顯示 “Even” 或 “Odd”。 + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +為何在此使用 JavaScript？因為許多實務頁面會動態建立表格——例如儀表板、報表或客戶端資料格。透過在 Aspose 引擎內 **populate html table javascript**，我們能精確模擬瀏覽器的行為，確保渲染出的 PNG 與使用者看到的畫面完全相同。 + +## 步驟 4：在文件的沙盒中執行腳本 + +Aspose.HTML 為我們提供一個 `Window` 物件，其行為類似瀏覽器的 `window`。呼叫 `eval` 會在隔離環境中執行腳本，因而不會產生外部網路請求。 + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +常見的陷阱是忘記在渲染前等待腳本執行完畢。在這個簡單的例子中，腳本會同步執行，因此我們可直接進入下一步。若你嵌入非同步程式碼（例如 `fetch`），則需掛接 `onload` 事件或使用基於 `Promise` 的等待機制。 + +## 步驟 5：設定影像儲存選項（render html to png） + +在實際光柵化頁面之前，我們先決定輸出影像的尺寸。`ImageSaveOptions` 類別允許我們設定寬度、高度以及一些品質參數。 + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +選擇合理的畫布大小對於取得乾淨的 **render html to png** 結果至關重要。過小會導致文字被截斷，過大則浪費記憶體。800×600 是大多數表格的安全折衷尺寸。 + +## 步驟 6：將已填充的 HTML 頁面轉換為 PNG 影像（convert html to png） + +最後，我們呼叫靜態的 `Converter.convertHTML` 方法。它接受 `HTMLDocument`、儲存選項以及目標檔案路徑。 + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +將 `YOUR_DIRECTORY` 替換為你機器上存在的絕對或相對路徑。程式執行完畢後，你會在 `table.png` 中看到一個格式良好的五列表格，交替顯示 “Even”/“Odd” 標籤。 + +> **專業提示：** 若需要透明背景，可透過 `imageOptions.setBackgroundColor(Color.getTransparent());` 來啟用。 + +## 完整、可直接執行的範例 + +以下為完整的 Java 類別，將所有步驟整合在一起。將其複製貼上至 `JsDomManipulation.java`，調整輸出資料夾後即可執行。 + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### 預期輸出 + +開啟 `table.png` 後，你應該會看到類似以下的畫面： + +![convert html to png 範例輸出](https://example.com/assets/table.png "convert html to png – 渲染表格") + +此影像顯示一個 5 列的表格，呈現 “Row 1 – Odd” … “Row 5 – Odd” 的模式，並以細框線與內距樣式化。 + +## 常見陷阱與避免方法 + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Script runs after rendering** | 非同步程式碼（例如 `setTimeout`）未被等待。 | 使用 `window.onload` 或阻塞至 `document.readyState === 'complete'` 為止。 | +| **Image is blank** | 視口內無內容（寬度/高度設定為 0）。 | 確保 `ImageSaveOptions` 的尺寸非零且符合頁面佈局。 | +| **Table rows are cut off** | 畫布尺寸對表格高度而言過小。 | 增加 `imageOptions.setHeight`，或使用 `imageOptions.setFitToPage(true)`。 | +| **Missing CSS** | 內聯樣式遺漏或外部 CSS 未載入。 | 將所有必要的 CSS 保留在 ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Miért fontos:** Amikor *HTML‑t mentünk PDF‑ként*, a konverter a CSS‑t, képeket és betűtípusokat ugyanúgy olvassa, mint egy böngésző. Az eszközök a HTML mellé helyezése (vagy abszolút URL‑ek használata) megakadályozza a törött hivatkozásokat a végső PDF‑ben. + +## 3. lépés: PDF mentési beállítások konfigurálása + +`PdfSaveOptions` lehetővé teszi, hogy szabályozd a PDF verziót, tömörítést és a betűtípusok beágyazását. A legtöbb esetben az alapértelmezések megfelelőek, de itt látható, hogyan módosíthatod őket. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Figyelem:** Ha *html file pdf*-t konvertálsz egy fej nélküli szerveren, a betűtípusok beágyazásának letiltása jelentősen csökkentheti a fájlméretet, de kockáztatsz hiányzó karaktereket a nem‑ASCII nyelvek esetén. + +## 4. lépés: A konverzió végrehajtása + +Most a varázslat megtörténik. A `Converter.convertHTML` metódus beolvassa a HTML‑t, alkalmazza a beállításokat, és egy hívással kiírja a PDF‑et. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Magyarázat:** +> - `htmlFilePath` lehet relatív vagy abszolút útvonal; a konverter úgy oldja fel, mint egy böngésző. +> - `pdfOptions` tartalmazza az összes *save html as pdf* beállítást, amelyet korábban megadtál. +> - A harmadik argumentum a cél PDF fájl; az Aspose automatikusan létrehozza a fájlt, ha nem létezik. + +### Várt kimenet + +A program futtatása létrehozza az `output.pdf`‑t, amely pontosan úgy néz ki, mint a megjelenített `sample.html` — a kék címsor, az alatta lévő bekezdés és ugyanazok a margók. Nyisd meg bármely PDF‑olvasóval a megerősítéshez. + +## 5. lépés: Az eredmény ellenőrzése és a gyakori problémák kezelése + +### Ellenőrzés + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Gyakori buktatók + +| Tünet | Valószínű ok | Megoldás | +|---------|--------------|-----| +| Képek hiányoznak | Relatív útvonalak nincsenek feloldva | Használj abszolút URL‑eket vagy állítsd be a `baseUri`‑t a `HTMLDocument`‑ben | +| Betűtípusok hibásan jelennek meg | A betűtípusok nincsenek beágyazva | Hívd meg a `pdfOptions.setEmbedStandardPdfFonts(true)` metódust | +| Elrendezés eltolódik | A CSS `@media print` szabályok figyelmen kívül vannak hagyva | Győződj meg arról, hogy a CSS kompatibilis az Aspose renderelő motorjával | +| A konverzió akadozik nagy fájlok esetén | Nem elegendő heap memória | Növeld a JVM `-Xmx` flag‑et (pl. `-Xmx2g`) | + +> **Különleges eset:** Ha közvetlenül egy HTML‑sztringet kell konvertálni (fájl nélkül), csomagold be egy `HTMLDocument`‑be, és add át a dokumentum objektumot a `Converter.convertHTML`‑nek. Ez hasznos, ha HTML‑t generálsz menet közben, például egy sablonmotorból. + +## Haladó változatok + +### Web URL konvertálása + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Fejléc/Lábléc hozzáadása + +Az Aspose.HTML lehetővé teszi fejléc/lábléc tartalom beillesztését CSS `@page` segítségével. Példa: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Helyezd a CSS‑t a HTML‑be, vagy töltsd be egy külső stíluslapból a konverzió előtt. + +### Kötetes konverzió + +Ha több HTML fájlod van, egy egyszerű ciklus megoldja a feladatot: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Összegzés + +Most már egy teljes, termelés‑kész recepted van a **PDF létrehozására HTML‑ből** Java használatával. Az Aspose.HTML importálásával, a `PdfSaveOptions` konfigurálásával és a `Converter.convertHTML` meghívásával egy sor kóddal tudsz *html to pdf java* konverziót végezni. + +Innen tovább felfedezhetsz összetettebb forgatókönyveket — vízjelek hozzáadása, PDF‑ek titkosítása vagy több HTML oldal egy dokumentummá egyesítése. Mindegyik ugyanazon alaplépésekre épül, amelyeket most elsajátítottál. + +Van kérdésed a *save html as pdf* sajátosságokkal kapcsolatban, vagy segítségre van szükséged a konverzió finomhangolásához egy adott keretrendszerhez? Hagyj egy megjegyzést, é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/java/conversion-html-to-various-image-formats/_index.md b/html/hungarian/java/conversion-html-to-various-image-formats/_index.md index 81fb522d5..4429f5bce 100644 --- a/html/hungarian/java/conversion-html-to-various-image-formats/_index.md +++ b/html/hungarian/java/conversion-html-to-various-image-formats/_index.md @@ -100,6 +100,8 @@ Ismerje meg, hogyan konvertálhat HTML‑t PNG képekké Java‑ban az Aspose.HT Tanulja meg, hogyan konvertálhat HTML‑t TIFF‑be az Aspose.HTML for Java segítségével. Lépésről‑lépésre útmutató a hatékony dokumentumkezeléshez. ### [HTML konvertálása WebP‑be – Teljes Java útmutató az Aspose.HTML‑el](./convert-html-to-webp-complete-java-guide-with-aspose-html/) Ismerje meg, hogyan konvertálhat HTML‑t WebP‑be Java‑ban az Aspose.HTML használatával. Részletes, lépésről‑lépésre útmutató a WebP konverzióhoz. +### [HTML konvertálása PNG‑be – Java útmutató HTML táblázatok képként történő rendereléséhez](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Ismerje meg, hogyan konvertálhat HTML‑t PNG‑be Java‑ban, különös tekintettel a táblázatok képként való megjelenítésére. ## Gyakran ismételt kérdések diff --git a/html/hungarian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/hungarian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..a727d5714 --- /dev/null +++ b/html/hungarian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,208 @@ +--- +category: general +date: 2026-04-09 +description: Tanulja meg, hogyan konvertálja a HTML-t PNG-re Java használatával. Ez + az útmutató a HTML PNG-re renderelését, a HTML táblázat JavaScript‑kel való feltöltését, + a HTML dokumentum Java‑val történő létrehozását és az üres HTML Java‑val való létrehozását + tárgyalja. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: hu +og_description: Az HTML PNG-re konvertálása egyszerű. Kövesd ezt a lépésről‑lépésre + útmutatót, hogy HTML‑t PNG‑re renderelj, HTML‑táblázatot tölts fel JavaScript‑tel, + és HTML‑dokumentumot hozz létre Java‑val. +og_title: HTML konvertálása PNG-re – Teljes Java renderelési útmutató +tags: +- Java +- Aspose.HTML +- Image rendering +title: HTML konvertálása PNG-re – Java útmutató HTML táblázatok képként való megjelenítéséhez +url: /hu/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – Java útmutató a HTML táblázatok képpé rendereléséhez + +Valaha szükséged volt már **convert html to png**-re, de nem tudtad, hol kezdj? Nem vagy egyedül. Sok fejlesztő akad el, amikor egy dinamikus HTML részletet—különösen, ha JavaScript‑ben készült—statikus képpé kell alakítani. Ebben az útmutatóban végigvezetünk egy teljes, futtatható példán, amely egy apró HTML oldalt vesz, JavaScript‑kel feltölti a táblázatot, majd végül PNG fájlként rendereli az Aspose.HTML for Java segítségével. + +Érinteni fogjuk a kapcsolódó témákat is, mint a **render html to png**, a **populate html table javascript**, valamint a **create html document java** és a **create empty html java** közti különbségek. A végére egy önálló programod lesz, amelyet bármely Maven vagy Gradle projektbe beilleszthetsz és azonnal futtathatsz. + +## Előfeltételek + +- Java 17 vagy újabb (az API Java 8+‑al is működik, de a legújabb LTS‑t használjuk) +- Aspose.HTML for Java könyvtár (elérhető a Maven Central‑on) +- Közepes IDE vagy egyszerű `javac`/`java` parancssor +- Írási jogosultság egy olyan mappához, ahol a PNG mentésre kerül + +Nincs szükség külső webböngészőre, headless Chrome‑ra, csak tiszta Java kód. + +## 1. lépés: Üres HTML dokumentum létrehozása (create empty html java) + +Az első dolog, amire szükségünk van, egy tiszta lap—egy üres HTML dokumentum objektum, amelyet programozottan manipulálhatunk. Az Aspose.HTML biztosítja a `HTMLDocument` osztályt, amely egy mini böngészőmotorként viselkedik. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Miért kezdjünk egy üres dokumentummal? Mert garantálja, hogy semmilyen szabadon maradt jelölőnyelv vagy korábbi állapot nem zavarja a felépítendő táblázatot. Ez a Java megfelelője a böngészőben a `document.open()` hívásnak. + +## 2. lépés: Minimális HTML oldal írása, amely üres táblázatot tartalmaz (create html document java) + +Ezután beillesztünk egy apró HTML vázat. Az oldal tartalmaz egy `
` helykitöltőt és néhány CSS szabályt, hogy a táblázat megfelelően nézzen ki rendereléskor. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Vedd észre, hogy **create html document java**-t úgy valósítjuk meg, hogy egy nyers stringet adunk a `write`‑nek. Ez a megközelítés hasznos, ha a HTML‑t futás közben generálják, és elkerüli a külső sablonfájlok szükségességét. + +## 3. lépés: HTML táblázat feltöltése JavaScript‑tel (populate html table javascript) + +Most jön a szórakoztató rész—sorok hozzáadása a táblázathoz JavaScript‑tel. Készítünk egy rövid szkriptet, amely öt alkalommal iterál, minden iterációban egy sort beszúr, és két cellát tölt fel: az egyiket a sor számmal, a másikat “Even” vagy “Odd” értékkel. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Miért használunk itt JavaScript‑et? Mert sok valós oldal dinamikusan építi fel a táblázatokat—gondoljunk irányítópultokra, jelentésekre vagy kliensoldali adatgridekre. A **populate html table javascript** használatával az Aspose motoron belül pontosan azt utánozzuk, ami egy böngészőben történne, biztosítva, hogy a renderelt PNG ugyanolyan legyen, mint amit a felhasználó látna. + +## 4. lépés: A szkript végrehajtása a dokumentum sandbox‑jában + +Az Aspose.HTML biztosít egy `Window` objektumot, amely a böngésző `window`‑jéhez hasonlóan viselkedik. Az `eval` hívás a szkriptünket izolált környezetben futtatja, így nincs külső hálózati hívás. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Gyakori hiba, ha elfelejtünk várni a szkript befejeződésére a renderelés előtt. Ebben az egyszerű esetben a szkript szinkron módon fut, így közvetlenül a következő lépésre léphetünk. Ha valaha aszinkron kódot ágyazsz be (pl. `fetch`), akkor a `onload` eseményhez kell kapcsolódni, vagy `Promise`‑alapú várakozást kell használni. + +## 5. lépés: Képmentési beállítások konfigurálása (render html to png) + +Mielőtt ténylegesen rasterizálnánk az oldalt, eldöntjük, mekkora legyen a kimeneti kép. Az `ImageSaveOptions` osztály lehetővé teszi a szélesség, magasság és néhány minőségi paraméter beállítását. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Megfelelő vászonméret választása kulcsfontosságú egy tiszta **render html to png** eredményhez. Túl kicsi, és a szöveg levágódik; túl nagy, és feleslegesen sok memóriát használ. A 800×600 egy biztonságos középérték a legtöbb táblázathoz. + +## 6. lépés: A feltöltött HTML oldal konvertálása PNG képpé (convert html to png) + +Végül meghívjuk a statikus `Converter.convertHTML` metódust. Ez megkapja a `HTMLDocument`‑et, a mentési beállításokat és a célfájl útvonalát. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Cseréld le a `YOUR_DIRECTORY`‑t egy abszolút vagy relatív útvonalra, amely a gépeden létezik. A program befejezése után megtalálod a `table.png`‑t, amely egy szép formázott, öt soros táblázatot mutat, váltakozó “Even”/“Odd” címkékkel. + +> **Pro tip:** Ha átlátszó háttérre van szükséged, engedélyezd a `imageOptions.setBackgroundColor(Color.getTransparent());` segítségével. + +## Teljes, azonnal futtatható példa + +Az alábbiakban a teljes Java osztály látható, amely mindent összeilleszt. Másold be a `JsDomManipulation.java` fájlba, állítsd be a kimeneti mappát, és futtasd. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Várt kimenet + +Amikor megnyitod a `table.png`‑t, valami ilyesmit kell látnod: + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +A kép egy 5 soros táblázatot mutat a “Row 1 – Odd” … “Row 5 – Odd” mintával, vékony szegélyekkel és belső margóval stilizálva. + +## Gyakori hibák és azok elkerülése + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **A szkript a renderelés után fut** | Az aszinkron kód (pl. `setTimeout`) nincs megvárva. | Használd a `window.onload`‑t vagy blokkolj, amíg a `document.readyState === 'complete'`. | +| **A kép üres** | Nincs tartalom a nézetablakban (szélesség/magasság 0-ra van állítva). | Győződj meg róla, hogy az `ImageSaveOptions` méretei nem nulla, és megfelelnek az oldal elrendezésének. | +| **A táblázat sorai levágódnak** | A vászon túl kicsi a táblázat magasságához. | Növeld a `imageOptions.setHeight` értékét vagy használd a `imageOptions.setFitToPage(true)`‑t. | +| **Hiányzó CSS** | Az inline stílus kihagyva vagy a külső CSS nem töltődik be. | Tartsd meg a szükséges CSS‑t a ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Mengapa ini penting:** Saat Anda *save HTML as PDF*, konverter membaca CSS, gambar, dan font seperti browser. Menjaga aset di samping HTML (atau menggunakan URL absolut) mencegah tautan yang rusak di PDF akhir. + +## Langkah 3: Konfigurasikan Opsi Penyimpanan PDF + +`PdfSaveOptions` memungkinkan Anda mengontrol hal-hal seperti versi PDF, kompresi, dan apakah menyertakan font. Untuk kebanyakan skenario, nilai default sudah cukup, tetapi berikut cara menyesuaikannya. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Waspada:** Jika Anda *convert html file pdf* pada server tanpa tampilan (headless), menonaktifkan penyertaan font dapat secara dramatis mengurangi ukuran file, tetapi Anda berisiko kehilangan karakter untuk bahasa non‑ASCII. + +## Langkah 4: Lakukan Konversi + +Sekarang keajaiban terjadi. Metode `Converter.convertHTML` membaca HTML, menerapkan opsi, dan menulis PDF dalam satu panggilan. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Penjelasan:** +> - `htmlFilePath` dapat berupa jalur relatif atau absolut; konverter menyelesaikannya seperti yang dilakukan browser. +> - `pdfOptions` membawa semua preferensi *save html as pdf* yang Anda atur sebelumnya. +> - Argumen ketiga adalah file PDF tujuan; Aspose secara otomatis membuat file jika belum ada. + +### Output yang Diharapkan + +Menjalankan program menghasilkan `output.pdf` yang tampak persis seperti `sample.html` yang dirender—judul berwarna biru, paragraf di bawahnya, dan margin yang sama. Buka di penampil PDF apa pun untuk mengonfirmasi. + +## Langkah 5: Verifikasi Hasil & Tangani Masalah Umum + +### Verifikasi + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Jebakan Umum + +| Gejala | Penyebab Kemungkinan | Perbaikan | +|---------|----------------------|-----------| +| Gambar hilang | Jalur relatif tidak terresolusi | Gunakan URL absolut atau atur `baseUri` di `HTMLDocument` | +| Font terlihat salah | Font tidak disertakan | Panggil `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Pergeseran tata letak | Aturan CSS `@media print` diabaikan | Pastikan CSS kompatibel dengan mesin rendering Aspose | +| Konversi macet pada file besar | Memori heap tidak cukup | Tingkatkan flag JVM `-Xmx` (mis., `-Xmx2g`) | + +> **Kasus khusus:** Jika Anda perlu mengonversi string HTML secara langsung (tanpa file), bungkus dalam `HTMLDocument` dan berikan objek dokumen ke `Converter.convertHTML`. Ini berguna saat menghasilkan HTML secara dinamis, seperti dari mesin templat. + +## Variasi Lanjutan + +### Mengonversi URL Web + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Menambahkan Header/Footer + +Aspose.HTML memungkinkan Anda menyisipkan konten header/footer melalui CSS `@page`. Contoh: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Letakkan CSS di HTML Anda atau muat melalui stylesheet eksternal sebelum konversi. + +### Konversi Batch + +Ketika Anda memiliki banyak file HTML, loop sederhana dapat menyelesaikannya: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Kesimpulan + +Anda kini memiliki resep lengkap, siap produksi untuk **create PDF from HTML** menggunakan Java. Dengan mengimpor Aspose.HTML, mengonfigurasi `PdfSaveOptions`, dan memanggil `Converter.convertHTML`, Anda dapat *html to pdf java* dalam satu baris kode. + +Dari sini Anda dapat menjelajahi skenario yang lebih canggih—menambahkan watermark, mengenkripsi PDF, atau menggabungkan beberapa halaman HTML menjadi satu dokumen. Semua itu dibangun di atas langkah inti yang baru saja Anda kuasai. + +Ada pertanyaan tentang keanehan *save html as pdf*, atau membutuhkan bantuan menyesuaikan konversi untuk kerangka kerja tertentu? Tinggalkan komentar, 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/java/conversion-html-to-various-image-formats/_index.md b/html/indonesian/java/conversion-html-to-various-image-formats/_index.md index 285cd7489..4a613bd38 100644 --- a/html/indonesian/java/conversion-html-to-various-image-formats/_index.md +++ b/html/indonesian/java/conversion-html-to-various-image-formats/_index.md @@ -96,6 +96,7 @@ Pelajari cara mengkonversi HTML ke GIF di Java menggunakan Aspose.HTML. Panduan Pelajari cara mengkonversi HTML ke JPEG dengan Aspose.HTML untuk Java. Panduan langkah demi langkah untuk pemrosesan dokumen yang mudah. ### [Mengonversi HTML ke PNG](./convert-html-to-png/) Pelajari cara mengkonversi HTML ke gambar PNG di Java dengan Aspose.HTML. Panduan komprehensif dengan instruksi langkah demi langkah. +### [Mengonversi HTML ke PNG – Panduan Java untuk merender tabel HTML sebagai gambar](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) ### [Mengonversi HTML ke TIFF](./convert-html-to-tiff/) Pelajari cara mudah mengkonversi HTML ke TIFF menggunakan Aspose.HTML untuk Java. Panduan langkah demi langkah untuk penanganan dokumen yang efisien. ### [Mengonversi HTML ke WebP – Panduan Lengkap Java dengan Aspose.HTML](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/indonesian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/indonesian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..8663e0710 --- /dev/null +++ b/html/indonesian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Pelajari cara mengonversi HTML ke PNG menggunakan Java. Tutorial ini + mencakup merender HTML ke PNG, mengisi tabel HTML dengan JavaScript, membuat dokumen + HTML dengan Java, dan membuat HTML kosong dengan Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: id +og_description: Konversi HTML ke PNG menjadi mudah. Ikuti panduan langkah demi langkah + ini untuk merender HTML ke PNG, mengisi tabel HTML dengan JavaScript, dan membuat + dokumen HTML dengan Java. +og_title: Konversi HTML ke PNG – Panduan Rendering Java Lengkap +tags: +- Java +- Aspose.HTML +- Image rendering +title: Mengonversi HTML ke PNG – Panduan Java untuk Merender Tabel HTML sebagai Gambar +url: /id/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# konversi html ke png – Panduan Java untuk merender tabel HTML sebagai gambar + +Pernah membutuhkan untuk **convert html to png** tetapi tidak yakin harus mulai dari mana? Anda tidak sendirian. Banyak pengembang mengalami kebuntuan ketika harus mengubah cuplikan HTML dinamis—terutama yang dibangun dengan JavaScript—menjadi gambar statis. Dalam tutorial ini kami akan membahas contoh lengkap yang dapat dijalankan yang mengambil halaman HTML kecil, mengisi tabel dengan JavaScript, dan akhirnya merendernya sebagai file PNG menggunakan Aspose.HTML for Java. + +Kami juga akan menyentuh topik terkait seperti **render html to png**, cara **populate html table javascript**, dan nuansa **create html document java** versus **create empty html java**. Pada akhir tutorial Anda akan memiliki program mandiri yang dapat Anda masukkan ke dalam proyek Maven atau Gradle mana pun dan jalankan secara instan. + +## Prasyarat + +- Java 17 atau yang lebih baru (API bekerja dengan Java 8+ tetapi kami akan menggunakan LTS terbaru) +- Perpustakaan Aspose.HTML for Java (tersedia melalui Maven Central) +- IDE sederhana atau baris perintah `javac`/`java` biasa +- Izin menulis ke folder tempat PNG akan disimpan + +Tidak ada browser web eksternal, tidak ada Chrome headless, hanya kode Java murni. + +## Langkah 1: Buat dokumen HTML kosong (create empty html java) + +Hal pertama yang kita butuhkan adalah kanvas bersih—objek dokumen HTML kosong yang dapat kita manipulasi secara programatis. Aspose.HTML menyediakan kelas `HTMLDocument` yang berperilaku seperti mesin browser mini. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Mengapa memulai dengan dokumen kosong? Karena hal itu menjamin tidak ada markup yang terselip atau status sebelumnya yang mengganggu tabel yang akan kita bangun. Ini adalah setara Java dari memanggil `document.open()` di browser. + +## Langkah 2: Tulis halaman HTML minimal yang berisi tabel kosong (create html document java) + +Selanjutnya kami menyisipkan kerangka HTML kecil. Halaman tersebut mencakup placeholder `
` dan beberapa aturan CSS agar tabel terlihat layak saat dirender. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Perhatikan bagaimana kami **create html document java** dengan memberikan string mentah ke `write`. Pendekatan ini berguna ketika HTML dihasilkan secara dinamis, dan menghindari kebutuhan akan file templat eksternal. + +## Langkah 3: Isi tabel HTML dengan JavaScript (populate html table javascript) + +Sekarang bagian yang menyenangkan—menambahkan baris ke tabel menggunakan JavaScript. Kami akan membuat skrip singkat yang melakukan loop lima kali, menyisipkan satu baris setiap iterasi dan mengisi dua sel: satu dengan nomor baris dan satu lagi dengan “Even” atau “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Mengapa menggunakan JavaScript di sini? Karena banyak halaman dunia nyata membangun tabel secara dinamis—pikirkan dasbor, laporan, atau grid data sisi klien. Dengan **populate html table javascript** di dalam mesin Aspose, kami meniru persis apa yang terjadi di browser, memastikan PNG yang dirender terlihat identik dengan apa yang dilihat pengguna. + +## Langkah 4: Jalankan skrip di dalam sandbox dokumen + +Aspose.HTML memberikan kami objek `Window` yang berperilaku seperti `window` pada browser. Memanggil `eval` menjalankan skrip kami dalam lingkungan terisolasi, sehingga tidak ada panggilan jaringan eksternal yang dilakukan. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Kesalahan umum adalah lupa menunggu skrip selesai sebelum merender. Pada kasus sederhana ini skrip berjalan secara sinkron, jadi kita dapat langsung ke langkah berikutnya. Jika Anda pernah menyematkan kode asinkron (mis., `fetch`), Anda perlu mengaitkan ke acara `onload` atau menggunakan penunggu berbasis `Promise`. + +## Langkah 5: Konfigurasikan opsi penyimpanan gambar (render html to png) + +Sebelum kami benar‑benar meraster halaman, kami menentukan seberapa besar gambar output seharusnya. Kelas `ImageSaveOptions` memungkinkan kami mengatur lebar, tinggi, dan beberapa parameter kualitas. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Memilih ukuran kanvas yang wajar sangat penting untuk hasil **render html to png** yang bersih. Terlalu kecil dan teks terpotong; terlalu besar dan Anda membuang memori. 800×600 adalah titik tengah yang aman untuk kebanyakan tabel. + +## Langkah 6: Konversi halaman HTML yang telah diisi menjadi gambar PNG (convert html to png) + +Akhirnya, kami memanggil metode statis `Converter.convertHTML`. Metode ini menerima `HTMLDocument`, opsi penyimpanan, dan jalur file target. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Ganti `YOUR_DIRECTORY` dengan jalur absolut atau relatif yang ada di mesin Anda. Setelah program selesai, Anda akan menemukan `table.png` yang menampilkan tabel berformat rapi dengan lima baris, bergantian label “Even”/“Odd”. + +> **Pro tip:** Jika Anda membutuhkan latar belakang transparan, aktifkan melalui `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Contoh Lengkap yang Siap Dijalan + +Berikut adalah kelas Java lengkap yang menggabungkan semuanya. Salin‑tempel ke dalam `JsDomManipulation.java`, sesuaikan folder output, dan jalankan. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Output yang Diharapkan + +Saat Anda membuka `table.png`, Anda akan melihat sesuatu seperti ini: + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +Gambar menampilkan tabel 5‑baris dengan pola “Row 1 – Odd” … “Row 5 – Odd”, dengan gaya border tipis dan padding. + +## Kesalahan umum dan cara menghindarinya + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Skrip berjalan setelah rendering** | Kode asinkron (mis., `setTimeout`) tidak ditunggu. | Gunakan `window.onload` atau blokir hingga `document.readyState === 'complete'`. | +| **Gambar kosong** | Tidak ada konten dalam viewport (lebar/tinggi diatur ke 0). | Pastikan dimensi `ImageSaveOptions` tidak nol dan cocok dengan tata letak halaman. | +| **Baris tabel terpotong** | Kanvas terlalu kecil untuk tinggi tabel. | Tingkatkan `imageOptions.setHeight` atau gunakan `imageOptions.setFitToPage(true)`. | +| **CSS hilang** | Gaya inline diabaikan atau CSS eksternal tidak dimuat. | Simpan semua CSS yang diperlukan di dalam tag ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Perché è importante:** Quando *salvi HTML come PDF*, il convertitore legge CSS, immagini e font proprio come farebbe un browser. Tenere le risorse accanto all'HTML (o usare URL assoluti) evita collegamenti interrotti nel PDF finale. + +## Passo 3: Configura le opzioni di salvataggio PDF + +`PdfSaveOptions` ti permette di controllare elementi come la versione PDF, la compressione e se incorporare i font. Nella maggior parte degli scenari le impostazioni predefinite vanno bene, ma ecco come puoi modificarle. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Attenzione:** Se *converti file HTML in PDF* su un server headless, disabilitare l'incorporamento dei font può ridurre drasticamente le dimensioni del file, ma rischi di perdere caratteri per lingue non‑ASCII. + +## Passo 4: Esegui la conversione + +Ora avviene la magia. Il metodo `Converter.convertHTML` legge l'HTML, applica le opzioni e scrive il PDF in una sola chiamata. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Spiegazione:** +> - `htmlFilePath` può essere un percorso relativo o assoluto; il convertitore lo risolve proprio come farebbe un browser. +> - `pdfOptions` contiene tutte le preferenze *save html as pdf* impostate in precedenza. +> - Il terzo argomento è il file PDF di destinazione; Aspose crea automaticamente il file se non esiste. + +### Output previsto + +Eseguendo il programma viene creato `output.pdf` che appare esattamente come il `sample.html` renderizzato—l'intestazione in blu, il paragrafo sotto e gli stessi margini. Aprilo in qualsiasi visualizzatore PDF per confermare. + +## Passo 5: Verifica il risultato e gestisci i problemi comuni + +### Verifica + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Problemi comuni + +| Sintomo | Causa probabile | Soluzione | +|---------|-----------------|-----------| +| Immagini mancanti | Percorsi relativi non risolti | Usa URL assoluti o imposta `baseUri` in `HTMLDocument` | +| Font errati | Font non incorporati | Call `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Spostamento layout | Regole CSS `@media print` ignorate | Assicurati che il CSS sia compatibile con il motore di rendering di Aspose | +| La conversione si blocca con file di grandi dimensioni | Memoria heap insufficiente | Aumenta il flag JVM `-Xmx` (es., `-Xmx2g`) | + +> **Caso limite:** Se devi convertire direttamente una stringa HTML (senza file), avvolgila in un `HTMLDocument` e passa l'oggetto documento a `Converter.convertHTML`. Questo è utile quando generi HTML al volo, ad esempio da un motore di template. + +## Varianti avanzate + +### Conversione di un URL web + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Aggiunta di intestazione/piè di pagina + +Aspose.HTML ti consente di inserire contenuti di intestazione/piè di pagina tramite CSS `@page`. Esempio: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Posiziona il CSS nel tuo HTML o caricalo tramite un foglio di stile esterno prima della conversione. + +### Conversione batch + +Quando hai più file HTML, un semplice ciclo fa al caso tuo: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Conclusione + +Ora disponi di una ricetta completa, pronta per la produzione, per **creare PDF da HTML** usando Java. Importando Aspose.HTML, configurando `PdfSaveOptions` e invocando `Converter.convertHTML`, puoi *html to pdf java* in una singola riga di codice. + +Da qui potresti esplorare scenari più sofisticati—aggiungere filigrane, crittografare PDF o unire più pagine HTML in un unico documento. Tutti questi si basano sugli stessi passaggi fondamentali che hai appena imparato. + +Hai domande su curiosità *save html as pdf*, o hai bisogno di aiuto per affinare la conversione per un framework specifico? Lascia un commento, 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/java/conversion-html-to-various-image-formats/_index.md b/html/italian/java/conversion-html-to-various-image-formats/_index.md index 8d2cd44b9..5e340bb9f 100644 --- a/html/italian/java/conversion-html-to-various-image-formats/_index.md +++ b/html/italian/java/conversion-html-to-various-image-formats/_index.md @@ -90,6 +90,8 @@ Scopri come convertire HTML in GIF in Java usando Aspose.HTML. Una guida complet Impara a convertire HTML in JPEG con Aspose.HTML for Java. Guida passo‑passo per una gestione fluida dei documenti. ### [Conversione di HTML in PNG](./convert-html-to-png/) Scopri come convertire HTML in immagini PNG in Java con Aspose.HTML. Una guida completa con istruzioni passo‑passo. +### [Conversione di HTML in PNG – Guida Java per il rendering di tabelle HTML come immagini](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Scopri come convertire tabelle HTML in immagini PNG usando Aspose.HTML for Java, con esempi passo‑passo e opzioni di rendering avanzate. ### [Conversione di HTML in TIFF](./convert-html-to-tiff/) Scopri come convertire facilmente HTML in TIFF usando Aspose.HTML for Java. Guida passo‑passo per una gestione efficiente dei documenti. ### [Converti HTML in WebP](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/italian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/italian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..19d5819ec --- /dev/null +++ b/html/italian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Impara come convertire html in png usando Java. Questo tutorial copre + il rendering di html in png, la popolazione di una tabella html con javascript, + la creazione di un documento html in Java e la creazione di un html vuoto in Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: it +og_description: Converti HTML in PNG in modo semplice. Segui questa guida passo‑passo + per renderizzare HTML in PNG, popolare una tabella HTML con JavaScript e creare + un documento HTML con Java. +og_title: Converti HTML in PNG – Guida completa al rendering Java +tags: +- Java +- Aspose.HTML +- Image rendering +title: converti html in png – Guida Java per il rendering di tabelle HTML come immagini +url: /it/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – Guida Java per il rendering di tabelle HTML come immagini + +Hai mai avuto bisogno di **convert html to png** ma non sapevi da dove cominciare? Non sei solo. Molti sviluppatori si trovano in difficoltà quando devono trasformare uno snippet HTML dinamico—soprattutto uno costruito con JavaScript—in un'immagine statica. In questo tutorial percorreremo un esempio completo e eseguibile che prende una piccola pagina HTML, popola una tabella con JavaScript e infine la rende come file PNG usando Aspose.HTML per Java. + +Tratteremo anche argomenti correlati come **render html to png**, come **populate html table javascript**, e le sfumature di **create html document java** rispetto a **create empty html java**. Alla fine avrai un programma autonomo che potrai inserire in qualsiasi progetto Maven o Gradle e eseguire immediatamente. + +## Prerequisiti + +- Java 17 o versioni successive (l'API funziona con Java 8+ ma useremo l'ultima LTS) +- Libreria Aspose.HTML per Java (disponibile tramite Maven Central) +- Un IDE modesto o la semplice riga di comando `javac`/`java` +- Permessi di scrittura su una cartella dove verrà salvato il PNG + +Nessun browser web esterno, nessun Chrome headless, solo puro codice Java. + +## Passo 1: Creare un documento HTML vuoto (create empty html java) + +La prima cosa di cui abbiamo bisogno è una pagina pulita—un oggetto documento HTML vuoto che possiamo manipolare programmaticamente. Aspose.HTML fornisce la classe `HTMLDocument` che si comporta come un mini motore di browser. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Perché iniziare con un documento vuoto? Perché garantisce che nessun markup residuo o stato precedente interferisca con la tabella che stiamo per costruire. È l'equivalente Java di chiamare `document.open()` in un browser. + +## Passo 2: Scrivere una pagina HTML minimale che contiene una tabella vuota (create html document java) + +Ora iniettiamo uno scheletro HTML minuscolo. La pagina include un segnaposto `
` e alcune regole CSS per far apparire la tabella in modo decente al rendering. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Nota come **create html document java** venga realizzato fornendo una stringa grezza a `write`. Questo approccio è utile quando l'HTML è generato al volo e evita la necessità di file template esterni. + +## Passo 3: Popolare la tabella HTML con JavaScript (populate html table javascript) + +Ora arriva la parte divertente—aggiungere righe alla tabella usando JavaScript. Creeremo un breve script che itera cinque volte, inserendo una riga ad ogni iterazione e riempiendo due celle: una con il numero della riga e l'altra con “Even” o “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Perché usare JavaScript qui? Perché molte pagine reali costruiscono tabelle dinamicamente—pensa a dashboard, report o griglie dati lato client. **populate html table javascript** all'interno del motore Aspose replica esattamente ciò che accadrebbe in un browser, garantendo che il PNG renderizzato sia identico a quello che l'utente vedrebbe. + +## Passo 4: Eseguire lo script all'interno del sandbox del documento + +Aspose.HTML fornisce un oggetto `Window` che si comporta come il `window` di un browser. Chiamare `eval` esegue il nostro script in un ambiente isolato, quindi non vengono effettuate chiamate di rete esterne. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Un errore comune è dimenticare di attendere il completamento dello script prima del rendering. In questo caso semplice lo script viene eseguito in modo sincrono, quindi possiamo passare direttamente al passo successivo. Se dovessi incorporare codice asincrono (ad esempio `fetch`), dovresti agganciarti all'evento `onload` o utilizzare un'attesa basata su `Promise`. + +## Passo 5: Configurare le opzioni di salvataggio immagine (render html to png) + +Prima di rasterizzare effettivamente la pagina, decidiamo le dimensioni dell'immagine di output. La classe `ImageSaveOptions` ci permette di impostare larghezza, altezza e alcuni parametri di qualità. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Scegliere una dimensione di canvas ragionevole è fondamentale per un risultato pulito di **render html to png**. Troppo piccolo e il testo viene tagliato; troppo grande e si spreca memoria. 800×600 è un compromesso sicuro per la maggior parte delle tabelle. + +## Passo 6: Convertire la pagina HTML popolata in un'immagine PNG (convert html to png) + +Infine, chiamiamo il metodo statico `Converter.convertHTML`. Accetta l'`HTMLDocument`, le opzioni di salvataggio e il percorso del file di destinazione. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Sostituisci `YOUR_DIRECTORY` con un percorso assoluto o relativo che esiste sulla tua macchina. Dopo che il programma termina, troverai `table.png` che mostra una tabella ben formattata con cinque righe, con etichette “Even”/“Odd” alternate. + +> **Consiglio:** Se ti serve uno sfondo trasparente, abilitalo tramite `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Esempio completo, pronto per l'esecuzione + +Di seguito trovi la classe Java completa che mette tutto insieme. Copiala in `JsDomManipulation.java`, regola la cartella di output e eseguila. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Output previsto + +Quando apri `table.png`, dovresti vedere qualcosa di simile: + +![esempio di output convert html to png](https://example.com/assets/table.png "convert html to png – tabella renderizzata") + +L'immagine mostra una tabella a 5 righe con il pattern “Row 1 – Odd” … “Row 5 – Odd”, stilizzata con bordi sottili e padding. + +## Problemi comuni e come evitarli + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Lo script viene eseguito dopo il rendering** | Il codice asincrono (ad esempio `setTimeout`) non è atteso. | Usa `window.onload` o blocca fino a `document.readyState === 'complete'`. | +| **L'immagine è vuota** | Nessun contenuto all'interno del viewport (larghezza/altezza impostate a 0). | Assicurati che le dimensioni di `ImageSaveOptions` siano diverse da zero e corrispondano al layout della pagina. | +| **Le righe della tabella sono tagliate** | Canvas troppo piccolo per l'altezza della tabella. | Aumenta `imageOptions.setHeight` o usa `imageOptions.setFitToPage(true)`. | +| **CSS mancante** | Stile inline omesso o CSS esterno non caricato. | Mantieni tutto il CSS necessario all'interno del tag ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Why this matters:** *save HTML as PDF* を行う際、コンバータはブラウザと同様に CSS、画像、フォントを読み込みます。HTML の横にアセットを配置する（または絶対 URL を使用する）ことで、最終的な PDF でリンク切れが起きるのを防げます。 + +## Step 3: Configure PDF Save Options + +`PdfSaveOptions` を使うと、PDF のバージョン、圧縮、フォント埋め込みの有無などを制御できます。ほとんどのシナリオではデフォルトで問題ありませんが、以下のように調整できます。 + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Watch out:** ヘッドレスサーバー上で *convert html file pdf* を実行する場合、フォント埋め込みを無効にするとファイルサイズが大幅に削減できますが、非 ASCII 言語の文字が欠けるリスクがあります。 + +## Step 4: Perform the Conversion + +ここで魔法が起きます。`Converter.convertHTML` メソッドは HTML を読み込み、オプションを適用し、PDF を一度の呼び出しで書き出します。 + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Explanation:** +> - `htmlFilePath` は相対パスでも絶対パスでも構いません。コンバータはブラウザと同様に解決します。 +> - `pdfOptions` には先ほど設定した *save html as pdf* のすべての設定が保持されています。 +> - 3 番目の引数は出力先 PDF ファイルです。Aspose はファイルが存在しない場合自動的に作成します。 + +### Expected Output + +プログラムを実行すると `output.pdf` が生成され、レンダリングされた `sample.html` と全く同じ外観になります。見出しは青色、段落はその下に配置され、余白も同一です。任意の PDF ビューアで開いて確認してください。 + +## Step 5: Verify the Result & Handle Common Issues + +### Verify + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Common Pitfalls + +| 症状 | 考えられる原因 | 対策 | +|---------|--------------|-----| +| 画像が表示されない | 相対パスが解決されていない | 絶対 URL を使用するか、`HTMLDocument` の `baseUri` を設定する | +| フォントが崩れる | フォントが埋め込まれていない | `pdfOptions.setEmbedStandardPdfFonts(true)` を呼び出す | +| レイアウトがずれる | CSS の `@media print` ルールが無視されている | CSS が Aspose のレンダリングエンジンと互換性があることを確認する | +| 大容量ファイルで変換がハングする | ヒープメモリが不足している | JVM の `-Xmx` フラグを増やす（例: `-Xmx2g`） | + +> **Edge case:** HTML ファイルではなく文字列から直接変換したい場合は、`HTMLDocument` にラップして `Converter.convertHTML` に渡してください。テンプレートエンジンで動的に生成した HTML を変換する際に便利です。 + +## Advanced Variations + +### Converting a Web URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Adding a Header/Footer + +Aspose.HTML では CSS の `@page` を使ってヘッダー/フッターを注入できます。例: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +CSS は HTML 内に埋め込むか、変換前に外部スタイルシートとして読み込んでください。 + +### Batch Conversion + +複数の HTML ファイルがある場合は、シンプルなループで一括変換できます: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Conclusion + +これで Java を使って **HTMLからPDFを作成**するための完全な本番対応レシピが手に入りました。Aspose.HTML をインポートし、`PdfSaveOptions` を設定し、`Converter.convertHTML` を呼び出すだけで、*html to pdf java* をワンライナーで実現できます。 + +ここからは、透かしの追加、PDF の暗号化、複数の HTML ページを 1 つのドキュメントに結合するなど、より高度なシナリオに挑戦してみてください。すべては今回習得した基本ステップに基づいています。 + +*save html as 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/java/conversion-html-to-various-image-formats/_index.md b/html/japanese/java/conversion-html-to-various-image-formats/_index.md index b8d96e2dd..63272f3ca 100644 --- a/html/japanese/java/conversion-html-to-various-image-formats/_index.md +++ b/html/japanese/java/conversion-html-to-various-image-formats/_index.md @@ -93,6 +93,9 @@ Aspose.HTML for Java を使用して HTML を JPEG に変換する方法を学 ### [HTML を PNG に変換](./convert-html-to-png/) Aspose.HTML を使用して Java で HTML を PNG 画像に変換する方法を学びます。ステップバイステップの包括的なガイドです。 +### [HTML を PNG に変換 – HTML テーブルを画像としてレンダリングする Java ガイド](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Aspose.HTML for Java を使用して HTML テーブルを PNG 画像に変換する方法を学びます。ステップバイステップのガイドです。 + ### [HTML を TIFF に変換](./convert-html-to-tiff/) Aspose.HTML for Java を使用して HTML を TIFF に簡単に変換する方法を学びます。効率的なドキュメント処理のためのステップバイステップガイドです。 diff --git a/html/japanese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/japanese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..3afb6420d --- /dev/null +++ b/html/japanese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,205 @@ +--- +category: general +date: 2026-04-09 +description: Java を使用して HTML を PNG に変換する方法を学びます。このチュートリアルでは、HTML を PNG にレンダリングする方法、JavaScript + で HTML テーブルにデータを埋め込む方法、Java で HTML ドキュメントを作成する方法、そして Java で空の HTML を作成する方法を取り上げています。 +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: ja +og_description: HTML を PNG に変換するのが簡単です。ステップバイステップのガイドに従って、HTML を PNG にレンダリングし、JavaScript + で HTML テーブルを埋め込み、Java で HTML ドキュメントを作成しましょう。 +og_title: HTMLをPNGに変換 – 完全なJavaレンダリングガイド +tags: +- Java +- Aspose.HTML +- Image rendering +title: HTML を PNG に変換 – HTML テーブルを画像としてレンダリングする Java ガイド +url: /ja/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# HTMLをPNGに変換 – JavaでHTMLテーブルを画像としてレンダリングするガイド + +**convert html to png** が必要だったことはありますか、でもどこから始めればいいか分からなかったことはありませんか？ あなたは一人ではありません。多くの開発者が、特に JavaScript で構築された動的な HTML スニペットを静的な画像に変換しなければならないときに壁にぶつかります。このチュートリアルでは、非常に小さな HTML ページを取り、JavaScript でテーブルにデータを埋め込み、最終的に Aspose.HTML for Java を使用して PNG ファイルとしてレンダリングする、完全に実行可能なサンプルを順を追って解説します。 + +また、**render html to png**、**populate html table javascript**、**create html document java** と **create empty html java** の違いといった関連トピックにも触れます。最後まで読めば、任意の Maven または Gradle プロジェクトに貼り付けてすぐに実行できる、自己完結型のプログラムが手に入ります。 + +## 前提条件 + +- Java 17 以上（API は Java 8+ でも動作しますが、最新の LTS を使用します） +- Aspose.HTML for Java ライブラリ（Maven Central から取得可能） +- ちょっとした IDE またはシンプルな `javac`/`java` コマンドライン環境 +- PNG を保存するフォルダーへの書き込み権限 + +外部のウェブブラウザーやヘッドレス Chrome は不要です。純粋な Java コードだけで完結します。 + +## Step 1: 空の HTML ドキュメントを作成する (create empty html java) + +最初に必要なのは、プログラムから操作できる「白紙」の HTML ドキュメントオブジェクトです。Aspose.HTML が提供する `HTMLDocument` クラスは、ミニブラウザーエンジンのように振る舞います。 + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +なぜ空のドキュメントから始めるのか？ それは、余計なマークアップや以前の状態がテーブル構築に干渉しないことを保証するためです。ブラウザーで `document.open()` を呼び出すのと同等の操作です。 + +## Step 2: 空のテーブルを含む最小限の HTML ページを書き込む (create html document java) + +次に、非常にシンプルな HTML の骨格を注入します。ページには `
` プレースホルダーと、テーブルを見栄え良くするための数行の CSS ルールが含まれます。 + +```java +htmlDoc.write( + "" + + "
" +); +``` + +**create html document java** は、`write` に生の文字列を渡すことで実現しています。この方法は、HTML をオンザフライで生成する場合に便利で、外部テンプレートファイルを用意する手間が省けます。 + +## Step 3: JavaScript で HTML テーブルにデータを埋め込む (populate html table javascript) + +ここからが本番です――JavaScript を使ってテーブルに行を追加します。5 回ループし、各イテレーションで行を挿入し、2 つのセルに「行番号」と「Even」または「Odd」の文字列を入れる短いスクリプトを作ります。 + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +なぜ JavaScript を使うのか？ 多くの実務ページはダイナミックにテーブルを生成します――ダッシュボード、レポート、クライアントサイドのデータグリッドなどです。Aspose エンジン内で **populate html table javascript** を実行することで、ブラウザーでの挙動と全く同じ結果が得られ、生成された PNG がユーザーに見えるものと一致します。 + +## Step 4: ドキュメントのサンドボックス内でスクリプトを実行する + +Aspose.HTML は、ブラウザーの `window` と同様に振る舞う `Window` オブジェクトを提供します。`eval` を呼び出すと、外部へのネットワーク呼び出しが行われない隔離環境でスクリプトが実行されます。 + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +よくある落とし穴は、レンダリング前にスクリプトの完了を待たないことです。このシンプルな例ではスクリプトは同期的に実行されるため、すぐに次のステップへ進めます。もし非同期コード（例：`fetch`）を埋め込む場合は、`onload` イベントにフックするか、`Promise` ベースの待機処理が必要です。 + +## Step 5: 画像保存オプションを設定する (render html to png) + +ページを実際にラスタライズする前に、出力画像のサイズを決めます。`ImageSaveOptions` クラスで幅・高さ・品質パラメータを設定できます。 + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +適切なキャンバスサイズの選定は、きれいな **render html to png** 結果を得るために重要です。小さすぎると文字が切れ、大きすぎるとメモリを無駄に消費します。800×600 はほとんどのテーブルにとって安全な中間サイズです。 + +## Step 6: 埋め込んだ HTML ページを PNG 画像に変換する (convert html to png) + +最後に、静的メソッド `Converter.convertHTML` を呼び出します。`HTMLDocument`、保存オプション、出力ファイルパスを渡すだけです。 + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +`YOUR_DIRECTORY` を、実際に存在する絶対パスまたは相対パスに置き換えてください。プログラムが終了すると、`table.png` が生成され、5 行のテーブルが「Even」/「Odd」ラベル交互に表示された状態で保存されています。 + +> **プロのコツ:** 透明背景が必要な場合は、`imageOptions.setBackgroundColor(Color.getTransparent());` で有効化してください。 + +## 完全な実行可能サンプル + +以下は、すべてをひとつにまとめた Java クラスです。`JsDomManipulation.java` にコピペし、出力フォルダーを調整した上で実行してください。 + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### 期待される出力 + +`table.png` を開くと、次のような画像が表示されます。 + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +画像は、5 行のテーブルで「Row 1 – Odd」…「Row 5 – Odd」パターンが薄い枠線とパディングで整形されています。 + +## よくある落とし穴と回避策 + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Script runs after rendering** | 非同期コード（例：`setTimeout`）が待機されていない。 | `window.onload` を使用するか、`document.readyState === 'complete'` になるまでブロックする。 | +| **Image is blank** | ビューポート内にコンテンツがなく、幅/高さが 0 に設定されている。 | `ImageSaveOptions` の幅・高さが 0 でないこと、ページレイアウトに合致していることを確認する。 | +| **Table rows are cut off** | キャンバスがテーブルの高さに対して小さすぎる。 | `imageOptions.setHeight` を増やすか、`imageOptions.setFitToPage(true)` を使用する。 | +| **Missing CSS** | インラインスタイルが抜けている、または外部 CSS が読み込まれない。 | 必要な CSS はすべて ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **왜 중요한가:** *HTML을 PDF로 저장*할 때 변환기는 브라우저와 마찬가지로 CSS, 이미지, 글꼴을 읽습니다. HTML 옆에 자산을 두거나 절대 URL을 사용하면 최종 PDF에서 링크가 깨지는 일을 방지할 수 있습니다. + +## 3단계: PDF 저장 옵션 구성 + +`PdfSaveOptions`를 사용하면 PDF 버전, 압축, 글꼴 포함 여부 등을 제어할 수 있습니다. 대부분의 경우 기본값으로 충분하지만, 필요에 따라 다음과 같이 조정할 수 있습니다. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **주의:** 헤드리스 서버에서 *html 파일을 pdf로 변환*할 경우 글꼴 포함을 비활성화하면 파일 크기가 크게 줄어들지만, 비 ASCII 언어의 문자가 누락될 위험이 있습니다. + +## 4단계: 변환 수행 + +이제 마법이 일어납니다. `Converter.convertHTML` 메서드는 HTML을 읽고 옵션을 적용한 뒤 한 번에 PDF를 작성합니다. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **설명:** +> - `htmlFilePath`는 상대 경로나 절대 경로 모두 가능하며, 변환기는 브라우저처럼 이를 해석합니다. +> - `pdfOptions`는 앞서 설정한 *HTML을 PDF로 저장* 옵션을 모두 담고 있습니다. +> - 세 번째 인자는 대상 PDF 파일이며, Aspose가 파일이 없을 경우 자동으로 생성합니다. + +### 예상 출력 + +프로그램을 실행하면 `output.pdf`가 생성되며, `sample.html`이 렌더링된 모습과 정확히 동일합니다—파란색 제목, 아래의 단락, 동일한 여백 등. PDF 뷰어에서 열어 확인해 보세요. + +## 5단계: 결과 검증 및 일반적인 문제 처리 + +### 검증 + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### 일반적인 함정 + +| 증상 | 가능한 원인 | 해결 방법 | +|------|-------------|----------| +| 이미지 누락 | 상대 경로가 해결되지 않음 | 절대 URL을 사용하거나 `HTMLDocument`의 `baseUri` 설정 | +| 글꼴이 이상함 | 글꼴이 포함되지 않음 | `pdfOptions.setEmbedStandardPdfFonts(true)` 호출 | +| 레이아웃 이동 | CSS `@media print` 규칙 무시 | Aspose 렌더링 엔진과 호환되는 CSS 사용 | +| 대용량 파일 변환 시 멈춤 | 힙 메모리 부족 | JVM `-Xmx` 옵션 증가 (예: `-Xmx2g`) | + +> **예외 상황:** 파일이 아닌 HTML 문자열을 직접 변환해야 할 경우, 문자열을 `HTMLDocument`에 래핑하고 해당 문서 객체를 `Converter.convertHTML`에 전달하면 됩니다. 템플릿 엔진 등에서 동적으로 HTML을 생성할 때 유용합니다. + +## 고급 변형 + +### 웹 URL 변환 + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### 헤더/푸터 추가 + +Aspose.HTML는 CSS `@page`를 통해 헤더/푸터 내용을 삽입할 수 있습니다. 예시: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +HTML에 CSS를 포함하거나 변환 전에 외부 스타일시트로 로드하세요. + +### 배치 변환 + +여러 HTML 파일을 한 번에 변환하려면 간단한 루프를 사용하면 됩니다: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## 결론 + +이제 Java를 사용해 **HTML을 PDF로 만들기** 위한 완전한 프로덕션 레시피를 갖추었습니다. Aspose.HTML를 가져오고 `PdfSaveOptions`를 설정한 뒤 `Converter.convertHTML`을 호출하면 *html to pdf java* 작업을 한 줄의 코드로 수행할 수 있습니다. + +앞으로는 워터마크 추가, PDF 암호화, 여러 HTML 페이지를 하나의 문서로 병합하는 등 더 복잡한 시나리오도 탐색해 보세요. 모두 지금 익힌 핵심 단계들을 기반으로 합니다. + +*save html as 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/java/conversion-html-to-various-image-formats/_index.md b/html/korean/java/conversion-html-to-various-image-formats/_index.md index 126ddb6a9..9fdb89cfa 100644 --- a/html/korean/java/conversion-html-to-various-image-formats/_index.md +++ b/html/korean/java/conversion-html-to-various-image-formats/_index.md @@ -94,6 +94,8 @@ Aspose.HTML를 사용해 Java에서 HTML을 GIF로 변환하는 방법을 배웁 Aspose.HTML for Java를 사용해 HTML을 JPEG로 변환하는 방법을 배웁니다. 원활한 문서 처리를 위한 단계별 가이드입니다. ### [HTML을 PNG로 변환](./convert-html-to-png/) Aspose.HTML를 사용해 Java에서 HTML을 PNG 이미지로 변환하는 방법을 배웁니다. 단계별 지침이 포함된 포괄적인 가이드입니다. +### [HTML을 PNG로 변환 – HTML 테이블을 이미지로 렌더링하는 Java 가이드](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Aspose.HTML for Java를 사용해 HTML 테이블을 PNG 이미지로 변환하는 방법을 단계별로 안내합니다. ### [HTML을 TIFF로 변환](./convert-html-to-tiff/) Aspose.HTML for Java를 사용해 HTML을 TIFF로 쉽게 변환하는 방법을 배웁니다. 효율적인 문서 처리를 위한 단계별 가이드입니다. ### [HTML을 WebP로 변환 – Aspose.HTML와 함께하는 완전한 Java 가이드](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/korean/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/korean/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..1711ce392 --- /dev/null +++ b/html/korean/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,205 @@ +--- +category: general +date: 2026-04-09 +description: Java를 사용하여 HTML을 PNG로 변환하는 방법을 배워보세요. 이 튜토리얼에서는 HTML을 PNG로 렌더링하기, JavaScript로 + HTML 테이블 채우기, Java로 HTML 문서 만들기 및 Java로 빈 HTML 만들기를 다룹니다. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: ko +og_description: HTML을 PNG로 변환하는 것이 쉬워졌습니다. 단계별 가이드를 따라 HTML을 PNG로 렌더링하고, JavaScript로 + HTML 테이블을 채우며, Java로 HTML 문서를 생성하세요. +og_title: HTML을 PNG로 변환 – 완전한 Java 렌더링 가이드 +tags: +- Java +- Aspose.HTML +- Image rendering +title: HTML을 PNG로 변환 – HTML 테이블을 이미지로 렌더링하는 Java 가이드 +url: /ko/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – HTML 테이블을 이미지로 렌더링하는 Java 가이드 + +**convert html to png**가 필요했지만 어디서 시작해야 할지 몰랐던 적이 있나요? 당신만 그런 것이 아닙니다. 많은 개발자들이 동적인 HTML 스니펫, 특히 JavaScript로 만든 것을 정적인 이미지로 변환해야 할 때 난관에 부딪힙니다. 이 튜토리얼에서는 작은 HTML 페이지를 가져와 JavaScript로 테이블을 채우고, 최종적으로 Aspose.HTML for Java를 사용해 PNG 파일로 렌더링하는 완전하고 실행 가능한 예제를 단계별로 살펴보겠습니다. + +또한 **render html to png**, **populate html table javascript**, 그리고 **create html document java**와 **create empty html java**의 차이점과 같은 관련 주제도 다룰 것입니다. 마지막까지 진행하면 Maven이나 Gradle 프로젝트에 바로 넣어 실행할 수 있는 독립적인 프로그램을 얻게 됩니다. + +## 필수 조건 + +- Java 17 또는 최신 버전 (API는 Java 8+에서도 작동하지만 최신 LTS를 사용합니다) +- Aspose.HTML for Java 라이브러리 (Maven Central에서 제공) +- 간단한 IDE 또는 일반 `javac`/`java` 명령줄 +- PNG가 저장될 폴더에 대한 쓰기 권한 + +외부 웹 브라우저나 헤드리스 Chrome 없이 순수 Java 코드만 사용합니다. + +## Step 1: 빈 HTML 문서 만들기 (create empty html java) + +우리가 먼저 필요한 것은 깨끗한 시작점, 즉 프로그래밍 방식으로 조작할 수 있는 빈 HTML 문서 객체입니다. Aspose.HTML는 미니 브라우저 엔진처럼 동작하는 `HTMLDocument` 클래스를 제공합니다. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +왜 빈 문서부터 시작할까요? 이는 우리가 만들 테이블에 방해가 되는 불필요한 마크업이나 이전 상태가 없음을 보장하기 때문입니다. 브라우저에서 `document.open()`을 호출하는 것과 같은 Java 방식입니다. + +## Step 2: 빈 테이블을 포함하는 최소 HTML 페이지 작성하기 (create html document java) + +다음으로 작은 HTML 골격을 삽입합니다. 페이지에는 `
` 자리표시자와 렌더링 시 테이블이 보기 좋게 보이도록 하는 몇 가지 CSS 규칙이 포함됩니다. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +`write`에 원시 문자열을 전달하여 **create html document java**하는 방식을 확인하세요. 이 방법은 HTML을 즉석에서 생성할 때 유용하며 외부 템플릿 파일이 필요 없게 합니다. + +## Step 3: JavaScript로 HTML 테이블 채우기 (populate html table javascript) + +이제 재미있는 부분인 JavaScript를 사용해 테이블에 행을 추가합니다. 우리는 5번 반복하면서 각 반복마다 행을 삽입하고 두 개의 셀을 채우는 짧은 스크립트를 작성합니다: 하나는 행 번호, 다른 하나는 “Even” 또는 “Odd”입니다. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +왜 여기서 JavaScript를 사용할까요? 많은 실제 페이지가 대시보드, 보고서, 클라이언트 측 데이터 그리드와 같이 동적으로 테이블을 구축하기 때문입니다. Aspose 엔진 내부에서 **populate html table javascript**을 수행함으로써 브라우저에서 일어나는 일을 정확히 모방하여 렌더링된 PNG가 사용자가 보는 것과 동일하게 보이도록 합니다. + +## Step 4: 문서 샌드박스 내에서 스크립트 실행 + +Aspose.HTML는 브라우저의 `window`와 같은 동작을 하는 `Window` 객체를 제공합니다. `eval`을 호출하면 스크립트가 격리된 환경에서 실행되어 외부 네트워크 호출이 발생하지 않습니다. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +흔히 발생하는 실수는 렌더링하기 전에 스크립트가 끝날 때까지 기다리지 않는 것입니다. 이 간단한 경우 스크립트가 동기적으로 실행되므로 바로 다음 단계로 넘어갈 수 있습니다. 비동기 코드를 삽입할 경우(예: `fetch`) `onload` 이벤트에 연결하거나 `Promise` 기반 대기를 사용해야 합니다. + +## Step 5: 이미지 저장 옵션 구성 (render html to png) + +페이지를 실제로 래스터화하기 전에 출력 이미지의 크기를 결정합니다. `ImageSaveOptions` 클래스를 사용하면 너비, 높이 및 몇 가지 품질 매개변수를 설정할 수 있습니다. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +합리적인 캔버스 크기를 선택하는 것은 깔끔한 **render html to png** 결과를 위해 중요합니다. 너무 작으면 텍스트가 잘리고, 너무 크면 메모리를 낭비합니다. 800×600은 대부분의 테이블에 안전한 중간값입니다. + +## Step 6: 채워진 HTML 페이지를 PNG 이미지로 변환 (convert html to png) + +마지막으로 정적 `Converter.convertHTML` 메서드를 호출합니다. 이 메서드는 `HTMLDocument`, 저장 옵션, 대상 파일 경로를 인수로 받습니다. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +`YOUR_DIRECTORY`를 여러분의 머신에 존재하는 절대 경로나 상대 경로로 교체하세요. 프로그램이 완료되면 `table.png` 파일에 5개의 행이 있는 깔끔하게 포맷된 테이블이 표시되며, “Even”/“Odd” 라벨이 교대로 나타납니다. + +> **Pro tip:** 투명 배경이 필요하면 `imageOptions.setBackgroundColor(Color.getTransparent());`를 사용해 활성화하세요. + +## 전체 실행 가능한 예제 + +아래는 모든 내용을 하나로 합친 완전한 Java 클래스입니다. `JsDomManipulation.java`에 복사·붙여넣기하고, 출력 폴더를 조정한 뒤 실행하세요. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### 예상 출력 + +`table.png`를 열면 다음과 같은 화면이 표시됩니다: + +![convert html to png 예시 출력](https://example.com/assets/table.png "convert html to png – 렌더링된 테이블") + +이미지는 얇은 테두리와 패딩이 적용된 5행 테이블을 보여주며, “Row 1 – Odd” … “Row 5 – Odd” 패턴이 적용됩니다. + +## 일반적인 함정 및 회피 방법 + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **스크립트가 렌더링 후에 실행됨** | 비동기 코드(예: `setTimeout`)가 대기되지 않음. | `window.onload`를 사용하거나 `document.readyState === 'complete'`가 될 때까지 차단합니다. | +| **이미지가 빈 화면** | 뷰포트 내에 내용이 없음(너비/높이가 0으로 설정). | `ImageSaveOptions`의 차원이 0이 아니고 페이지 레이아웃에 맞게 설정되었는지 확인합니다. | +| **테이블 행이 잘림** | 캔버스가 테이블 높이에 비해 너무 작음. | `imageOptions.setHeight`를 늘리거나 `imageOptions.setFitToPage(true)`를 사용합니다. | +| **CSS 누락** | 인라인 스타일이 누락되었거나 외부 CSS가 로드되지 않음. | 외부 리소스는 기본적으로 가져오지 않으므로 필요한 모든 CSS를 ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Dlaczego to ważne:** Gdy *zapisujesz HTML jako PDF*, konwerter odczytuje CSS, obrazy i czcionki tak jak przeglądarka. Trzymanie zasobów obok HTML (lub używanie bezwzględnych URL‑ów) zapobiega uszkodzonym linkom w ostatecznym PDF. + +## Krok 3: Skonfiguruj opcje zapisu PDF + +`PdfSaveOptions` pozwalają kontrolować takie rzeczy jak wersja PDF, kompresja i czy osadzać czcionki. W większości scenariuszy domyślne ustawienia działają dobrze, ale oto jak możesz je dostosować. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Uwaga:** Jeśli *konwertujesz plik html do pdf* na serwerze bez interfejsu graficznego, wyłączenie osadzania czcionek może znacznie zmniejszyć rozmiar pliku, ale ryzykujesz brak znaków w językach nie‑ASCII. + +## Krok 4: Wykonaj konwersję + +Teraz dzieje się magia. Metoda `Converter.convertHTML` odczytuje HTML, stosuje opcje i zapisuje PDF w jednym wywołaniu. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Explanation:** +> - `htmlFilePath` może być ścieżką względną lub bezwzględną; konwerter rozwiązuje ją tak, jak przeglądarka. +> - `pdfOptions` zawiera wszystkie preferencje *save html as pdf*, które ustawiłeś wcześniej. +> - Trzeci argument to docelowy plik PDF; Aspose automatycznie tworzy plik, jeśli nie istnieje. + +### Oczekiwany wynik + +Uruchomienie programu tworzy `output.pdf`, który wygląda dokładnie tak jak wyrenderowany `sample.html` — nagłówek w niebieskim, akapit poniżej i te same marginesy. Otwórz go w dowolnym przeglądarce PDF, aby potwierdzić. + +## Krok 5: Zweryfikuj wynik i obsłuż typowe problemy + +### Weryfikacja + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Typowe pułapki + +| Objaw | Prawdopodobna przyczyna | Rozwiązanie | +|---------|--------------|-----| +| Brak obrazów | Ścieżki względne nie zostały rozwiązane | Użyj bezwzględnych URL‑ów lub ustaw `baseUri` w `HTMLDocument` | +| Czcionki wyglądają niepoprawnie | Czcionki nie są osadzone | Wywołaj `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Przesunięcie układu | Reguły CSS `@media print` są ignorowane | Upewnij się, że CSS jest kompatybilny z silnikiem renderującym Aspose | +| Konwersja zawiesza się przy dużych plikach | Niewystarczająca pamięć sterty | Zwiększ flagę JVM `-Xmx` (np. `-Xmx2g`) | + +> **Przypadek brzegowy:** Jeśli potrzebujesz konwertować ciąg HTML bezpośrednio (bez pliku), opakuj go w `HTMLDocument` i przekaż obiekt dokumentu do `Converter.convertHTML`. Jest to przydatne przy generowaniu HTML w locie, np. z silnika szablonów. + +## Zaawansowane warianty + +### Konwersja URL‑u internetowego + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Dodawanie nagłówka/stopki + +Aspose.HTML pozwala wstrzykiwać zawartość nagłówka/stopki za pomocą CSS `@page`. Przykład: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Umieść CSS w swoim HTML lub załaduj go za pomocą zewnętrznego arkusza stylów przed konwersją. + +### Konwersja wsadowa + +Gdy masz wiele plików HTML, prostą pętlę wystarczy: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Zakończenie + +Masz teraz kompletny, gotowy do produkcji przepis na **utworzenie PDF z HTML** przy użyciu Javy. Importując Aspose.HTML, konfigurując `PdfSaveOptions` i wywołując `Converter.convertHTML`, możesz *html to pdf java* w jednej linii kodu. + +Od tego momentu możesz eksplorować bardziej zaawansowane scenariusze — dodawanie znaków wodnych, szyfrowanie PDF‑ów lub łączenie wielu stron HTML w jeden dokument. Wszystko to opiera się na tych samych podstawowych krokach, które właśnie opanowałeś. + +Masz pytania dotyczące dziwactw *save html as pdf* lub potrzebujesz pomocy w dostosowaniu konwersji do konkretnego frameworka? Zostaw komentarz 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/java/conversion-html-to-various-image-formats/_index.md b/html/polish/java/conversion-html-to-various-image-formats/_index.md index 2e1d027d5..9c01aa724 100644 --- a/html/polish/java/conversion-html-to-various-image-formats/_index.md +++ b/html/polish/java/conversion-html-to-various-image-formats/_index.md @@ -94,6 +94,8 @@ Dowiedz się, jak konwertować HTML do JPEG przy użyciu Aspose.HTML for Java. P ### [Converting HTML to PNG](./convert-html-to-png/) Dowiedz się, jak konwertować HTML do obrazów PNG w Javie przy użyciu Aspose.HTML. Kompleksowy przewodnik z instrukcjami krok po kroku. +### [Konwertuj HTML do PNG – przewodnik Java po renderowaniu tabel HTML jako obrazów](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) + ### [Converting HTML to TIFF](./convert-html-to-tiff/) Dowiedz się, jak łatwo konwertować HTML do TIFF przy użyciu Aspose.HTML for Java. Przewodnik krok po kroku dla efektywnego zarządzania dokumentami. diff --git a/html/polish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/polish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..e0ef02df2 --- /dev/null +++ b/html/polish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Dowiedz się, jak konwertować HTML na PNG przy użyciu Javy. Ten tutorial + obejmuje renderowanie HTML do PNG, wypełnianie tabeli HTML w JavaScript, tworzenie + dokumentu HTML w Javie oraz tworzenie pustego HTML w Javie. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: pl +og_description: Konwersja HTML do PNG jest prosta. Postępuj zgodnie z tym przewodnikiem + krok po kroku, aby renderować HTML do PNG, wypełniać tabelę HTML w JavaScript i + tworzyć dokument HTML w Javie. +og_title: konwertuj html do png – Kompletny przewodnik renderowania w Javie +tags: +- Java +- Aspose.HTML +- Image rendering +title: konwertuj html do png – przewodnik Java po renderowaniu tabel HTML jako obrazów +url: /pl/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# konwersja html do png – przewodnik Java po renderowaniu tabel HTML jako obrazów + +Kiedykolwiek potrzebowałeś **convert html to png**, ale nie wiedziałeś, od czego zacząć? Nie jesteś sam. Wielu programistów napotyka problem, gdy muszą zamienić dynamiczny fragment HTML — szczególnie taki zbudowany przy użyciu JavaScript — w statyczny obraz. W tym samouczku przeprowadzimy Cię przez kompletny, działający przykład, który pobiera małą stronę HTML, wypełnia tabelę przy pomocy JavaScript i ostatecznie renderuje ją jako plik PNG przy użyciu Aspose.HTML for Java. + +Poruszymy także powiązane tematy, takie jak **render html to png**, jak **populate html table javascript**, oraz różnice między **create html document java** a **create empty html java**. Po zakończeniu będziesz mieć samodzielny program, który możesz wkleić do dowolnego projektu Maven lub Gradle i uruchomić od razu. + +## Wymagania wstępne + +- Java 17 lub nowszy (API działa z Java 8+, ale użyjemy najnowszego LTS) +- Biblioteka Aspose.HTML for Java (dostępna w Maven Central) +- Skromne IDE lub zwykła linia poleceń `javac`/`java` +- Uprawnienia do zapisu w folderze, w którym zostanie zapisany PNG + +Bez zewnętrznych przeglądarek, bez headless Chrome, tylko czysty kod Java. + +## Krok 1: Utwórz pusty dokument HTML (create empty html java) + +Pierwszą rzeczą, której potrzebujemy, jest czysta karta — pusty obiekt dokumentu HTML, którym możemy manipulować programowo. Aspose.HTML udostępnia klasę `HTMLDocument`, która zachowuje się jak mini silnik przeglądarki. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Dlaczego zaczynamy od pustego dokumentu? Ponieważ zapewnia to, że żadne niechciane znaczniki ani poprzedni stan nie będą kolidować z tabelą, którą zamierzamy zbudować. To Java odpowiednik wywołania `document.open()` w przeglądarce. + +## Krok 2: Napisz minimalną stronę HTML zawierającą pustą tabelę (create html document java) + +Następnie wstrzykujemy mały szkielet HTML. Strona zawiera placeholder `
` oraz kilka reguł CSS, aby tabela wyglądała przyzwoicie po renderowaniu. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Zauważ, że **create html document java** wykonujemy, przekazując surowy ciąg znaków do `write`. To podejście jest przydatne, gdy HTML jest generowany w locie i eliminuje potrzebę zewnętrznych plików szablonów. + +## Krok 3: Wypełnij tabelę HTML przy użyciu JavaScript (populate html table javascript) + +Teraz nadchodzi najciekawsza część — dodawanie wierszy do tabeli przy użyciu JavaScript. Stworzymy krótki skrypt, który wykona pięć iteracji, wstawiając w każdej iteracji wiersz i wypełniając dwie komórki: jedną numerem wiersza, a drugą napisem „Even” lub „Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Dlaczego używamy tutaj JavaScript? Ponieważ wiele rzeczywistych stron buduje tabele dynamicznie — myśl o pulpitach, raportach czy siatkach danych po stronie klienta. Poprzez **populate html table javascript** w silniku Aspose, dokładnie odtwarzamy to, co miałoby miejsce w przeglądarce, zapewniając, że renderowany PNG wygląda identycznie jak to, co zobaczyłby użytkownik. + +## Krok 4: Wykonaj skrypt w sandboxie dokumentu + +Aspose.HTML udostępnia obiekt `Window`, który zachowuje się jak `window` w przeglądarce. Wywołanie `eval` uruchamia nasz skrypt w odizolowanym środowisku, więc nie są wykonywane żadne zewnętrzne połączenia sieciowe. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Typowym pułapką jest zapomnienie o odczekaniu na zakończenie skryptu przed renderowaniem. W tym prostym przypadku skrypt działa synchronicznie, więc możemy przejść od razu do kolejnego kroku. Jeśli kiedykolwiek osadzisz kod asynchroniczny (np. `fetch`), będziesz musiał podłączyć się do zdarzenia `onload` lub użyć oczekiwania opartego na `Promise`. + +## Krok 5: Skonfiguruj opcje zapisu obrazu (render html to png) + +Zanim rzeczywiście rasteryzujemy stronę, określamy, jak duży ma być wynikowy obraz. Klasa `ImageSaveOptions` pozwala ustawić szerokość, wysokość oraz kilka parametrów jakości. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Wybór rozsądnego rozmiaru płótna jest kluczowy dla czystego wyniku **render html to png**. Zbyt mały, a tekst zostanie obcięty; zbyt duży, a marnujesz pamięć. 800×600 to bezpieczne rozwiązanie pośrednie dla większości tabel. + +## Krok 6: Konwertuj wypełnioną stronę HTML do obrazu PNG (convert html to png) + +Na koniec wywołujemy statyczną metodę `Converter.convertHTML`. Przyjmuje ona `HTMLDocument`, opcje zapisu oraz docelową ścieżkę pliku. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Zastąp `YOUR_DIRECTORY` absolutną lub względną ścieżką istniejącą na Twoim komputerze. Po zakończeniu programu znajdziesz plik `table.png` przedstawiający ładnie sformatowaną tabelę z pięcioma wierszami, naprzemiennie oznaczonymi etykietami „Even”/„Odd”. + +> **Pro tip:** Jeśli potrzebujesz przezroczystego tła, włącz je za pomocą `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Pełny, gotowy do uruchomienia przykład + +Poniżej znajduje się pełna klasa Java, która łączy wszystkie elementy. Skopiuj i wklej ją do pliku `JsDomManipulation.java`, dostosuj folder wyjściowy i uruchom. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Oczekiwany wynik + +Po otwarciu `table.png` powinieneś zobaczyć coś podobnego: + +![przykładowy wynik konwersji html do png](https://example.com/assets/table.png "konwersja html do png – renderowana tabela") + +Obraz przedstawia tabelę z 5 wierszami w schemacie „Row 1 – Odd” … „Row 5 – Odd”, stylizowaną cienkimi obramowaniami i wypełnieniem. + +## Typowe pułapki i jak ich unikać + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Skrypt uruchamia się po renderowaniu** | Asynchroniczny kod (np. `setTimeout`) nie jest oczekiwany. | Use `window.onload` or block until `document.readyState === 'complete'`. | +| **Obraz jest pusty** | Brak treści w obszarze widoku (szerokość/wysokość ustawiona na 0). | Ensure `ImageSaveOptions` dimensions are non‑zero and match the page layout. | +| **Wiersze tabeli są obcięte** | Płótno za małe dla wysokości tabeli. | Increase `imageOptions.setHeight` or use `imageOptions.setFitToPage(true)`. | +| **Brak CSS** | Styl inline pominięty lub zewnętrzny CSS nie został załadowany. | Keep all required CSS inside the ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Por que isso importa:** Quando você *salva HTML como PDF*, o conversor lê o CSS, imagens e fontes como um navegador. Manter os recursos ao lado do HTML (ou usar URLs absolutas) evita links quebrados no PDF final. + +## Etapa 3: Configurar opções de salvamento PDF + +`PdfSaveOptions` permite controlar coisas como versão do PDF, compressão e se as fontes devem ser incorporadas. Para a maioria dos cenários os padrões funcionam bem, mas aqui está como você pode ajustá-las. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Atenção:** Se você *converter html file pdf* em um servidor sem interface gráfica, desativar a incorporação de fontes pode reduzir drasticamente o tamanho do arquivo, mas você corre o risco de perder caracteres para idiomas não‑ASCII. + +## Etapa 4: Executar a conversão + +Agora a mágica acontece. O método `Converter.convertHTML` lê o HTML, aplica as opções e grava o PDF em uma única chamada. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Explicação:** +> - `htmlFilePath` pode ser um caminho relativo ou absoluto; o conversor o resolve como um navegador faria. +> - `pdfOptions` contém todas as preferências de *save html as pdf* que você definiu anteriormente. +> - O terceiro argumento é o arquivo PDF de destino; Aspose cria automaticamente o arquivo se ele não existir. + +### Saída esperada + +Executar o programa cria `output.pdf` que parece exatamente com o `sample.html` renderizado — o título em azul, o parágrafo abaixo e as mesmas margens. Abra-o em qualquer visualizador de PDF para confirmar. + +## Etapa 5: Verificar o resultado e tratar problemas comuns + +### Verificar + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Armadilhas comuns + +| Sintoma | Causa provável | Correção | +|---------|----------------|----------| +| Imagens ausentes | Caminhos relativos não resolvidos | Use URLs absolutas ou defina `baseUri` em `HTMLDocument` | +| Fontes aparecem erradas | Fontes não incorporadas | Chame `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Deslocamento de layout | Regras CSS `@media print` ignoradas | Garanta que o CSS seja compatível com o motor de renderização da Aspose | +| Conversão trava em arquivos grandes | Memória heap insuficiente | Aumente a flag JVM `-Xmx` (ex.: `-Xmx2g`) | + +> **Caso extremo:** Se precisar converter uma string HTML diretamente (sem arquivo), envolva-a em um `HTMLDocument` e passe o objeto documento para `Converter.convertHTML`. Isso é útil ao gerar HTML dinamicamente, como a partir de um motor de templates. + +## Variações avançadas + +### Convertendo uma URL da web + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Adicionando cabeçalho/rodapé + +Aspose.HTML permite injetar conteúdo de cabeçalho/rodapé via CSS `@page`. Exemplo: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Coloque o CSS no seu HTML ou carregue-o via uma folha de estilo externa antes da conversão. + +### Conversão em lote + +Quando você tem vários arquivos HTML, um loop simples resolve: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Conclusão + +Agora você tem uma receita completa e pronta para produção para **criar PDF a partir de HTML** usando Java. Ao importar Aspose.HTML, configurar `PdfSaveOptions` e invocar `Converter.convertHTML`, você pode *html to pdf java* em uma única linha de código. + +A partir daqui você pode explorar cenários mais sofisticados — adicionar marcas d'água, criptografar PDFs ou mesclar várias páginas HTML em um único documento. Todos esses se baseiam nos mesmos passos principais que você acabou de dominar. + +Tem perguntas sobre particularidades de *save html as pdf* ou precisa de ajuda para ajustar a conversão para um framework específico? Deixe um comentário 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/java/conversion-html-to-various-image-formats/_index.md b/html/portuguese/java/conversion-html-to-various-image-formats/_index.md index 5b1531c71..eccb360a9 100644 --- a/html/portuguese/java/conversion-html-to-various-image-formats/_index.md +++ b/html/portuguese/java/conversion-html-to-various-image-formats/_index.md @@ -65,22 +65,6 @@ Se você precisa **converter HTML para JPEG** para representações semelhantes ## Convertendo HTML para PNG Transformar HTML em imagens PNG é ideal para gráficos sem perdas, capturas de tela ou quando você precisa de transparência. Nosso guia abrangente fornece instruções claras para uma experiência de conversão fluida. -## Convertendo HTML para TIFF -Converter HTML para TIFF é perfeito para impressão de alta resolução ou armazenamento de arquivos. Este tutorial descreve os passos exatos para gerar arquivos TIFF de forma eficiente usando Aspose.HTML for Java. - -Usar Aspose.HTML for Java simplifica a conversão de documentos HTML em vários formatos de imagem. Estes tutoriais irão equipá‑lo com o conhecimento e as habilidades para alcançar isso de forma eficiente e eficaz. Diga olá a um mundo de conversões fáceis de HTML para formatos de imagem com Aspose.HTML for Java. - -## Casos de Uso Comuns & Benefícios -- **Geração automática de relatórios** – Incorporar conteúdo web ao vivo em relatórios PDF ou Word como imagens. -- **Miniaturas de e‑mail** – Gerar imagens de pré‑visualização para newsletters sem serviços externos. -- **Migração de sistemas legados** – Converter componentes de UI baseados na web para imagens estáticas para plataformas mais antigas. -- **Arquivamento de conteúdo** – Preservar capturas visuais exatas de páginas web para conformidade. - -## Dicas de Solução de Problemas -- **Saída em branco** – Certifique‑se de que a fonte HTML esteja totalmente carregada; use `renderer.waitForComplete()` se necessário. -- **Tamanho de arquivo grande (TIFF/BMP)** – Ajuste o DPI ou use opções de compressão disponíveis nas configurações de salvamento. -- **Fontes ausentes** – Instale as fontes necessárias no servidor ou incorpore‑as no HTML usando `@font-face`. - ## Conversão - HTML para Vários Formatos de Imagem Tutoriais ### [Convertendo HTML para BMP](./convert-html-to-bmp/) Convertendo HTML para BMP com Aspose.HTML for Java. Um tutorial abrangente para converter documentos HTML em imagens BMP usando Aspose.HTML for Java. @@ -90,6 +74,8 @@ Aprenda a converter HTML para GIF em Java usando Aspose.HTML. Um guia passo a pa Aprenda a converter HTML para JPEG com Aspose.HTML for Java. Guia passo a passo para processamento de documentos sem interrupções. ### [Convertendo HTML para PNG](./convert-html-to-png/) Aprenda a converter HTML para imagens PNG em Java com Aspose.HTML. Um guia abrangente com instruções passo a passo. +### [Convertendo HTML para PNG – Guia Java para renderizar tabelas HTML como imagens](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Aprenda a converter HTML para PNG em Java, focando na renderização de tabelas HTML como imagens de alta qualidade. ### [Convertendo HTML para TIFF](./convert-html-to-tiff/) Aprenda a converter HTML para TIFF usando Aspose.HTML for Java de forma fácil. Guia passo a passo para manipulação eficiente de documentos. ### [Convertendo HTML para WebP – Guia Completo em Java com Aspose.HTML](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/portuguese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/portuguese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..d2729ee69 --- /dev/null +++ b/html/portuguese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Aprenda a converter HTML para PNG usando Java. Este tutorial aborda renderizar + HTML para PNG, popular tabela HTML com JavaScript, criar documento HTML em Java + e criar HTML vazio em Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: pt +og_description: Converter HTML para PNG facilitado. Siga este guia passo a passo para + renderizar HTML em PNG, preencher tabela HTML com JavaScript e criar documento HTML + em Java. +og_title: converter html para png – Guia completo de renderização Java +tags: +- Java +- Aspose.HTML +- Image rendering +title: converter html para png – Guia Java para renderizar tabelas HTML como imagens +url: /pt/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – Guia Java para renderizar tabelas HTML como imagens + +Já precisou **convert html to png** mas não sabia por onde começar? Você não está sozinho. Muitos desenvolvedores se deparam com um obstáculo quando precisam transformar um trecho HTML dinâmico — especialmente um construído com JavaScript — em uma imagem estática. Neste tutorial vamos percorrer um exemplo completo e executável que pega uma página HTML diminuta, preenche uma tabela com JavaScript e, finalmente, a renderiza como um arquivo PNG usando Aspose.HTML for Java. + +Também abordaremos tópicos relacionados como **render html to png**, como **populate html table javascript**, e as nuances de **create html document java** versus **create empty html java**. Ao final, você terá um programa autocontido que pode ser inserido em qualquer projeto Maven ou Gradle e executado instantaneamente. + +## Prerequisites + +- Java 17 ou superior (a API funciona com Java 8+, mas usaremos a LTS mais recente) +- Biblioteca Aspose.HTML for Java (disponível via Maven Central) +- Uma IDE modesta ou apenas a linha de comando `javac`/`java` +- Permissão de escrita em uma pasta onde o PNG será salvo + +Sem navegadores externos, sem Chrome headless, apenas código Java puro. + +## Step 1: Create an empty HTML document (create empty html java) + +A primeira coisa que precisamos é de uma tela limpa — um objeto de documento HTML em branco que podemos manipular programaticamente. Aspose.HTML fornece a classe `HTMLDocument` que se comporta como um mini motor de navegador. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Por que começar com um documento vazio? Porque isso garante que nenhuma marcação stray ou estado anterior interfira na tabela que estamos prestes a construir. É o equivalente Java de chamar `document.open()` em um navegador. + +## Step 2: Write a minimal HTML page that contains an empty table (create html document java) + +Em seguida, injetamos um esqueleto HTML diminuto. A página inclui um placeholder `
` e algumas regras CSS para que a tabela tenha uma aparência decente quando renderizada. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Observe como **create html document java** é feito ao alimentar uma string bruta para `write`. Essa abordagem é prática quando o HTML é gerado em tempo de execução e evita a necessidade de arquivos de modelo externos. + +## Step 3: Populate the HTML table with JavaScript (populate html table javascript) + +Agora vem a parte divertida — adicionar linhas à tabela usando JavaScript. Criaremos um script curto que itera cinco vezes, inserindo uma linha a cada iteração e preenchendo duas células: uma com o número da linha e outra com “Even” ou “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Por que usar JavaScript aqui? Porque muitas páginas reais constroem tabelas dinamicamente — pense em dashboards, relatórios ou grids de dados do lado do cliente. Ao **populate html table javascript** dentro do motor Aspose, imitamos exatamente o que aconteceria em um navegador, garantindo que o PNG renderizado seja idêntico ao que o usuário veria. + +## Step 4: Execute the script inside the document’s sandbox + +Aspose.HTML nos fornece um objeto `Window` que se comporta como o `window` de um navegador. Chamar `eval` executa nosso script em um ambiente isolado, de modo que nenhuma chamada de rede externa seja feita. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Um erro comum é esquecer de aguardar o término do script antes da renderização. Neste caso simples o script roda de forma síncrona, então podemos avançar diretamente para o próximo passo. Se você algum dia incorporar código assíncrono (por exemplo, `fetch`), será necessário conectar ao evento `onload` ou usar uma espera baseada em `Promise`. + +## Step 5: Configure image‑save options (render html to png) + +Antes de realmente rasterizar a página, decidimos quão grande a imagem de saída deve ser. A classe `ImageSaveOptions` permite definir largura, altura e alguns parâmetros de qualidade. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Escolher um tamanho de canvas razoável é crucial para um resultado limpo de **render html to png**. Muito pequeno e o texto será cortado; muito grande e você desperdiça memória. 800×600 é um ponto médio seguro para a maioria das tabelas. + +## Step 6: Convert the populated HTML page to a PNG image (convert html to png) + +Finalmente, chamamos o método estático `Converter.convertHTML`. Ele recebe o `HTMLDocument`, as opções de salvamento e o caminho do arquivo de destino. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Substitua `YOUR_DIRECTORY` por um caminho absoluto ou relativo que exista na sua máquina. Depois que o programa terminar, você encontrará `table.png` mostrando uma tabela bem formatada com cinco linhas, alternando os rótulos “Even”/“Odd”. + +> **Pro tip:** Se precisar de fundo transparente, habilite-o via `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Full, Ready‑to‑Run Example + +Abaixo está a classe Java completa que reúne tudo. Copie‑e‑cole em `JsDomManipulation.java`, ajuste a pasta de saída e execute. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Expected output + +Ao abrir `table.png`, você deverá ver algo como isto: + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +A imagem exibe uma tabela de 5 linhas com o padrão “Row 1 – Odd” … “Row 5 – Odd”, estilizada com bordas finas e preenchimento. + +## Common pitfalls and how to avoid them + +| Problema | Por que acontece | Solução | +|----------|------------------|---------| +| **O script roda após a renderização** | Código assíncrono (por exemplo, `setTimeout`) não é aguardado. | Use `window.onload` ou bloqueie até `document.readyState === 'complete'`. | +| **Imagem em branco** | Nenhum conteúdo dentro da área de visualização (largura/altura definidas como 0). | Garanta que as dimensões de `ImageSaveOptions` sejam diferentes de zero e correspondam ao layout da página. | +| **Linhas da tabela são cortadas** | Canvas pequeno demais para a altura da tabela. | Aumente `imageOptions.setHeight` ou use `imageOptions.setFitToPage(true)`. | +| **CSS ausente** | Estilo inline omitido ou CSS externo não carregado. | Mantenha todo o CSS necessário dentro da tag ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Почему это важно:** При *save HTML as PDF* конвертер читает CSS, изображения и шрифты так же, как браузер. Хранение ресурсов рядом с HTML (или использование абсолютных URL) предотвращает разрыв ссылок в конечном PDF. + +## Шаг 3: Настройте параметры сохранения PDF + +`PdfSaveOptions` позволяют управлять версией PDF, сжатием и встраиванием шрифтов. Для большинства сценариев значения по умолчанию подходят, но вот как их можно изменить. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Обратите внимание:** Если вы *convert html file pdf* на безголовом сервере, отключение встраивания шрифтов может значительно уменьшить размер файла, но вы рискуете потерять символы для не‑ASCII языков. + +## Шаг 4: Выполните конвертацию + +Теперь происходит магия. Метод `Converter.convertHTML` читает HTML, применяет параметры и записывает PDF одним вызовом. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Пояснение:** +> - `htmlFilePath` может быть относительным или абсолютным; конвертер разрешает его так же, как браузер. +> - `pdfOptions` содержит все предпочтения *save html as pdf*, которые вы задали ранее. +> - Третий аргумент — файл назначения PDF; Aspose автоматически создаёт файл, если его нет. + +### Ожидаемый результат + +Запуск программы создаёт `output.pdf`, который выглядит точно так же, как отрендеренный `sample.html` — заголовок синего цвета, абзац ниже и те же отступы. Откройте его в любом PDF‑просмотрщике, чтобы убедиться. + +## Шаг 5: Проверьте результат и устраните распространённые проблемы + +### Проверка + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Распространённые подводные камни + +| Симптом | Вероятная причина | Решение | +|---------|-------------------|---------| +| Отсутствуют изображения | Относительные пути не разрешаются | Используйте абсолютные URL или задайте `baseUri` в `HTMLDocument` | +| Шрифты выглядят неправильно | Шрифты не встроены | Вызовите `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Сдвиг макета | Правила CSS `@media print` игнорируются | Убедитесь, что CSS совместим с движком рендеринга Aspose | +| Конвертация зависает при больших файлах | Недостаточно памяти heap | Увеличьте параметр JVM `-Xmx` (например, `-Xmx2g`) | + +> **Особый случай:** Если нужно конвертировать строку HTML напрямую (без файла), оберните её в `HTMLDocument` и передайте объект документа в `Converter.convertHTML`. Это удобно, когда HTML генерируется «на лету», например, из шаблонизатора. + +## Расширенные варианты + +### Конвертация веб‑URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Добавление шапки/подвала + +Aspose.HTML позволяет вставлять содержимое шапки/подвала через CSS `@page`. Пример: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Разместите CSS в вашем HTML или загрузите его через внешний файл стилей перед конвертацией. + +### Пакетная конвертация + +Если у вас несколько HTML‑файлов, простой цикл решит задачу: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Заключение + +Теперь у вас есть полностью готовый к продакшену рецепт для **создания PDF из HTML** с помощью Java. Подключив Aspose.HTML, настроив `PdfSaveOptions` и вызвав `Converter.convertHTML`, вы сможете выполнить *html to pdf java* в одну строку кода. + +Далее вы можете исследовать более сложные сценарии — добавление водяных знаков, шифрование PDF или объединение нескольких HTML‑страниц в один документ. Всё это базируется на тех же основных шагах, которые вы только что освоили. + +Есть вопросы о нюансах *save html as 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/russian/java/conversion-html-to-various-image-formats/_index.md b/html/russian/java/conversion-html-to-various-image-formats/_index.md index d92382e42..7ef32fe28 100644 --- a/html/russian/java/conversion-html-to-various-image-formats/_index.md +++ b/html/russian/java/conversion-html-to-various-image-formats/_index.md @@ -100,6 +100,9 @@ weight: 24 ### [Преобразование HTML в PNG](./convert-html-to-png/) Узнайте, как преобразовывать изображения HTML в PNG в Java с помощью Aspose.HTML. Подробное руководство с пошаговыми инструкциями. +### [Преобразование HTML в PNG – Руководство Java по рендерингу HTML‑таблиц в изображения](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Узнайте, как с помощью Aspose.HTML for Java преобразовать HTML‑таблицы в PNG‑изображения. Пошаговое руководство. + ### [Преобразование HTML в TIFF](./convert-html-to-tiff/) Узнайте, как легко преобразовывать HTML в TIFF с помощью Aspose.HTML для Java. Пошаговое руководство по эффективной обработке документов. diff --git a/html/russian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/russian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..f6e36c6f1 --- /dev/null +++ b/html/russian/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Узнайте, как конвертировать HTML в PNG с помощью Java. В этом руководстве + рассматриваются рендеринг HTML в PNG, заполнение HTML‑таблицы с помощью JavaScript, + создание HTML‑документа на Java и создание пустого HTML на Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: ru +og_description: Конвертировать HTML в PNG легко. Следуйте этому пошаговому руководству, + чтобы преобразовать HTML в PNG, заполнить HTML‑таблицу с помощью JavaScript и создать + HTML‑документ на Java. +og_title: Конвертировать HTML в PNG – Полное руководство по рендерингу Java +tags: +- Java +- Aspose.HTML +- Image rendering +title: Конвертировать HTML в PNG – руководство Java по рендерингу HTML‑таблиц в изображения +url: /ru/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – Руководство Java по рендерингу HTML‑таблиц в изображения + +Когда‑нибудь вам нужно было **convert html to png**, но вы не знали, с чего начать? Вы не одиноки. Многие разработчики сталкиваются с проблемой, когда нужно превратить динамический HTML‑фрагмент — особенно построенный с помощью JavaScript — в статическое изображение. В этом руководстве мы пройдем полный, готовый к запуску пример, который берёт небольшую HTML‑страницу, заполняет таблицу с помощью JavaScript и в конце рендерит её в PNG‑файл, используя Aspose.HTML for Java. + +Мы также коснёмся связанных тем, таких как **render html to png**, как **populate html table javascript**, а также различий между **create html document java** и **create empty html java**. К концу вы получите автономную программу, которую можно добавить в любой проект Maven или Gradle и сразу запустить. + +## Prerequisites + +- Java 17 или новее (API работает с Java 8+, но мы будем использовать последнюю LTS) +- Библиотека Aspose.HTML for Java (доступна через Maven Central) +- Любая удобная IDE или обычные команды `javac`/`java` +- Права записи в папку, куда будет сохраняться PNG + +Никаких внешних веб‑браузеров, безголового Chrome, только чистый Java‑код. + +## Step 1: Create an empty HTML document (create empty html java) + +Первое, что нам нужно, — чистый лист — пустой объект HTML‑документа, которым мы можем управлять программно. Aspose.HTML предоставляет класс `HTMLDocument`, который ведёт себя как мини‑браузерный движок. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Зачем начинать с пустого документа? Потому что это гарантирует отсутствие посторонней разметки или прежнего состояния, которые могли бы помешать построению таблицы. Это Java‑эквивалент вызова `document.open()` в браузере. + +## Step 2: Write a minimal HTML page that contains an empty table (create html document java) + +Далее мы внедряем небольшой HTML‑скелет. Страница содержит заполнитель `
` и несколько CSS‑правил, чтобы таблица выглядела приемлемо при рендере. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Обратите внимание, как мы **create html document java**, передавая сырую строку в `write`. Такой подход удобен, когда HTML генерируется «на лету», и избавляет от необходимости использовать внешние шаблоны. + +## Step 3: Populate the HTML table with JavaScript (populate html table javascript) + +Теперь самая интересная часть — добавление строк в таблицу с помощью JavaScript. Мы создадим короткий скрипт, который выполнит пять итераций, вставляя строку на каждом шаге и заполняя две ячейки: одну номером строки, другую словом «Even» или «Odd». + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Зачем здесь JavaScript? Потому что многие реальные страницы динамически строят таблицы — это могут быть дашборды, отчёты или клиентские грида. При **populate html table javascript** внутри движка Aspose мы точно имитируем то, что происходит в браузере, гарантируя, что полученный PNG будет идентичен тому, что увидит пользователь. + +## Step 4: Execute the script inside the document’s sandbox + +Aspose.HTML предоставляет объект `Window`, который ведёт себя как `window` браузера. Вызов `eval` выполняет наш скрипт в изолированной среде, поэтому внешние сетевые запросы не делаются. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Распространённая ошибка — забыть дождаться завершения скрипта перед рендерингом. В этом простом случае скрипт выполняется синхронно, поэтому можно сразу переходить к следующему шагу. Если вы когда‑нибудь внедрите асинхронный код (например, `fetch`), потребуется привязаться к событию `onload` или использовать ожидание на основе `Promise`. + +## Step 5: Configure image‑save options (render html to png) + +Прежде чем растрировать страницу, решаем, какого размера будет итоговое изображение. Класс `ImageSaveOptions` позволяет задать ширину, высоту и несколько параметров качества. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Выбор разумного размера канвы критичен для чистого результата **render html to png**. Слишком маленько — текст обрезается; слишком велико — тратится память. 800×600 px — надёжный компромисс для большинства таблиц. + +## Step 6: Convert the populated HTML page to a PNG image (convert html to png) + +Наконец, вызываем статический метод `Converter.convertHTML`. Он принимает `HTMLDocument`, параметры сохранения и путь к целевому файлу. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Замените `YOUR_DIRECTORY` на абсолютный или относительный путь, существующий на вашем компьютере. После завершения программы вы найдёте `table.png` с красиво отформатированной таблицей из пяти строк, чередующих метки «Even»/«Odd». + +> **Pro tip:** Если нужен прозрачный фон, включите его через `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Full, Ready‑to‑Run Example + +Ниже полная Java‑класса, объединяющая всё вместе. Скопируйте её в `JsDomManipulation.java`, скорректируйте папку вывода и запустите. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Expected output + +При открытии `table.png` вы должны увидеть примерно следующее: + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +Изображение показывает таблицу из 5 строк с шаблоном «Row 1 – Odd» … «Row 5 – Odd», стилизованную тонкими границами и отступами. + +## Common pitfalls and how to avoid them + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Script runs after rendering** | Asynchronous code (e.g., `setTimeout`) isn’t awaited. | Use `window.onload` or block until `document.readyState === 'complete'`. | +| **Image is blank** | No content within the viewport (width/height set to 0). | Ensure `ImageSaveOptions` dimensions are non‑zero and match the page layout. | +| **Table rows are cut off** | Canvas too small for the table height. | Increase `imageOptions.setHeight` or use `imageOptions.setFitToPage(true)`. | +| **Missing CSS** | Inline style omitted or external CSS not loaded. | Keep all required CSS inside the ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Por qué es importante:** Cuando *guardas HTML como PDF*, el conversor lee el CSS, las imágenes y las fuentes como lo haría un navegador. Mantener los recursos junto al HTML (o usar URLs absolutas) evita enlaces rotos en el PDF final. + +## Paso 3: Configurar las opciones de guardado PDF + +`PdfSaveOptions` te permite controlar aspectos como la versión del PDF, la compresión y si incrustar fuentes. Para la mayoría de los escenarios los valores predeterminados funcionan bien, pero aquí tienes cómo ajustarlos. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Cuidado:** Si *conviertes archivo html a pdf* en un servidor sin interfaz gráfica, desactivar la incrustación de fuentes puede reducir drásticamente el tamaño del archivo, pero corres el riesgo de perder caracteres para idiomas no ASCII. + +## Paso 4: Realizar la conversión + +Ahora ocurre la magia. El método `Converter.convertHTML` lee el HTML, aplica las opciones y escribe el PDF en una sola llamada. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Explicación:** +> - `htmlFilePath` puede ser una ruta relativa o absoluta; el conversor la resuelve como lo haría un navegador. +> - `pdfOptions` contiene todas las preferencias de *guardar html como pdf* que configuraste antes. +> - El tercer argumento es el archivo PDF de destino; Aspose crea automáticamente el archivo si no existe. + +### Salida esperada + +Ejecutar el programa crea `output.pdf` que se ve exactamente como el `sample.html` renderizado: el encabezado en azul, el párrafo debajo y los mismos márgenes. Ábrelo en cualquier visor de PDF para confirmarlo. + +## Paso 5: Verificar el resultado y manejar problemas comunes + +### Verificar + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Trampas comunes + +| Síntoma | Causa probable | Solución | +|---------|----------------|----------| +| Imágenes faltantes | Rutas relativas no resueltas | Usa URLs absolutas o establece `baseUri` en `HTMLDocument` | +| Fuentes incorrectas | Fuentes no incrustadas | Llama a `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Desplazamiento de diseño | Reglas CSS `@media print` ignoradas | Asegúrate de que el CSS sea compatible con el motor de renderizado de Aspose | +| Conversión se bloquea con archivos grandes | Memoria heap insuficiente | Incrementa la bandera JVM `-Xmx` (p.ej., `-Xmx2g`) | + +> **Caso extremo:** Si necesitas convertir una cadena HTML directamente (sin archivo), envuélvela en un `HTMLDocument` y pasa el objeto documento a `Converter.convertHTML`. Esto es útil al generar HTML sobre la marcha, como desde un motor de plantillas. + +## Variaciones avanzadas + +### Convertir una URL web + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Añadir encabezado/pie de página + +Aspose.HTML te permite inyectar contenido de encabezado/pie de página mediante CSS `@page`. Ejemplo: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Coloca el CSS en tu HTML o cárgalo mediante una hoja de estilo externa antes de la conversión. + +### Conversión por lotes + +Cuando tienes varios archivos HTML, un bucle simple hace el trabajo: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Conclusión + +Ahora tienes una receta completa y lista para producción para **crear PDF a partir de HTML** usando Java. Al importar Aspose.HTML, configurar `PdfSaveOptions` e invocar `Converter.convertHTML`, puedes *html to pdf java* en una sola línea de código. + +A partir de aquí podrías explorar escenarios más sofisticados—añadir marcas de agua, encriptar PDFs o combinar múltiples páginas HTML en un solo documento. Todos esos se basan en los mismos pasos fundamentales que acabas de dominar. + +¿Tienes preguntas sobre peculiaridades de *save html as pdf*, o necesitas ayuda para ajustar la conversión en un framework específico? Deja un comentario, ¡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/java/conversion-html-to-various-image-formats/_index.md b/html/spanish/java/conversion-html-to-various-image-formats/_index.md index ab22c6c57..c10b3262b 100644 --- a/html/spanish/java/conversion-html-to-various-image-formats/_index.md +++ b/html/spanish/java/conversion-html-to-various-image-formats/_index.md @@ -90,6 +90,8 @@ Aprenda cómo convertir HTML a GIF en Java usando Aspose.HTML. Una guía paso a Aprenda a convertir HTML a JPEG con Aspose.HTML for Java. Guía paso a paso para un procesamiento de documentos sin interrupciones. ### [Converting HTML to PNG](./convert-html-to-png/) Aprenda cómo convertir HTML a imágenes PNG en Java con Aspose.HTML. Una guía completa con instrucciones paso a paso. +### [Convertir HTML a PNG – Guía Java para renderizar tablas HTML como imágenes](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Aprenda a convertir HTML a PNG en Java, enfocándose en renderizar tablas HTML como imágenes con Aspose.HTML. ### [Converting HTML to TIFF](./convert-html-to-tiff/) Aprenda a convertir HTML a TIFF fácilmente usando Aspose.HTML for Java. Guía paso a paso para un manejo eficiente de documentos. ### [Convertir HTML a WebP – Guía completa de Java con Aspose.HTML](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/spanish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/spanish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..73e0171ce --- /dev/null +++ b/html/spanish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,205 @@ +--- +category: general +date: 2026-04-09 +description: Aprende cómo convertir HTML a PNG usando Java. Este tutorial cubre renderizar + HTML a PNG, poblar una tabla HTML con JavaScript, crear un documento HTML con Java + y crear un HTML vacío con Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: es +og_description: convierte html a png de forma fácil. sigue esta guía paso a paso para + renderizar html a png, rellenar tabla html con javascript y crear documento html + con java. +og_title: Convertir HTML a PNG – Guía completa de renderizado en Java +tags: +- Java +- Aspose.HTML +- Image rendering +title: convertir html a png – Guía de Java para renderizar tablas HTML como imágenes +url: /es/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convertir html a png – Guía Java para renderizar tablas HTML como imágenes + +¿Alguna vez necesitaste **convertir html a png** pero no sabías por dónde empezar? No estás solo. Muchos desarrolladores se topan con un obstáculo cuando deben convertir un fragmento de HTML dinámico—especialmente uno construido con JavaScript—en una imagen estática. En este tutorial recorreremos un ejemplo completo y ejecutable que toma una pequeña página HTML, rellena una tabla con JavaScript y, finalmente, la renderiza como un archivo PNG usando Aspose.HTML for Java. + +También abordaremos temas relacionados como **render html to png**, cómo **populate html table javascript**, y las diferencias entre **create html document java** y **create empty html java**. Al final tendrás un programa autocontenido que puedes incorporar a cualquier proyecto Maven o Gradle y ejecutar al instante. + +## Prerequisitos + +- Java 17 o superior (la API funciona con Java 8+ pero usaremos la última LTS) +- Biblioteca Aspose.HTML for Java (disponible a través de Maven Central) +- Un IDE modesto o la línea de comandos `javac`/`java` simple +- Permiso de escritura en una carpeta donde se guardará el PNG + +No hay navegadores web externos, ni Chrome sin cabeza, solo código Java puro. + +## Paso 1: Crear un documento HTML vacío (create empty html java) + +Lo primero que necesitamos es una hoja en blanco: un objeto de documento HTML vacío que podamos manipular programáticamente. Aspose.HTML proporciona la clase `HTMLDocument` que se comporta como un mini motor de navegador. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +¿Por qué comenzar con un documento vacío? Porque garantiza que ningún marcado errante o estado previo interfiera con la tabla que estamos a punto de construir. Es el equivalente en Java de llamar a `document.open()` en un navegador. + +## Paso 2: Escribir una página HTML mínima que contenga una tabla vacía (create html document java) + +A continuación inyectamos un pequeño esqueleto HTML. La página incluye un marcador de posición `
` y algunas reglas CSS para que la tabla se vea decente al renderizarse. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Observa cómo **create html document java** al pasar una cadena cruda a `write`. Este enfoque es útil cuando el HTML se genera al vuelo y evita la necesidad de archivos de plantilla externos. + +## Paso 3: Rellenar la tabla HTML con JavaScript (populate html table javascript) + +Ahora llega la parte divertida: agregar filas a la tabla usando JavaScript. Crearemos un script corto que itere cinco veces, insertando una fila en cada iteración y rellenando dos celdas: una con el número de fila y otra con “Even” o “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +¿Por qué usar JavaScript aquí? Porque muchas páginas del mundo real construyen tablas dinámicamente—piense en paneles de control, informes o cuadrículas de datos del lado del cliente. Al **populate html table javascript** dentro del motor Aspose, imitamos exactamente lo que sucedería en un navegador, asegurando que el PNG renderizado sea idéntico a lo que vería un usuario. + +## Paso 4: Ejecutar el script dentro del sandbox del documento + +Aspose.HTML nos brinda un objeto `Window` que se comporta como el `window` de un navegador. Llamar a `eval` ejecuta nuestro script en un entorno aislado, por lo que no se realizan llamadas de red externas. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Una trampa común es olvidar esperar a que el script termine antes de renderizar. En este caso simple el script se ejecuta de forma síncrona, así que podemos pasar directamente al siguiente paso. Si alguna vez incrustas código asíncrono (p.ej., `fetch`), deberás enlazarte al evento `onload` o usar una espera basada en `Promise`. + +## Paso 5: Configurar opciones de guardado de imagen (render html to png) + +Antes de rasterizar la página, decidimos cuán grande debe ser la imagen de salida. La clase `ImageSaveOptions` nos permite establecer ancho, alto y algunos parámetros de calidad. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Elegir un tamaño de lienzo razonable es crucial para un resultado limpio de **render html to png**. Si es demasiado pequeño, el texto se recorta; si es demasiado grande, desperdicias memoria. 800×600 es un punto medio seguro para la mayoría de las tablas. + +## Paso 6: Convertir la página HTML poblada a una imagen PNG (convert html to png) + +Finalmente, llamamos al método estático `Converter.convertHTML`. Recibe el `HTMLDocument`, las opciones de guardado y la ruta del archivo de destino. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Reemplaza `YOUR_DIRECTORY` con una ruta absoluta o relativa que exista en tu máquina. Después de que el programa termine, encontrarás `table.png` mostrando una tabla bien formateada con cinco filas, con etiquetas alternadas “Even”/“Odd”. + +> **Consejo profesional:** Si necesitas un fondo transparente, actívalo mediante `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Ejemplo completo, listo para ejecutar + +A continuación está la clase Java completa que reúne todo. Copia y pega en `JsDomManipulation.java`, ajusta la carpeta de salida y ejecútala. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Salida esperada + +Al abrir `table.png`, deberías ver algo como esto: + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +## Problemas comunes y cómo evitarlos + +| Problema | Por qué ocurre | Solución | +|----------|----------------|----------| +| **El script se ejecuta después del renderizado** | Código asíncrono (p.ej., `setTimeout`) no se espera. | Usa `window.onload` o bloquea hasta que `document.readyState === 'complete'`. | +| **La imagen está en blanco** | No hay contenido dentro del viewport (ancho/alto establecidos en 0). | Asegúrate de que las dimensiones de `ImageSaveOptions` no sean cero y coincidan con el diseño de la página. | +| **Filas de la tabla recortadas** | Lienzo demasiado pequeño para la altura de la tabla. | Incrementa `imageOptions.setHeight` o usa `imageOptions.setFitToPage(true)`. | +| **CSS faltante** | Estilo en línea omitido o CSS externo no cargado. | Mantén todo el CSS necesario dentro de la etiqueta ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Varför detta är viktigt:** När du *save HTML as PDF* läser konverteraren CSS, bilder och typsnitt precis som en webbläsare. Att hålla resurserna bredvid HTML‑filen (eller använda absoluta URL‑er) förhindrar brutna länkar i den slutliga PDF‑filen. + +## Steg 3: Konfigurera PDF‑spara‑alternativ + +`PdfSaveOptions` låter dig styra saker som PDF‑version, komprimering och om typsnitt ska bäddas in. För de flesta scenarier fungerar standardinställningarna bra, men så här kan du justera dem. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Se upp:** Om du *convert html file pdf* på en huvudlös server kan inaktivering av teckensnittsinbäddning kraftigt minska filstorleken, men du riskerar att sakna tecken för icke‑ASCII‑språk. + +## Steg 4: Utför konverteringen + +Nu händer magin. Metoden `Converter.convertHTML` läser HTML‑filen, tillämpar alternativen och skriver PDF‑filen i ett enda anrop. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Förklaring:** +> - `htmlFilePath` kan vara en relativ eller absolut sökväg; konverteraren löser den precis som en webbläsare skulle. +> - `pdfOptions` innehåller alla *save html as pdf*-inställningar du angav tidigare. +> - Det tredje argumentet är mål‑PDF‑filen; Aspose skapar automatiskt filen om den inte finns. + +### Förväntat resultat + +När programmet körs skapas `output.pdf` som ser exakt ut som den renderade `sample.html`—rubriken i blått, paragrafen nedanför och samma marginaler. Öppna den i någon PDF‑visare för att bekräfta. + +## Steg 5: Verifiera resultatet & hantera vanliga problem + +### Verifiera + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Vanliga fallgropar + +| Symtom | Trolig orsak | Lösning | +|---------|--------------|-----| +| Images missing | Relative paths not resolved | Use absolute URLs or set `baseUri` in `HTMLDocument` | +| Fonts look wrong | Fonts not embedded | Call `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Layout shift | CSS `@media print` rules ignored | Ensure CSS is compatible with Aspose’s rendering engine | +| Conversion hangs on large files | Insufficient heap memory | Increase JVM `-Xmx` flag (e.g., `-Xmx2g`) | + +> **Edge case:** Om du behöver konvertera en HTML‑sträng direkt (utan fil), omslut den i ett `HTMLDocument` och skicka dokumentobjektet till `Converter.convertHTML`. Detta är praktiskt när du genererar HTML i farten, till exempel från en mallmotor. + +## Avancerade varianter + +### Konvertera en webb‑URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Lägga till sidhuvud/sidfot + +Aspose.HTML låter dig injicera sidhuvud‑/sidfot‑innehåll via CSS `@page`. Exempel: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Placera CSS‑koden i din HTML eller ladda den via ett externt stylesheet innan konvertering. + +### Batch‑konvertering + +När du har flera HTML‑filer räcker en enkel loop för att lösa det: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Slutsats + +Du har nu ett komplett, produktionsklart recept för att **create PDF from HTML** med Java. Genom att importera Aspose.HTML, konfigurera `PdfSaveOptions` och anropa `Converter.convertHTML` kan du *html to pdf java* i en enda kodrad. + +Härifrån kan du utforska mer avancerade scenarier—lägga till vattenstämplar, kryptera PDF‑filer eller slå ihop flera HTML‑sidor till ett dokument. Alla dessa bygger på samma grundsteg som du just har lärt dig. + +Har du frågor om *save html as pdf*-egenskaper, eller behöver hjälp med att finjustera konverteringen för ett specifikt ramverk? Lämna en kommentar, 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/java/conversion-html-to-various-image-formats/_index.md b/html/swedish/java/conversion-html-to-various-image-formats/_index.md index 2b7cf68d4..2c9d3875c 100644 --- a/html/swedish/java/conversion-html-to-various-image-formats/_index.md +++ b/html/swedish/java/conversion-html-to-various-image-formats/_index.md @@ -91,6 +91,7 @@ Att använda Aspose.HTML for Java förenklar konverteringen av HTML‑dokument t ### [Konvertera HTML till GIF](./convert-html-to-gif/) ### [Konvertera HTML till JPEG](./convert-html-to-jpeg/) ### [Konvertera HTML till PNG](./convert-html-to-png/) +### [Konvertera HTML till PNG – Java‑guide för att rendera HTML‑tabeller som bilder](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) ### [Konvertera HTML till TIFF](./convert-html-to-tiff/) ### [Konvertera HTML till WebP – Komplett Java‑guide med Aspose.HTML](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/swedish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/swedish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..4481abd06 --- /dev/null +++ b/html/swedish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Lär dig hur du konverterar HTML till PNG med Java. Denna handledning + täcker rendera HTML till PNG, fylla i en HTML‑tabell med JavaScript, skapa ett HTML‑dokument + med Java och skapa en tom HTML med Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: sv +og_description: konvertera html till png gjort enkelt. Följ den här steg‑för‑steg‑guiden + för att rendera html till png, fylla i html‑tabell med javascript och skapa html‑dokument + med java. +og_title: Konvertera HTML till PNG – Komplett Java-renderingsguide +tags: +- Java +- Aspose.HTML +- Image rendering +title: konvertera html till png – Java‑guide för att rendera HTML‑tabeller som bilder +url: /sv/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# konvertera html till png – Java‑guide för att rendera HTML‑tabeller som bilder + +Har du någonsin behövt **konvertera html till png** men inte vetat var du ska börja? Du är inte ensam. Många utvecklare fastnar när de måste omvandla ett dynamiskt HTML‑snutt—särskilt ett som byggts med JavaScript—till en statisk bild. I den här handledningen går vi igenom ett komplett, körbart exempel som tar en liten HTML‑sida, fyller i en tabell med JavaScript och slutligen renderar den som en PNG‑fil med Aspose.HTML för Java. + +Vi berör också relaterade ämnen som **render html to png**, hur man **populate html table javascript**, och nyanserna mellan **create html document java** och **create empty html java**. I slutet har du ett självständigt program som du kan släppa in i vilket Maven‑ eller Gradle‑projekt som helst och köra direkt. + +## Förutsättningar + +- Java 17 eller nyare (API:et fungerar med Java 8+ men vi använder den senaste LTS) +- Aspose.HTML för Java‑biblioteket (tillgängligt via Maven Central) +- En enkel IDE eller bara `javac`/`java`‑kommandorad +- Skrivrättigheter till en mapp där PNG‑filen ska sparas + +Ingen extern webbläsare, ingen headless Chrome, bara ren Java‑kod. + +## Steg 1: Skapa ett tomt HTML‑dokument (create empty html java) + +Det första vi behöver är en ren tavla—ett tomt HTML‑dokumentobjekt som vi kan manipulera programatiskt. Aspose.HTML tillhandahåller klassen `HTMLDocument` som beter sig som en mini‑webbläsarmotor. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Varför börja med ett tomt dokument? För att det garanterar att ingen oönskad markup eller tidigare tillstånd stör tabellen vi ska bygga. Det är Java‑motsvarigheten till att anropa `document.open()` i en webbläsare. + +## Steg 2: Skriv en minimal HTML‑sida som innehåller en tom tabell (create html document java) + +Nästa steg är att injicera ett litet HTML‑skelett. Sidan innehåller en `
`‑platshållare och några CSS‑regler för att tabellen ska se anständig ut när den renderas. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Lägg märke till hur vi **create html document java** genom att mata in en rå sträng till `write`. Detta tillvägagångssätt är praktiskt när HTML genereras i farten och undviker behovet av externa mallfiler. + +## Steg 3: Fyll HTML‑tabellen med JavaScript (populate html table javascript) + +Nu kommer den roliga delen—att lägga till rader i tabellen med JavaScript. Vi skapar ett kort skript som loopar fem gånger, lägger in en rad för varje iteration och fyller två celler: en med radnumret och en med “Even” eller “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Varför använda JavaScript här? För att många verkliga sidor bygger tabeller dynamiskt—tänk dashboards, rapporter eller klient‑sidiga datagrids. Genom att **populate html table javascript** i Aspose‑motorn efterliknar vi exakt vad som skulle hända i en webbläsare, vilket säkerställer att den renderade PNG‑filen ser identisk ut med vad en användare skulle se. + +## Steg 4: Kör skriptet i dokumentets sandbox + +Aspose.HTML ger oss ett `Window`‑objekt som beter sig som en webbläsares `window`. Att anropa `eval` kör vårt skript i en isolerad miljö, så inga externa nätverksanrop görs. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +En vanlig fallgrop är att glömma vänta på att skriptet ska bli klart innan renderingen. I detta enkla fall körs skriptet synkront, så vi kan gå direkt till nästa steg. Om du någonsin bäddar in asynkront kod (t.ex. `fetch`) måste du knyta dig till `onload`‑händelsen eller använda en `Promise`‑baserad väntan. + +## Steg 5: Konfigurera bild‑spara‑alternativ (render html to png) + +Innan vi faktiskt rasteriserar sidan bestämmer vi hur stor den färdiga bilden ska vara. Klassen `ImageSaveOptions` låter oss ange bredd, höjd och några kvalitetsparametrar. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Att välja en rimlig canvas‑storlek är avgörande för ett rent **render html to png**‑resultat. För litet och texten kapas; för stort och du slösar minne. 800×600 är ett säkert mellanting för de flesta tabeller. + +## Steg 6: Konvertera den fyllda HTML‑sidan till en PNG‑bild (convert html to png) + +Till sist anropar vi den statiska metoden `Converter.convertHTML`. Den tar `HTMLDocument`, sparalternativen och målfilens sökväg. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Byt ut `YOUR_DIRECTORY` mot en absolut eller relativ sökväg som finns på din maskin. När programmet är klart hittar du `table.png` som visar en snyggt formaterad tabell med fem rader, alternerande “Even”/“Odd”-etiketter. + +> **Proffstips:** Om du behöver en transparent bakgrund, aktivera den via `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Fullt, kör‑klart exempel + +Nedan är den kompletta Java‑klassen som sätter ihop allt. Kopiera‑klistra in den i `JsDomManipulation.java`, justera utdatamappen och kör den. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Förväntad utdata + +När du öppnar `table.png` bör du se något liknande detta: + +![konvertera html till png exempelutdata](https://example.com/assets/table.png "konvertera html till png – renderad tabell") + +Bilden visar en 5‑radig tabell med mönstret “Row 1 – Odd” … “Row 5 – Odd”, stylad med tunna ramar och marginaler. + +## Vanliga fallgropar och hur du undviker dem + +| Problem | Varför det händer | Lösning | +|-------|----------------|-----| +| **Skriptet körs efter rendering** | Asynkron kod (t.ex. `setTimeout`) väntas inte. | Använd `window.onload` eller blockera tills `document.readyState === 'complete'`. | +| **Bilden är tom** | Inget innehåll inom viewporten (bredd/höjd satt till 0). | Säkerställ att `ImageSaveOptions`‑dimensionerna är icke‑noll och matchar sidlayouten. | +| **Tabellrader kapas** | Canvas för liten för tabellens höjd. | Öka `imageOptions.setHeight` eller använd `imageOptions.setFitToPage(true)`. | +| **CSS saknas** | Inline‑stil utelämnad eller extern CSS inte laddad. | Ha all nödvändig CSS i ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Why this matters:** เมื่อคุณ *save HTML as PDF* ตัวแปลงจะอ่าน CSS, รูปภาพ, และฟอนต์เหมือนกับเบราว์เซอร์ การเก็บทรัพยากรไว้ใกล้กับไฟล์ HTML (หรือใช้ URL แบบเต็ม) จะช่วยป้องกันลิงก์เสียใน PDF สุดท้าย + +## ขั้นตอนที่ 3: ตั้งค่า PDF Save Options + +`PdfSaveOptions` ให้คุณควบคุมเช่น เวอร์ชัน PDF, การบีบอัด, และการฝังฟอนต์ สำหรับสถานการณ์ส่วนใหญ่ค่าเริ่มต้นทำงานได้ดี แต่ต่อไปนี้คือวิธีปรับแต่ง + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Watch out:** หากคุณ *convert html file pdf* บนเซิร์ฟเวอร์แบบ headless การปิดการฝังฟอนต์สามารถลดขนาดไฟล์ได้อย่างมาก แต่คุณอาจพลาดอักขระสำหรับภาษาที่ไม่ใช่ ASCII + +## ขั้นตอนที่ 4: ดำเนินการแปลง + +ตอนนี้จุดมหัศจรรย์เกิดขึ้นเมธอด `Converter.convertHTML` จะอ่าน HTML, ใช้ตัวเลือกที่ตั้งค่า, และเขียน PDF ในหนึ่งคำสั่ง + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Explanation:** +> - `htmlFilePath` สามารถเป็นเส้นทางสัมพันธ์หรือเต็ม; ตัวแปลงจะแก้ไขเส้นทางเช่นเดียวกับเบราว์เซอร์ +> - `pdfOptions` ถือค่าการตั้งค่า *save html as pdf* ที่คุณกำหนดไว้ก่อนหน้า +> - อาร์กิวเมนต์ที่สามคือไฟล์ PDF ปลายทาง; Aspose จะสร้างไฟล์โดยอัตโนมัติหากยังไม่มี + +### ผลลัพธ์ที่คาดหวัง + +การรันโปรแกรมจะสร้าง `output.pdf` ที่ดูเหมือนกับ `sample.html` ที่เราดูในเบราว์เซอร์ — หัวข้อเป็นสีน้ำเงิน, ย่อหน้าต่อไป, และระยะขอบเดียวกัน เปิดไฟล์ในโปรแกรมดู PDF ใดก็ได้เพื่อยืนยัน + +## ขั้นตอนที่ 5: ตรวจสอบผลลัพธ์และจัดการปัญหาทั่วไป + +### Verify + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Common Pitfalls + +| Symptom | Likely Cause | Fix | +|---------|--------------|-----| +| Images missing | Relative paths not resolved | Use absolute URLs or set `baseUri` in `HTMLDocument` | +| Fonts look wrong | Fonts not embedded | Call `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Layout shift | CSS `@media print` rules ignored | Ensure CSS is compatible with Aspose’s rendering engine | +| Conversion hangs on large files | Insufficient heap memory | Increase JVM `-Xmx` flag (e.g., `-Xmx2g`) | + +> **Edge case:** หากคุณต้องการแปลงสตริง HTML โดยตรง (ไม่มีไฟล์) ให้ห่อไว้ใน `HTMLDocument` แล้วส่งอ็อบเจ็กต์นั้นไปยัง `Converter.convertHTML` วิธีนี้สะดวกเมื่อสร้าง HTML แบบไดนามิกจากเทมเพลตเอ็นจิ้น + +## Advanced Variations + +### Converting a Web URL + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Adding a Header/Footer + +Aspose.HTML ให้คุณแทรกเนื้อหา header/footer ผ่าน CSS `@page` ตัวอย่าง: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +วาง CSS นี้ในไฟล์ HTML ของคุณหรือโหลดผ่านสไตล์ชีตภายนอกก่อนทำการแปลง + +### Batch Conversion + +เมื่อคุณมีไฟล์ HTML หลายไฟล์ ลูปง่าย ๆ จะทำหน้าที่ได้: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Conclusion + +คุณมีสูตรครบถ้วนสำหรับ **create PDF from HTML** ด้วย Java แล้ว โดยการนำเข้า Aspose.HTML, ตั้งค่า `PdfSaveOptions`, และเรียก `Converter.convertHTML` คุณก็สามารถทำ *html to pdf java* ได้ในบรรทัดเดียว + +จากนี้คุณอาจสำรวจสถานการณ์ที่ซับซ้อนขึ้น — เพิ่มลายน้ำ, เข้ารหัส PDF, หรือรวมหลายหน้า HTML เป็นเอกสารเดียว ทั้งหมดนี้อิงจากขั้นตอนหลักที่คุณเพิ่งเรียนรู้ + +มีคำถามเกี่ยวกับข้อบกพร่องของ *save html as 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/thai/java/conversion-html-to-various-image-formats/_index.md b/html/thai/java/conversion-html-to-various-image-formats/_index.md index 755481956..525cd5a99 100644 --- a/html/thai/java/conversion-html-to-various-image-formats/_index.md +++ b/html/thai/java/conversion-html-to-various-image-formats/_index.md @@ -95,6 +95,7 @@ weight: 24 เรียนรู้วิธีการแปลง HTML เป็น JPEG ด้วย Aspose.HTML สำหรับ Java คู่มือทีละขั้นตอนสำหรับการประมวลผลเอกสารอย่างราบรื่น ### [การแปลง HTML เป็น PNG](./convert-html-to-png/) เรียนรู้วิธีการแปลง HTML เป็นภาพ PNG ใน Java ด้วย Aspose.HTML คู่มือฉบับสมบูรณ์พร้อมคำแนะนำทีละขั้นตอน +### [การแปลง HTML เป็น PNG – คู่มือ Java สำหรับการแสดงตาราง HTML เป็นภาพ](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) ### [การแปลง HTML เป็น TIFF](./convert-html-to-tiff/) เรียนรู้วิธีการแปลง HTML เป็น TIFF ได้อย่างง่ายดายโดยใช้ Aspose.HTML สำหรับ Java คู่มือทีละขั้นตอนเพื่อการจัดการเอกสารอย่างมีประสิทธิภาพ ### [แปลง HTML เป็น WebP – คู่มือ Java ฉบับสมบูรณ์ด้วย Aspose.HTML](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/thai/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/thai/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..a09ebd0a4 --- /dev/null +++ b/html/thai/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,206 @@ +--- +category: general +date: 2026-04-09 +description: เรียนรู้วิธีแปลง HTML เป็น PNG ด้วย Java. บทเรียนนี้ครอบคลุมการเรนเดอร์ + HTML เป็น PNG, การเติมข้อมูลตาราง HTML ด้วย JavaScript, การสร้างเอกสาร HTML ด้วย + Java และการสร้าง HTML ว่างด้วย Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: th +og_description: แปลง HTML เป็น PNG ง่ายดาย ทำตามคู่มือขั้นตอนต่อขั้นตอนนี้เพื่อเรนเดอร์ + HTML เป็น PNG, เติมข้อมูลตาราง HTML ด้วย JavaScript, และสร้างเอกสาร HTML ด้วย Java +og_title: แปลง HTML เป็น PNG – คู่มือการเรนเดอร์ Java ฉบับสมบูรณ์ +tags: +- Java +- Aspose.HTML +- Image rendering +title: แปลง HTML เป็น PNG – คู่มือ Java สำหรับการแสดงตาราง HTML เป็นภาพ +url: /th/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# แปลง html เป็น png – คู่มือ Java สำหรับการเรนเดอร์ตาราง HTML เป็นภาพ + +เคยต้องการ **convert html to png** แต่ไม่แน่ใจว่าจะเริ่มต้นอย่างไรหรือไม่? คุณไม่ได้อยู่คนเดียว หลาย ๆ นักพัฒนาติดขัดเมื่อจำเป็นต้องแปลงส่วนย่อยของ HTML ที่เป็นไดนามิก—โดยเฉพาะอย่างยิ่งที่สร้างด้วย JavaScript—ให้เป็นภาพคงที่ ในบทแนะนำนี้เราจะเดินผ่านตัวอย่างที่สมบูรณ์และสามารถรันได้ ซึ่งรับหน้า HTML เล็ก ๆ หนึ่งหน้า เติมข้อมูลตารางด้วย JavaScript แล้วสุดท้ายเรนเดอร์เป็นไฟล์ PNG ด้วย Aspose.HTML for Java + +เราจะพูดถึงหัวข้อที่เกี่ยวข้องเช่น **render html to png**, วิธี **populate html table javascript**, และความแตกต่างระหว่าง **create html document java** กับ **create empty html java** ด้วย เมื่อจบคุณจะได้โปรแกรมที่เป็นอิสระซึ่งสามารถใส่ลงในโปรเจกต์ Maven หรือ Gradle ใดก็ได้และรันได้ทันที + +## ข้อกำหนดเบื้องต้น + +- Java 17 หรือใหม่กว่า (API ทำงานกับ Java 8+ แต่เราจะใช้ LTS ล่าสุด) +- ไลบรารี Aspose.HTML for Java (พร้อมให้ใช้ผ่าน Maven Central) +- IDE ธรรมดาหรือใช้คำสั่ง `javac`/`java` ธรรมดา +- สิทธิ์การเขียนในโฟลเดอร์ที่ PNG จะถูกบันทึก + +ไม่มีเว็บเบราว์เซอร์ภายนอก, ไม่มี Chrome แบบ headless, เพียงแค่โค้ด Java ธรรมดา + +## ขั้นตอนที่ 1: สร้างเอกสาร HTML ว่าง (create empty html java) + +สิ่งแรกที่เราต้องการคือพื้นฐานที่สะอาด—ออบเจกต์เอกสาร HTML ว่างที่เราสามารถจัดการได้โปรแกรมมิ่ง Aspose.HTML มีคลาส `HTMLDocument` ที่ทำงานเหมือนเอนจินเบราว์เซอร์ขนาดเล็ก + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +ทำไมต้องเริ่มด้วยเอกสารว่าง? เพราะมันรับประกันว่าจะไม่มีมาร์กอัปที่หลงเหลือหรือสถานะก่อนหน้ามาขัดขวางตารางที่เรากำลังจะสร้าง มันเป็นเทียบเท่าใน Java ของการเรียก `document.open()` ในเบราว์เซอร์ + +## ขั้นตอนที่ 2: เขียนหน้า HTML ขั้นต่ำที่มีตารางว่าง (create html document java) + +ต่อไปเราจะใส่โครงกระดูก HTML เล็ก ๆ หน้าเว็บนี้มีตัวแทน `
` และกฎ CSS เล็กน้อยเพื่อให้ตารางดูดีเมื่อเรนเดอร์ + +```java +htmlDoc.write( + "" + + "
" +); +``` + +สังเกตว่าเรา **create html document java** โดยส่งสตริงดิบให้ `write` วิธีนี้สะดวกเมื่อ HTML ถูกสร้างขึ้นแบบไดนามิกและหลีกเลี่ยงการต้องใช้ไฟล์เทมเพลตภายนอก + +## ขั้นตอนที่ 3: เติมข้อมูลตาราง HTML ด้วย JavaScript (populate html table javascript) + +ตอนนี้มาถึงส่วนสนุก—การเพิ่มแถวลงในตารางด้วย JavaScript เราจะเขียนสคริปต์สั้น ๆ ที่วนลูปห้าครั้ง ใส่แถวในแต่ละรอบและเติมสองเซลล์: หนึ่งเซลล์เป็นหมายเลขแถวและอีกเซลล์เป็น “Even” หรือ “Odd” + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +ทำไมต้องใช้ JavaScript ที่นี่? เพราะหลายหน้าเว็บในโลกจริงสร้างตารางแบบไดนามิก—เช่นแดชบอร์ด, รายงาน, หรือกริดข้อมูลฝั่งคลไอเอนท์ โดยการ **populate html table javascript** ภายในเอนจินของ Aspose เราจึงจำลองพฤติกรรมที่เกิดขึ้นในเบราว์เซอร์อย่างแม่นยำ ทำให้ PNG ที่เรนเดอร์ออกมาดูเหมือนกับที่ผู้ใช้เห็น + +## ขั้นตอนที่ 4: เรียกใช้สคริปต์ภายใน sandbox ของเอกสาร + +Aspose.HTML ให้เราเข้าถึงออบเจกต์ `Window` ที่ทำงานเหมือน `window` ของเบราว์เซอร์ การเรียก `eval` จะรันสคริปต์ของเราในสภาพแวดล้อมแยกออกมา จึงไม่มีการเรียกเครือข่ายภายนอก + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +ข้อผิดพลาดทั่วไปคือลืมรอให้สคริปต์ทำงานเสร็จก่อนทำการเรนเดอร์ ในกรณีง่าย ๆ นี้สคริปต์ทำงานแบบ synchronous เราจึงสามารถไปขั้นตอนต่อได้ทันที หากคุณฝังโค้ดแบบ asynchronous (เช่น `fetch`) คุณต้องผูกกับเหตุการณ์ `onload` หรือใช้การรอแบบ `Promise` + +## ขั้นตอนที่ 5: ตั้งค่าตัวเลือกการบันทึกภาพ (render html to png) + +ก่อนที่เราจะทำ rasterize หน้าเว็บ เราตัดสินใจว่าขนาดภาพผลลัพธ์ควรเป็นเท่าไหร่ คลาส `ImageSaveOptions` ให้เราตั้งค่าความกว้าง, ความสูง, และพารามิเตอร์คุณภาพบางอย่าง + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +การเลือกขนาด canvas ที่เหมาะสมเป็นสิ่งสำคัญสำหรับผลลัพธ์ **render html to png** ที่สะอาด หากตั้งค่าขนาดเล็กเกินไปข้อความจะถูกตัด; หากตั้งค่าขนาดใหญ่เกินไปจะเสียหน่วยความจำ 800×600 เป็นขนาดกลางที่ปลอดภัยสำหรับตารางส่วนใหญ่ + +## ขั้นตอนที่ 6: แปลงหน้า HTML ที่เติมข้อมูลแล้วเป็นภาพ PNG (convert html to png) + +สุดท้ายเราเรียกเมธอดสแตติก `Converter.convertHTML` ซึ่งรับ `HTMLDocument`, ตัวเลือกการบันทึก, และเส้นทางไฟล์เป้าหมาย + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +แทนที่ `YOUR_DIRECTORY` ด้วยเส้นทางแบบ absolute หรือ relative ที่มีอยู่บนเครื่องของคุณ หลังจากโปรแกรมทำงานเสร็จ คุณจะพบไฟล์ `table.png` ที่แสดงตารางที่จัดรูปแบบอย่างสวยงาม มีห้าแถวและป้าย “Even”/“Odd” สลับกัน + +> **เคล็ดลับ:** หากต้องการพื้นหลังโปร่งใส ให้เปิดใช้งานโดยใช้ `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## ตัวอย่างเต็มพร้อมรัน + +ด้านล่างเป็นคลาส Java ที่รวมทุกอย่างไว้ในไฟล์เดียว คัดลอกและวางลงใน `JsDomManipulation.java` ปรับโฟลเดอร์เอาต์พุต แล้วรันมัน + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### ผลลัพธ์ที่คาดหวัง + +เมื่อคุณเปิด `table.png` คุณควรเห็นอย่างนี้: + +![ตัวอย่างผลลัพธ์การแปลง html เป็น png](https://example.com/assets/table.png "convert html to png – ตารางที่เรนเดอร์") + +ภาพแสดงตาราง 5 แถวพร้อมรูปแบบ “Row 1 – Odd” … “Row 5 – Odd” มีเส้นขอบบางและการเว้นระยะ + +## ปัญหาที่พบบ่อยและวิธีหลีกเลี่ยง + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **สคริปต์ทำงานหลังการเรนเดอร์** | โค้ดแบบ asynchronous (เช่น `setTimeout`) ไม่ได้รอให้เสร็จ | ใช้ `window.onload` หรือบล็อกจนกว่า `document.readyState === 'complete'` | +| **ภาพเป็นสีขาว** | ไม่มีเนื้อหาใน viewport (width/height ตั้งเป็น 0) | ตรวจสอบให้แน่ใจว่า `ImageSaveOptions` มีขนาดไม่เป็นศูนย์และตรงกับการจัดหน้า | +| **แถวของตารางถูกตัด** | Canvas เล็กเกินไปสำหรับความสูงของตาราง | เพิ่ม `imageOptions.setHeight` หรือใช้ `imageOptions.setFitToPage(true)` | +| **ขาด CSS** | สไตล์แบบ inline ถูกละเว้นหรือ CSS ภายนอกไม่ถูกโหลด | เก็บ CSS ที่จำเป็นทั้งหมดไว้ในแท็ก ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Neden önemli:** *HTML'yi PDF olarak kaydettiğinizde*, dönüştürücü CSS, görseller ve fontları bir tarayıcı gibi okur. Varlıkları HTML'nin yanında tutmak (veya mutlak URL'ler kullanmak) son PDF'de kırık bağlantıların önüne geçer. + +## Adım 3: PDF Kaydetme Seçeneklerini Yapılandırın + +`PdfSaveOptions`, PDF sürümü, sıkıştırma ve fontların gömülüp gömülmeyeceği gibi ayarları kontrol etmenizi sağlar. Çoğu senaryo için varsayılanlar yeterli olur, ancak işte nasıl ayarlayabileceğiniz. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Dikkat:** Eğer bir headless sunucuda *html file pdf* dönüştürüyorsanız, font gömme özelliğini devre dışı bırakmak dosya boyutunu büyük ölçüde azaltabilir, ancak ASCII dışı diller için karakter eksikliği riski taşır. + +## Adım 4: Dönüşümü Gerçekleştirin + +Şimdi sihir gerçekleşir. `Converter.convertHTML` metodu HTML'yi okur, seçenekleri uygular ve PDF'i tek bir çağrıyla yazar. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Açıklama:** +> - `htmlFilePath` göreceli ya da mutlak bir yol olabilir; dönüştürücü bunu bir tarayıcı gibi çözer. +> - `pdfOptions` daha önce ayarladığınız tüm *save html as pdf* tercihlerini taşır. +> - Üçüncü argüman hedef PDF dosyasıdır; Aspose dosya yoksa otomatik olarak oluşturur. + +### Beklenen Çıktı + +Programı çalıştırdığınızda, `sample.html`'in render edilmiş haliyle aynı görünüme sahip `output.pdf` oluşturulur—mavi başlık, altındaki paragraf ve aynı kenar boşlukları. Doğrulamak için herhangi bir PDF görüntüleyicide açın. + +## Adım 5: Sonucu Doğrulayın ve Yaygın Sorunları Ele Alın + +### Doğrulama + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Yaygın Tuzaklar + +| Belirti | Muhtemel Neden | Çözüm | +|---------|----------------|------| +| Görseller eksik | Göreceli yollar çözülemedi | Mutlak URL'ler kullanın veya `HTMLDocument` içinde `baseUri` ayarlayın | +| Fontlar yanlış görünüyor | Fontlar gömülmemiş | `pdfOptions.setEmbedStandardPdfFonts(true)` çağırın | +| Düzen kayması | CSS `@media print` kuralları göz ardı edildi | CSS'in Aspose'un render motoru ile uyumlu olduğundan emin olun | +| Büyük dosyalarda dönüşüm takılıyor | Yetersiz heap belleği | JVM `-Xmx` bayrağını artırın (ör. `-Xmx2g`) | + +> **Köşe durum:** Eğer doğrudan bir HTML dizesini (dosya olmadan) dönüştürmeniz gerekiyorsa, onu bir `HTMLDocument` içinde sarın ve belge nesnesini `Converter.convertHTML` metoduna geçirin. Bu, şablon motorundan dinamik olarak HTML üretirken kullanışlıdır. + +## İleri Düzey Varyasyonlar + +### Web URL'si Dönüştürme + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Üstbilgi/Altbilgi Ekleme + +Aspose.HTML, CSS `@page` kullanarak üstbilgi/altbilgi içeriği eklemenize izin verir. Örnek: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +CSS'i HTML'nize yerleştirin veya dönüşümden önce harici bir stil sayfası aracılığıyla yükleyin. + +### Toplu Dönüştürme + +Birden fazla HTML dosyanız olduğunda, basit bir döngü işinizi görür: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Sonuç + +Artık Java kullanarak **HTML’den PDF oluşturma** için eksiksiz, üretim‑hazır bir tarifiniz var. Aspose.HTML'i içe aktararak, `PdfSaveOptions`'ı yapılandırarak ve `Converter.convertHTML`'i çağırarak, tek bir kod satırıyla *html to pdf java* yapabilirsiniz. + +Bundan sonra daha karmaşık senaryoları keşfedebilirsiniz—filigran ekleme, PDF şifreleme veya birden fazla HTML sayfasını tek bir belgeye birleştirme. Tüm bunlar, az önce öğrendiğiniz aynı temel adımlara dayanır. + +*save html as pdf* ile ilgili sorularınız mı var, yoksa belirli bir framework için dönüşümü ayarlamakta yardıma mı ihtiyacınız var? 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/java/conversion-html-to-various-image-formats/_index.md b/html/turkish/java/conversion-html-to-various-image-formats/_index.md index 38a68b543..52dd51db5 100644 --- a/html/turkish/java/conversion-html-to-various-image-formats/_index.md +++ b/html/turkish/java/conversion-html-to-various-image-formats/_index.md @@ -60,7 +60,7 @@ HTML'yi BMP'ye dönüştürmek, web sayfalarını arşivleme veya kayıpsız kal ## HTML'yi GIF'ye Dönüştürme -**HTML'yi GIF'ye dönüştürmek** ister misiniz? Animasyonlu ön izlemeler veya hafif grafikler için ideal bir çözümdür. Aspose.HTML for Java bu süreci basitleştirir. Bu eğitim, yüksek kaliteli çıktıyı minimum kodla elde etmenizi sağlar. +**HTML'yi GIF'ye dönüştürmek**, animasyonlu ön izlemeler veya hafif grafikler için ideal bir çözümdür. Aspose.HTML for Java bu süreci basitleştirir. Bu eğitim, yüksek kaliteli çıktıyı minimum kodla elde etmenizi sağlar. ## HTML'yi JPEG'ye Dönüştürme @@ -96,6 +96,8 @@ Aspose.HTML kullanarak Java'da HTML'yi GIF'ye nasıl dönüştüreceğinizi öğ Aspose.HTML for Java ile HTML'yi JPEG'ye dönüştürmeyi öğrenin. Sorunsuz belge işleme için adım‑adım bir kılavuz. ### [HTML'yi PNG'ye Dönüştürme](./convert-html-to-png/) Aspose.HTML ile Java'da HTML'yi PNG görüntülerine dönüştürmeyi öğrenin. Kapsamlı bir rehber ve adım‑adım talimatlar. +### [HTML'yi PNG'ye Dönüştürme – HTML Tablolarını Görüntü Olarak Render Etme Java Rehberi](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) +Aspose.HTML for Java ile HTML tablolarını PNG görüntülerine dönüştürerek yüksek kaliteli görseller elde edin. ### [HTML'yi TIFF'ye Dönüştürme](./convert-html-to-tiff/) Aspose.HTML for Java kullanarak HTML'yi TIFF'ye kolayca dönüştürmeyi öğrenin. Verimli belge işleme için adım‑adım bir rehber. ### [HTML'yi WebP'ye Dönüştür – Aspose.HTML ile Tam Java Rehberi](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/turkish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/turkish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..ad6926c67 --- /dev/null +++ b/html/turkish/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,205 @@ +--- +category: general +date: 2026-04-09 +description: Java kullanarak html'yi png'ye dönüştürmeyi öğrenin. Bu öğreticide html'yi + png'ye render etme, html tabloyu javascript ile doldurma, java ile html belgesi + oluşturma ve java ile boş html oluşturma konuları ele alınmaktadır. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: tr +og_description: HTML'yi PNG'ye dönüştürmek çok kolay. HTML'yi PNG'ye render etmek, + HTML tabloyu JavaScript ile doldurmak ve Java ile HTML belge oluşturmak için bu + adım adım kılavuzu izleyin. +og_title: HTML'yi PNG'ye dönüştür – Tam Java Render Rehberi +tags: +- Java +- Aspose.HTML +- Image rendering +title: HTML'yi PNG'ye dönüştür – HTML tablolarını resim olarak işlemek için Java rehberi +url: /tr/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# html'yi png'ye dönüştür – HTML tablolarını görüntü olarak render etme üzerine Java rehberi + +Ever needed to **convert html to png** but weren't sure where to start? You're not alone. Many developers hit a wall when they have to turn a dynamic HTML snippet—especially one built with JavaScript—into a static image. In this tutorial we’ll walk through a complete, runnable example that takes a tiny HTML page, populates a table with JavaScript, and finally renders it as a PNG file using Aspose.HTML for Java. + +We'll also touch on related topics like **render html to png**, how to **populate html table javascript**, and the nuances of **create html document java** versus **create empty html java**. By the end you’ll have a self‑contained program you can drop into any Maven or Gradle project and run instantly. + +## Önkoşullar + +- Java 17 veya daha yeni (the API works with Java 8+ but we’ll use the latest LTS) +- Aspose.HTML for Java library (available via Maven Central) +- Basit bir IDE ya da düz `javac`/`java` komut satırı +- PNG'nin kaydedileceği klasöre yazma izni + +Harici web tarayıcıları, headless Chrome yok, sadece saf Java kodu. + +## Adım 1: Boş bir HTML belgesi oluştur (create empty html java) + +The first thing we need is a clean slate—a blank HTML document object that we can manipulate programmatically. Aspose.HTML provides the `HTMLDocument` class which behaves like a mini browser engine. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Why start with an empty document? Because it guarantees that no stray markup or previous state interferes with the table we’re about to build. It’s the Java equivalent of calling `document.open()` in a browser. + +## Adım 2: Boş bir tablo içeren minimal bir HTML sayfası yaz (create html document java) + +Next we inject a tiny HTML skeleton. The page includes a `
` placeholder and a few CSS rules to make the table look decent when rendered. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Notice how we **create html document java** by feeding a raw string to `write`. This approach is handy when the HTML is generated on the fly, and it avoids the need for external template files. + +## Adım 3: HTML tablosunu JavaScript ile doldur (populate html table javascript) + +Now comes the fun part—adding rows to the table using JavaScript. We’ll craft a short script that loops five times, inserting a row each iteration and filling two cells: one with the row number and another with “Even” or “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Why use JavaScript here? Because many real‑world pages build tables dynamically—think dashboards, reports, or client‑side data grids. By **populate html table javascript** inside the Aspose engine, we mimic exactly what would happen in a browser, ensuring the rendered PNG looks identical to what a user would see. + +## Adım 4: Betiği belgenin sandbox'ında çalıştır + +Aspose.HTML gives us a `Window` object that behaves like a browser’s `window`. Calling `eval` runs our script in an isolated environment, so no external network calls are made. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +A common pitfall is forgetting to wait for the script to finish before rendering. In this simple case the script runs synchronously, so we can move straight to the next step. If you ever embed asynchronous code (e.g., `fetch`), you’d need to hook into the `onload` event or use a `Promise`‑based wait. + +## Adım 5: Görüntü kaydetme seçeneklerini yapılandır (render html to png) + +Before we actually rasterize the page, we decide how big the output image should be. The `ImageSaveOptions` class lets us set width, height, and a few quality parameters. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Choosing a reasonable canvas size is crucial for a clean **render html to png** result. Too small and text gets clipped; too large and you waste memory. 800×600 is a safe middle ground for most tables. + +## Adım 6: Doldurulmuş HTML sayfasını PNG görüntüsüne dönüştür (convert html to png) + +Finally, we call the static `Converter.convertHTML` method. It takes the `HTMLDocument`, the save options, and the target file path. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Replace `YOUR_DIRECTORY` with an absolute or relative path that exists on your machine. After the program finishes, you’ll find `table.png` showing a nicely formatted table with five rows, alternating “Even”/“Odd” labels. + +> **Pro ipucu:** Şeffaf bir arka plan gerekiyorsa, `imageOptions.setBackgroundColor(Color.getTransparent());` ile etkinleştirin. + +## Tam, Hazır‑Çalıştır Örneği + +Below is the complete Java class that puts everything together. Copy‑paste it into `JsDomManipulation.java`, adjust the output folder, and run it. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Beklenen çıktı + +When you open `table.png`, you should see something like this: + +![html'yi png'ye dönüştür örnek çıktısı](https://example.com/assets/table.png "html'yi png'ye dönüştür – render edilmiş tablo") + +## Yaygın tuzaklar ve nasıl önlenir + +| Sorun | Neden oluşur | Çözüm | +|-------|----------------|-----| +| **Betik render'dan sonra çalışıyor** | Asenkron kod (ör. `setTimeout`) beklenmiyor. | `window.onload` kullanın veya `document.readyState === 'complete'` olana kadar bekleyin. | +| **Görüntü boş** | Görünüm alanında içerik yok (genişlik/yükseklik 0 olarak ayarlanmış). | `ImageSaveOptions` boyutlarının sıfır olmadığından ve sayfa düzenine uygun olduğundan emin olun. | +| **Tablo satırları kesiliyor** | Kanvas tablo yüksekliği için çok küçük. | `imageOptions.setHeight` değerini artırın veya `imageOptions.setFitToPage(true)` kullanın. | +| **CSS eksik** | Satır içi stil atlanmış veya dış CSS yüklenmemiş. | Gerekli tüm CSS'i ` + + +

Hello, PDF world!

+

This PDF was generated from HTML using Java.

+ + +``` + +> **Tại sao điều này quan trọng:** Khi bạn *lưu HTML dưới dạng PDF*, bộ chuyển đổi sẽ đọc CSS, hình ảnh và phông chữ giống như trình duyệt. Giữ các tài nguyên bên cạnh HTML (hoặc dùng URL tuyệt đối) sẽ ngăn các liên kết bị hỏng trong PDF cuối cùng. + +## Bước 3: Cấu Hình Tùy Chọn Lưu PDF + +`PdfSaveOptions` cho phép bạn kiểm soát các yếu tố như phiên bản PDF, nén và việc nhúng phông chữ. Đối với hầu hết các trường hợp, giá trị mặc định đã đủ, nhưng dưới đây là cách bạn có thể tùy chỉnh. + +```java +import com.aspose.html.converters.PdfSaveOptions; + +// Default options – good for a quick start +PdfSaveOptions pdfOptions = new PdfSaveOptions(); + +// Example: embed all fonts to avoid missing glyphs on other machines +pdfOptions.setEmbedStandardPdfFonts(true); +pdfOptions.setCompress(true); +``` + +> **Cảnh báo:** Nếu bạn *chuyển đổi html file pdf* trên máy chủ không có giao diện (headless), việc tắt nhúng phông chữ có thể giảm đáng kể kích thước tệp, nhưng bạn sẽ mất các ký tự cho ngôn ngữ không phải ASCII. + +## Bước 4: Thực Hiện Chuyển Đổi + +Bây giờ phần “ma thuật” diễn ra. Phương thức `Converter.convertHTML` đọc HTML, áp dụng các tùy chọn và ghi PDF trong một lần gọi. + +```java +import com.aspose.html.converters.Converter; +import com.aspose.html.HTMLDocument; + +public class ConvertHtmlToPdfTutorial { + public static void main(String[] args) throws Exception { + // Step 1: Specify the source HTML file location + String htmlFilePath = "YOUR_DIRECTORY/sample.html"; + + // Step 2: Prepare PDF save options (default settings are sufficient for a basic conversion) + PdfSaveOptions pdfOptions = new PdfSaveOptions(); + + // Step 3: Convert the HTML directly to PDF and write the result to a file + Converter.convertHTML(htmlFilePath, pdfOptions, "YOUR_DIRECTORY/output.pdf"); + + System.out.println("Conversion completed! Check output.pdf"); + } +} +``` + +> **Giải thích:** +> - `htmlFilePath` có thể là đường dẫn tương đối hoặc tuyệt đối; bộ chuyển đổi sẽ giải quyết nó giống như trình duyệt. +> - `pdfOptions` chứa tất cả các tùy chọn *save html as pdf* mà bạn đã thiết lập trước đó. +> - Đối số thứ ba là tệp PDF đích; Aspose sẽ tự động tạo tệp nếu nó chưa tồn tại. + +### Kết Quả Dự Kiến + +Chạy chương trình sẽ tạo ra `output.pdf` trông giống hệt như `sample.html` đã được render — tiêu đề màu xanh, đoạn văn phía dưới, và cùng lề. Mở nó bằng bất kỳ trình xem PDF nào để xác nhận. + +## Bước 5: Kiểm Tra Kết Quả & Xử Lý Các Vấn Đề Thường Gặp + +### Kiểm Tra + +```java +File pdfFile = new File("YOUR_DIRECTORY/output.pdf"); +if (pdfFile.exists() && pdfFile.length() > 0) { + System.out.println("PDF generated successfully, size: " + pdfFile.length() + " bytes"); +} +``` + +### Các Rủi Ro Thường Gặp + +| Triệu chứng | Nguyên nhân có thể | Cách khắc phục | +|------------|---------------------|----------------| +| Hình ảnh bị thiếu | Đường dẫn tương đối không được giải quyết | Dùng URL tuyệt đối hoặc đặt `baseUri` trong `HTMLDocument` | +| Phông chữ hiển thị sai | Phông chữ không được nhúng | Gọi `pdfOptions.setEmbedStandardPdfFonts(true)` | +| Bố cục bị lệch | Các quy tắc CSS `@media print` bị bỏ qua | Đảm bảo CSS tương thích với engine render của Aspose | +| Chuyển đổi treo khi tệp lớn | Bộ nhớ heap không đủ | Tăng tham số JVM `-Xmx` (ví dụ: `-Xmx2g`) | + +> **Trường hợp đặc biệt:** Nếu bạn cần chuyển đổi một chuỗi HTML trực tiếp (không có tệp), hãy bọc nó trong một `HTMLDocument` và truyền đối tượng này cho `Converter.convertHTML`. Cách này hữu ích khi tạo HTML động, chẳng hạn từ một engine template. + +## Các Biến Thể Nâng Cao + +### Chuyển Đổi Từ URL Web + +```java +String url = "https://example.com/report.html"; +Converter.convertHTML(url, pdfOptions, "report.pdf"); +``` + +### Thêm Header/Footer + +Aspose.HTML cho phép bạn chèn nội dung header/footer qua CSS `@page`. Ví dụ: + +```css +@page { + @top-center { content: "Report Header – " counter(page); } + @bottom-center { content: "Confidential – Page " counter(page); } +} +``` + +Đặt CSS này trong HTML của bạn hoặc tải nó qua stylesheet bên ngoài trước khi chuyển đổi. + +### Chuyển Đổi Hàng Loạt + +Khi có nhiều tệp HTML, một vòng lặp đơn giản sẽ giải quyết: + +```java +String[] htmlFiles = {"a.html", "b.html", "c.html"}; +for (String file : htmlFiles) { + String pdfOut = file.replace(".html", ".pdf"); + Converter.convertHTML(file, pdfOptions, pdfOut); +} +``` + +## Kết Luận + +Bây giờ bạn đã có một công thức hoàn chỉnh, sẵn sàng cho môi trường production để **tạo PDF từ HTML** bằng Java. Bằng cách nhập Aspose.HTML, cấu hình `PdfSaveOptions`, và gọi `Converter.convertHTML`, bạn có thể thực hiện *html to pdf java* chỉ với một dòng mã. + +Từ đây, bạn có thể khám phá các kịch bản phức tạp hơn — thêm watermark, mã hóa PDF, hoặc gộp nhiều trang HTML thành một tài liệu. Tất cả đều dựa trên các bước cốt lõi mà bạn vừa nắm vững. + +Có câu hỏi về các chi tiết *save html as pdf*, hoặc cần trợ giúp tùy chỉnh chuyển đổi cho một framework cụ thể? Hãy để lại bình luận, 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/java/conversion-html-to-various-image-formats/_index.md b/html/vietnamese/java/conversion-html-to-various-image-formats/_index.md index 88c812212..5b7caddcd 100644 --- a/html/vietnamese/java/conversion-html-to-various-image-formats/_index.md +++ b/html/vietnamese/java/conversion-html-to-various-image-formats/_index.md @@ -46,7 +46,7 @@ Dưới đây bạn sẽ tìm thấy các hướng dẫn ngắn gọn từng bư Tạo một thể hiện `HtmlRenderer` và tải nguồn HTML (tệp, URL, hoặc chuỗi). ### Bước 2: Chọn định dạng hình ảnh mong muốn -Chọn một trong các lớp con của `ImageSaveOptions` – `GifSaveOptions`, `JpegSaveOptions`, `PngSaveOptions`, v.v. +Chọn một trong các lớp con của `ImageSaveOptions` – `GifSaveOptions`, `JpegSaveOptions`, `PngSaveOptions`, v.t. ### Bước 3: Render và lưu Gọi `renderer.renderToFile(outputPath, saveOptions)` để tạo hình ảnh. @@ -90,6 +90,7 @@ Tìm hiểu cách convert HTML to GIF trong Java bằng Aspose.HTML. Một hư Học cách convert HTML to JPEG với Aspose.HTML for Java. Hướng dẫn từng bước để xử lý tài liệu một cách liền mạch. ### [Converting HTML to PNG](./convert-html-to-png/) Tìm hiểu cách convert HTML to PNG trong Java với Aspose.HTML. Một hướng dẫn toàn diện với các bước chi tiết. +### [convert html to png – Hướng dẫn Java chuyển đổi bảng HTML thành hình ảnh](./convert-html-to-png-java-guide-to-rendering-html-tables-as-i/) ### [Converting HTML to TIFF](./convert-html-to-tiff/) Tìm hiểu cách dễ dàng convert HTML to TIFF bằng Aspose.HTML for Java. Hướng dẫn từng bước cho việc xử lý tài liệu hiệu quả. ### [Chuyển đổi HTML sang WebP – Hướng dẫn Java đầy đủ với Aspose.HTML](./convert-html-to-webp-complete-java-guide-with-aspose-html/) diff --git a/html/vietnamese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md b/html/vietnamese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md new file mode 100644 index 000000000..fab79a2e0 --- /dev/null +++ b/html/vietnamese/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/_index.md @@ -0,0 +1,207 @@ +--- +category: general +date: 2026-04-09 +description: Tìm hiểu cách chuyển đổi HTML sang PNG bằng Java. Hướng dẫn này bao gồm + render HTML sang PNG, điền dữ liệu vào bảng HTML bằng JavaScript, tạo tài liệu HTML + bằng Java và tạo HTML trống bằng Java. +draft: false +keywords: +- convert html to png +- render html to png +- populate html table javascript +- create html document java +- create empty html java +language: vi +og_description: Chuyển đổi HTML sang PNG dễ dàng. Hãy làm theo hướng dẫn từng bước + này để render HTML sang PNG, tạo bảng HTML bằng JavaScript, và tạo tài liệu HTML + bằng Java. +og_title: Chuyển đổi HTML sang PNG – Hướng dẫn toàn diện về Rendering Java +tags: +- Java +- Aspose.HTML +- Image rendering +title: Chuyển đổi HTML sang PNG – Hướng dẫn Java để chuyển bảng HTML thành hình ảnh +url: /vi/java/conversion-html-to-various-image-formats/convert-html-to-png-java-guide-to-rendering-html-tables-as-i/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# convert html to png – Hướng dẫn Java để render bảng HTML thành hình ảnh + +Bạn đã bao giờ cần **convert html to png** nhưng không biết bắt đầu từ đâu? Bạn không phải là người duy nhất. Nhiều lập trình viên gặp khó khăn khi phải chuyển một đoạn HTML động—đặc biệt là đoạn được tạo bằng JavaScript—thành một hình ảnh tĩnh. Trong tutorial này, chúng ta sẽ đi qua một ví dụ hoàn chỉnh, có thể chạy ngay, lấy một trang HTML nhỏ, điền dữ liệu vào bảng bằng JavaScript, và cuối cùng render nó thành file PNG bằng Aspose.HTML for Java. + +Chúng ta cũng sẽ đề cập đến các chủ đề liên quan như **render html to png**, cách **populate html table javascript**, và sự khác biệt giữa **create html document java** và **create empty html java**. Khi kết thúc, bạn sẽ có một chương trình tự chứa, có thể đưa vào bất kỳ dự án Maven hoặc Gradle nào và chạy ngay lập tức. + +## Prerequisites + +- Java 17 hoặc mới hơn (API hoạt động với Java 8+ nhưng chúng ta sẽ dùng phiên bản LTS mới nhất) +- Thư viện Aspose.HTML for Java (có sẵn qua Maven Central) +- Một IDE đơn giản hoặc dòng lệnh `javac`/`java` +- Quyền ghi vào thư mục sẽ lưu file PNG + +Không cần trình duyệt web bên ngoài, không cần Chrome headless, chỉ cần mã Java thuần. + +## Step 1: Create an empty HTML document (create empty html java) + +Điều đầu tiên chúng ta cần là một khởi đầu sạch—một đối tượng tài liệu HTML trống mà chúng ta có thể thao tác bằng chương trình. Aspose.HTML cung cấp lớp `HTMLDocument` hoạt động như một engine trình duyệt mini. + +```java +import com.aspose.html.HTMLDocument; + +// Step 1: Initialise an empty document +HTMLDocument htmlDoc = new HTMLDocument(); +``` + +Tại sao lại bắt đầu với một tài liệu trống? Bởi vì nó đảm bảo không có markup lạc lõng hay trạng thái trước đó can thiệp vào bảng mà chúng ta sắp xây dựng. Đây là cách Java tương đương với việc gọi `document.open()` trong trình duyệt. + +## Step 2: Write a minimal HTML page that contains an empty table (create html document java) + +Tiếp theo chúng ta chèn một khung HTML nhỏ. Trang bao gồm một placeholder `
` và một vài quy tắc CSS để bảng trông đẹp khi được render. + +```java +htmlDoc.write( + "" + + "
" +); +``` + +Lưu ý cách chúng ta **create html document java** bằng cách truyền một chuỗi thô vào `write`. Cách này hữu ích khi HTML được tạo động, và tránh việc phải dùng các file mẫu bên ngoài. + +## Step 3: Populate the HTML table with JavaScript (populate html table javascript) + +Bây giờ là phần thú vị—thêm các hàng vào bảng bằng JavaScript. Chúng ta sẽ viết một đoạn script ngắn lặp năm lần, chèn một hàng mỗi vòng và điền hai ô: một ô chứa số thứ tự và ô còn lại chứa “Even” hoặc “Odd”. + +```java +String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; +``` + +Tại sao lại dùng JavaScript ở đây? Bởi vì nhiều trang thực tế tạo bảng một cách động—hãy nghĩ đến các dashboard, báo cáo, hoặc lưới dữ liệu phía client. Bằng cách **populate html table javascript** bên trong engine Aspose, chúng ta mô phỏng chính xác những gì sẽ xảy ra trong trình duyệt, đảm bảo PNG được render giống hệt như người dùng sẽ thấy. + +## Step 4: Execute the script inside the document’s sandbox + +Aspose.HTML cung cấp cho chúng ta một đối tượng `Window` hoạt động như `window` của trình duyệt. Gọi `eval` sẽ chạy script trong môi trường cô lập, vì vậy không có cuộc gọi mạng bên ngoài nào được thực hiện. + +```java +htmlDoc.getWindow().eval(populateScript); +``` + +Một lỗi thường gặp là quên chờ script hoàn thành trước khi render. Trong trường hợp đơn giản này script chạy đồng bộ, vì vậy chúng ta có thể chuyển ngay sang bước tiếp theo. Nếu bạn nhúng code bất đồng bộ (ví dụ `fetch`), bạn sẽ cần bắt sự kiện `onload` hoặc sử dụng cơ chế chờ dựa trên `Promise`. + +## Step 5: Configure image‑save options (render html to png) + +Trước khi thực sự rasterize trang, chúng ta quyết định kích thước ảnh đầu ra. Lớp `ImageSaveOptions` cho phép chúng ta đặt chiều rộng, chiều cao và một vài tham số chất lượng. + +```java +import com.aspose.html.converters.ImageSaveOptions; + +ImageSaveOptions imageOptions = new ImageSaveOptions(); +imageOptions.setWidth(800); // Desired width in pixels +imageOptions.setHeight(600); // Desired height in pixels +``` + +Việc chọn kích thước canvas hợp lý là rất quan trọng để có kết quả **render html to png** sạch sẽ. Quá nhỏ sẽ làm văn bản bị cắt; quá lớn sẽ lãng phí bộ nhớ. 800×600 là mức trung bình an toàn cho hầu hết các bảng. + +## Step 6: Convert the populated HTML page to a PNG image (convert html to png) + +Cuối cùng, chúng ta gọi phương thức tĩnh `Converter.convertHTML`. Nó nhận vào `HTMLDocument`, các tùy chọn lưu và đường dẫn file đích. + +```java +import com.aspose.html.converters.Converter; + +Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); +``` + +Thay `YOUR_DIRECTORY` bằng đường dẫn tuyệt đối hoặc tương đối tồn tại trên máy của bạn. Sau khi chương trình kết thúc, bạn sẽ thấy file `table.png` hiển thị một bảng được định dạng đẹp với năm hàng, nhãn “Even”/“Odd” xen kẽ. + +> **Pro tip:** Nếu bạn cần nền trong suốt, bật tùy chọn bằng `imageOptions.setBackgroundColor(Color.getTransparent());`. + +## Full, Ready‑to‑Run Example + +Dưới đây là lớp Java hoàn chỉnh kết hợp mọi thứ lại. Sao chép‑dán vào `JsDomManipulation.java`, điều chỉnh thư mục đầu ra, và chạy. + +```java +import com.aspose.html.HTMLDocument; +import com.aspose.html.converters.Converter; +import com.aspose.html.converters.ImageSaveOptions; + +public class JsDomManipulation { + public static void main(String[] args) throws Exception { + // Step 1: Create an empty HTML document + HTMLDocument htmlDoc = new HTMLDocument(); + + // Step 2: Write a minimal HTML page that contains an empty table + htmlDoc.write( + "" + + "
" + ); + + // Step 3: Define JavaScript that populates the table with rows + String populateScript = "" + + "const tbl = document.querySelector('#data');" + + "for (let i = 1; i <= 5; i++) {" + + " const row = tbl.insertRow();" + + " row.insertCell().textContent = `Row ${i}`;" + + " row.insertCell().textContent = (i % 2 === 0) ? 'Even' : 'Odd';" + + "}"; + + // Step 4: Execute the script inside the document's sandbox + htmlDoc.getWindow().eval(populateScript); + + // Step 5: Configure image‑save options (size of the rendered image) + ImageSaveOptions imageOptions = new ImageSaveOptions(); + imageOptions.setWidth(800); + imageOptions.setHeight(600); + + // Step 6: Convert the populated HTML page to a PNG image + Converter.convertHTML(htmlDoc, imageOptions, "YOUR_DIRECTORY/table.png"); + } +} +``` + +### Expected output + +Khi bạn mở `table.png`, bạn sẽ thấy một hình như sau: + +![convert html to png example output](https://example.com/assets/table.png "convert html to png – rendered table") + +Hình ảnh hiển thị một bảng 5‑hàng với mẫu “Row 1 – Odd” … “Row 5 – Odd”, được style với viền mỏng và padding. + +## Common pitfalls and how to avoid them + +| Issue | Why it happens | Fix | +|-------|----------------|-----| +| **Script runs after rendering** | Asynchronous code (e.g., `setTimeout`) isn’t awaited. | Use `window.onload` or block until `document.readyState === 'complete'`. | +| **Image is blank** | No content within the viewport (width/height set to 0). | Ensure `ImageSaveOptions` dimensions are non‑zero and match the page layout. | +| **Table rows are cut off** | Canvas too small for the table height. | Increase `imageOptions.setHeight` or use `imageOptions.setFitToPage(true)`. | +| **Missing CSS** | Inline style omitted or external CSS not loaded. | Keep all required CSS inside the `