Issue - Base 64 PDF String is not rendering in IE 11

Question

I want to display Base64 PDF in IE 11
I converted PDF Base 64 format to Blob and tried it to render to IE but it doesn't worked but it worked in Chrome. I am using Sharepoint Framework List View Command Set I tried with iFrame, Object, Embed but still no luck I also tried 1 more approach but it is downloading the pdf instead of opening it in browser new tab. I have opened issue n github as well https://github.com/mozilla/pdf.js/issues/11461 //Code Start

//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.

//Code Start

    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);
});

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

Other Approach

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.

score 1 · Answer 1 · answered Jan 01 '20 at 06:59

1

You cannot render BASE 64 PDF in IE browser.

For IE browser, you need to use msSaveOrOpenBlob().

The Navigator.msSaveOrOpenBlob() method saves the File or Blob to disk. This method behaves in the same way as Navigator.msSaveBlob() except that this enables the file open option.

References:

(1) msSaveOrOpenBlob method

(2) msSaveOrOpenBlob

answered Jan 01 '20 at 06:59

Deepak-MSFT

10,379
1
12
19

Hi there, Thanks for your response. Using msSaveOrOpenBlob(blob), it provides me an option of "Save/save As/Open/Cancel" and using msSaveBlob(blob) provides an option "Save/Save As/Cancel) . But I want to open the file directly in the browser. I don't want to provide "Save/Save As option" . Also, i dont want to prompt that dialog box also. On click of Command Set, I want to directly open that file rather than prompting dialog box.I want to use this approach in "SPFx List View Command Set". I am referring this url https://stackoverflow.com/questions/26161314/displaying-binary-file-pdf-in-ie-11 – Sampada Jan 02 '20 at 08:55
As I already informed you in the answer, It is not possible to do with IE browser. – Deepak-MSFT Jan 02 '20 at 09:00
@Sampada, can you please inform the status of this issue? If the above suggestion gives you an answer, then please try to accept the answer. If you found the solution by yourself then try to post your solution as an answer. If the issue still persists then let us know about the current status for the issue. Thanks for your understanding. – Deepak-MSFT Jan 14 '20 at 07:48

Issue - Base 64 PDF String is not rendering in IE 11

1 Answers1