PowerPoint prezentációk konvertálása HTML-re Node.js-ben

Áttekintés

Az Aspose.Slides for Node.js via Java képes PowerPoint‑prezentációkat HTML‑ként menteni a Microsoft PowerPoint nélkül. Az alapvető konverzió egyetlen Presentation betöltése és egy save hívás a SaveFormat segítségével. Használja a HtmlOptions osztályt, ha szabályozni szeretné az exportált elrendezést, betűtípusokat, képeket, jegyzeteket, megjegyzéseket, SVG kimenetet vagy a hivatkozott erőforrásokat.

Ez az útmutató gyakorlati HTML‑export szcenáriókra fókuszál:

• Teljes prezentáció vagy kiválasztott diák exportálása.
• Fix‑elrendezésű, responszív vagy SVG‑alapú HTML generálása.
• Előadói jegyzetek és megjegyzések belefoglalása.
• Képek minőségének és a levágott képadatok szabályozása.
• Betűtípusok beágyazása vagy betűtípus‑fájlok külön mentése.
• Az externális erőforrások és médiafájlok írási és hivatkozási módjának kiválasztása.

Alapértelmezés szerint az HTML export egy önálló HTML‑dokumentumot hoz létre, ahol a legtöbb erőforrás be van ágyazva. Ez kényelmes egyetlen fájl megosztásához, de növelheti a kimenet méretét. Webes közzététel esetén vegye fontolóra az externális erőforrásokat, alacsonyabb DPI‑t képekhez, és csak azoknak a betűtípusoknak a beágyazását, amelyek nem biztosan állnak rendelkezésre a célkörnyezetben.

Prezentáció konvertálása HTML‑re

Egy prezentáció HTML‑re exportálásához töltse be a Presentation osztállyal, majd mentse a SaveFormat.Html használatával.

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

Ez a példakód egy HTML fájlt ír. A prezentáció objektum a finally blokkban kerül felszabadításra, amely a fájlkezelőket és renderelési erőforrásokat az export után felszabadítja.

HtmlOptions használata

A HtmlOptions a fő konfigurációs osztály az HTML exporthoz. Gyakori beállítások:

• SlidesLayoutOptions: jegyzetek, megjegyzések, füzetek vagy egyéb elrendezési információk hozzáadása.
• HtmlFormatter: az HTML dokumentum struktúrájának módosítása vagy a formázás delegálása egy vezérlőnek.
• SlideImageFormat: a diák ábrázolásának módosítása, például SVG‑ként.
• PicturesCompression: képek DPI‑jának és kimeneti méretének szabályozása.
• DeletePicturesCroppedAreas: a levágott képadatok megtartása vagy eltávolítása.
• SvgResponsiveLayout: az exportált SVG tartalom alkalmazkodik a tárolóhoz.
• ShowHiddenSlides: rejtett diák belefoglalása, ha szükséges.

Az alábbi szakaszok a leggyakoribb beállításokat mutatják külön-külön, hogy csak a munkafolyamatához szükséges opciókat kombinálhassa.

Kiválasztott diák konvertálása HTML‑re

A Presentation.save túlterhelés, amely diák számát fogadja, 1‑től induló diaközök szerint működik. Az alábbi ciklus minden diát külön HTML fájlba ment.

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

Ezt a mintát használja, ha egy weboldal vagy alkalmazás minden diához egy HTML oldalt igényel. Ha minden diának ugyanaz az elrendezése, hozza létre egy HtmlOptions példányt, és adja át minden save hívásnak.

Responszív HTML létrehozása

A ResponsiveHtmlController responszív HTML kimenetet biztosít a HtmlFormatter segítségével. Használja, ha az exportált oldal jobban kell, hogy alkalmazkodjon a böngésző szélességéhez.

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

SVG‑alapú responszív elrendezéshez állítsa be a SvgResponsiveLayout értéket a HtmlOptions objektumban. Ez akkor hasznos, amikor a diák tartalma skálázható SVG‑ként kerül exportálásra.

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

Előadói jegyzetek és megjegyzések belefoglalása

Használja a NotesCommentsLayoutingOptions osztályt a HtmlOptions.setSlidesLayoutOptions metóduson keresztül, hogy előadói jegyzeteket vagy megjegyzéseket vegyen fel. A jegyzetek és megjegyzések alapértelmezésben rejtve vannak, hacsak nem adja meg azok pozícióját.

