Convert base64 to PDF for instant download

I am experiencing difficulties with downloading PDF files in my SAPUI5 application. The issue lies in receiving a base64 string from the backend system, but struggling to convert it and display it as a PDF.

I can successfully convert and download smaller sized base64 files, but when it comes to larger PDF files, the download fails. Any assistance on this matter would be greatly appreciated.

Could someone kindly assist me with this?

var data =" JVBERi0xLjQNJeLjz9MNCjc1MDEgMCBvYmogPDwvTGluZWFyaXplZCAxL0wgOTM2NDM1Mi9PIDc1MDMvRSAxMjE3ODgvTiA1M...";

var uri = 'data:application/pdf;base64,' + atob(data);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = object.FileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
javascriptpdfsapui5

Answer №1

To overcome the challenge of handling large files, consider saving the data as a blob and configuring the download link to retrieve the data from the blog. Opting for binary data retrieval from the server is a more efficient approach compared to using Base64. Although Base64 works, it can be considered excessive in the context of handling blobs.

var data = Uint8Array.from(atob(base64_string), c => c.charCodeAt(0));
var blob = new Blob([data], {type: "octet/stream"});

var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
...
...

Answer №2

Your current approach involves creating a hyperlink with an href that contains 

data:application/pdf;base64,' + base64Data
. When the user clicks on the hyperlink, the complete URL opens in a new browser tab, prompting the browser to download the PDF file.

If the base64 data is large, the browser may struggle to download the PDF quickly. This can result in browser crashes or download failed errors due to the extended download time.

Other Options to Consider

Depending on your specific needs, there are various client-side JavaScript plugins available for facilitating file downloads.

Answer №3

This helpful blog post provides a solution to your base64 encoded PDF viewing issue.

Summary:

var base64EncodedPDF = "JVBERi0xLjcNCiW..."; // the encoded string
var decodedPdfContent = atob(base64EncodedPDF);
var byteArray = new Uint8Array(decodedPdfContent.length)
for(var i=0; i<decodedPdfContent.length; i++){
    byteArray[i] = decodedPdfContent.charCodeAt(i);
}
var blob = new Blob([byteArray.buffer], { type: 'application/pdf' });
var _pdfurl = URL.createObjectURL(blob);

this._PDFViewer.setSource(_pdfurl);

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

Accordion is having trouble expanding fully

My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click. Switching the display from flex to column fixes the issue, but I don' ...

javascripthtmljquerycss

Managing multiple URLs in a MEAN Stack application

Currently, I'm working on a MEAN stack project to implement a CRUD system for managing courses. One specific aspect that is giving me trouble is figuring out how to handle unique URLs for each course I create. As of now, I am using routeprovider for t ...

javascriptangularjsnode.jsexpressmean-stack

I have discovered some amazing jQuery image hover effects that are simply breathtaking –

I have been using the Adipoli jQuery Image Hover Effects plugin, but I am facing issues with changing certain properties. The image is set to change to grayscale initially and then switch to color on hover. However, when I click on the image, it should mai ...

javascriptjqueryimage

Vercel Alert: (Azure) Missing OpenAI API key

After successfully implementing the openAI API in my Next.js application using the langchain library, everything worked flawlessly on localhost. However, upon deploying to Vercel (ProVersion), I encountered an error: Error: (Azure) OpenAI API key not fou ...

javascriptnext.jsvercelopenai-apilangchain

When the user clicks on the page, show the data fetched from MySQL and echoed in

I am facing an issue with a table containing a loan_id. When fetching the information, everything appears to be in order. However, I need to be able to click on the loan_id number and have it display results based on the corresponding id number. <?php ...

javascriptphpjquerymysqltwitter-bootstrap

Creating a dynamic feature to add a row at the bottom of a table

I am currently working with JavaScript in the context of an AngularJS application, attempting to insert a row at the bottom of a table that shows the total sum of a specific column. Here is the code snippet I am using: var table = document.querySelecto ...

javascriptangularjs

The complete height of the website is concealed by the mobile toolbar/menu

I encountered a perplexing issue regarding the responsive resizing of a website on mobile devices. The problem arises when the full height extends over the toolbar/menu, unless the user manually hides the toolbar. Is there a way to dynamically resize the ...

