Buat Penampil Presentasi dalam JavaScript

Introduction

Aspose.Slides for Node.js via Java digunakan untuk membuat file presentasi dengan slide. Slide ini dapat dilihat dengan membuka presentasi di Microsoft PowerPoint, misalnya. Namun, terkadang pengembang perlu melihat slide sebagai gambar di penampil gambar pilihan mereka atau membuat penampil presentasi mereka sendiri. Dalam kasus seperti itu, Aspose.Slides memungkinkan Anda mengekspor slide individu sebagai gambar. Artikel ini menjelaskan cara melakukannya.

Generate an SVG Image from a Slide

Untuk menghasilkan gambar SVG dari slide presentasi dengan Aspose.Slides, ikuti langkah-langkah berikut:

1. Buat sebuah instance dari kelas Presentation .
2. Dapatkan referensi slide berdasarkan indeksnya.
3. Buka aliran file.
4. Simpan slide sebagai gambar SVG ke aliran file.

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

Generate an SVG with a Custom Shape ID

Aspose.Slides dapat digunakan untuk menghasilkan sebuah SVG dari slide dengan ID bentuk kustom. Untuk melakukannya, gunakan metode setId dari SvgShape. CustomSvgShapeFormattingController dapat digunakan untuk mengatur ID bentuk.

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++}`);
    }
}

Create a Slide Thumbnail Image

Aspose.Slides membantu Anda menghasilkan gambar thumbnail slide. Untuk menghasilkan thumbnail slide dengan Aspose.Slides, ikuti langkah-langkah berikut:

1. Buat sebuah instance dari kelas Presentation .
2. Dapatkan referensi slide berdasarkan indeksnya.
3. Dapatkan gambar thumbnail slide yang direferensikan dengan skala tertentu.
4. Simpan gambar thumbnail dalam format gambar apa pun yang diinginkan.

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

Create a Slide Thumbnail with User Defined Dimensions

Untuk membuat gambar thumbnail slide dengan dimensi yang ditentukan pengguna, ikuti langkah-langkah berikut:

1. Buat sebuah instance dari kelas Presentation .
2. Dapatkan referensi slide berdasarkan indeksnya.
3. Dapatkan gambar thumbnail slide yang direferensikan dengan dimensi yang ditentukan.
4. Simpan gambar thumbnail dalam format gambar apa pun yang diinginkan.

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

Create a Slide Thumbnail with Speaker Notes

Untuk menghasilkan thumbnail slide dengan catatan pembicara menggunakan Aspose.Slides, ikuti langkah-langkah berikut:

1. Buat sebuah instance dari kelas RenderingOptions .
2. Gunakan metode RenderingOptions.setSlidesLayoutOptions untuk mengatur posisi catatan pembicara.
3. Buat sebuah instance dari kelas Presentation .
4. Dapatkan referensi slide berdasarkan indeksnya.
5. Dapatkan gambar thumbnail slide yang direferensikan dengan opsi rendering.
6. Simpan gambar thumbnail dalam format gambar apa pun yang diinginkan.

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

Live Example

Anda dapat mencoba aplikasi gratis Aspose.Slides Viewer untuk melihat apa yang dapat Anda implementasikan dengan API Aspose.Slides:

FAQ

Apakah saya dapat menyematkan penampil presentasi dalam aplikasi web Node.js?

Ya. Anda dapat menggunakan Aspose.Slides di sisi server untuk merender slide sebagai gambar atau HTML dan menampilkannya di browser. Fitur navigasi dan zoom dapat diimplementasikan dengan JavaScript untuk pengalaman interaktif.

Apa cara terbaik menampilkan slide di dalam penampil kustom?

Pendekatan yang disarankan adalah merender setiap slide sebagai gambar (misalnya PNG atau SVG) atau mengonversinya ke HTML menggunakan Aspose.Slides, kemudian menampilkan output di dalam picture box (untuk desktop) atau kontainer HTML (untuk web).

Bagaimana cara menangani presentasi besar dengan banyak slide?

Untuk dek besar, pertimbangkan lazy-loading atau rendering slide berdasarkan permintaan. Ini berarti menghasilkan konten slide hanya saat pengguna menavigasinya, mengurangi penggunaan memori dan waktu pemuatan.