IE 和 javascript：解码（和渲染）b64 编码的 PDF blob 的有效方法

Question

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

1) 调用 Web 服务并接收 PDF blob 的 b64 编码字符串。
2）解码它，创建blob，在新窗口中渲染PDF。弹出窗口拦截器帐户。

我的代码有效。没有什么花哨。它的所有客户端。一切正常，但与其他浏览器相比，IE 运行速度非常慢（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 中将 PDF 发送给您只需大约 46 毫秒。显然它不是多线程的，但它是一个指示。