Is there a way to change a .pptx document into a base64 string?

Currently, I am working on a project that involves creating an addin for Office. The challenge I am facing is opening other pptx files from within the addin. After some research, I discovered that I need to use base64 for the PowerPoint.createPresentation() function. While hardcoding the base64 string into the function works, my goal is to dynamically generate this string from the file selected by the user, which is retrieved from a server.

Admittedly, I am still quite new to programming and have only managed to find information online without knowing how to properly implement it. Most of the resources I found were related to JavaScript, but I am aware that it should work in TypeScript as well. Nevertheless, I am unsure of how to proceed with either language.

At present, the Base64 string is sourced from an array. When a user chooses a specific option, the corresponding pptx file is opened with the hardcoded string.

HTML:

<div *ngFor="let template of templates">
  <button (click)="onClickOpenTemplate(template.src)">
    <img src="{{ template.img }}" alt="">
    <h3>{{ template.name }}</h3>
  </button>
</div>

TypeScript:

templates: any[] = [
  {
    src: 'base64string',
    name: 'filename',
    img: 'imgPath'
  },
  {
    src: 'base64string',
    name: 'filename',
    img: 'imgPath'
  },
];

async onCreateOpenPresentation(template) {
    PowerPoint.createPresentation(template);
}

The desired outcome is to convert the selected pptx file to base64 when a button is clicked, then open it in a new PowerPoint window instead of relying on hardcoded values.

Edit: I attempted to use code snippets I came across elsewhere

// window.open(template);
    // tslint:disable-next-line: prefer-const
    let ActiveXObject: (type: string) => void;
    try {
      const fso = new ActiveXObject('Scripting.FileSystemObject');
      const file = fso.OpenTextFile(template, 1);
      const fileContent = file.ReadAll();
      file.Close();
      return fileContent;
      } catch (e) {
      if (e.number === -2146827859) {
        alert('Unable to access local files due to browser security settings. ' +
        'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
        // tslint:disable-next-line: max-line-length
        'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"');
      }
    }
    const templateBase64 = window.btoa(fileContent);
    console.log(templateBase64);
    PowerPoint.createPresentation(templateBase64);

Unfortunately, the 'fileContent' variable in 'window.btao()' throws an error. Does anyone know how to resolve this issue?

Answer №1

If you're looking to implement a way to read a file upon button click, convert it to a base64 string, and then pass it to a Powerpoint function, I have a vanilla JavaScript solution for you. It's fairly straightforward to adapt this code into Typescript if needed.

For more information and guidance on how to convert an input file to base64 without using FileReader in Ionic V2, check out this helpful resource: Convert Input File to Base64 in Angular 2 without using FileReader In Ionic V2

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

WordPress is failing to reference the standard jQuery file

I am currently attempting to include the jQuery DataTable JS file in my plugin to showcase database query results using DataTable. The JS file is stored locally on the server. Information about versions: WordPress: v4.0.1 jQuery: v1.11.1 DataTable: v1.10 ...

What is the procedure for passing arguments to Google signIn in a NextJS backend?

I am currently working on implementing a role-based Google sign-in feature in a Next.js 13 app using next-auth. This setup involves calling two different tables to create users based on their assigned roles. For the database, I am utilizing mongodb/mongoo ...

Change in ReactJS URLs without causing the entire page to refresh when using BrowserRouter

After conducting extensive research and struggling for a solution for quite some time, it appears that I am facing an issue with my ReactJS project. As a beginner in ReactJS, I have developed a game (a quiz) with multiple levels where the component remains ...

React: Implementing localStorage token addition in loginHandler function using State hook is not functioning as expected

I've implemented an AuthContextProvider in my React application to handle user authentication and logout functionality: import React, { useState } from "react"; import axios from "axios"; import { api } from "../api"; co ...

Issue: AngularJS Injector Module Error

Recently started learning angularjs and trying to set up an app. Here's a simple and direct way to do it: Angular controller: (function () { 'use strict'; angular .module('myQuotesApp') .controller(' ...

Issue: The specific module is unable to be located, specifically on the Heroku platform

While my application performs well locally and on a Travis CI build server, it encounters issues when deployed on Heroku. The error message Error: Cannot find module is displayed, leading to app crashes. Here are some details about the npm module: It r ...

Converting complex JSON object with multiple layers into a more streamlined array

I am currently utilizing a map-reduce function to consolidate multiple data inputs into a single object, as detailed in the discussion found here. The resulting reduced Object follows this structure: { "2019-04-02T00:00:00-04:00": { "2019-04- ...

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

In my project, I have a set of div blocks each identified by a unique numerical id. For instance: One of the tasks in my project is to select the 29th element following a specific chosen element. For example, if I choose the first div with id 1, then I s ...

Tips for adjusting the size of an imported item in Three.js?

Currently, I am utilizing Three.js for my project and I am importing .OBJ file using OBJ LOADER () Everything has been working smoothly thus far, but I have come across an issue that has me stumped. I am trying to figure out how to change the width and he ...

Looking to enhance code readability using regular expressions

While I am not a programmer, I enjoy exploring and learning new things. Here is what I have: 1) My URL is structured like this: http://site.com/#!/show/me/stuff/1-12/ 2) I have a jQuery pagination script that displays the number of available pages. Each ...

mongoose memory leak attributed to jest

UPDATED 2020-09-14 I've encountered an issue with a test case I wrote. While the testcase passes, it raises a complaint about improper teardown and an open connection. Can anyone help identify the problem: Approach to Solving the Issue - Memory Leak ...

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

Viewing HTML web pages using Mozilla Firebox

Printing an HTML table with lots of content has been a challenge for me. Google Chrome didn't work, so I switched to Mozilla Firefox. However, now Firefox is breaking the page inside the table. My question is how can I trigger print preview in Firefox ...

When calling an API endpoint, nodeJS is unable to access the local path

I've encountered a strange issue with my code. When I run it as a standalone file, everything works perfectly fine. However, when I try to utilize it in my API endpoint and make a request using Postman, it doesn't seem to function properly. What ...

What is the process for duplicating a set of elements within an svg file and displaying the duplicate at a specific location?

SVG <svg width="200" height="200"> <g id="group"> <rect x="10" y="10" width="50" height="20" fill="teal"></rect> <circle cx=" ...

Restart the _.after function counter

Despite my efforts to search online, I couldn't find a solution for resetting the _.after counter once the code inside has been executed. The goal here is to have the alert box appear only on every 5th click of the button: var cb; cb = _.after(4, fu ...

Is it possible to upload an image-containing object to Mongodb with the help of Node.js?

I am struggling to upload an object containing an image to the mongodb database using Node.js. Angular File onSelectedFile(event){ this.edit_image = event.target.files[0]; } editProfile(e){ const user={ email:this.edit_email, img:this.edit_imag ...

Display or Conceal Multiple Divisions Using Angular 2

I am looking to implement a functionality using Li lists to toggle the visibility of multiple divs in Angular 2. Initially, all divs on the page will be visible. When viewing on a smaller screen, I want to hide some divs and show a specific div when a cor ...

What seems to be the issue with the data initialization function not functioning properly within this Vue component?

In my Vue 3 component, the script code is as follows: <script> /* eslint-disable */ export default { name: "BarExample", data: dataInitialisation, methods: { updateChart, } }; function dataInitialisation() { return { c ...

Click event from Angular Material menu is triggered twice on mobile devices

After implementing a basic angular material side menu from the demo, I noticed that all click events are being fired twice on the entire page when viewed in mobile browsers. This issue can even be replicated in the Chrome emulator. (To reproduce, enable th ...