如何在不下载的情况下在 IE 的新选项卡中显示 PDF

Question

似乎 IE 不允许直接打开 blob。您必须使用 msSaveOrOpenBlob。但是有没有办法以某种方式转换它呢。我确实需要在不下载 PDF 的情况下将 PDF 显示到 IE 的新选项卡中，或者至少用户不应该进行交互并且看不到它正在被下载到例如系统临时文件夹。 Safai 在相同的 window 中打开它而不是在新选项卡中打开它，但主要问题是 IE。使所有浏览器工作相似并在新选项卡中打开以进行预览的主要想法。

let blob = new Blob([response], {
    type: 'application/pdf'
});

if (window.navigator && window.navigator.msSaveOrOpenBlob) {//IE
    window.navigator.msSaveOrOpenBlob(response, "TheDocumentToShow.pdf");
} else {
    var fileURL = URL.createObjectURL(response);
    if (navigator.userAgent.indexOf("Chrome") != -1 || navigator.userAgent.indexOf("Firefox") != -1){
        let win = window.open(fileURL, '_blank');                        
    } else { //Safari & Opera iOS
        window.location.href = fileURL;
    }
}

Answer 1

您可以使用这个库：https://github.com/VadimDez/ng2-pdf-viewer。它基于 pdfjs 构建，可以将 pdf 集成到您自己的页面中。您可以创建一个以 link 作为参数的路由，并在新选项卡中打开它。

Answer 2

这个简单的 a link 适用于 IE11、Edge 和 Chrome:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <a href="file.pdf" target="_blank">Click</a>
</body>
</html>

它会在新选项卡中打开 pdf 而无需下载它。

Answer 3

尝试pdfjshttps://mozilla.github.io/pdf.js/

设置 Viewer.php 传递要显示的 pdf 文件的 link，然后只需在新选项卡中打开它，例如 example.com/viewer.php?pdfLink=/files/path/to/doc.pdf

Answer 4

<script>
function pdf() {
window.open("filename.pdf","_blank");
}
</script>
<div onclick="pdf();">Click here</div>

这是你想要的吗？这不使用锚标记，并且在所有浏览器中都受支持。 Click here for more information.

Answer 5

我已经在所有使用后端代码的浏览器中完成了。您需要做的就是从前端在新选项卡中打开一个新网页。比方说 - www.example.com/path/to/pdf_file.

在本次get请求的后端代码中，需要读取pdf文件并将内容放入response中body。

将 Content-disposition header 设置为 inline;filename=<your pdf filename> 这将确保不应下载响应内容。

如果我知道你在使用什么后端，我会把后端代码分享给它。

Answer 6

您可以试试这个 angular 包 (https://www.npmjs.com/package/ng2-pdfjs-viewer)。它有一个简单的选项 在新选项卡中打开 pdf。使用属性 [externalWindow]="true".

代码
<ng2-pdfjs-viewer [externalWindow]="true" pdfSrc="samplepdf.pdf"></ng2-pdfjs-viewer>

如何在不下载的情况下在 IE 的新选项卡中显示 PDF

How to show PDF in a new tab of IE without downloading it

html

javascript

cross-browser

angular