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

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