تحويل عروض PowerPoint إلى HTML في JavaScript

نظرة عامة

هذا المقال يوضح كيفية تحويل عرض تقديمي PowerPoint إلى تنسيق HTML باستخدام JavaScript. يغطي المواضيع التالية.

تحويل PowerPoint إلى HTML في JavaScript
تحويل PPT إلى HTML في JavaScript
تحويل PPTX إلى HTML في JavaScript
تحويل ODP إلى HTML في JavaScript
تحويل شريحة PowerPoint إلى HTML في JavaScript

PowerPoint إلى HTML باستخدام JavaScript

للحصول على عينة كود JavaScript لتحويل PowerPoint إلى HTML، يرجى الاطلاع على القسم أدناه أي تحويل PowerPoint إلى HTML. يمكن للكود تحميل عدد من الصيغ مثل PPT و PPTX و ODP في كائن Presentation وحفظه بتنسيق HTML.

حول تحويل PowerPoint إلى HTML

باستخدام Aspose.Slides for Node.js via Java، يمكن للتطبيقات والمطورين تحويل عرض تقديمي PowerPoint إلى HTML: PPTX إلى HTML أو PPT إلى HTML.

Aspose.Slides provides many options (mostly from the HtmlOptions class) that define the PowerPoint to HTML conversion process:

تحويل عرض PowerPoint كامل إلى HTML.
تحويل شريحة محددة في عرض PowerPoint إلى HTML.
تحويل وسائط العرض (الصور، الفيديوهات، إلخ) إلى HTML.
تحويل عرض PowerPoint إلى HTML متجاوب.
تحويل عرض PowerPoint إلى HTML مع تضمين ملاحظات المتحدث أو استبعادها.
تحويل عرض PowerPoint إلى HTML مع تضمين التعليقات أو استبعادها.
تحويل عرض PowerPoint إلى HTML مع الخطوط الأصلية أو المدمجة.
تحويل عرض PowerPoint إلى HTML باستخدام نمط CSS الجديد.

باستخدام API الخاص بها، طورت Aspose محولات مجانية من presentation to HTML: PPT إلى HTML، PPTX إلى HTML، ODP إلى HTML، إلخ.

قد ترغب في استعراض محولات مجانية أخرى من Aspose.

تحويل PowerPoint إلى HTML

باستخدام Aspose.Slides، يمكنك تحويل عرض PowerPoint كامل إلى HTML بهذه الطريقة:

إنشاء كائن من فئة Presentation .
استخدم الطريقة save لحفظ الكائن كملف HTML.

هذا الكود يوضح لك كيفية تحويل PowerPoint إلى HTML في JavaScript:

