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

【问题标题】：How to show PDF in a new tab of IE without downloading it如何在不下载的情况下在 IE 的新选项卡中显示 PDF
【发布时间】：2019-06-04 23:40:14
【问题描述】：

似乎 IE 不允许直接打开 blob。您必须使用 msSaveOrOpenBlob。但是有什么方法可以将它转换成某种方式。我确实需要在不下载的情况下将 PDF 显示到 IE 的新选项卡中，或者至少用户不应该进行交互并且看不到它正在被下载到例如系统临时文件夹。 Safai 在同一个窗口而不是新标签中打开它，但主要问题是 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;
    }
}

【问题讨论】：

标签： javascript html angular cross-browser

【解决方案1】：

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

【讨论】：

它不是很有用.. 我需要在同一个浏览器中打开 blob 对象，但需要在另一个选项卡甚至同一个窗口中打开而不提示用户下载它
这正是你可以用它做的。
试试这个角度包（npmjs.com/package/ng2-pdfjs-viewer）。设置[externalWindow]="true"。而已。例如。 <ng2-pdfjs-viewer [externalWindow]="true" pdfSrc="samplepdf.pdf"></ng2-pdfjs-viewer>

【解决方案2】：

这个简单的a 链接适用于 IE11、Edge 和 Chrome：

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

它会在新标签页中打开 pdf 而无需下载。

【讨论】：

我真的需要通过我的脚本来处理 blob 对象
你的意思是file.pdf在哪里？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

在这个get请求的后端代码中，你需要读取pdf文件并将内容放入响应体中。

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

如果我知道您使用的是什么后端，我会与它共享后端代码。

【讨论】：