Konvertera PowerPoint-presentationer till HTML i Node.js

Översikt

Aspose.Slides för Node.js via Java kan spara PowerPoint-presentationer som HTML utan Microsoft PowerPoint. Den grundläggande konverteringen är en enda Presentation laddning och ett save‑anrop med SaveFormat. Använd HtmlOptions när du behöver styra den exporterade layouten, teckensnitt, bilder, anteckningar, kommentarer, SVG‑utmatning eller länkade resurser.

Den här guiden fokuserar på praktiska HTML‑exportscenarier:

  • Exportera en hel presentation eller valda bilder.
  • Generera HTML med fast layout, responsiv eller SVG‑baserad.
  • Inkludera talaranteckningar och kommentarer.
  • Styr bildkvalitet och beskurna bilddata.
  • Bädda in teckensnitt eller spara teckensnitts‑filer separat.
  • Välj hur externa resurser och mediafiler skrivs och refereras.

Som standard producerar HTML‑export ett självständigt HTML‑dokument där de flesta resurser är inbäddade. Detta är bekvämt för att dela en fil, men det kan öka utdata­storleken. För webbpublicering, överväg externa resurser, lägre bild‑DPI och endast inbäddning av teckensnitt som inte är pålitligt tillgängliga i målmiljön.

Konvertera en presentation till HTML

För att exportera en presentation till HTML, ladda den med Presentation och spara den med SaveFormat.Html.

let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
    presentation.save("presentation.html", aspose.slides.SaveFormat.Html);
} finally {
    presentation.dispose();
}

Detta exempel skriver en HTML‑fil. Presentations‑objektet disponeras i finally‑blocket, vilket frigör filhandtag och renderingsresurser efter export.

Använd HtmlOptions

HtmlOptions är huvudkonfigurationsklassen för HTML‑export. Vanliga inställningar inkluderar:

  • SlidesLayoutOptions: lägger till anteckningar, kommentarer, handouts eller annan layoutinformation.
  • HtmlFormatter: ändrar HTML‑dokumentstrukturen eller delegater formatering till en kontroller.
  • SlideImageFormat: ändrar hur bilder representeras, t.ex. som SVG.
  • PicturesCompression: styr bild‑DPI och utdata­storlek.
  • DeletePicturesCroppedAreas: behåller eller tar bort beskurna bilddata.
  • SvgResponsiveLayout: får exporterad SVG‑innehåll att anpassa sig till sin behållare.
  • ShowHiddenSlides: inkluderar dolda bilder när det krävs.

Följande avsnitt visar de vanligaste alternativen separat så att du kan kombinera endast de som ditt arbetsflöde behöver.

Konvertera valda bilder till HTML

Presentation.save‑överladdningen som accepterar bildnummer använder 1‑baserade bildpositioner. Loopen nedan sparar varje bild till en separat HTML‑fil.

let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
    let slideCount = presentation.getSlides().size();

    for (let slideIndex = 0; slideIndex < slideCount; slideIndex++) {
        let slideNumber = slideIndex + 1;
        let slideNumbers = java.newArray("int", [slideNumber]);
        let htmlFileName = "slide-" + slideNumber + ".html";

        presentation.save(htmlFileName, slideNumbers, aspose.slides.SaveFormat.Html);
    }
} finally {
    presentation.dispose();
}

Använd detta mönster när en webbplats eller applikation behöver en HTML‑sida per bild. Om varje bild ska ha samma layout, skapa en [HtmlOptions]‑instans och skicka den till varje save‑anrop.

Skapa responsiv HTML

ResponsiveHtmlController tillhandahåller responsiv HTML‑utmatning via HtmlFormatter. Använd den när den exporterade sidan bör anpassa sig bättre till webbläsarens bredd.

