PowerPoint to HTML5 Conversion in C# Does Not Work as Expected

Aspose.Slides Product Family
, , , ,
21

@samirka,
The cross-platform NuGet package is not the same version as the the main one because we found some issues with Docker. Aspose.Slides.NET6.CrossPlatform 23.12 will be published later. We apologize for any inconvenience.

22

@andrey.potapov understood, thanks for the explanation

23

@samirka,
Thank you for evaluating Aspose.Slides.

24

Hi @andrey.potapov, while evaluating Aspose.Slides I’ve identified another issue while converting PowerPoint file to HTML5. Please take a look at the included files. I’m using Aspose.Slides Aspose.Slides.NET6.CrossPlatform v23.11.

SamplePPTFile.HTML5.zip (32.7 KB)
SamplePPTFile.pptx.zip (37.3 KB)

The code is the same as listed above.

Thanks

25

@samirka,

I noticed drawing shapes missing and contents were not rendered properly in PPTX to HTML5.

We need to evaluate the issue in details. We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): SLIDESNET-44382

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

26

@samirka,
At the moment, the simplest way to fix the page size in the output HTML is to insert the following script into the HTML file before the </body> tag:

    <script>

        // hide navigation buttons
        document.getElementById('PrevSlide').style.visibility = 'hidden';
        document.getElementById('NextSlide').style.visibility = 'hidden';

        // turn body position into flex
        var body = document.getElementsByTagName('body')[0];
        body.style.display = 'flex';
        body.style.justifyContent = 'center';
        body.style.alignItems = 'center';

        // store initial slide width and height
        var bg = document.getElementsByClassName('bg')[0];
        var initx = bg.getBoundingClientRect().width;
        var inity = bg.getBoundingClientRect().height;                

        // resize handler
        var onresize = function()
        {
            // calculate and apply transform
            var kx = window.innerWidth / initx;
            var ky = window.innerHeight / inity;
            bg.style.transform = `scale(${(kx <= ky) ? kx : ky})`;
        };

        // attach event handler
        window.onresize = onresize;

        // process initial resize
        onresize();

    </script>

You can do it while converting the presentation, for example, this way:

// Convert the presentation.
using (Presentation pres = new Presentation("MongoDB_pt.pptx"))
{
    pres.Save("MongoDB_pt.html", SaveFormat.Html5, new Html5Options
    {
        AnimateShapes = true,
        AnimateTransitions = true
    });
}

// The script mentioned above.
string script =
    "<script> document.getElementById('PrevSlide').style.visibility = 'hidden'; " +
    "document.getElementById('NextSlide').style.visibility = 'hidden'; " +
    "var body = document.getElementsByTagName('body')[0]; body.style.display = 'flex'; " +
    "body.style.justifyContent = 'center'; body.style.alignItems = 'center'; " +
    "var bg = document.getElementsByClassName('bg')[0]; var initx = bg.getBoundingClientRect().width; " +
    "var inity = bg.getBoundingClientRect().height; var onresize = function() { " +
    "var kx = window.innerWidth / initx; var ky = window.innerHeight / inity; " +
    "bg.style.transform = `scale(${(kx <= ky) ? kx : ky})`;}; window.onresize = onresize; " +
    "onresize();</script>\r\n</body>";

// Patch the result HTML file.
string htmlContent = File.ReadAllText("MongoDB_pt.html");
string newHtmlContent = htmlContent.Replace("</body>", script);
File.WriteAllText("MongoDB_pt.html", newHtmlContent);

Or you can use WebExtensions and edit the corresponding template file.

27

The issues you found earlier (filed as SLIDESNET-44382,SLIDESNET-44367,SLIDESNET-44366) have been fixed in Aspose.Slides for .NET 24.2 (ZIP, MSI).
You can check all fixes on the Release Notes page.
You can also find the latest version of our library on the Product Download page.