在 IE9+ 上显示 base64 pdf 的解决方法

Question

我想将 PDF 转换为 base64 并在浏览器上显示。

问题是，以下代码适用于 Firefox 和 Chrome

<iframe src="data:application/pdf;base64,encodeString></iframe>

但不是在 IE 9 + 中，假设用户正在使用 adobe reader 插件，是否有任何 jquery 插件/解决方法允许在 iframe 上嵌入 base64 pdf？谢谢

Answer 1

对于那些稍后遇到此问题的人。 Dinesh Rajput 的答案曾经有效，但 msSaveOrOpenBlob() 现在已被弃用，只能在旧版本的 IE 和旧版 Edge 上使用。现在您可以将 iframe src 设置为您的 pdf。

我知道这是旧的，但我已经坚持了一段时间，我想通了。

问题在于 Edge 对 URI 有字符限制。你必须先把你的pdf变成一个blob。

//Convert to blob
var byteCharacters = atob(response);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
     byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], { type: 'application/pdf' });

//Convert blob into URL Object
blob = window.URL.createObjectURL(blob);

 //Set URL Object as iFrame src
 document.getElementById('iframe').src = blob;

这实际上应该适用于所有现代浏览器，因此无需进行浏览器/功能检查。

Answer 2

注意：对于 IE 和 Mozilla 等其他浏览器，Chrome 可以使用 对我来说

if (data == "" || data == undefined) {
    alert("Falied to open PDF.");
} else { 
    //For IE using atob convert base64 encoded data to byte array
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        var byteCharacters = atob(data);
        var byteNumbers = new Array(byteCharacters.length);
        for (var i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        var blob = new Blob([byteArray], {
            type: 'application/pdf'
        });
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else { 
        // Directly use base 64 encoded data for rest browsers (not IE)
        var base64EncodedPDF = data;
        var dataURI = "data:application/pdf;base64," + base64EncodedPDF1;
        window.open(dataURI, '_blank');
    }
}

Answer 3

您已经注意到，Internet Explorer 不支持使用 DATA URI 作为 IFRAME 的来源。唯一的解决方法是从 HTTP/HTTPS 或 FTP URI 返回您的 PDF 内容，并将其用作 IFRAME 的来源。