Konversi Presentasi PowerPoint ke HTML di Node.js

Ikhtisar

Aspose.Slides untuk Node.js via Java dapat menyimpan presentasi PowerPoint sebagai HTML tanpa Microsoft PowerPoint. Konversi dasar hanya memuat satu Presentation dan memanggil save dengan SaveFormat. Gunakan HtmlOptions ketika Anda perlu mengontrol tata letak yang diekspor, font, gambar, catatan, komentar, output SVG, atau sumber daya yang ditautkan.

Panduan ini berfokus pada skenario ekspor HTML yang praktis:

Ekspor seluruh presentasi atau slide yang dipilih.
Hasilkan HTML dengan tata letak tetap, responsif, atau berbasis SVG.
Sertakan catatan pembicara dan komentar.
Kendalikan kualitas gambar dan data gambar yang dipotong.
Sematkan font atau simpan berkas font secara terpisah.
Pilih cara sumber daya eksternal dan berkas media ditulis dan direferensikan.

Secara default, ekspor HTML menghasilkan dokumen HTML yang berdiri sendiri dimana sebagian besar sumber daya disematkan. Ini memudahkan berbagi satu berkas, namun dapat meningkatkan ukuran keluaran. Untuk publikasi web, pertimbangkan sumber daya eksternal, DPI gambar yang lebih rendah, dan hanya menyematkan font yang tidak tersedia secara andal di lingkungan target.

Mengonversi Presentasi ke HTML

Untuk mengekspor presentasi ke HTML, muat dengan Presentation dan simpan dengan SaveFormat.Html.

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

Contoh ini menulis satu berkas HTML. Objek presentasi dibuang di blok finally, yang melepaskan pegangan berkas dan sumber daya rendering setelah ekspor.

Gunakan HtmlOptions

HtmlOptions adalah kelas konfigurasi utama untuk ekspor HTML. Pengaturan umum meliputi:

SlidesLayoutOptions: menambahkan catatan, komentar, handout, atau informasi tata letak lainnya.
HtmlFormatter: mengubah struktur dokumen HTML atau mendelegasikan pemformatan ke sebuah controller.
SlideImageFormat: mengubah cara slide direpresentasikan, misalnya sebagai SVG.
PicturesCompression: mengendalikan DPI gambar dan ukuran keluaran.
DeletePicturesCroppedAreas: mempertahankan atau menghapus data gambar yang dipotong.
SvgResponsiveLayout: membuat konten SVG yang diekspor menyesuaikan dengan kontainernya.
ShowHiddenSlides: menyertakan slide tersembunyi bila diperlukan.

Bagian berikut menunjukkan opsi paling umum secara terpisah sehingga Anda dapat menggabungkan hanya yang dibutuhkan alur kerja Anda.

Mengonversi Slide Terpilih ke HTML

Overload Presentation.save yang menerima nomor slide menggunakan posisi slide berbasis 1. Loop di bawah ini menyimpan setiap slide ke berkas HTML terpisah.

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

Gunakan pola ini ketika situs web atau aplikasi membutuhkan satu halaman HTML per slide. Jika setiap slide harus memiliki tata letak yang sama, buat satu instance HtmlOptions dan berikan ke setiap panggilan save.

Buat HTML Responsif

ResponsiveHtmlController menyediakan output HTML responsif melalui HtmlFormatter. Gunakan ini ketika halaman yang diekspor harus beradaptasi lebih baik dengan lebar browser.

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

Untuk tata letak responsif berbasis SVG, atur SvgResponsiveLayout pada HtmlOptions. Ini berguna ketika konten slide diekspor sebagai markup SVG yang dapat diskalakan.

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

Sertakan Catatan Pembicara dan Komentar

Gunakan NotesCommentsLayoutingOptions melalui HtmlOptions.setSlidesLayoutOptions untuk menyertakan catatan pembicara atau komentar. Catatan dan komentar tersembunyi secara default kecuali Anda memilih posisinya.

Misalkan presentasi sumber berisi catatan pembicara:

Slide dengan catatan pembicara di PowerPoint