Tegyük fel, hogy a forrás‑prezentáció tartalmaz előadói jegyzeteket:

Az alábbi kód a diát a jegyzetekkel együtt, a dia alatti részben exportálja.

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

Az exportált HTML tartalmazza a jegyzetterületet:

Megjegyzések exportálásához állítsa be a CommentsPosition értékét, például CommentsPositions.Right vagy CommentsPositions.Bottom. Ha csak megjegyzéseket szeretne, hagyja el a NotesPosition beállítást. Ha mindkettőt akarja, állítsa be mindkét tulajdonságot.

Képek minőségének és levágott területek szabályozása

Az HTML export képes összenyomni a diákképeket a kimeneti méret csökkentése érdekében. Állítsa be a PicturesCompression értékét a PicturesCompression enumerációból, ha magasabb képminőségre van szüksége.

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

Alapértelmezésben a képek levágott területei eltávolításra kerülhetnek az exportált kimenetből. Tartsa meg a levágott adatokat csak akkor, ha a felhasználóknak képesnek kell lenniük visszaállítani vagy megvizsgálni ezeket a rejtett kép részeket. A megtartás növelheti a HTML méretét.

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

CSS hozzáadása

Egyszerű stílusoláshoz adjon át egy CSS karakterláncot a HtmlFormatter.createDocumentFormatter metódusnak. Ez módosítja a környező HTML dokumentumot, miközben az Aspose.Slides továbbra is a dia tartalmát rendereli.

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

Egy egyedi dokumentumfejléc, egy hivatkozott CSS fájl vagy egyedi markup a diák és alakzatok körül a HtmlFormatter használatával, egy formázó vezérlővel valósítható meg.

Betűtípusok beágyazása

Ha a célkörnyezetben nem biztos, hogy a prezentáció betűtípusai telepítve vannak, ágyazza be a betűtípusokat a HTML‑be a EmbedAllFontsHtmlController segítségével. A beágyazás javítja a vizuális hűséget, de növeli a kimenet méretét.

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

Csak akkor hagyja ki a betűtípusokat, ha biztos abban, hogy a célböngészők vagy rendszerek már rendelkeznek velük. Márkabetűtípusok vagy kevésbé elterjedt betűtípusok esetén a beágyazás általában biztonságosabb.

Betűtípus‑fájlok hivatkozása beágyazás helyett

A HTML fájlméret csökkentése érdekében a betűtípus‑adatokat külön WOFF fájlokba írhatja, és @font-face szabályokat adhat a HTML‑hez. Node.js via Java esetén ezt a szcenáriót általában egy kis Java segédosztállyal valósítják meg, amely kiterjeszti a EmbedAllFontsHtmlController osztályt, a betűtípus‑bájtokat egy kimeneti könyvtárba írja, és @font-face szabályokat injektál a generált HTML‑be. Fordítsa le a segédosztályt, adja hozzá a Node.js modul osztályútvonalához, majd példányosítsa JavaScriptből a java.newInstanceSync segítségével.

Segédosztály építésekor szándékosan válasszon ki két útvonalat:

• A fájlrendszer kimeneti útvonala, ahol a generált betűtípus‑fájlok kerülnek mentésre.
• Az URL‑útvonal, amelyet a böngésző a HTML dokumentumból használ a betűtípus‑fájlok betöltéséhez.

Erőforrások külső mentése

Az önálló HTML könnyen mozgatható, de a beágyazott Base64 erőforrások nagyra növelhetik a fájlt. Ha az alkalmazásnak külső képek, betűtípusok, hang‑ vagy videofájlok szükségesek, használjon egy export‑vezérlőt, amely az erőforrásokat egy kiválasztott könyvtárba írja, és a böngésző által látható URL‑eket adja ki. Tartsa a fájlrendszer‑útvonalat és az URL‑útvonalat összhangban a telepítési struktúrával.

Médiafájlok exportálása

A VideoPlayerHtmlController videó‑ és hangfájlokat exportál, és olyan HTML‑t generál, amely a böngészőben le tudja játszani őket. Konstruktorja a következő paramétereket várja:

• path: a könyvtár, ahova a generált médiafájlok kerülnek mentésre.
• fileName: a generálandó HTML fájl neve.
• baseUri: az abszolút URI előtag, amely a HTML hivatkozásokban a médiafájlokra mutat.

