问题-Base 64 PDF字符串未在IE 11中呈现

问题描述 投票:0回答:1

我想在IE 11中显示Base64 PDF我将PDF Base 64格式转换为Blob,并尝试将其呈现为IE,但此方法无效,但在Chrome中有效。我正在使用Sharepoint Framework列表视图命令集我尝试使用iFrame,Object,Embed,但还是没有运气我还尝试了1种方法,但它正在下载pdf,而不是在浏览器的新标签页中打开它。我也打开了问题n githubhttps://github.com/mozilla/pdf.js/issues/11461//代码开始

//Get pdf in Base64 format
const pdfBytes1 = await pdfDoc.saveAsBase64({
dataUri: true
});

//Remove data:application/pdf;base64, from pdfbytes string
var res = pdfBytes1.split("data:application/pdf;base64,")[1];
var bytes = atob(res);
//Below code downloads the pdf file instead of opening the browser
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
var byteCharacters = atob(res);
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, "Test.pdf");
} else {
// Directly use base 64 encoded data for rest browsers (not IE)
var base64EncodedPDF = res;
var dataURI = pdfBytes1;
window.open(dataURI, '_blank');
}

//Converting base64 format to blob
const pdfBytes1 = await pdfDoc.save()
var byteArray = new Uint8Array(pdfBytes);
var blob = new Blob([byteArray], {
type: 'application/pdf'
});
var tab = window.open();
var objectUrl = URL.createObjectURL(blob);

if (window.navigator && window.navigator.msSaveOrOpenBlob) {
//Trying to load it in iFrame
var iframe = document.createElement("iframe");
iframe.src = objectUrl;
iframe.setAttribute("style", "width:100%;height:100%");
tab.document.appendChild(iframe);

// Second approach. 
var mywindow = window.open('about:blank', 'Print', 'height=800,width=900');
mywindow.document.write('<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> ')
mywindow.document.write('<!DOCTYPE html><head>');
mywindow.document.write('<link rel="stylesheet" href="./css/scr.css" type="text/css" />');
mywindow.document.write('</head><body><iFrame  src=' + objectUrl + '></iFrame>');
//add logos and legend here.
mywindow.document.write('<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> ')
//mywindow.document.body.appendChild(iframe);        
mywindow.document.write('</div></body></html>');
mywindow.document.write('<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> ')

//window.navigator.msSaveOrOpenBlob(blob);
} else {
var objectUrl = URL.createObjectURL(blob);
window.open(objectUrl);
}
//Below code opens blank iFrame page in IE
//let pdfWindow = window.open("");
// pdfWindow.document.write("<iframe width='100%' id='printf' name='printf' height='100%' src='"+encodeURI(pdfBytes1)+"'></iframe>");

====================================================

I have tried with pdf.js. Its working in Chrome but not in IE.
Below is the code snippet.

//代码开始

    import {getDocument} from 'pdfjs-dist' ;
var loadingTask = getDocument({data: bytes});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');

// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');

var scale = 1.5;
var viewport = page.getViewport({scale: scale});

// Prepare canvas using PDF page dimensions
document.write('<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> ')
document.write('<!DOCTYPE html><head>');
document.write('</head><body><canvas id="the-canvas" ></canvas>'); 
document.write('</body></html>');                     
var canvas : any = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;

// Render PDF page into canvas context
var renderContext = {
  canvasContext: context,
  viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
  console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});

======================================

其他方法

I have also tried easyPDF.js but no luck

https://www.jqueryscript.net/other/Base64-PDF-Viewer-Easy-PDF.html.

Quick help would be appreciated.
javascript pdf base64 blob internet-explorer-11
1个回答
1
投票

您无法在IE浏览器中呈现BASE 64 PDF。

对于IE浏览器,您需要使用msSaveOrOpenBlob()

Navigator.msSaveOrOpenBlob()方法将File或Blob保存到磁盘。该方法的行为与Navigator.msSaveBlob()相同,只是它启用了文件打开选项。

参考:

((1)msSaveOrOpenBlob method

((2)msSaveOrOpenBlob

© www.soinside.com 2019 - 2024. All rights reserved.