Kode berikut mengekspor konten slide dengan catatan pembicara di bawah slide.

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

Output HTML termasuk area catatan:

Output HTML dengan slide dan catatan pembicara

Untuk mengekspor komentar, atur CommentsPosition, misalnya ke CommentsPositions.Right atau CommentsPositions.Bottom. Jika Anda hanya membutuhkan komentar, hilangkan NotesPosition. Jika Anda membutuhkan keduanya, atur kedua properti.

Kendalikan Kualitas Gambar dan Area yang Dipotong

Ekspor HTML dapat mengompres gambar slide untuk mengurangi ukuran keluaran. Atur PicturesCompression ke nilai dari PicturesCompression ketika Anda memerlukan kualitas gambar yang lebih tinggi.

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

Secara default, area gambar yang dipotong dapat dihapus dari output yang diekspor. Simpan data yang dipotong hanya ketika pengguna harus dapat memulihkan atau memeriksa bagian gambar yang tersembunyi tersebut. Menyimpannya dapat meningkatkan ukuran HTML.

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

Tambahkan CSS

Untuk styling sederhana, berikan string CSS ke HtmlFormatter.createDocumentFormatter. Ini mengubah dokumen HTML di sekelilingnya sementara Aspose.Slides tetap merender konten slide.

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

Untuk header dokumen khusus, berkas CSS tertaut, atau markup khusus di sekitar slide dan bentuk, gunakan HtmlFormatter dengan controller pemformatan.

Sematkan Font

Jika lingkungan target mungkin tidak memiliki font presentasi yang terpasang, sematkan font dalam HTML dengan EmbedAllFontsHtmlController. Menyematkan meningkatkan kesetiaan visual namun meningkatkan ukuran keluaran.

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

Kecualikan font hanya bila Anda yakin bahwa peramban atau sistem target sudah menyediakannya. Untuk font merek atau font yang tidak umum, menyematkan biasanya lebih aman.

Tautkan Berkas Font Alih-alih Menyematkannya

Untuk mengurangi ukuran berkas HTML, Anda dapat menulis data font ke berkas WOFF terpisah dan menambahkan aturan @font-face ke HTML. Dalam Node.js via Java, skenario ini biasanya diimplementasikan dengan kelas pembantu Java kecil yang memperluas EmbedAllFontsHtmlController, menulis byte font ke direktori keluaran, dan menyisipkan aturan @font-face ke HTML yang dihasilkan. Kompilasikan pembantu tersebut, tambahkan ke classpath modul Node.js, lalu buat instansinya dari JavaScript dengan java.newInstanceSync.

Saat membangun pembantu seperti itu, pilih dua jalur secara sengaja:

Jalur keluaran sistem file, tempat berkas font yang dihasilkan ditulis.
Jalur URL, yang digunakan peramban dari dokumen HTML untuk memuat berkas font tersebut.

Simpan Sumber Daya Secara Eksternal

HTML yang berdiri sendiri mudah dipindahkan, namun sumber daya Base64 yang disematkan dapat membuat berkas menjadi besar. Jika aplikasi Anda memerlukan berkas gambar, font, audio, atau video eksternal, gunakan kontroler ekspor yang menulis sumber daya ke direktori pilihan dan menghasilkan URL yang terlihat oleh peramban. Jaga agar jalur sistem file dan jalur URL selaras dengan tata letak penyebaran Anda.

Ekspor Berkas Media

VideoPlayerHtmlController mengekspor berkas video dan audio serta menulis HTML yang dapat memutarnya di peramban. Konstruktornya menerima:

path: direktori tempat berkas media yang dihasilkan akan ditulis.
fileName: nama berkas HTML yang sedang dihasilkan.
baseUri: awalan URI absolut yang digunakan dalam tautan HTML ke berkas media.

Jika berkas HTML adalah html-output/presentation.html dan berkas media disimpan di html-output/media, path harus menunjuk ke direktori media pada disk, sementara baseUri harus menunjuk ke direktori yang sama dari sudut pandang peramban. Untuk pratinjau lokal, Anda dapat membuat URI file:/// dari direktori media. Untuk aplikasi yang disebarkan, gunakan URL absolut dari direktori media yang dipublikasikan.

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

