Convertir PowerPoint en HTML en JavaScript

Vue d’ensemble

Cet article explique comment convertir une présentation PowerPoint au format HTML à l’aide de JavaScript. Il couvre les sujets suivants.

Convertir PowerPoint en HTML avec JavaScript
Convertir PPT en HTML avec JavaScript
Convertir PPTX en HTML avec JavaScript
Convertir ODP en HTML avec JavaScript
Convertir une diapositive PowerPoint en HTML avec JavaScript

PowerPoint Java vers HTML

Pour le code d’exemple JavaScript de conversion PowerPoint en HTML, veuillez consulter la section ci‑dessous, à savoir Convertir PowerPoint en HTML. Le code peut charger plusieurs formats tels que PPT, PPTX et ODP dans l’objet Presentation et les enregistrer au format HTML.

À propos de la conversion PowerPoint en HTML

En utilisant Aspose.Slides for Node.js via Java, les applications et les développeurs peuvent convertir une présentation PowerPoint en HTML : PPTX en HTML ou PPT en HTML.

Aspose.Slides offre de nombreuses options (principalement provenant de la classe HtmlOptions) qui définissent le processus de conversion PowerPoint en HTML :

Convertir une présentation PowerPoint complète en HTML.
Convertir une diapositive spécifique d’une présentation PowerPoint en HTML.
Convertir les médias de la présentation (images, vidéos, etc.) en HTML.
Convertir une présentation PowerPoint en HTML réactif.
Convertir une présentation PowerPoint en HTML avec ou sans notes du présentateur.
Convertir une présentation PowerPoint en HTML avec ou sans commentaires.
Convertir une présentation PowerPoint en HTML avec les polices originales ou incorporées.
Convertir une présentation PowerPoint en HTML en utilisant le nouveau style CSS.

En utilisant sa propre API, Aspose a développé des convertisseurs gratuits presentation to HTML : PPT en HTML, PPTX en HTML, ODP en HTML, etc.

Vous pourriez vouloir consulter d’autres convertisseurs gratuits d’Aspose.

Note

En plus des processus de conversion décrits ici, Aspose.Slides prend également en charge les opérations de conversion suivantes impliquant le format HTML :

Convertir PowerPoint en HTML

En utilisant Aspose.Slides, vous pouvez convertir une présentation PowerPoint complète en HTML de la manière suivante :

Créez une instance de la classe Presentation.
Utilisez la méthode save pour enregistrer l’objet sous forme de fichier HTML.

// Instancier un objet Presentation qui représente un fichier de présentation
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));
    // Enregistrement de la présentation au format HTML
    pres.save("ConvertWholePresentationToHTML_out.html", aspose.slides.SaveFormat.Html, htmlOpt);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Convertir PowerPoint en HTML réactif

Aspose.Slides fournit la classe ResponsiveHtmlController qui vous permet de générer des fichiers HTML réactifs. Ce code montre comment convertir une présentation PowerPoint en HTML réactif avec JavaScript :

// Instancier un objet Presentation qui représente un fichier de présentation
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));
    // Enregistrement de la présentation au format HTML
    pres.save("ConvertPresentationToResponsiveHTML_out.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Convertir PowerPoint en HTML avec notes

Ce code montre comment convertir un PowerPoint en HTML avec les notes en 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);
    // Enregistrement des pages de notes
    pres.save("Output.html", aspose.slides.SaveFormat.Html, opt);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Convertir PowerPoint en HTML avec les polices originales

Aspose.Slides fournit la classe EmbedAllFontsHtmlController qui vous permet d’incorporer toutes les polices d’une présentation lors de la conversion en HTML.

Pour empêcher l’incorporation de certaines polices, vous pouvez transmettre un tableau de noms de polices à un constructeur paramétré de la classe [EmbedAllFontsHtmlController]. Les polices populaires, comme Calibri ou Arial, lorsqu’elles sont utilisées dans une présentation, n’ont pas besoin d’être incorporées car la plupart des systèmes les contiennent déjà. Lorsqu’elles sont incorporées, le document HTML résultant devient inutilement volumineux.

La classe [EmbedAllFontsHtmlController] prend en charge l’héritage et fournit la méthode WriteFont qui est destinée à être remplacée.

var pres = new aspose.slides.Presentation("input.pptx");
try {
    // exclure les polices par défaut de la présentation
    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();
    }
}

Convertir PowerPoint en HTML avec des images haute qualité