// إنشاء كائن Presentation يمثل ملف عرض تقديمي
var pres = new aspose.slides.Presentation("Convert_HTML.pptx");
try {
    var htmlOpt = new aspose.slides.HtmlOptions();
    htmlOpt.getNotesCommentsLayouting().setNotesPosition(aspose.slides.NotesPositions.BottomFull);
    htmlOpt.setHtmlFormatter(aspose.slides.HtmlFormatter.createDocumentFormatter("", false));
    // حفظ العرض التقديمي كملف HTML
    pres.save("ConvertWholePresentationToHTML_out.html", aspose.slides.SaveFormat.Html, htmlOpt);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

تحويل PowerPoint إلى HTML متجاوب

توفر Aspose.Slides الفئة ResponsiveHtmlController التي تتيح لك إنشاء ملفات HTML متجاوبة. يوضح هذا الكود كيفية تحويل عرض PowerPoint إلى HTML متجاوب في JavaScript:

// إنشاء كائن Presentation يمثل ملف عرض تقديمي
var pres = new aspose.slides.Presentation("Convert_HTML.pptx");
try {
    var controller = new aspose.slides.ResponsiveHtmlController();
    var htmlOptions = new aspose.slides.HtmlOptions();
    htmlOptions.setHtmlFormatter(aspose.slides.HtmlFormatter.createCustomFormatter(controller));
    // حفظ العرض التقديمي إلى HTML
    pres.save("ConvertPresentationToResponsiveHTML_out.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

تحويل PowerPoint إلى HTML مع الملاحظات

يظهر هذا الكود كيفية تحويل PowerPoint إلى HTML مع الملاحظات في JavaScript:

var pres = new aspose.slides.Presentation("Presentation.pptx");
try {
    var opt = new aspose.slides.HtmlOptions();
    var options = opt.getNotesCommentsLayouting();
    options.setNotesPosition(aspose.slides.NotesPositions.BottomFull);
    // حفظ صفحات الملاحظات
    pres.save("Output.html", aspose.slides.SaveFormat.Html, opt);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

تحويل PowerPoint إلى HTML مع الخطوط الأصلية

توفر Aspose.Slides الفئة EmbedAllFontsHtmlController التي تتيح لك تضمين جميع الخطوط في العرض أثناء تحويله إلى HTML.

لمنع تضمين بعض الخطوط، يمكنك تمرير مصفوفة من أسماء الخطوط إلى مُنشئ معلمات من فئة EmbedAllFontsHtmlController. الخطوط الشائعة مثل Calibri أو Arial، عندما تُستخدم في عرض، لا تحتاج إلى تضمينها لأن معظم الأنظمة تحتوي بالفعل على هذه الخطوط. عندما يتم تضمين هذه الخطوط، يصبح مستند HTML الناتج كبيرًا بشكل غير ضروري.

فئة EmbedAllFontsHtmlController تدعم الوراثة وتوفر الطريقة WriteFont التي يُقصد تجاوزها.

var pres = new aspose.slides.Presentation("input.pptx");
try {
    // استبعاد خطوط العرض التقديمي الافتراضية
    var fontNameExcludeList = java.newArray("java.lang.String", ["Calibri", "Arial"]));
    var embedFontsController = new aspose.slides.EmbedAllFontsHtmlController(fontNameExcludeList);
    var htmlOptionsEmbed = new aspose.slides.HtmlOptions();
    htmlOptionsEmbed.setHtmlFormatter(aspose.slides.HtmlFormatter.createCustomFormatter(embedFontsController));
    pres.save("input-PFDinDisplayPro-Regular-installed.html", aspose.slides.SaveFormat.Html, htmlOptionsEmbed);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

تحويل PowerPoint إلى HTML مع صور عالية الجودة

بشكل افتراضي، عندما تقوم بتحويل PowerPoint إلى HTML، ينتج Aspose.Slides HTML صغير مع صور بدقة 72 DPI ومساحات مقصوصة محذوفة. للحصول على ملفات HTML بصور ذات جودة أعلى، يجب تمرير 96 إلى طريقة setPicturesCompression من فئة HtmlOptions (أي PicturesCompression.Dpi96) أو قيم أعلىقائمة القيم.

هذا الكود JavaScript يوضح لك كيفية تحويل عرض PowerPoint إلى HTML مع الحصول على صور عالية الجودة بدقة 150 DPI (أي PicturesCompression.Dpi150):

var pres = new aspose.slides.Presentation("InputDoc.pptx");
try {
    var htmlOpts = new aspose.slides.HtmlOptions();
    htmlOpts.setPicturesCompression(aspose.slides.PicturesCompression.Dpi150);
    pres.save("OutputDoc-dpi150.html", aspose.slides.SaveFormat.Html, htmlOpts);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

هذا الكود في JavaScript يوضح لك كيفية إخراج HTML بصور جودة كاملة:

var pres = new aspose.slides.Presentation("InputDoc.pptx");
try {
    var htmlOpts = new aspose.slides.HtmlOptions();
    htmlOpts.setDeletePicturesCroppedAreas(false);
    pres.save("Outputdoc-noCrop.html", aspose.slides.SaveFormat.Html, htmlOpts);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

تحويل الشريحة إلى HTML

لتحويل شريحة محددة في PowerPoint إلى HTML، يجب إنشاء كائن من نفس فئة Presentation (المستخدمة لتحويل العروض كاملة إلى HTML) ثم استخدم طريقة save لحفظ الملف كـ HTML. يمكن استخدام فئة HtmlOptions لتحديد خيارات تحويل إضافية:

var pres = new aspose.slides.Presentation("Individual-Slide.pptx");
try {
    let htmlOptions = new aspose.slides.HtmlOptions();
    htmlOptions.getNotesCommentsLayouting().setNotesPosition(aspose.slides.NotesPositions.BottomFull);
    
    const CustomFormattingController = java.newProxy("com.aspose.slides.IHtmlFormattingController", {
        writeDocumentStart: function(generator, presentation) {

        },

        writeDocumentEnd: function(generator, presentation) {

        },

        writeSlideStart: function(generator, slide) {
            const slideIndex = generator.getSlideIndex() + 1;
            const slideHeaderHtml = `<div class="slide" name="slide" id="slide${slideIndex}">`;
            generator.addHtml(slideHeaderHtml);
        },

        writeSlideEnd: function(generator, slide) {
            const slideFooterHtml = "</div>";
            generator.addHtml(slideFooterHtml);
        },

        writeShapeStart: function(generator, shape) {
        },

        writeShapeEnd: function(generator, shape) {
        }
    });
    
    htmlOptions.setHtmlFormatter(aspose.slides.HtmlFormatter.createCustomFormatter(CustomFormattingController));
    // حفظ الملف
    for (var i = 0; i < pres.getSlides().size(); i++) {
        pres.save(("Individual Slide" + (i + 1)) + "_out.html", java.newArray("int", [i + 1]), aspose.slides.SaveFormat.Html, htmlOptions);
    }
} finally {
    if (pres != null) pres.dispose();
}

حفظ CSS والصور عند التصدير إلى HTML

باستخدام ملفات نمط CSS الجديدة، يمكنك بسهولة تغيير نمط ملف HTML الناتج عن عملية تحويل PowerPoint إلى HTML.

الكود JavaScript في هذا المثال يوضح لك كيفية استخدام طرق قابلة للتجاوز لإنشاء مستند HTML مخصص مع رابط إلى ملف CSS:

var pres = new aspose.slides.Presentation("pres.pptx");
try {
    var htmlController = java.newInstanceSync("CustomHeaderAndFontsController", "styles.css");
    var options = new aspose.slides.HtmlOptions();
    options.setHtmlFormatter(aspose.slides.HtmlFormatter.createCustomFormatter(htmlController));
    pres.save("pres.html", aspose.slides.SaveFormat.Html, options);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

ستحتاج إلى تنفيذ CustomHeaderAndFontsController في Java، تجميعه، وإضافته إلى موقع الوحدة \aspose.slides.via.java\lib. هذا الكود Java يوضح لك كيفية تنفيذ CustomHeaderAndFontsController:

public class CustomHeaderAndFontsController extends EmbedAllFontsHtmlController
{
    private final int m_basePath = 0;

    // قالب رأس مخصص
    final static String Header = "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n" +
            "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=9\">\n" +
            "<link rel=\"stylesheet\" type=\"text/css\" href=\"%s\">\n" +
            "</head>";

    private final String m_cssFileName;

    public CustomHeaderAndFontsController(String cssFileName)
    {
        m_cssFileName = cssFileName;
    }

    public void writeDocumentStart(IHtmlGenerator generator, IPresentation presentation)
    {
        generator.addHtml(String.format(Header, m_cssFileName));
        writeAllFonts(generator, presentation);
    }

    public void writeAllFonts(IHtmlGenerator generator, IPresentation presentation)
    {
        generator.addHtml("<!-- Embedded fonts -->");
        super.writeAllFonts(generator, presentation);
    }
}

ربط جميع الخطوط عند تحويل العرض إلى HTML

إذا كنت لا تريد تضمين الخطوط (لتجنب زيادة حجم HTML الناتج)، يمكنك ربط جميع الخطوط بتنفيذ نسخة خاصة من LinkAllFontsHtmlController.

هذا الكود JavaScript يوضح لك كيفية تحويل PowerPoint إلى HTML مع ربط جميع الخطوط واستثناء “Calibri” و “Arial” (لأنهما موجودان بالفعل في النظام):

var pres = new aspose.slides.Presentation("pres.pptx");
try {
    // استبعاد خطوط العرض التقديمي الافتراضية
    var fontNameExcludeList = java.newArray("java.lang.String", ["Calibri", "Arial"]));
    var linkcont = java.newInstanceSync("LinkAllFontsHtmlController", fontNameExcludeList, "C:/Windows/Fonts/");
    var htmlOptionsEmbed = new aspose.slides.HtmlOptions();
    htmlOptionsEmbed.setHtmlFormatter(aspose.slides.HtmlFormatter.createCustomFormatter(linkcont));
    pres.save("pres.html", aspose.slides.SaveFormat.Html, htmlOptionsEmbed);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

ستحتاج إلى تنفيذ LinkAllFontsHtmlController في Java، تجميعه، وإضافته إلى موقع الوحدة \aspose.slides.via.java\lib. هذا الكود Java يوضح لك كيفية تنفيذ LinkAllFontsHtmlController:

public class LinkAllFontsHtmlController extends EmbedAllFontsHtmlController
{
    private final String m_basePath;

    public LinkAllFontsHtmlController(String[] fontNameExcludeList, String basePath)
    {
        super(fontNameExcludeList);
        m_basePath = basePath;
    }

    public void writeFont
    (
            IHtmlGenerator generator,
            IFontData originalFont,
            IFontData substitutedFont,
            String fontStyle,
            String fontWeight,
            byte[] fontData)
    {
        try {
            String fontName = substitutedFont == null ? originalFont.getFontName() : substitutedFont.getFontName();
            String path = fontName + ".woff"; // قد تكون هناك حاجة إلى بعض تنظيف المسار
            Files.write(new File(m_basePath + path).toPath(), fontData, StandardOpenOption.CREATE);

            generator.addHtml("<style>");
            generator.addHtml("@font-face { ");
            generator.addHtml("font-family: '" + fontName + "'; ");
            generator.addHtml("src: url('" + path + "')");

            generator.addHtml(" }");
            generator.addHtml("</style>");
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }
}

تحويل PowerPoint إلى HTML متجاوب

هذا الكود JavaScript يوضح لك كيفية تحويل عرض PowerPoint إلى HTML متجاوب:

var pres = new aspose.slides.Presentation("SomePresentation.pptx");
try {
    var saveOptions = new aspose.slides.HtmlOptions();
    saveOptions.setSvgResponsiveLayout(true);
    pres.save("SomePresentation-out.html", aspose.slides.SaveFormat.Html, saveOptions);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

تصدير ملفات الوسائط إلى HTML

باستخدام Aspose.Slides for Node.js via Java، يمكنك تصدير ملفات الوسائط بهذه الطريقة:

إنشاء كائن من فئة Presentation.
الحصول على مرجع إلى الشريحة.
إضافة فيديو إلى الشريحة.
كتابة العرض كملف HTML.

هذا الكود JavaScript يوضح لك كيفية إضافة فيديو إلى العرض ثم حفظه كـ HTML:

// تحميل عرض تقديمي
var pres = new aspose.slides.Presentation();
try {
    var path = "./out/";
    final var fileName = "ExportMediaFiles_out.html";
    final var baseUri = "http://www.example.com/";
    var videoData = java.newInstanceSync("java.io.FileInputStream", java.newInstanceSync("java.io.File", "my_video.avi"));
    var video = pres.getVideos().addVideo(videoData);
    pres.getSlides().get_Item(0).getShapes().addVideoFrame(10, 10, 100, 100, video);
    var controller = new aspose.slides.VideoPlayerHtmlController(path, fileName, baseUri);
    // إعداد خيارات HTML
    var htmlOptions = new aspose.slides.HtmlOptions(controller);
    var svgOptions = new aspose.slides.SVGOptions(controller);
    htmlOptions.setHtmlFormatter(aspose.slides.HtmlFormatter.createCustomFormatter(controller));
    htmlOptions.setSlideImageFormat(aspose.slides.SlideImageFormat.svg(svgOptions));
    // حفظ الملف
    pres.save(fileName, aspose.slides.SaveFormat.Html, htmlOptions);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

FAQ

ما هو أداء Aspose.Slides عند تحويل عروض تقديمية متعددة إلى HTML؟

يعتمد الأداء على حجم وتعقيد العروض. Aspose.Slides فعال للغاية وقابل للتوسع للعمليات الدفعية. لتحقيق أفضل أداء عند تحويل عدد كبير من العروض، يوصى باستخدام تعدد الخيوط أو المعالجة المتوازية كلما كان ذلك ممكنًا.

هل يدعم Aspose.Slides تصدير الروابط التشعبية إلى HTML؟

نعم، يدعم Aspose.Slides بالكامل تصدير الروابط التشعبية المدمجة إلى HTML. عند تحويل العروض إلى تنسيق HTML، تُحافظ الروابط التشعبية تلقائيًا وتبقى قابلة للنقر.

هل هناك أي حد لعدد الشرائح عند تحويل العروض إلى HTML؟

لا يوجد حد لعدد الشرائح عند استخدام Aspose.Slides. يمكنك تحويل عروض بأي حجم. ومع ذلك، بالنسبة للعروض التي تحتوي على عدد كبير جدًا من الشرائح، قد يعتمد الأداء على الموارد المتاحة على الخادم أو النظام الخاص بك.

عارض العروض التقديمية