Download a PDF via POST with Fetch API

download-pdf.js

let fnGetFileNameFromContentDispostionHeader = function (header) {
    let contentDispostion = header.split(';');
    const fileNameToken = `filename*=UTF-8''`;

    let fileName = 'downloaded.pdf';
    for (let thisValue of contentDispostion) {
        if (thisValue.trim().indexOf(fileNameToken) === 0) {
            fileName = decodeURIComponent(thisValue.trim().replace(fileNameToken, ''));
            break;
        }
    }

    return fileName;
};

let postInfo = {
    id: 0,
    name: 'foo'
};

let headers = new Headers();
headers.append('Content-Type', 'application/json');

fetch(`api/GetPdf`, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(postInfo)
})
    .then(async res => ({
        filename: fnGetFileNameFromContentDispostionHeader(res.headers.get('content-disposition')),
        blob: await res.blob()
    }))
    .then(resObj => {
        // It is necessary to create a new blob object with mime-type explicitly set for all browsers except Chrome, but it works for Chrome too.
        const newBlob = new Blob([resObj.blob], { type: 'application/pdf' });

        // MS Edge and IE don't allow using a blob object directly as link href, instead it is necessary to use msSaveOrOpenBlob
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(newBlob);
        } else {
            // For other browsers: create a link pointing to the ObjectURL containing the blob.
            const objUrl = window.URL.createObjectURL(newBlob);

            let link = document.createElement('a');
            link.href = objUrl;
            link.download = resObj.filename;
            link.click();

            // For Firefox it is necessary to delay revoking the ObjectURL.
            setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250);
        }
    })
    .catch((error) => {
        console.log('DOWNLOAD ERROR', error);
    });

FYI. This approach does not work for Safari 12.1.

Switched altogether to https://github.com/eligrey/FileSaver.js which solves this problem but kept the getFileNameFromContentDispostionHeader method is proved useful.

If your response type is CORS and then you might need to allow content-disposition header from the server by adding an extra header - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

Note the

if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(newBlob);
        }

does not seem to be needed on Edge 92.0.902.73. (not tested on older browsers though so advisable to not leave it out)