javascript - example - mostrar pdf en base64

IE y javascript: forma eficiente de decodificar(y representar) PDF blob b64-encoded

Question

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

Answer 1

Realmente no veo ninguna lentitud, y este plunkr ejecutado en IE, (usando una actualización en la solución original "Jeremy") funciona bien:

Muestra pdf

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í:

respuesta de martins

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