jszip return empty or blank pdf file in the compressed folder

Question

i have a vue app that want to compress a group of pdf files in folder by jszip. but in this try, i'm just use one file for testing but somehow the zip was download normally. but when open the pdf file in it, the content is blank. i get the buffer bytes from backend using axios and it's actually no problem with that. but im not sure why it's blank after compress in jszip. i'm download it using file-saver (save as function) to download the compressed file.

below is 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);
            });

in which part is i was wrong and how can i overcome the issues or is there something that i could change or do?

Answer 1

i just get the issues of the problem, wanna share if there's someone may have the same issues:

i'm forget to set responseType in res config on axios to response as arrayBuffer.

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