Download multiple files at once in the browser
npm install multi-download> Download multiple files at once in the browser
It works by abusing the a-tag download attribute.
``sh`
npm install multi-download
Note: This package targets the latest versions of Chrome, Firefox, and Safari.
`html`
`js
import multiDownload from 'multi-download';
document.querySelector('#download-button').addEventListener('click', event => {
const files = event.target.dataset.files.split(' ');
multiDownload(files);
});
`
`js
import multiDownload from 'multi-download';
// With jQuery
$('#download-button').on('click', () => {
const files = $(this).data('files').split(' ');
multiDownload(files);
});
`
`js
import multiDownload from 'multi-download';
// With Blob
const unicorn = URL.createObjectURL(new Blob(['🦄'], {type: 'text/plain'}));
const goat = URL.createObjectURL(new Blob(['🐐'], {type: 'text/plain'}));
multiDownload([unicorn, goat]);
`
Returns a Promise that resolves when all the downloads have started.
Note that there's a delay of 1 second between each download.
#### urls
Type: string[]
The URLs to files you want to download. Can be absolute or relative, even cross-origin.
#### options
Type: object
##### rename
Type: Function
A function that accepts an object containing url, index, and urls properties and is expected to return the new filename.
> [!NOTE]
> Only works for same-origin URLs or blob/data URLs due to browser security restrictions. Cross-origin URLs will download with their original names.
`html`
`js
import multiDownload from 'multi-download';
document.querySelector('#download-button').addEventListener('click', event => {
const files = event.target.dataset.files.split(' ');
multiDownload(files, {
rename: ({url, index, urls}) => 'New name.pdf'
});
});
``
If the user has enabled "Ask where to save each file before downloading" in Chrome, it will only download the first file.