let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
    let controller = new aspose.slides.ResponsiveHtmlController();
    let formatter = aspose.slides.HtmlFormatter.createCustomFormatter(controller);

    let htmlOptions = new aspose.slides.HtmlOptions();
    htmlOptions.setHtmlFormatter(formatter);

    presentation.save("presentation-responsive.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

För SVG‑baserad responsiv layout, sätt SvgResponsiveLayout på HtmlOptions. Detta är användbart när bildinnehållet exporteras som skalbar SVG‑markup.

let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
    let htmlOptions = new aspose.slides.HtmlOptions();
    htmlOptions.setSvgResponsiveLayout(true);

    presentation.save("presentation-svg-responsive.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

Inkludera talaranteckningar och kommentarer

Använd NotesCommentsLayoutingOptions via HtmlOptions.setSlidesLayoutOptions för att inkludera talaranteckningar eller kommentarer. Anteckningar och kommentarer är dolda som standard om du inte väljer deras positioner.

Anta att källpresentationen innehåller talaranteckningar:

Slide with speaker notes in PowerPoint

Följande kod exporterar bildinnehållet med talaranteckningar under bilden.

let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
    let layoutOptions = new aspose.slides.NotesCommentsLayoutingOptions();
    layoutOptions.setNotesPosition(aspose.slides.NotesPositions.BottomFull);

    let htmlOptions = new aspose.slides.HtmlOptions();
    htmlOptions.setSlidesLayoutOptions(layoutOptions);

    presentation.save("presentation-with-notes.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

Den exporterade HTML‑koden inkluderar anteckningsområdet:

HTML output with the slide and speaker notes

För att exportera kommentarer, sätt CommentsPosition, till exempel till CommentsPositions.Right eller CommentsPositions.Bottom. Om du bara behöver kommentarer, utelämna NotesPosition. Om du behöver både anteckningar och kommentarer, sätt båda egenskaperna.

Styr bildkvalitet och beskurna områden

HTML‑export kan komprimera bildbilder för att minska utdata­storleken. Sätt PicturesCompression till ett värde från PicturesCompression när du behöver högre bildkvalitet.

let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
    let htmlOptions = new aspose.slides.HtmlOptions();
    htmlOptions.setPicturesCompression(aspose.slides.PicturesCompression.Dpi150);

    presentation.save("presentation-dpi-150.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

Som standard kan beskurna områden av bilder tas bort från den exporterade utdata. Behåll beskurna data endast när användare måste kunna återställa eller inspektera dessa dolda bilddelar. Att behålla dem kan öka HTML‑storleken.

let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
    let htmlOptions = new aspose.slides.HtmlOptions();
    htmlOptions.setDeletePicturesCroppedAreas(false);

    presentation.save("presentation-with-cropped-areas.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

Lägg till CSS

För enkel styling, skicka en CSS‑sträng till HtmlFormatter.createDocumentFormatter. Detta förändrar det omgivande HTML‑dokumentet medan Aspose.Slides fortsätter att rendera bildinnehållet.

let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
    let cssRules = "body { margin: 0; background: #f7f7f7; } .slide { margin: 24px auto; }";
    let formatter = aspose.slides.HtmlFormatter.createDocumentFormatter(cssRules, true);

    let htmlOptions = new aspose.slides.HtmlOptions();
    htmlOptions.setHtmlFormatter(formatter);

    presentation.save("presentation-styled.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

För ett anpassat dokumenthuvud, en länkad CSS‑fil eller anpassad markup runt bilder och former, använd HtmlFormatter med en formateringskontroller.

Bädda in teckensnitt

Om målmiljön kanske inte har presentationens teckensnitt installerade, bädda in teckensnitt i HTML med EmbedAllFontsHtmlController. Inbäddning förbättrar visuellt återgivning men ökar utdata­storleken.

let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
    let fontNamesToExclude = java.newArray("java.lang.String", ["Arial"]);
    let fontController = new aspose.slides.EmbedAllFontsHtmlController(fontNamesToExclude);
    let formatter = aspose.slides.HtmlFormatter.createCustomFormatter(fontController);

    let htmlOptions = new aspose.slides.HtmlOptions();
    htmlOptions.setHtmlFormatter(formatter);

    presentation.save("presentation-embedded-fonts.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

Uteslut teckensnitt endast när du är säker på att målwebbläsare eller system redan tillhandahåller dem. För varumärkesteckensnitt eller mindre vanliga teckensnitt är inbäddning vanligtvis säkrare.

Länka teckensnittsfiler istället för att bädda in dem

För att minska HTML‑filens storlek kan du skriva teckensnittsdata till separata WOFF‑filer och lägga till @font-face‑regler i HTML. I Node.js via Java implementeras detta scenario vanligtvis med en liten Java‑hjälparklass som ärver EmbedAllFontsHtmlController, skriver teckensnitts‑bytes till en utmatningskatalog och injicerar @font-face‑regler i den genererade HTML‑koden. Kompilera den hjälparen, lägg till den i Node.js‑modulens klassväg och skapa sedan en instans från JavaScript med java.newInstanceSync.

När du bygger en sådan hjälpare, välj två sökvägar med avsikt:

  • Filsystemets utskrifts‑sökväg, där genererade teckensnittsfiler skrivs.
  • URL‑sökvägen, vilket är vad webbläsaren använder från HTML‑dokumentet för att ladda dessa teckensnittsfiler.

Spara resurser externt

Självständigt HTML är lätt att flytta, men inbäddade Base64‑resurser kan göra filen stor. Om din applikation behöver externa bild‑, teckensnitt‑, ljud‑ eller videofiler, använd en exportkontroller som skriver resurser till en vald katalog och avger webbläsar‑synliga URL‑er. Håll filsökvägen och URL‑sökvägen i linje med din distributionslayout.

Exportera mediefiler

VideoPlayerHtmlController exporterar video‑ och ljudfiler och skriver HTML som kan spela dem i en webbläsare. Dess konstruktor tar:

  • path: katalogen där genererade mediefiler kommer att skrivas.
  • fileName: HTML‑filnamnet som genereras.
  • baseUri: det absoluta URI‑prefixet som används i HTML‑länkarna till mediefiler.

Om HTML‑filen är html-output/presentation.html och mediefiler sparas i html-output/media, bör path peka på media‑katalogen på disken, medan baseUri ska peka på samma katalog ur webbläsarens perspektiv. För lokal förhandsgranskning kan du skapa en file:///‑URI från mediekatalogen. För en distribuerad applikation, använd den absoluta URL‑en till den publicerade media‑katalogen.

let fs = require("fs");
let path = require("path");

let outputDirectory = path.join(process.cwd(), "html-output");
let mediaDirectory = path.join(outputDirectory, "media");
fs.mkdirSync(mediaDirectory, { recursive: true });

let htmlFileName = "presentation.html";
let mediaBaseUri = "file:///" + mediaDirectory.replace(/\\/g, "/") + "/";

let presentation = new aspose.slides.Presentation();
try {
    let videoFilePath = path.join(process.cwd(), "intro.mp4");
    let videoBytes = Array.from(fs.readFileSync(videoFilePath));
    let videoData = java.newArray("byte", videoBytes);

    let video = presentation.getVideos().addVideo(videoData);
    let slide = presentation.getSlides().get_Item(0);
    slide.getShapes().addVideoFrame(20, 20, 480, 270, video);

    let controller = new aspose.slides.VideoPlayerHtmlController(mediaDirectory, htmlFileName, mediaBaseUri);
    let formatter = aspose.slides.HtmlFormatter.createCustomFormatter(controller);
    let svgOptions = new aspose.slides.SVGOptions(controller);
    let slideImageFormat = aspose.slides.SlideImageFormat.svg(svgOptions);

    let htmlOptions = new aspose.slides.HtmlOptions(controller);
    htmlOptions.setHtmlFormatter(formatter);
    htmlOptions.setSlideImageFormat(slideImageFormat);

    let htmlFilePath = path.join(outputDirectory, htmlFileName);
    presentation.save(htmlFilePath, aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

Använd utmatningskataloger som är unika per exportjobb, särskilt i serverapplikationer. Delade utmatningssökvägar kan leda till att filer från olika konverteringar skriver över varandra.

Prestanda och resurshantering

HTML‑konvertering är en renderingsoperation, så bearbetningstid och minnesanvändning beror på bildantal, bildupplösning, teckensnitt, effekter, diagram och inbäddade media. Högre PicturesCompression‑DPI‑värden, inbäddade teckensnitt, SVG‑utmatning och behållna beskurna bildområden kan förbättra återgivning men ökar vanligtvis utdata­storleken.

För batchkonvertering:

  • Dispose varje [Presentation]‑instans omedelbart.
  • Använd separata utmatningskataloger för separata jobb.
  • Undvik att inbädda vanliga teckensnitt om inte återgivning kräver det.
  • Sänk bild‑DPI när HTML är för förhandsgranskning eller miniatyrer.
  • Behåll källpresentationen, genererad HTML och externa resurser tillsammans tills distributionsvägarna är slutgiltiga.

FAQ

Bevaras hyperlänkar i HTML‑utdata?

Ja. Presentations‑hyperlänkar exporteras till HTML och förblir klickbara när mål‑URL:en är giltig.

Kan jag konvertera presentationer till HTML parallellt?

Ja, men dela inte en [Presentation]‑instans mellan arbetare. Processa olika filer med separata presentations‑instanser, separata strömmar och separata utmatningskataloger. Se multithreading guidance för detaljer.

Är ett Presentation‑objekt trådsäkert?

Nej. En enskild [Presentation]‑instans bör laddas, modifieras, sparas och disponeras i en arbetare. För parallellt arbete, skapa en oberoende instans per arbetare eller process.

Varför är den genererade HTML‑filen stor?

Den förvalda exporten kan bädda in resurser direkt i HTML. Inbäddade teckensnitt, hög‑DPI‑bilder, media, SVG‑innehåll och behållna beskurna bildområden ökar också storleken. Använd externa resurser, uteslut vanliga teckensnitt från inbäddning och sänk PicturesCompression när en mindre utdata är viktigare än maximal återgivning.

Varför visas en PowerPoint‑teckensnittsstorlek som 24 pt som 17.999819 pt i HTML?

Detta kan inträffa eftersom PowerPoint och HTML använder olika DPI‑modeller. PowerPoint lagrar textstorlekar i typografiska punkter baserade på 72 DPI, medan HTML‑layout är baserad på CSS‑pixlar i en 96 DPI‑modell. När Aspose.Slides exporterar en presentation till HTML, översätts teckensnittsstorleken mellan dessa system, och konverteringen kan introducera små avrundningsskillnader.

Dessa värden indikerar inte en faktisk visuell förändring av teckensnittsstorleken. De är bara en matematisk bieffekt av att konvertera textmått mellan PowerPoint och HTML.

Hur ska jag välja baseUri för mediaexport?

Välj baseUri ur webbläsarens perspektiv och skicka den som en absolut URI. För lokal förhandsgranskning kan du härleda den från utmatningskatalogen med en file:///‑URI. För distribution, använd den absoluta URL‑en till den publicerade media‑katalogen. Fil‑systemets path och webbläsarens baseUri behöver inte vara samma sträng, men de måste beskriva samma resursplats.

Kan jag inkludera dolda bilder?

Ja. Sätt ShowHiddenSlides till true på [HtmlOptions] när dolda bilder måste exporteras.

Konvertera PPTX till PPT i JavaScript Konvertera PPT och PPTX till PDF i JavaScript [Avancerade funktioner inkluderade]