Ha a HTML fájl html-output/presentation.html, a médiafájlok pedig a html-output/media könyvtárban vannak, a path‑nek a lemezen lévő média könyvtárra, a baseUri‑nek pedig a böngésző nézőpontjából ugyanarra a könyvtárra kell mutatnia. Helyi előnézethez építhet file:/// URI‑t a média könyvtárból. Telepített alkalmazáshoz használja a publikált média könyvtár abszolút URL‑jét.

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

Használjon olyan kimeneti könyvtárakat, amelyek egyértelműen egy export feladathoz tartoznak, különösen szerveralkalmazásoknál. Közös kimeneti útvonalak esetén a különböző konverziók fájljai felülírhatják egymást.

Teljesítmény és erőforrás‑kezelés

Az HTML konverzió egy renderelési művelet, ezért a feldolgozási idő és memóriahasználat a diákszám, a képek felbontása, a betűtípusok, effektusok, diagramok és beágyazott média függvénye. Magasabb PicturesCompression DPI értékek, beágyazott betűtípusok, SVG kimenet és a megtartott levágott képadatok javíthatják a hűséget, de jellemzően növelik a kimenet méretét.

Kötegelt konverzió esetén:

• Szabadítsa fel gyorsan minden Presentation példányt.
• Használjon külön kimeneti könyvtárakat a külön feladatokhoz.
• Kerülje a gyakran használt betűtípusok beágyazását, hacsak a hűség megköveteli.
• Alacsonyabb DPI‑t állítson be, ha a HTML előnézethez vagy bélyegképekhez készült.
• Tartsa együtt a forrás‑prezentációt, a generált HTML‑t és az externális erőforrásokat, amíg a telepítési útvonalak véglegesek.

GYIK

Megmaradnak a hiperhivatkozások a HTML‑kimenetben?

Igen. A prezentáció hiperhivatkozásai exportálásra kerülnek HTML‑be, és kattinthatóak maradnak, amíg a cél‑URL érvényes.

Konvertálhatok prezentációkat HTML‑re párhuzamosan?

Igen, de ne osszon meg egy Presentation példányt a munkavégzők között. Külön fájlokat dolgozzon fel külön prezentáció‑példányokkal, külön adatfolyamokkal és külön kimeneti könyvtárakkal. Lásd a multithreading guidance részleteket.

A Presentation objektum szálbiztos?

Nem. Egyetlen Presentation példányt csak egy munkavégzőn belül szabad betölteni, módosítani, menteni és felszabadítani. Párhuzamos munkához hozzon létre független példányt minden munkavégző vagy folyamat számára.

Miért nagy a generált HTML fájl?

Az alapértelmezett export beágyazhat erőforrásokat közvetlenül a HTML‑be. A beágyazott betűtípusok, magas DPI‑jú képek, média, SVG tartalom és a megtartott levágott képadatok is növelik a méretet. Használjon externális erőforrásokat, hagyja ki a gyakori betűtípusok beágyazását, és csökkentse a PicturesCompression értékét, ha a kisebb kimenet fontosabb a maximális hűségnél.

Miért jelenik meg egy PowerPoint‑betűméret, például 24 pt, HTML‑ben 17,999819 pt‑ként?

Ez azért fordulhat elő, mert a PowerPoint és a HTML külön DPI‑modelleket használ. A PowerPoint a szövegméreteket tipográfiai pontban (72 DPI) tárolja, míg a HTML elrendezés CSS‑pixelen (96 DPI) alapul. Amikor az Aspose.Slides egy prezentációt HTML‑re exportál, a betűméret átalakul ezek között a rendszerek között, és a konverzió kis kerekítési eltéréseket okozhat.

Ezek az értékek nem jeleznek valódi vizuális betűméret‑változást. Csak a szövegmetrikák PowerPoint és HTML közötti átalakításának matematikai mellékhatásai.

Hogyan válasszam ki a baseUri‑t a média exporthoz?

Válasszon baseUri‑t a böngésző nézőpontjából, és adja meg abszolút URI‑ként. Helyi előnézethez levezethető az kimeneti könyvtárból egy file:/// URI. Telepítéskor használja a publikált média könyvtár abszolút URL‑jét. A fájlrendszer‑path és a böngésző‑baseUri nem kell, hogy ugyanaz a karakterlánc legyen, de ugyanarra a erőforrás‑helyre kell mutatniuk.

Bele lehet foglalni a rejtett diákot?

Igen. Állítsa a ShowHiddenSlides értékét true‑ra a HtmlOptions esetén, ha a rejtett diák exportálása szükséges.