Generating a pdf Blob from an array and displaying it

I am encountering an issue with displaying my PDF file. The data is coming as a byte array, and this is how I currently have it set up:

    // data is initially String {0: % 1:P 2:D ...}
    const byteArray = _.map(data); // ["%", "P", "D", "F", "-", "1", ".", "4", "↵", ...]
    const blob = new Blob(byteArray, {type: 'application/pdf'});
    const blobURL = URL.createObjectURL(blob);
    window.open(blobURL),

When I log the Blob, everything seems correct in terms of length. However, when I try to open the PDF, it appears empty. The tab's header is the only thing displayed correctly, which leaves me wondering what could be going wrong. It is possible that the issue lies within the backend where the data is retrieved from, but unfortunately, I do not have access to it. I would appreciate any suggestions for better formats to transfer the data from the backend if needed.

Could the original presentation of the data be incorrect?

Edit:

Interestingly, when I make the same request using postman, the file displays correctly without any extra steps

Answer №1

My issue was resolved by including responseType='arraybuffer' in the request configuration. Once I did that, everything started working smoothly.

let dataBlob = new Blob([byteArray], {type: 'application/pdf'});
let blobURL = URL.createObjectURL(dataBlob);
window.open(blobURL)

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

Struggling to set up a css3 keyframe slide effect and seeking help to properly configure it. Check out the Fiddle for more details

I am looking to create a responsive version of the animation in this fiddle (link provided below). I want the animation to be 100% wide and have a height of 500px. However, when I adjust the width to 100%, it causes issues at the end of the animation. Can ...

What is the functionality of the arguments in the ajax function?

I'm currently following a tutorial that includes the code below: https://i.sstatic.net/a68AO.png However, I'm confused about the purpose of url, cache, and success. Are they arrays? How do they function? ...

Array of JSON data passed in the request body

Recently, I have been attempting to pass JSON data to my req.body. The data structure is as follows: answers = ["A","B"]; //An array to be included in the JSON Object var Student_Answers = { //JSON object definition Answers: answers, matricNumber: ...

Trouble accessing properties in Mongoose objects?

I am facing a puzzling issue while attempting to retrieve properties from a MongoDB (mongoose) find query. When I log the entire object, everything is visible. However, when I attempt to access a specific property, it returns undefined. The object is cert ...

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? https://i.sstatic.net/E6G56.gif Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div ...

"Discover the simplicity of customizing Bootstrap 5 with an easy-to-use online tool

When I was using Bootstrap 3, there was a convenient tool that allowed me to customize which features I wanted in the minified CSS/JS files to improve loading time. Now, as I delve into the documentation for Bootstrap 5, I find myself struggling to unders ...

The useParams() function is returning undefined, even though the parameter does exist in the destination URL

I have a complete inventory of items called "Commandes" (PS: the app is in French), displayed in a table with a column for each row that should redirect me to another component showing more details about the selected row. To achieve this, I need to utilize ...

Bootstrap 3 Full-Width Responsive Image Overlapping

I have designed a grid layout with col-md-7 on the left side and col-md-5 on the right side. The images in the col-md-5 are responsive and have a full-width of col-md-12. <div class="container"> <div class="row"> <div class="col ...

Instructions on retrieving the index of an element from an array utilizing the Arrays.asList method

In my Android project, I have created an array called "people" using a different class "Person" for each element: people = new Person[]{ new Person("Python"), new Person("PHP"), new Person("Pascol"), new Pe ...

What is the functionality of Nodejs EventEmitter.once() method?

Exploring the nodejs source code (LOC 179), we come across the following scenario: EventEmitter.prototype.once = function(type, listener) { /** ... **/ function g() { /** ... **/ } g.listener = listener; // => ??? this.on(type, g); return ...

Listening for Angular 2 router events

How can I detect state changes in Angular 2 router? In Angular 1.x, I used the following event: $rootScope.$on('$stateChangeStart', function(event,toState,toParams,fromState,fromParams, options){ ... }) In Angular 2, using the window.addEv ...

What is the best way to implement target="_blank" in an anchor tag using 'sanitize-html'?

In my current project, I am utilizing the sanitize-html library. Let's say I receive an email containing an anchor tag like this: this is to test something <a href="https://www.google.com/">open google</a> When this email shows up in my ...

Leveraging next-generation JavaScript (NextJS), incorporate sass-loader for seamless inclusion of variables in each individual

I'm having trouble implementing a custom webpack configuration in my nextjs project. My objective is to automatically import @import "src/styles/variables.scss"; for all scss files in my application. I have successfully set up a webpack con ...

Attempting to parse a file using JSON.parse

I'm currently in the process of downloading a file and attempting to utilize JSON.parse. The result should be { dateTime: "2012-04-07T17:15:00.000-05:00", value: "1065.91" }. Can someone verify if I am passing the correct object through JSON.parse and ...

Tips for creating a nested array in Javascript:

Given the following: var person = {name: "", address: "", phonenumber: ""} I am trying to implement a loop to gather user input (until they choose to stop inputting information by entering nothing or clicking cancel). My goal is to utilize the person obj ...

Is it possible to import a class from a different project or module in TypeScript?

I am attempting to modify the build task in Typescript within this specific project: https://github.com/Microsoft/app-store-vsts-extension/blob/master/Tasks/app-store-promote/app-store-promote.ts I am looking to incorporate an import similar to the one be ...

Sharing information between controllers while being initiated using $rootScope.$emit

I've created a common module that includes a controller, component, and template to initialize the app and set up the base layout. Within this module, there is also a stateful component that makes an HTTP GET request during initialization to fetch a b ...

Guide to utilizing an if statement to return a string as the title in a Tooltip pro

When attempting to dynamically set the title of a tooltip based on a function and using an if statement, I encountered an error. const getStatusMessage = (answer: AnswerStatus) => { if (answer == AnswerStatus.ANSWER_SUBMITTED || answer == AnswerStatus ...

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

I'm having trouble getting a Twitter Bootstrap 3 navbar to collapse using data attributes, as it is not expanding properly. Just to give some context, the project I am working on is an ASP.NET C# MVC project that runs on DNN (DotNetNuke) CMS. When I ...

The issue of using an import statement outside a module arises when executing Protractor

I am facing an issue while running Protractor with my two files. When I execute the command "protractor protractor.config.js", I encounter the following error: D:\work\staru-app>protractor protractor.config.js [16:57:17] I/launcher - Running ...