Vytvořte prohlížeč prezentací v JavaScriptu

Úvod

Aspose.Slides pro Node.js přes Java se používá k vytváření souborů prezentací se snímky. Tyto snímky lze zobrazit otevřením prezentací v Microsoft PowerPointu, například. Někdy však vývojáři potřebují zobrazit snímky jako obrázky ve svém preferovaném prohlížeči obrázků nebo vytvořit vlastní prohlížeč prezentací. V takových případech Aspose.Slides umožňuje exportovat individuální snímek jako obrázek. Tento článek popisuje, jak to provést.

Vytvoření SVG obrázku ze snímku

1. Vytvořte instanci třídy Presentation.
2. Získejte referenci na snímek podle jeho indexu.
3. Otevřete souborový tok.
4. Uložte snímek jako SVG obrázek do souborového toku.

var slideIndex = 0;

var presentation = new aspose.slides.Presentation("sample.pptx");
var slide = presentation.getSlides().get_Item(slideIndex);

var svgStream = java.newInstanceSync("java.io.FileOutputStream", "output.svg");
slide.writeAsSvg(svgStream);
svgStream.close();

presentation.dispose();

Vytvoření SVG s vlastním ID tvaru

Aspose.Slides lze použít k vygenerování SVG ze snímku s vlastním ID tvaru. K tomu použijte metodu setId z SvgShape. CustomSvgShapeFormattingController lze použít k nastavení ID tvaru.

var slideIndex = 0;

var presentation = new aspose.slides.Presentation("sample.pptx");
var slide = presentation.getSlides().get_Item(slideIndex);

var svgOptions = new aspose.slides.SVGOptions();
svgOptions.setShapeFormattingController(new CustomSvgShapeFormattingController(0));

var svgStream = java.newInstanceSync("java.io.FileOutputStream", "output.svg");
slide.writeAsSvg(svgStream, svgOptions);
svgStream.close();

presentation.dispose();

class CustomSvgShapeFormattingController {
    constructor(shapeStartIndex = 0) {
        this.m_shapeIndex = shapeStartIndex;
    }

    formatShape(svgShape, shape) {
        svgShape.setId(`shape-${this.m_shapeIndex++}`);
    }
}

Vytvoření miniatury snímku

Aspose.Slides vám pomáhá generovat miniatury snímků. Pro vytvoření miniatury snímku pomocí Aspose.Slides postupujte podle následujících kroků:

1. Vytvořte instanci třídy Presentation.
2. Získejte referenci na snímek podle jeho indexu.
3. Získejte miniaturu obrázku referencovaného snímku v definovaném měřítku.
4. Uložte miniaturu obrázku v libovolném požadovaném formátu.

const slideIndex = 0;
const scaleX = 1;
const scaleY = scaleX;

var presentation = new aspose.slides.Presentation("sample.pptx");
var slide = presentation.getSlides().get_Item(slideIndex);

var image = slide.getImage(scaleX, scaleY);
image.save("output.jpg", aspose.slides.ImageFormat.Jpeg);
image.dispose();

presentation.dispose();

Vytvoření miniatury snímku s uživatelem definovanými rozměry

Pro vytvoření miniatury snímku s uživatelem definovanými rozměry postupujte podle následujících kroků:

1. Vytvořte instanci třídy Presentation.
2. Získejte referenci na snímek podle jeho indexu.
3. Získejte miniaturu obrázku referencovaného snímku s definovanými rozměry.
4. Uložte miniaturu obrázku v libovolném požadovaném formátu.

var slideIndex = 0;
var slideSize = java.newInstanceSync("java.awt.Dimension", 1200, 800);

var presentation = new aspose.slides.Presentation("sample.pptx");
var slide = presentation.getSlides().get_Item(slideIndex);

var image = slide.getImage(slideSize);
image.save("output.jpg", aspose.slides.ImageFormat.Jpeg);
image.dispose();

presentation.dispose();

Vytvoření miniatury snímku s poznámkami přednášejícího

Pro vytvoření miniatury snímku s poznámkami přednášejícího pomocí Aspose.Slides postupujte podle následujících kroků:

1. Vytvořte instanci třídy RenderingOptions.
2. Použijte metodu RenderingOptions.setSlidesLayoutOptions k nastavení polohy poznámek přednášejícího.
3. Vytvořte instanci třídy Presentation.
4. Získejte referenci na snímek podle jeho indexu.
5. Získejte miniaturu obrázku referencovaného snímku s renderovacími možnostmi.
6. Uložte miniaturu obrázku v libovolném požadovaném formátu.

var slideIndex = 0;

var layoutingOptions = new aspose.slides.NotesCommentsLayoutingOptions();
layoutingOptions.setNotesPosition(aspose.slides.NotesPositions.BottomTruncated);

var renderingOptions = new aspose.slides.RenderingOptions();
renderingOptions.setSlidesLayoutOptions(layoutingOptions);

var presentation = new aspose.slides.Presentation("sample.pptx");
var slide = presentation.getSlides().get_Item(slideIndex);

var image = slide.getImage(renderingOptions);
image.save("output.png", aspose.slides.ImageFormat.Png);
image.dispose();

presentation.dispose();

Živý příklad

Můžete vyzkoušet bezplatnou aplikaci Aspose.Slides Viewer, abyste viděli, co můžete implementovat pomocí Aspose.Slides API:

Často kladené otázky

Mohu vložit prohlížeč prezentací do webové aplikace Node.js?

Ano. Můžete použít Aspose.Slides na straně serveru k vykreslení snímků jako obrázky nebo HTML a zobrazit je v prohlížeči. Navigační a zoom funkce lze implementovat pomocí JavaScriptu pro interaktivní zážitek.

Jaký je nejlepší způsob, jak zobrazit snímky v rámci vlastního prohlížeče?

Doporučený postup je vykreslit každý snímek jako obrázek (např. PNG nebo SVG) nebo jej převést na HTML pomocí Aspose.Slides a pak zobrazit výstup v picture boxu (pro desktop) nebo v HTML kontejneru (pro web).

Jak zvládnu velké prezentace s mnoha snímky?

U velkých prezentací zvažte lazy-loading nebo renderování snímků na vyžádání. To znamená generovat obsah snímku pouze v okamžiku, kdy se uživatel na něj přepne, čímž se snižuje spotřeba paměti a čas načítání.