Get a compressed folder from jszip containing a PDF file that is either empty or blank

I'm facing a challenge with my Vue app where I need to compress a group of PDF files in a folder using JSZip. While testing with just one file, the zip downloads successfully but when I try to open the PDF file inside it, the content appears blank. I am fetching the buffer bytes from the backend using axios and that part seems fine. However, I can't figure out why the content is blank after compression with JSZip. I am using file-saver for downloading the compressed file.

Here is an excerpt of my script:

            const user = this.getSelectedUser(values.employee);
            const url = `some-url`;
            await ReportRepository.getReport(url).then(({ data }) => {
              console.log(Buffer.from(data).toString('base64'));
              zip.file('timesheet.pdf', Buffer.from(data).toString('base64'), { binary: true });
              zip.generateAsync({ type: 'blob' }).then((content) => {
                saveAs(content, 'timesheet.zip');
              });
            }).catch((er) => {
              console.log(er);
            });

I'm unsure of where I went wrong and how to resolve the issue. Are there any changes or steps I could take to address this problem?

Answer №1

Just had a breakthrough with the problem and thought I'd share in case someone else is facing the same issue:

I realized that I forgot to include the "responseType" setting in my axios configuration to handle the response as an arrayBuffer.

const config = {
  responseType: 'arraybuffer',
  headers: {
    'content-type': 'application/json',
  },
};

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

Adding a disabled internal Style node to the HTML5 DOM: A simple guide

According to this, the style tag can be turned off using the disabled attribute. I attempted the following: <head> <style>body { color: black; }</style> <style disabled>body {color: red; }</style> </head> <bo ...

Issue with the gulp-babel plugin: Files within the Plugin/Preset should only export functions, not objects

I have started to integrate JavaScript 2015 (ES6) into my Ionic v1 app: package.json { "name": "test", "version": "1.0.0", "dependencies": { "@ionic-native/deeplinks": "^4.18.0", "cordova-android": "7.0.0", "cordova-android-support-gra ...

Struggling to send the correct cookies to the API server using Next.js

I have set up an API express server on api.mydomain.com and a Next.js website on mydomain.com. My Next.js application uses getServerSideProps to request data from the API for displaying on the page. However, I am facing an issue where I can set cookies for ...

How can user data be logged in ASP.Net Core when a check box is selected?

Struggling to discover a way to secretly log user information such as their username when a checkbox is selected. The goal is to capture this data without the user's knowledge. Here is the code: This checkbox is a custom switch from MDB <div> ...

Utilizing jQuery boilerplate to execute functions

I am currently utilizing jQuery Boilerplate from However, I have encountered an issue where I am unable to call the "openOverlay" function within the "clickEvents" function. Oddly enough, I am able to successfully call "openOverlay" within the "init" fun ...

Error encountered when importing a Material-UI component: Unable to load a module from @babel/runtime

Struggling to compile the index.js file with rollup: import React from "react"; import ReactDOM from "react-dom"; import Grid from "@material-ui/core/Grid"; ReactDOM.render( <React.StrictMode> <Grid conta ...

Vue3: Enhanced hook not triggered when transition is applied to component's root element

It seems like there might be something missing in the documentation, as I've observed that the updated hook is not triggered when a component's root element is wrapped in a transition. This behavior was different in Vue 2. Here are two simple exa ...

Issue with dropdown component in material ui version v1.0 beta 26 encountered

Currently, I am encountering an issue with the dropdown component while using Material UI v1.0 beta.26. In this updated version, you are required to utilize the Select component along with MenuItem. Although my dropdown is successfully populated upon rend ...

A basic problem involving appending content using jQuery

I have encountered a puzzling issue. Whenever I attempt to insert new content into the <div> element using my JS code, it briefly appears and then disappears abruptly. I am unsure of the reason behind this behavior. Is there a way to prevent this fr ...

Dynamic row additions causing vanishing rows in the table due to JS/jQuery implementation

I am currently facing an issue while trying to create a table where I can add rows dynamically. Despite looking at various solutions on this topic, none of them seem to resolve the problem I am encountering. The newly added rows disappear immediately after ...

Initiate the React application with the given external parameters

I have created a React app that is embedded within a webpage and needs to start with specific parameters obtained from the page. Currently, I am passing these parameters in the index.HTML file within a div element. The issue arises when these parameters ar ...

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

Lately, I've been working on creating a type library for a JavaScript written library. As I was defining all the namespaces, classes, and interfaces, I encountered an error TS2417 with some of the classes. I double-checked for any issues with method o ...

The React DevTools display components with the message "Currently Loading."

I am currently facing an issue with debugging some props used in my React application. When I try to inspect certain components, they display as "Loading..." instead of showing the normal props list: https://i.sstatic.net/RtTJ9.png Despite this, I can con ...

Having trouble getting my Node.js Express code to display 'Hello World' on Cloud 9 platform

Recently, I've been experimenting with Cloud 9 and have been encountering an issue while trying to execute the sample code provided on the Express website to display 'Hello World!'. I have attempted listening on various ports/IP addresses ba ...

The loading of charts and animations is sluggish on mobile devices

My Chart.js chart starts with 0 values and updates upon clicking submit to load data from an external database. While this works efficiently on a computer browser, the load time is significantly longer when accessing the page on a mobile device. It takes a ...

How to temporarily toggle an event on and off using jQuery

Is there a way to control the activation and deactivation of a jQuery event? I currently have this functioning code that runs when the page is ready: $(".panzoom").panzoom({ $zoomIn: $(".zoom-in"), $zoomOut: $(".zoom-out"), $zoomRange: $(".zoo ...

Convert a JSON object into a new format with a nested hierarchy

The JSON object below is currently formatted as follows: { "id": "jsonid", "attributes": { "personName": { "id": "name1", "group": "1.1" }, "ag ...

Using BootstrapValidator for conditional validation

While utilizing the BootstrapValidator plugin for form validation, I encountered a specific issue. In my form, I have a "Phone" field and a "Mobile" field. If the user leaves both fields blank, I want to display a custom message prompting them to enter at ...

Using browser's local storage: deleting an entry

I recently came across a straightforward to-do list. Although the inputs are properly stored in local storage, I encountered issues with the "removing item" functionality in JS. Even after removing items from the HTML, they still persist in local storage u ...

Guide on transmitting data between NextJS and MongoDB

I'm facing an issue where the data from a form is being sent to MongoDB as undefined using nextJS and MongoDB. NewPlayerPage component: const newPlayerPage = (props) => { console.log('props: ' + props); const handleAddPlayer = a ...