Question

我正在处理的页面列出了文档。每个文档都是可点击的链接。单击打开PDF（通常在不同的选项卡中打开，或者甚至在不同的应用程序中打开，具体取决于用户的设置），然后重新加载原始选项卡，以便更新页面上的“未读”计数并将链接样式更改为表示“阅读”。

围绕文档详细信息的HTML范围：

<span class='btn-link' onclick='openReport(@orderNumber, @tableBodyId); return false;'>

使用Javascript：

function openReport(orderNumber, tableBodyId) {
    var url = "/Reports/ValuationReportDocPdf?orderNumber=" + orderNumber;
    var win = window.open(url, '');
    setTimeout(function () { location.reload(); }, 3000);
}

Javascript可在Chrome，Firefox和IE11中正常使用。

在Edge中，单击链接时，会打开一个空白选项卡并在标签栏上原始选项卡闪烁时接收焦点，等待我选择“保存”，“另存为”和“取消”。因此，用户必须返回原始选项卡才能继续。开始时这是一个非常混乱的用户体验。然后，如果我单击“保存”，它会变得更糟：打开包含PDF的第三个选项卡。

问题

如何让Edge发挥出色？我希望焦点留在原始页面上，直到用户选择了如何处理PDF，然后打开PDF而不打开任何空标签。

修改

This post似乎相关，但它使用了<a>。我不认为我可以使用锚点，因为我还需要刷新页面。

Answer 1

我发现了some help这个。对于Edge only，我动态创建一个<a>属性为download，并且＆＃34;点击＆＃34;它

function openReport(orderNumber, tableBodyId) {
    var url = "/Reports/ValuationReportDocPdf?orderNumber=" + orderNumber;

    if (isEDGE()) {
        var dl = document.createElement('a');
        dl.setAttribute('href', url);
        dl.setAttribute('download', 'filename.txt');
        dl.click();
    } else {
        window.open(url, '');
    }

    setTimeout(function () { location.reload(); }, 3000);
}

function isEDGE() {
    return /Edge\/\d./i.test(navigator.userAgent);
}

从Edge打开PDF而不打开冗余空白选项卡

1 个答案: