在 Android 上將 PowerPoint 簡報轉換為 HTML

概覽

Aspose.Slides for Android via Java 可以在不使用 Microsoft PowerPoint 的情況下將 PowerPoint 簡報儲存為 HTML。基本的轉換只需要載入單一的 Presentation，然後使用 save 呼叫搭配 SaveFormat。當您需要控制匯出布局、字型、圖像、備註、評論、SVG 輸出或連結資源時，請使用 HtmlOptions。

本指南專注於實用的 HTML 匯出情境：

• 匯出整個簡報或選取的投影片。
• 產生固定布局、回應式或基於 SVG 的 HTML。
• 包含講者備註與評論。
• 控制圖像品質與裁切圖像資料。
• 嵌入字型或將字型檔案分別儲存。
• 選擇外部資源與媒體檔案的寫入與參照方式。

預設情況下，HTML 匯出會產生一個自包含的 HTML 文件，將大多數資源嵌入其中。這對於分享單一檔案很方便，但會增加輸出檔案大小。若要進行網站發佈，請考慮使用外部資源、降低圖像 DPI，僅嵌入目標環境中不可靠取得的字型。

將簡報轉換為 HTML

若要將簡報匯出為 HTML，請使用 Presentation 載入，並以 SaveFormat.Html 儲存。

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

此範例寫入單一 HTML 檔案。finally 區塊會釋放 Presentation 物件，以關閉檔案句柄與渲染資源。

使用 HtmlOptions

HtmlOptions 是 HTML 匯出的主要設定類別。常用設定包括：

• SlidesLayoutOptions：加入備註、評論、講義或其他布局資訊。
• HtmlFormatter：變更 HTML 文件結構或將格式化委派給控制器。
• SlideImageFormat：變更投影片的呈現方式，例如以 SVG 形式。
• PicturesCompression：控制圖像 DPI 與輸出大小。
• DeletePicturesCroppedAreas：保留或移除裁切圖像資料。
• SvgResponsiveLayout：使匯出的 SVG 內容自適應其容器。
• ShowHiddenSlides：在需要時包含隱藏投影片。

以下各節分別說明最常用的選項，您可根據工作流程僅組合需要的部分。

將選取的投影片轉換為 HTML

接受投影片編號的 Presentation.save 多載使用 1 為基礎的投影片位置。以下迴圈會將每張投影片儲存為單獨的 HTML 檔案。

