Convert PowerPoint to Interactive HTML5 with iSpring SDK and Automate via Node.js

Background

PPT remains a heavily used teaching tool, especially for online education. Converting PPT to web while retaining animations, audio, and video is challenging; iSpring provides a solution for this conversion.

Environment Preparation

iSpring is an executable program; after installation it is ready to use. It is a paid product, and interested learners can contact the author for a trial.

Dependencies

Windows 64‑bit environment

Office 2013 or newer (other versions unverified)

Installation

Run the ispring_platform_ultimate_x64_8_3_0.msi installer located in the ispring directory to install the PPT Conversion SDK.

After installation, replace the SDK's iSpringSDK.dll with the one from the project’s ispring folder (default path: C:\Program Files\iSpring\Platform Ultimate 8\PPT Conversion SDK ).

Open the iSpring SDK editor ( CodeBuilder.exe ) and activate it by entering the key from ispring/key.txt in the last tab.

Copy the ispring/players folder into the SDK’s players directory (default: C:\Program Files\iSpring\Platform Ultimate 8\PPT Conversion SDK\players ).

Typical Usage

Launch CodeBuilder.exe (default path on Windows 10: C:\Program Files\iSpring\Platform Ultimate 8\PPT Conversion SDK\CodeBuilder\CodeBuilder.exe ), select a PPT file, and set OutputOptions to HTML5 .

Enable the "miscellaneous settings → javascript api" options; otherwise the webview cannot interact and the teacher interface cannot change slides.

If the source file is modified, re‑select it; otherwise the conversion will use the previous file.

Automated Conversion

Beyond the GUI, the SDK can be invoked via C#, VB.NET, or CMD. We can automate conversion by calling the CMD interface from Node.js.

<code>iSpringSDK.exe c -fs --skin none "C:\Users\admin\Desktop\新建 Microsoft PowerPoint 演示文稿 (2).pptx" "C:\Users\admin\Desktop\PowerPoint 演示文稿\新建 Microsoft PowerPoint 演示文稿 (2).html"</code>

We can parameterize the variable parts to achieve full automation.

<code>const fs = require('fs');
const { exec } = require('child_process');
const archiver = require('archiver');
const axios = require('axios');
const path = require('path');

// Configuration
const pptFilePath = 'path/to/your.pptx';
const outputPdfPath = 'output/your.html';
const zipFilePath = 'output/your.zip';
const uploadUrl = 'https://your-upload-server.com/upload';

function convertPptToPdf() {
  return new Promise((resolve, reject) => {
    const command = `iSpringSDK.exe c -fs --skin none ${pptFilePath} ${outputPdfPath}`;
    exec(command, (error, stdout, stderr) => {
      if (error) {
        console.error(`Conversion failed: ${error.message}`);
        return reject(error);
      }
      console.log('PPT conversion succeeded');
      resolve(outputPdfPath);
    });
  });
}

function zipFile(filePath) {
  return new Promise((resolve, reject) => {
    const output = fs.createWriteStream(zipFilePath);
    const archive = archiver('zip', { zlib: { level: 9 } });
    output.on('close', () => {
      console.log(`File zipped: ${archive.pointer()} bytes`);
      resolve(zipFilePath);
    });
    archive.on('error', err => reject(err));
    archive.pipe(output);
    archive.file(filePath, { name: path.basename(filePath) });
    archive.finalize();
  });
}

function uploadFile(filePath) {
  const fileStream = fs.createReadStream(filePath);
  const formData = new FormData();
  formData.append('file', fileStream);
  return axios.post(uploadUrl, formData, { headers: formData.getHeaders() })
    .then(response => {
      console.log('Upload successful:', response.data);
      return response.data;
    })
    .catch(error => {
      console.error('Upload failed:', error);
      throw error;
    });
}

async function main() {
  try {
    await convertPptToPdf();
    await zipFile(outputPdfPath);
    await uploadFile(zipFilePath);
  } catch (error) {
    console.error('Error in process:', error);
  }
}

main();
</code>

Business Integration

After conversion, the result is an HTML page similar to the screenshot below.

The related data is compressed into an encrypted string.

Inside the data folder you can find fonts, images, audio/video files, and per‑slide styles and code.

The HTML can be displayed online or packaged for offline use.

In live‑streaming scenarios you may need to control the PPT programmatically. The following snippet obtains the player instance:

<code>(function(player){
  function findConnector(win){
    var retries = 0;
    while(!win.ispringPresentationConnector && win.parent && win.parent != win){
      ++retries;
      if(retries > 7){ return null; }
      win = win.parent;
    }
    return win.ispringPresentationConnector;
  }
  function getConnector(){
    var api = findConnector(window);
    if(!api && window.opener && typeof(window.opener) != "undefined"){
      api = findConnector(window.opener);
    }
    return api;
  }
  var connector = getConnector();
  if(connector){ connector.register(player); }
})(player);
</code>

With the player instance you can access the playbackController to navigate slides, play, pause, and listen to events:

<code>let $playbackController = player.view().playbackController();

// Current slide index
const currentSlideIndex = $playbackController.clock().timestamp().slideIndex();

// Current playback state
const state = $playbackController.playbackState();
console.info('ppt state:', { state, slideIndex: currentSlideIndex });

// Jump to a specific timestamp
$playbackController.gotoTimestamp(slideIndex, stepIndex, timeOffset, true);

// Next / previous slide
$playbackController.gotoNextSlide(true);
$playbackController.gotoPreviousSlide(true);

// Play / pause
$playbackController.play();
$playbackController.pause();

// Jump to a specific slide
$playbackController.gotoSlide(slideIndex);

// Event listeners
this.$slideChangeEventInstance = $playbackController.slideChangeEvent();
this.$slideChangeEventInstance.addHandler(this.onSlideChangeEvent);

this.$stepChangeEventInstance = $playbackController.stepChangeEvent();
this.$stepChangeEventInstance.addHandler(this.onStepChangeEvent);

this.$stateChangeEventInstance = $playbackController.clock().stateChangeEvent();
this.$stateChangeEventInstance.addHandler(this.onClockStateChangeEvent);
</code>

iSpring also allows custom player styling if the default appearance does not meet business requirements.

Real‑world issues encountered:

Files created with WPS may result in black screens or excessively large outputs.

On first launch on Android/iOS, some devices show a play button that must be clicked.

Audio/video playback may fail on certain devices.

Large files can cause video loss.

Conclusion

The iSpring PPT conversion restores most features effectively; despite a few pitfalls, the overall experience is good, and newer versions reduce many of the known issues.