javascript - example - mostrar pdf en base64
IE y javascript: forma eficiente de decodificar(y representar) PDF blob b64-encoded (1)
Realmente no veo ninguna lentitud, y este plunkr ejecutado en IE, (usando una actualización en la solución original "Jeremy") funciona bien:
Hubo una actualización en la publicación original que mejora aún más la respuesta:
function base64toBlob(base64Data, contentType, sliceSize) {
var byteCharacters,
byteArray,
byteNumbers,
blobData,
blob;
contentType = contentType || '''';
byteCharacters = atob(base64Data);
// Get blob data sliced or not
blobData = sliceSize ? getBlobDataSliced() : getBlobDataAtOnce();
blob = new Blob(blobData, { type: contentType });
return blob;
/*
* Get blob data in one slice.
* => Fast in IE on new Blob(...)
*/
function getBlobDataAtOnce() {
byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
byteArray = new Uint8Array(byteNumbers);
return [byteArray];
}
/*
* Get blob data in multiple slices.
* => Slow in IE on new Blob(...)
*/
function getBlobDataSliced() {
var slice,
byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
slice = byteCharacters.slice(offset, offset + sliceSize);
byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
byteArray = new Uint8Array(byteNumbers);
// Add slice
byteArrays.push(byteArray);
}
return byteArrays;
}
}
De la respuesta aquí:
¿El plunkr es lento para ti? ¿Puedes poner algo de registro para entender qué llamada es realmente lenta? Ponga un cronómetro y registre cada línea. en la ruta IE. ¿Cuál está reportando "lentitud"?
Actualización En el plunkr, he puesto un temporizador muy simple, muestra que hay solo 46ms de tiempo aproximado para obtener el PDF en IE11. Obviamente no es multiproceso, pero es una indicación.
Debe haber una manera de hacer esto de manera más eficiente. Lo que estoy haciendo es conceptualmente muy simple:
1) Llamar a un servicio web y recibir una cadena codificada en b64 de un blob de PDF.
2) Decodifícalo, crea blob, renderiza PDF en una nueva ventana. Cuenta para el bloqueador de pop-ups.
Mi código funciona Nada sofisticado. Es todo del lado del cliente. Todo funciona, pero IE funciona SUPER lento en comparación con los otros navegadores (IE 11 frente a Chrome / Firefox / Safari).
A la luz de esto, estoy seguro de que podría hacer esto de manera más eficiente. ¿Algún consejo sobre cómo acelerar esto para IE 11?
Nota: Estoy usando la función b64toBlob de Jeremy (gracias Jeremy).
Parte I: cosas modales
var box = new SimpleDialog(Dialogs.getNextId(), false);
box.title = "Fetching PDF";
box.isMovable = false;
box.extraClass = "";
box.width = 400;
box.isModal = true;
box.createDialog();
window.parent.box = box;
box.setContentInnerHTML(''<p>Please wait....</p>'');
box.show();
Parte II: llamar al servicio externo, recibir cadena codificada en b64
setTimeout(function(){
var response = ... ; //do callout... get data
var statusCode = ...; //parse from response
var b64Data = ... ; //parse from response
if(statusCode == 200) {
//Account for IE
if (navigator.appVersion.toString().indexOf(''.NET'') > 0) {
var blob = b64toBlob(b64Data, "application/pdf");
var fileURL = URL.createObjectURL(blob);
window.navigator.msSaveOrOpenBlob(blob, "theFile.pdf");
window.parent.box.cancel();
} else {
var blob = b64toBlob(b64Data, "application/pdf");
var fileURL = URL.createObjectURL(blob);
var pdfWin = window.open(fileURL,"_blank","width=1000,height=800");
if(!pdfWin) {
box.setTitle("Success: PDF has been retrieved");
box.setContentInnerHTML("<p align=''left''></p><p align=''left''>A popup blocker was detected. The PDF will not open automatically.<br /><br /></p><p align=''left''><a onclick=''window.parent.box.cancel();'' target=''_blank'' href=''"+fileURL +"'' >Click here to view .pdf</a><br /><br /></p><p align=''center''><button class=''btn'' onclick=''window.parent.box.cancel(); return false;''>Cancel</button></p>");
} else {
window.parent.box.cancel();
}
}
} else {
box.setTitle("Error fetching PDF");
box.setContentInnerHTML("<p align=''left''><img src=''/img/msg_icons/warning32.png'' style=''margin:0 5px;''/></p><p align=''left''>Unable to retrieve PDF.</p><p align=''center''><button class=''btn'' onclick=''window.parent.box.cancel(); return false;''>OK</button></p>");
}
},200);