I m using react-pdf to create a PDF and open it in new tab via Link component.

WindowTargetAttributes.BLANK = _blank

const document = (
    <Document>
    <Page size="A4" style={styles.page}>
        <Layout footerInfo={footerInfo} showDate={showDate}>
            {pdf}
        </Layout>
    </Page>
    </Document>
);

const handleClick = e => {
    sendIDtoTagManager(e.target.id, window.location.href);
};

<BlobProvider document={document}>
    {({ url, loading, blob }) => (
        <>
            {loading && <Loading/>}
            {blob && !loading && (
                <Link
                    target={WindowTargetAttributes.BLANK}
                    destination={url}
                    onClick={handleClick}
                >
                    {'Open PDF In New Tab'}
                </ISPLink>
            )}
        </>
    )}
</BlobProvider>

This works and opens PDF in new tab. And in other places of the App it works perfectly.
But in one place it opens PDF in new tab but when I click download button I get:

Error when I try downloading

It works when you change your chrome settings into directly download.

I tried the solution in this question as I separated document creation in a function handlePdfDownload didn’t work.

Couldn’t convert it to second suggestion since I don’t manage the download button Browsers PDF renderer handles it.

I also tried different browsers like Chrome Opera Mozilla and Edge non of them worked.

I tried other working documents to see if problem is with the document and it doesn’t work there as well so I m sure problem is not related the document.

I expect it to work everywhere in the app but as I say it causes problem for one place.

If you have any ideas about cause besides that onClick clashing(Since I just produce blob and rendering it on other tab I don’t think it doesn’t apply this case) please share.