Gunakan direktori keluaran yang unik per pekerjaan ekspor, khususnya dalam aplikasi server. Jalur keluaran yang dibagi dapat menyebabkan berkas dari konversi berbeda saling menimpa.

Kinerja dan Manajemen Sumber Daya

Konversi HTML adalah operasi rendering, sehingga waktu pemrosesan dan penggunaan memori bergantung pada jumlah slide, resolusi gambar, font, efek, chart, dan media yang disematkan. Nilai DPI PicturesCompression yang lebih tinggi, font yang disematkan, output SVG, dan area gambar yang dipotong yang dipertahankan dapat meningkatkan kesetiaan namun biasanya meningkatkan ukuran keluaran.

Untuk konversi batch:

Buang setiap instance Presentation dengan segera.
Gunakan direktori keluaran terpisah untuk pekerjaan terpisah.
Hindari menyematkan font umum kecuali kesetiaan memerlukannya.
Turunkan DPI gambar ketika HTML untuk pratinjau atau thumbnail.
Simpan presentasi sumber, HTML yang dihasilkan, dan sumber daya eksternal bersama sampai jalur penyebaran final.

FAQ

Apakah tautan hiper tetap terjaga dalam output HTML?

Ya. Tautan hiper presentasi diekspor ke HTML dan tetap dapat diklik ketika URL target valid.

Bisakah saya mengonversi presentasi ke HTML secara paralel?

Ya, tetapi jangan berbagi satu instance Presentation antar pekerja. Proses berkas yang berbeda dengan instance presentasi terpisah, aliran terpisah, dan direktori keluaran terpisah. Lihat panduan multithreading untuk detailnya.

Apakah objek Presentation thread‑safe?

Tidak. Satu instance Presentation harus dimuat, dimodifikasi, disimpan, dan dibuang dalam satu pekerja. Untuk pekerjaan paralel, buat instance independen per pekerja atau proses.

Mengapa berkas HTML yang dihasilkan besar?

Ekspor default dapat menyematkan sumber daya langsung ke dalam HTML. Font yang disematkan, gambar DPI tinggi, media, konten SVG, dan area gambar yang dipotong yang dipertahankan juga meningkatkan ukuran. Gunakan sumber daya eksternal, kecualikan font umum dari penyematan, dan turunkan PicturesCompression ketika ukuran lebih kecil lebih penting daripada kesetiaan maksimum.

Mengapa ukuran font PowerPoint seperti 24 pt muncul sebagai 17.999819 pt di HTML?

Hal ini dapat terjadi karena PowerPoint dan HTML menggunakan model DPI yang berbeda. PowerPoint menyimpan ukuran teks dalam satuan poin tipografis berbasis 72 DPI, sedangkan tata letak HTML berbasis piksel CSS pada model 96 DPI. Saat Aspose.Slides mengekspor presentasi ke HTML, ukuran font diterjemahkan antara kedua sistem, dan konversi dapat menghasilkan perbedaan pembulatan kecil.

Nilai‑nilai ini tidak menunjukkan perubahan visual sebenarnya pada ukuran font. Mereka hanya efek matematis sampingan dari konversi metrik teks antara PowerPoint dan HTML.

Bagaimana saya harus memilih baseUri untuk ekspor media?

Pilih baseUri dari sudut pandang peramban dan berikan sebagai URI absolut. Untuk pratinjau lokal, Anda dapat memproduksinya dari direktori keluaran dengan URI file:///. Untuk penyebaran, gunakan URL absolut dari direktori media yang dipublikasikan. Jalur sistem file path dan baseUri peramban tidak harus berupa string yang sama, tetapi harus menggambarkan lokasi sumber daya yang sama.

Apakah saya dapat menyertakan slide tersembunyi?

Ya. Atur ShowHiddenSlides ke true pada HtmlOptions ketika slide tersembunyi harus diekspor.

Mengonversi PPTX ke PPT dengan JavaScript Konversi PPT dan PPTX ke PDF dalam JavaScript [Termasuk Fitur Lanjutan]