How to download multiple pdfs in a zip?

Hi! Thanks for creating this awesome library I’m struggling with replacing JSZip with your library I need to download several files in an array like this

exampleFiles = [
    {
        name: "1.pdf",
        url: "/storage/files/1.pdf'
    },
    {
        name: "hello.pdf",
        url: "/storage/files/hello.pdf'
    },
    {
        name: "abcd.pdf",
        url: "/storage/files/abcd.pdf'
    },
]

// this function is a layer of abstraction to download files
// it uses JSZip to fetch the remote files and download them 
// in a zip archive. More important, it works well!
downloadFilesInZip(files)

Can you help me implement this using your library? I’ve tried to do it following the code provided in the README, but it seems like the fetch api gets the binary content of the pdf and it is saved as plain text; therefore I can’t display the file after downloading the zip

Thanks in advance

[Touffy]

Hello @myeongwooni. Yes, you can yield objects with name, lastModified and input properties instead of just the Response. For example, if you want sequential filenames and you know all the files are plain text :

let number = 1
async function* downloadGenerator(urls) {
  for(const url of urls) yield { input: await fetch(url), name: `file${number++}.txt` }
}

Of course you might need more logic there to compute appropriate filenames. You have access to the whole Response for that. It’s how client-zip does it by default when you just pass it a Response: it looks at the response headers (specifically the Content-Disposition header if present ; if not, it will use the last part of the URL’s pathname).

[Touffy]

Hello. You can’t specify “url” in the input for downloadZip and it’s not something I want to support. The reason for that is because fetching resources can be quite complicated (what if you need a JWT to access the PDFs, for example ?) and this library doesn’t want to be complicated.

But, it’s really quite easy to fetch the resources and generate a correct input for downloadZip. The quick-and-slightly-inefficient way is this :

const responses = await Promise.all([
  fetch('/storage/files/1.pdf'),
  fetch('/storage/files/hello.pdf'),
  fetch('/storage/files/abcd.pdf')
])

const zippedBlob = await downloadZip(responses).blob()

You don’t even need to provide a “name” for your files because client-zip will extract the file name from the URL (or the Content-Disposition HTTP header) when you provide a Response object as input.

It’s slightly inefficient because the browser will start all the HTTP requests for the PDFs immediately. If you have a lot of PDFs to download, it would be better to download them in sequence using an async generator :

const urls = [
  '/storage/files/1.pdf',
  '/storage/files/hello.pdf',
  '/storage/files/abcd.pdf'
])

async function* downloadGenerator(urls) {
  for(const url of urls) yield await fetch(url)
}

const zippedBlob = await downloadZip(downloadGenerator(urls)).blob()

The difference there is that each download is started only when the previous file is completely copied to the ZIP archive.