Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
Sampadaak2613 opened this issue Jan 1, 2020 · 1 comment
Closed

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

Sampadaak2613 opened this issue Jan 1, 2020 · 1 comment

Comments

@Sampadaak2613
Copy link

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

`
//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.
@Snuffleupagus
Copy link
Collaborator

It's not recommended to use Base64 encoding, since as mentioned in the Wiki it's very inefficient memory-wise and because some browsers such as IE11 may even truncate it.

Furthermore, as-is also clearly mentioned in the Wiki support for IE11 is now limited,

Finally, when opening an issue, you need to provide all of the information requested in https://github.com/mozilla/pdf.js/blob/master/.github/ISSUE_TEMPLATE.md and see also https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md (emphasis mine):

If you are developing a custom solution, first check the examples at https://github.com/mozilla/pdf.js#learning and search existing issues. If this does not help, please prepare a short well-documented example that demonstrates the problem and make it accessible online on your website, JS Bin, GitHub, etc. before opening a new issue or contacting us on the IRC channel -- keep in mind that just code snippets won't help us troubleshoot the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@timvandermeij @Snuffleupagus @Sampadaak2613