在 JavaScript 中建立簡報檢視器

簡介

Aspose.Slides for Node.js via Java 用於建立包含投影片的簡報檔案。這些投影片可以透過在 Microsoft PowerPoint 等程式中開啟簡報來檢視。但有時開發人員可能需要在喜好的影像檢視器中將投影片視為圖片，或自行建構簡報檢視器。在此情況下，Aspose.Slides 允許您將單一投影片匯出為圖像。本文說明如何執行此操作。

從投影片產生 SVG 圖像

1. 建立 Presentation 類別的實例。
2. 依索引取得投影片參考。
3. 開啟檔案串流。
4. 將投影片以 SVG 圖像儲存至檔案串流。

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

產生具有自訂形狀 ID 的 SVG

Aspose.Slides 可用於從投影片產生具有自訂形狀 ID 的 SVG。為此，請使用來自 SvgShape 的 setId 方法。CustomSvgShapeFormattingController 可用於設定形狀 ID。

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

建立投影片縮圖圖像

Aspose.Slides 幫助您產生投影片的縮圖圖像。要使用 Aspose.Slides 產生投影片縮圖，請遵循以下步驟：

1. 建立 Presentation 類別的實例。
2. 依索引取得投影片參考。
3. 依設定的比例取得參考投影片的縮圖圖像。
4. 以任何想要的圖像格式儲存縮圖圖像。

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

以使用者自訂尺寸建立投影片縮圖

要以使用者自訂尺寸建立投影片縮圖圖像，請遵循以下步驟：

1. 建立 Presentation 類別的實例。
2. 依索引取得投影片參考。
3. 以自訂尺寸取得參考投影片的縮圖圖像。
4. 以任何想要的圖像格式儲存縮圖圖像。

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

以講者備註建立投影片縮圖

要使用 Aspose.Slides 產生帶有講者備註的投影片縮圖，請遵循以下步驟：

1. 建立 RenderingOptions 類別的實例。
2. 使用 RenderingOptions.setSlidesLayoutOptions 方法設定講者備註的位置。
3. 建立 Presentation 類別的實例。
4. 依索引取得投影片參考。
5. 使用渲染選項取得參考投影片的縮圖圖像。
6. 以任何想要的圖像格式儲存縮圖圖像。

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

即時範例

您可以試用 Aspose.Slides Viewer 免費應用程式，了解可使用 Aspose.Slides API 實作的功能：

常見問題

我可以在 Node.js 網路應用程式中嵌入簡報檢視器嗎？

是的。您可以在伺服器端使用 Aspose.Slides 將投影片渲染為圖像或 HTML，並在瀏覽器中顯示。可透過 JavaScript 實作導覽與縮放功能，以提供互動式體驗。

在自訂檢視器中顯示投影片的最佳方式是什麼？

建議的做法是使用 Aspose.Slides 將每張投影片渲染為圖像（例如 PNG 或 SVG）或轉換為 HTML，然後將產出放入圖片框（桌面版）或 HTML 容器（網頁版）中顯示。

我該如何處理擁有大量投影片的簡報？

對於大型簡報，建議使用延遲載入或按需渲染投影片的方式。也就是說，僅在使用者切換至該投影片時才產生其內容，以降低記憶體使用量與載入時間。