I have a webpage that contains a table of reports. When you click on any of the reports individually, it downloads and displays it as a PDF in a new tab.

My current task, and the problem that I'm having, is that I also need to be able to download all of the reports in that table and display in a new tab as one, multipage PDF.

Where I have it now, it seems like I'm getting two PDFs worth of data (judging by the size I can see in the console). However when the PDF opens in a new tab, it's only one page. Not two like I'm hoping for. The PDF does not get corrupted in the process, it seems to only display the first PDF.

Here is my downloadAll function:

async downloadAll() {
    var parts = [] // parts array to store blob 'parts' to later be combine
    var cals = this.state.calibrations // the array of JSONs that include the blob UUID
    let count = 0
    await new Promise((resolve) => {
        cals.forEach(async (cal) => {
            try {
                let blob = await (await fetch(api_url + this.state.user.company + '/blobs/' + cal.blob_id + '/download', { headers: { Authorization: this.state.auth_token }})).blob() // API call to download blob with the UUID (cal.blob_id)
                parts.push(blob) // push the resulting blob to the parts array
            } catch (e) {
                console.log(e)
            } finally {
                count += 1
                if(count === cals.length) {
                    resolve()
                }
            }
        })
    })
    var blobBuilder = new Blob(parts, { type: 'application/pdf'}) // create a new blob of type PDF with our now-filled parts array
    console.log(blobBuilder)
    window.open(URL.createObjectURL(blobBuilder), '_blank'); // open blobBuilder PDF in a new tab
}

Something tells me that it's not as simple as smashing two pdfs together (obviously, I wouldn't be asking if it was that simple) but I'm not sure how to manipulate the data in the PDF itself.

Thank you for reading and please let me know if you need more information.