javascript - IE 和 javascript : efficient way to decode (and render) b64-encoded PDF blob

Question

必须有一种方法可以更有效地做到这一点。我所做的在概念上非常简单:

1) 调用网络服务并接收 PDF blob 的 b64 编码字符串。
2) 解码，创建 blob，在新窗口中呈现 PDF。考虑弹出窗口拦截器。

我的代码有效。没有什么花哨。它的所有客户端。一切正常，但与其他浏览器相比，IE 运行速度 super 慢(IE 11 与当前的 Chrome/Firefox/Safari)。

鉴于此，我确信我可以更有效地做到这一点。关于如何为 IE 11 加快速度的任何提示？

注意:我使用的是 Jeremy 的 b64toBlob函数(感谢 Jeremy)。

第一部分:模态内容

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

第二部分:调用外部服务，接收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

我真的没有看到任何缓慢，这个 plunkr 在 IE 中运行，(使用对原始“Jeremy”解决方案的更新)工作得很好:

Sample pdf

原始帖子中有一个更新，进一步改进了答案:

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

来自这里的答案:

martinoss answer

plunkr 对你来说很慢吗？您可以输入一些日志记录以了解哪个调用实际上很慢吗？放入计时器并记录每一行。在IE路线上。哪个报告“缓慢”？

更新 在 plunkr 上，我放了一个非常简单的计时器，它显示在 IE11 中只需要大约 46 毫秒就可以将 PDF 发送给您。明明不是多线程，但也算是一种暗示。