Par défaut, lors de la conversion de PowerPoint en HTML, Aspose.Slides génère un HTML léger avec des images à 72 DPI et des zones recadrées supprimées. Pour obtenir des fichiers HTML avec des images de meilleure qualité, vous devez transmettre 96 à la méthode setPicturesCompression de la classe HtmlOptions (c’est‑à‑dire PicturesCompression.Dpi96) ou une valeur supérieure.

Ce code JavaScript montre comment convertir une présentation PowerPoint en HTML tout en obtenant des images haute qualité à 150 DPI (c’est‑à‑dire 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();
    }
}

Ce code JavaScript montre comment générer un HTML avec des images en pleine qualité :

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

Convertir une diapositive en HTML

Pour convertir une diapositive spécifique d’un PowerPoint en HTML, vous devez créer une instance de la même classe [Presentation] (utilisée pour convertir des présentations complètes en HTML) puis utiliser la méthode [save] pour enregistrer le fichier au format HTML. La classe [HtmlOptions] peut être utilisée pour spécifier des options de conversion supplémentaires :

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));
    // Enregistrement du fichier
    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();
}

Enregistrer CSS et images lors de l’exportation vers HTML

En utilisant de nouveaux fichiers de style CSS, vous pouvez facilement modifier le style du fichier HTML résultant du processus de conversion de PowerPoint en HTML.

Le code JavaScript de cet exemple montre comment utiliser des méthodes surchargeables pour créer un document HTML personnalisé avec un lien vers un fichier 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();
    }
}

Vous devrez implémenter CustomHeaderAndFontsController en Java, le compiler et l’ajouter au répertoire du module \aspose.slides.via.java\lib.

Ce code Java montre comment CustomHeaderAndFontsController est implémenté :

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

    // Modèle d'en-tête personnalisé
    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);
    }
}

Lier toutes les polices lors de la conversion d’une présentation en HTML

Si vous ne souhaitez pas incorporer les polices (pour éviter d’augmenter la taille du HTML résultant), vous pouvez lier toutes les polices en implémentant votre propre version de LinkAllFontsHtmlController.

Ce code JavaScript montre comment convertir un PowerPoint en HTML tout en liant toutes les polices et en excluant “Calibri” et “Arial” (puisqu’elles existent déjà dans le système) :

var pres = new aspose.slides.Presentation("pres.pptx");
try {
    // Exclure les polices par défaut de la présentation
    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();
    }
}

Vous devrez implémenter LinkAllFontsHtmlController en Java, le compiler et l’ajouter au répertoire du module \aspose.slides.via.java\lib.

Ce code Java montre comment LinkAllFontsHtmlController est implémenté :

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"; // il peut être nécessaire de nettoyer le chemin
            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();
        }
    }
}

Convertir PowerPoint en HTML réactif

Ce code JavaScript montre comment convertir une présentation PowerPoint en HTML réactif :

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

Exporter des fichiers multimédia vers HTML

En utilisant Aspose.Slides for Node.js via Java, vous pouvez exporter des fichiers multimédia de cette manière :

Créez une instance de la classe Presentation.
Obtenez une référence à la diapositive.
Ajoutez une vidéo à la diapositive.
Enregistrez la présentation sous forme de fichier HTML.

Ce code JavaScript montre comment ajouter une vidéo à la présentation puis l’enregistrer en HTML :

// Chargement d'une présentation
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);
    // Configuration des options 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));
    // Enregistrement du fichier
    pres.save(fileName, aspose.slides.SaveFormat.Html, htmlOptions);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

FAQ

Quelle est la performance d’Aspose.Slides lors de la conversion de plusieurs présentations en HTML ?

La performance dépend de la taille et de la complexité des présentations. Aspose.Slides est très efficace et évolutif pour les opérations par lots. Pour obtenir des performances optimales lors de la conversion d’un grand nombre de présentations, il est recommandé d’utiliser le multithreading ou le traitement parallèle dès que possible.

Aspose.Slides prend‑il en charge l’exportation des hyperliens vers HTML ?

Oui, Aspose.Slides prend entièrement en charge l’exportation des hyperliens intégrés vers HTML. Lors de la conversion des présentations au format HTML, les hyperliens sont automatiquement conservés et restent cliquables.

Existe‑t‑il une limite au nombre de diapositives lors de la conversion de présentations en HTML ?

Il n’y a aucune limite au nombre de diapositives avec Aspose.Slides. Vous pouvez convertir des présentations de toute taille. Toutefois, pour des présentations contenant un très grand nombre de diapositives, la performance peut dépendre des ressources disponibles sur votre serveur ou système.

Visionneuse de présentation