Presentation presentation = new Presentation("presentation.pptx");
try {
    int slideCount = presentation.getSlides().size();

    for (int slideIndex = 0; slideIndex < slideCount; slideIndex++) {
        int slideNumber = slideIndex + 1;
        int[] slideNumbers = { slideNumber };
        String htmlFileName = "slide-" + slideNumber + ".html";

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

當網站或應用程式需要每張投影片一個 HTML 頁面時，請使用此模式。若每張投影片的布局相同，請建立單一的 HtmlOptions 實例，並在每次 save 呼叫時傳入。

建立回應式 HTML

ResponsiveHtmlController 透過 HtmlFormatter 提供回應式 HTML 輸出。當匯出的頁面需要更好地適應瀏覽器寬度時，請使用它。

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

    HtmlOptions htmlOptions = new HtmlOptions();
    htmlOptions.setHtmlFormatter(formatter);

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

若要使用基於 SVG 的回應式布局，請在 HtmlOptions 上設定 SvgResponsiveLayout。當投影片內容以可縮放的 SVG 標記匯出時，這非常有用。

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

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

包含講者備註與評論

透過 HtmlOptions.SlidesLayoutOptions 使用 NotesCommentsLayoutingOptions 以包含講者備註或評論。備註與評論預設為隱藏，除非您指定其位置。

假設來源簡報包含講者備註：

以下程式碼會將投影片內容與投影片下方的講者備註一起匯出。

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

    HtmlOptions htmlOptions = new HtmlOptions();
    htmlOptions.setSlidesLayoutOptions(layoutOptions);

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

匯出的 HTML 會包含備註區域：

若要匯出評論，請設定 CommentsPosition，例如 CommentsPositions.Right 或 CommentsPositions.Bottom。僅需要評論時可省略 NotesPosition；若同時需要備註與評論，則同時設定兩個屬性。

控制圖像品質與裁切區域

HTML 匯出可以壓縮投影片圖像以減少輸出大小。當您需要較高圖像品質時，請將 PicturesCompression 設為 PicturesCompression 中的相應值。

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

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

預設情況下，圖像的裁切區域可能會從匯出結果中移除。僅在使用者必須能恢復或檢視這些隱藏圖像部分時才保留裁切資料。保留會增加 HTML 大小。

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

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

新增 CSS

若只需簡單樣式，將 CSS 字串傳給 HtmlFormatter.createDocumentFormatter。這會改變外圍的 HTML 文件，同時 Aspose.Slides 繼續渲染投影片內容。

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

    HtmlOptions htmlOptions = new HtmlOptions();
    htmlOptions.setHtmlFormatter(formatter);

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

若需自訂文件標頭、連結的 CSS 檔案，或在投影片與圖形周圍加入自訂標記，請實作 IHtmlFormattingController 並以 createCustomFormatter 方式傳給 HtmlFormatter。

嵌入字型

如果目標環境可能未安裝簡報使用的字型，請使用 EmbedAllFontsHtmlController 在 HTML 中嵌入字型。嵌入可提升視覺忠實度，但會增加輸出大小。

Presentation presentation = new Presentation("presentation.pptx");
try {
    String[] fontNamesToExclude = { "Arial", "Calibri" };
    EmbedAllFontsHtmlController fontController = new EmbedAllFontsHtmlController(fontNamesToExclude);
    HtmlFormatter formatter = HtmlFormatter.createCustomFormatter(fontController);

    HtmlOptions htmlOptions = new HtmlOptions();
    htmlOptions.setHtmlFormatter(formatter);

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

僅在確信目標瀏覽器或系統已提供相同字型時才排除嵌入。對於品牌字型或較不常見的字型，嵌入通常較安全。

連結字型檔而非嵌入

為降低 HTML 檔案大小，您可以將字型資料寫入獨立的 WOFF 檔案，並在 HTML 中加入 @font-face 規則。以下輔助類別繼承自 EmbedAllFontsHtmlController 並覆寫 writeFont。

class LinkedFontsHtmlController extends EmbedAllFontsHtmlController {
    private final String fontOutputDirectory;
    private final String fontUrlPrefix;

    LinkedFontsHtmlController(
            String fontOutputDirectory,
            String fontUrlPrefix) throws java.io.IOException {
        super(new String[0]);
        this.fontOutputDirectory = fontOutputDirectory;
        this.fontUrlPrefix = fontUrlPrefix.endsWith("/") ? fontUrlPrefix : fontUrlPrefix + "/";
        
        File dirs = new File(fontOutputDirectory);
        dirs.mkdirs();
    }

    @Override
    public void writeFont(
            IHtmlGenerator generator,
            IFontData originalFont,
            IFontData substitutedFont,
            String fontStyle,
            String fontWeight,
            byte[] fontData) {
        try {
            IFontData font = substitutedFont == null ? originalFont : substitutedFont;
            String safeFontName = makeSafeFileName(font.getFontName());
            String safeFontStyle = fontStyle == null || fontStyle.trim().isEmpty() ? "normal" : fontStyle;
            String safeFontWeight = fontWeight == null || fontWeight.trim().isEmpty() ? "normal" : fontWeight;
            String fontFileName = safeFontName + "-" + safeFontStyle + "-" + safeFontWeight + ".woff";
            String fontFilePath = fontOutputDirectory + "/" + fontFileName;

            FileOutputStream fos = new FileOutputStream(fontFilePath);
            fos.write(fontData);
            fos.close();

            String encodedFontFileName = java.net.URLEncoder.encode(fontFileName, "UTF-8");
            String fontUrl = fontUrlPrefix + encodedFontFileName.replace("+", "%20");
            String escapedBackslashes = font.getFontName().replace("\\", "\\\\");
            String fontFamily = escapedBackslashes.replace("'", "\\'");

            generator.addHtml("<style>");
            generator.addHtml("@font-face {");
            generator.addHtml("font-family: '" + fontFamily + "';");
            generator.addHtml("font-style: " + safeFontStyle + ";");
            generator.addHtml("font-weight: " + safeFontWeight + ";");
            generator.addHtml("src: url('" + fontUrl + "') format('woff');");
            generator.addHtml("}");
            generator.addHtml("</style>");
        } catch (java.io.IOException exception) {
            throw new RuntimeException("Unable to write an exported font.", exception);
        }
    }

    private String makeSafeFileName(String fileName) {
        String invalidCharacters = "\\/:*?\"<>|";
        char[] safeCharacters = fileName.toCharArray();

        for (int characterIndex = 0; characterIndex < safeCharacters.length; characterIndex++) {
            if (invalidCharacters.indexOf(safeCharacters[characterIndex]) >= 0) {
                safeCharacters[characterIndex] = '_';
            }
        }

        return new String(safeCharacters);
    }
}

String outputDirectory = System.getProperty("user.dir") + "/html-output";
String fontsDirectory = outputDirectory + "/fonts";
File dir = new File("path/to/folder");
dir.mkdir();

Presentation presentation = new Presentation("presentation.pptx");
try {
    LinkedFontsHtmlController fontController = new LinkedFontsHtmlController(fontsDirectory, "fonts");
    HtmlFormatter formatter = HtmlFormatter.createCustomFormatter(fontController);

    HtmlOptions htmlOptions = new HtmlOptions();
    htmlOptions.setHtmlFormatter(formatter);

    String htmlFilePath = outputDirectory + "/presentation.html";
    presentation.save(htmlFilePath.toString(), SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

在此範例中，字型檔案會儲存至 html-output/fonts，HTML 會以 fonts/BrandFont-normal-400.woff 等 URL 參照它們。若 HTML 檔案與字型檔部署至其他位置，請設定 fontUrlPrefix 使其匹配部署後的 URL 路徑。

將資源外部儲存

自包含的 HTML 易於搬移，但內嵌的 Base64 資源會使檔案變大。若您的應用程式需要外部圖像檔案，請實作 ILinkEmbedController 並於建構子傳入 HtmlOptions。

外部化資源時，請有意識地選擇兩條路徑：

• 檔案系統輸出路徑：您的應用程式寫入產生的圖像、字型、音訊或視訊的目錄。
• URL 路徑：瀏覽器從 HTML 文件載入這些檔案時使用的路徑。

匯出媒體檔案

VideoPlayerHtmlController 會匯出影片與音訊檔案，並產生可在瀏覽器播放的 HTML。其建構子接受：

• path：產生的媒體檔案寫入的目錄。
• fileName：正在產生的 HTML 檔案名稱。
• baseUri：HTML 中指向媒體檔案的絕對 URI 前綴。

如果 HTML 檔案位於 html-output/presentation.html，而媒體檔案儲存在 html-output/media，則 path 應指向磁碟上的 media 目錄，baseUri 應指向瀏覽器端相同目錄的 URL。本機預覽時，可從 media 目錄建立 file:/// URI；部署時則使用已發佈媒體目錄的絕對 URL。

String outputDirectory = System.getProperty("user.dir") + "/html-output";
String mediaDirectory = outputDirectory + "/media";
File outDir = new File(outputDirectory);
outDir.mkdir();
File mediaDir = new File(mediaDirectory);
mediaDir.mkdir();

String htmlFileName = "presentation.html";
String mediaBaseUri = mediaDirectory;

Presentation presentation = new Presentation();
try {
    byte[] videoData = ...;// intro.mp4

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

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

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

    String htmlFilePath = outputDirectory + "/" + htmlFileName;
    presentation.save(htmlFilePath.toString(), SaveFormat.Html, htmlOptions);
} finally {
    presentation.dispose();
}

請為每次匯出作業使用唯一的輸出目錄，特別是在伺服器應用程式中。共享的輸出路徑會導致不同轉換產生的檔案相互覆寫。

效能與資源管理

HTML 轉換屬於渲染操作，處理時間與記憶體使用量取決於投影片數量、圖像解析度、字型、特效、圖表與內嵌媒體。較高的 PicturesCompression DPI 值、嵌入字型、SVG 輸出與保留裁切圖像區域會提升相似度，但通常會增加輸出大小。

批次轉換時的建議：

• 盡快釋放每個 Presentation 實例。
• 為不同作業使用獨立的輸出目錄。
• 除非相似度要求極高，否則避免嵌入常見字型。
• 當 HTML 用於預覽或縮圖時降低圖像 DPI。
• 在部署路徑最終確定前，保留原始簡報、產生的 HTML 與外部資源在一起。

常見問題

HTML 輸出中會保留超連結嗎？

會。簡報中的超連結會匯出為 HTML，且在目標 URL 有效時仍可點擊。

我可以平行轉換簡報為 HTML 嗎？

可以，但請勿在多執行緒間共享同一個 Presentation 實例。對不同檔案使用獨立的簡報實例、獨立的串流與獨立的輸出目錄。詳情請參閱 multithreading guidance。

Presentation 物件是執行緒安全的嗎？

不是。單一的 Presentation 實例應在同一執行緒上載入、修改、儲存並釋放。若需要平行作業，請為每個執行緒或程序建立獨立的實例。

為何產生的 HTML 檔案很大？

預設匯出會直接將資源嵌入 HTML。嵌入的字型、高 DPI 圖像、媒體、SVG 內容以及保留的裁切圖像區域都會增加檔案大小。使用外部資源、排除常見字型的嵌入，並在對相似度要求不高時降低 PicturesCompression，即可縮小輸出。

為何 PowerPoint 中的 24 pt 字型在 HTML 中顯示為 17.999819 pt？

這是因為 PowerPoint 與 HTML 使用了不同的 DPI 模型。PowerPoint 依據 72 DPI 的排版點存儲字型大小，而 HTML 版面則基於 96 DPI 的 CSS 像素。Aspose.Slides 在匯出簡報為 HTML 時，需要在這兩套系統之間進行換算，換算過程可能會產生細微的捨入差異。

這些數值並不代表實際可見的字型大小變化，僅是 PowerPoint 與 HTML 文字度量換算的數學副作用。

應如何為媒體匯出選擇 baseUri？

請從瀏覽器的觀點選擇 baseUri，並以絕對 URI 形式傳入。本機預覽時，可從輸出目錄使用 mediaDirectory.toUri().toString() 取得；部署時則使用已發佈媒體目錄的絕對 URL。檔案系統的 path 與瀏覽器的 baseUri 不必相同字串，但必須指向同一資源位置。

我可以包含隱藏投影片嗎？

可以。當必須匯出隱藏投影片時，請於 HtmlOptions 上將 ShowHiddenSlides 設為 true。