javascripthtmlcssreactjsresponsive-design

I encountered a permission denied error while attempting to execute the command npm install -g tsc

My main objective is to convert TypeScript code to JavaScript. However, when I attempted to install the TypeScript compiler globally using 'npm install -g tsc', I encountered the following error: npm ERR! Error: EACCES: permission denied, rename ...

javascripttypescript

What are some effective methods for selectively handling batches of 5-20k document inputs when adding them to a collection containing up to one million documents using MongoDB and Mongoose?

My MMO census and character stats tracking application receives input batches containing up to 5-20k documents per user, which need to be aggregated into the database. I have specific criteria to determine whether a document from the input already exists i ...

javascriptnode.jsmongodbmongoosebigdata

New techniques in VueJS 3: managing value changes without using watchers

I am currently working on coding a table with pagination components and I have implemented multiple v-models along with the use of watch on these variables to fetch data. Whenever the perPage value is updated, I need to reset the page value to 1. However, ...

javascriptvue.jswatch

Sending a variable to a function in JavaScript (winJs) from a different function

Greetings! Currently, I am developing a Windows 8 app using Java Script. function fetchFromLiveProvider(currentList, globalList,value) { feedburnerUrl = currentList.url, feedUrl = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&outpu ...

javascriptjsonwinjs

Update dataTable with new data fetched through an ajax call from a separate function defined in a different

I need to refresh the data in my datatable after using a function to delete an item. The function for deleting is stored in a separate file from the datatable. Here is the delete function code: function removeFunction(table,id) { var txt= $('.ti ...

javascriptjqueryajaxdatatable

What is the process for retrieving DOM elements and JavaScript variables using PHP?

I am currently developing a PHP script that will dynamically generate tables in MySQL based on the user's input for the number of columns and column names. However, I have encountered some challenges when trying to access DOM elements and JavaScript v ...

javascriptphpmysql

Is it possible to set client-certificate as optional with Node SSL (using rejectUnauthorized: true does not achieve this)?

I have been exploring how to enable two-way SSL authentication in Node.js, following up on a previous thread: Enabling 2-way (client-authenticated) SSL in node.js? Now that I have successfully implemented client-authentication/2-way SSL, the next step is ...

javascriptnode.jsexpress

What is the best way to display HTML code using Vue syntax that is retrieved from an Axios GET request

I am currently working on a project that involves a Symfony 5 and Vue 3 application. In this setup, a Symfony controller creates a form and provides its HTML through a JSON response. The code snippet below shows how the form HTML is returned as a string: i ...

javascriptvue.jssymfonyvuejs3

Having difficulty assigning a selected value in select2 using JavaScript with Ajax mode

I am trying to use a select2 element that loads data from a database using ajax. My goal is to load the value from the database and have it selected as the default value in edit mode. However, I am encountering issues with using the trigger function to ach ...

javascriptphpajax

Positioning of dropdown in Material UI select component

Unfortunately, I am encountering an issue with the Menuprops attribute and cannot seem to adjust the position of the drop-down box. Despite following the instructions from other similar queries, the desired outcome remains unachieved. My goal is to have t ...

javascriptreactjsmaterial-uimaterial-design

Executing JavaScript in a web browser using Delphi

Similar Question: How to trigger the OnChange event of a "Select" element in Delphi WebBrowser? Hey there, I have a TWebBrowser in Delphi that loads a webpage containing a form with a dropdown menu. I am able to select an item from the dropdown, but ...

javascriptdelphibrowser

What are the steps to resolve the error "TypeError: req.next is not a function"?

I've been working on a project and keep encountering this persistent error that I can't seem to fix. I understand the issue, but unfortunately, I'm at a loss as to how to resolve it. Here is the error message: events.js:292 throw er; ...

javascriptnode.jsexpressmongoose

Using Vue.js to iterate over a list of items and accessing specific array objects by their unique identifier

My JSON array of objects has the following structure: https://i.sstatic.net/1IUVE.png When generating a <ul>, I need to fetch an ID from an API for each <li>: <ul> <li v-for="genre in movie.genre_ids"> {{ genre }} ...

javascriptvue.jsvuejs2vue-componentv-for