如何在 Safari Mobile 的新选项卡中打开 PDF

Question

现在是 2023 年，我已经找到了一些关于同一主题的帖子。这些可以追溯到 2010 年。不幸的是，没有适合我的解决方案。

我的网站中有以下代码，我想在浏览器的新选项卡中打开下载的 PDF（作为 blob）。

const link = document.createElement( 'a' );
myFetch( 'report/getBalanceSheet',
    {year: balanceSheetYear},
    {
        method: 'get',
        headers: {
            'Authorization': 'Bearer ' + UserService.getToken(),
            'Content-Type': 'application/json'
        }
    })
    .then(async res => {
        // check for error response
        if ( !res.ok ) {
            // get error message from body or default to response statusText
            const error = res.status + " " + res.statusText;
            return Promise.reject( error );
        }

        const blob = await res.blob();

        if(blob.size === 0){
            //Empty file
            return;
        }
        link.href = URL.createObjectURL( blob );
        link.target="_blank"
        link.dispatchEvent( new MouseEvent( 'click' ) );
        URL.revokeObjectURL( link.href );
    })
    .catch( ( error ) => {
        //Some error handling
    } );

它适用于除 Safari Mobile 之外的所有浏览器。

我知道我可以将

link.target = "_blank"

更改为

link.download = "balancesheet.pdf"

但随后所有浏览器都会向我提供该文件作为下载，但我只想在新选项卡中显示它。

//编辑

抱歉：在 Safari 浏览器中单击时没有任何反应。所以它没有被弹出窗口阻止。不幸的是，我不知道如何在移动设备（此处为 Safari 浏览器）上看到“开发者控制台”，也不知道如何以某种方式调试此行为。

Answer 1

您应该能够使用

window.open

打开您的 blob url。

// Generate a URL from the blob
const url = URL.createObjectURL(blob);
// Open in a new tab
window.open(url, "_blank");
// Remove the blob to prevent memory leaks
URL.revokeObjectURL(url);

来源