Formatting getting disturb while opening file using base64(Alignment,Font Colour,FontSize etc.)

[Jayshiv1408Dev]

My Environment
Platform : PC desktop
Host: Power Point
Office version number: Microsoft® PowerPoint® for Microsoft 365 MSO (Version 2404 Build 16.0.17531.20140) 64-bit
Operating System: Windows 11 pro

Hi Team,
Here is my code snippet which is I used to open PPT using base64.

async function loadslide(mybase64) {
     try {
         await PowerPoint.run(async (context) => {
             context.presentation.load("slides");
             await context.sync();
             const slides = context.presentation.slides;
             const slideCount = slides.getCount();
             slides.load("items");
             await context.sync();
             slides.items.map((slide) => {
                 slide.delete();
             });
             await context.sync();
             context.presentation.insertSlidesFromBase64(mybase64);
             await context.sync();
             Loader("hide", translate('Addin_J_302'), "S");

         });
     } catch (e) {
         console.log("e", e);
     }
 }

After Opening my PPT file using code its alignment getting disturb I'm attaching file here for reference.

SamplePPT.zip

[Rick-Kirkham]

@Jayshiv1408Dev Please add details about what you mean when you say that the formatting is disturbed. It is a security risk to open a zip file, so I'm reluctant to do that. Could you add a screen shot of the disturbed formatting?

[Jayshiv1408Dev]

Expected Output PPT1

Error output PPT1

Expected output PPT2

Error Output PPT2

Expected output PPT3

Error output PPT3

Here Formatting means Font style ,alignment font color and size is getting distrub.

Here is my source File For reference
PPT2.pptx
PPT3.pptx
PPT1.pptx

[EsterBergen]

@Jayshiv1408Dev - Can you confirm how you're getting the original slides as base64? I think that may be the issue vs. the inserting part.

We recently released an api into preview that exports the slide as Base64. Can you try using that one to generate the Base 64 string?

https://learn.microsoft.com/en-us/javascript/api/powerpoint/powerpoint.slide?view=powerpoint-js-preview#powerpoint-powerpoint-slide-exportasbase64-member(1)

[Jayshiv1408Dev]

@EsterBergen
When I open this original files normally in powerpoint it's look perfectly but when I open using base64 it's causing issue.
As per your guidance I have to exported its by using exportAsBase64() method and use that bytes to load slides?
Am I correct?

[Jayshiv1408Dev]

can you please provide CDN for preview. I use beta version CDN but its throw exception at exportAsBase64().
May be I'm doing something wrong.
Can you please provide some demo for this.

[EsterBergen]

hi @Jayshiv1408Dev - As it's a preview API you'll need to refer to the Beta reference https://appsforoffice.microsoft.com/lib/beta/hosted/office.js

Try that and let us know if you still have an error.

Before using the preview API for exportAsBase64(), how were you converting your slides to base64?

[Jayshiv1408Dev]

Using C# File.ReadAllBytes("mypath"); I'm taking bytes from path and after that I'm using this code to convert byte into base64.
here my api response will pass in GetPPTDataSuccess(res)

function GetPPTDataSuccess(res) {
    var Data = "";
    if (res) {
        Data = res[0];
         if (Data != null) {
            var bcontent = base64ToArrayBuffer(Data);
            var blob = new Blob([bcontent], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
            var file = new File([blob], 'test', { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
            var fr = new FileReader();
            fr.onload = ReplaceWordDocument;
            fr.readAsDataURL(file);
            ReplaceWordDocument(Data);
        } 
    }
}
  

async function ReplaceWordDocument(data) {
        if (this && this.result) {
            var startIndex = -1;
            var mybase64 = "";
                data = this.result;
                startIndex = data.indexOf("base64,");
                mybase64 = data.substr(startIndex + 7, data.length);
            if (officeview == "PowerPoint") {
                await loadslide(mybase64);
            }
           
        }
    }

async function loadslide(mybase64) {
     try {
         await PowerPoint.run(async (context) => {
             context.presentation.load("slides");
             await context.sync();
             const slides = context.presentation.slides;
             const slideCount = slides.getCount();
             slides.load("items");
             await context.sync();
             slides.items.map((slide) => {
                 slide.delete();
             });
             await context.sync();
             context.presentation.insertSlidesFromBase64(mybase64);
             await context.sync();
             Loader("hide", translate('Addin_J_302'), "S");

         });
     } catch (e) {
         console.log("e", e);
     }
 }

[Jayshiv1408Dev]

Is there any updates on this?

[EsterBergen]

adAllBytes("mypath"); I'm taking bytes from path and after that I'm using this code to convert byte into base64.
here my api response will pass in GetPPTDataSuccess(res)

Hi @Jayshiv1408Dev -were you able to try the preview API to see if the base64 generated provides the expected content?