Question

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

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

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

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

Answer 1

注意：对于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 2

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

Answer 3

对于那些后来遇到这个问题的人。 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;

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

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

3 个答案: