使用在新选项卡中打开的react-pdf创建的PDF在单击下载时出现“检查互联网连接”错误

Question

我正在使用react-pdf创建PDF并通过链接组件在新选项卡中打开它。

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>

这可以工作并在新选项卡中打开 PDF。在应用程序的其他地方它运行得很好。 但在一个地方，它在新选项卡中打开 PDF，但当我单击下载按钮时，我得到：

尝试下载时出错

当您将 chrome 设置更改为直接下载时，它就可以工作。

我尝试了this问题中的解决方案，因为我在函数handlePdfDownload中分离文档创建不起作用。

无法将其转换为第二个建议，因为我不管理下载按钮浏览器 PDF 渲染器处理它。

我还尝试了不同的浏览器，例如 Chrome Opera Mozilla 和 Edge，但都不起作用。

我尝试了其他工作文档，看看该文档是否有问题，但它在那里不起作用，所以我确信问题与该文档无关。

我希望它可以在应用程序中的任何地方工作，但正如我所说，它会在一个地方引起问题。

如果您对 onClick 冲突之外的原因有任何想法（因为我只是生成 blob 并将其呈现在其他选项卡上，我认为它不适用于这种情况），请分享。

Answer 1

在我做了更多研究后，我发现了问题。问题与库无关，而是与浏览器的工作有关。

我通过this问题找到了答案。固定版本是：

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={window.URL.createObjectUrl(blob)}/*This way garbage collector will not delete source and download will not throw an error*/
                    onClick={handleClick}
                >
                    {'Open PDF In New Tab'}
                </ISPLink>
            )}
        </>
    )}
</BlobProvider>