JS/PHP - Unable to generate readable PowerPoint (PPTX) file in JS from Base64 encoded string-CodePudding

The following PHP code was re-used from an AngularJS/PHP application I previously wrote to successfully download a PHP generated PowerPoint file.

The JS code below is written in ReactJS and when invoked to read the JSON (contained in the variable result) and retrieved from the api request to the PHP file generator function. When I open the PowerPoint file, it is corrupt. It only contains single digit numbers in the .txt (the extension I change my file to inspect contents) version of the PowerPoint file. It is supposed to have the raw binary content instead.

I suspect my file is not containing properly decoded content. How do I properly perform the decode and construct the file.

I have created the following two sections of code to output the file contents and to retrieve the file contents. Unfortunately the retrieval of the file contents in the JS code produces a corrupt file, that has a series of single digits

0753420020807097134859119432551731005080019000916711111011610111011... going on further

in the .txt equivalent of the rendered file as opposed to a proper binary looking something like the starting text below

PK ‡i„U[Âÿ 2 [Content_Types].xmlµUKoÛ0¾çWº±Ò†¡ˆÓÃÚžö(Ðö h6í¨Õ

PHP

        public function generateRiskSummaryPresentation()
        {
           //header("Content-Type: application/vnd.openxmlformats-officedocument.presentationml.presentation; charset=utf-8");
           header("charset=utf8");
           //header("Content-Disposition: attachment; filename=RiskSummary.pptx");
           ob_start();
           $oWriterPPTX = IOFactory::createWriter($this->riskPPT,'PowerPoint2007');
           $oWriterPPTX->save("php://output");  
           $presentationContent = ob_get_contents();
           ob_end_clean();  
           return base64_encode($presentationContent);                                      
        }

    getRiskReport = (riskid) => {
        const requestOptions = {
            method: 'GET',
            mode: 'cors',
            headers: {'Content-Type': 'application/json' }
        };        
        return fetch("http://riskaim/api/riskreport/" riskid, requestOptions)     
        .then(res => res.json())
        .then(result => {
            let content = Buffer.from(result.data, 'base64');
            let file = new Blob([...content], {type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', charset: 'utf-8'});
            let downloadLink = document.createElement("a");
            downloadLink.setAttribute('style', 'display: none');
            downloadLink.setAttribute('href', window.URL.createObjectURL(file));
            downloadLink.setAttribute('target', '_blank');
            downloadLink.setAttribute('downloadLink', 'RiskSummary.pptx');
            downloadLink.click();
        });
    }

How do I get the raw content generated?

CodePudding user response：

Removal of .toString() after Buffer.from(result.data, 'base64') and replacement of [content] with [new Uint8Array(content)] resulted in a successful output!

let content = Buffer.from(result.data, 'base64');
let file = new Blob([new Uint8Array(content)], {type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', charset: 'utf-8'});