将 Blob 转换为文件并在浏览器上预览（不下载）答案

【问题标题】：Convert Blob to File and preview on browser (not download)将 Blob 转换为文件并在浏览器上预览（不下载）
【发布时间】：2019-01-18 15:16:04
【问题描述】：

我正在从 web 服务调用中获取 Blob 内容，并且要求在浏览器中显示该文件。

我有什么：

Blob 文件 (fileBlob)

我得到的 blob 参数作为响应并将其发送回“回调”中的 javascript 方法。我正在尝试将 blob 转换为相应的文件格式并在浏览器上查看（除非最终用户想要，否则我不想下载）。

我在下面尝试过：

    var callback1 = { 
        onSuccess: function(e){ //e is the blob content I am receiving
            alert('Receiving file from SF:---> ' + e);
            var file = new File([e], "uploaded_file.pdf", { type: "application/pdf", lastModified: Date.now() });
            //document.body.append(file);
            //var blob=new Blob([e], {type:"application/pdf"});
            var link=document.createElement('a');
            //link.href=window.URL.createObjectURL(e);
            link.download=file;
            link.click();                

        }, onFailure: function(error){
            alert(error);   
        } 
    };

更新

更新 2（将响应视为 base64 后）

【问题讨论】：

你说 fileBlob、contentType 和 fileName 是你得到的三个“参数”......但是，你的代码似乎没有引用 any那些。也许您需要发布您遇到问题的代码，而不是一些看起来像是在尝试下载而不是预览的随机代码
@JaromandaX：编辑问题以反映我只收到来自 web 服务的 blob。谢谢
对 - 所以你认为 blob 也是问题的重要补充？
我添加了这个，因为 Krishna 让我添加（来自下面的回复）

标签： javascript pdf blob

【解决方案1】：

利用 iframe 显示 pdf 文件，函数看起来像这样，带有 blob 响应和文件名。

   function openPDF(resData, fileName) {
            var ieEDGE = navigator.userAgent.match(/Edge/g);
            var ie = navigator.userAgent.match(/.NET/g); // IE 11+
            var oldIE = navigator.userAgent.match(/MSIE/g); 
            var bytes = new Uint8Array(resData); //use this if data is raw bytes else directly pass resData
            var blob = new window.Blob([bytes], { type: 'application/pdf' });

            if (ie || oldIE || ieEDGE) {
               window.navigator.msSaveBlob(blob, fileName);
            }
            else {
               var fileURL = URL.createObjectURL(blob);
               var win = window.open();
               win.document.write('<iframe src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')

            }
        }

【讨论】：

感谢克里希纳。这似乎可行，但一旦加载 pdf，浏览器选项卡就会刷新到主页。我尝试在您的方法中添加return false，但这也没有帮助，知道吗？
我已经更新了代码，用 Uint8Array 丰富了你的 blob 数据。如果您仍有问题，请分享您的 Blob 数据样本。
我得到“无法读取文档 null 的属性”，然后将最后一行更改为 window,document.write 而不是 win.document.write。现在，在我收到回复后，选项卡以 pdf 格式打开，但给出了错误 Failed to load pdf document 更新了我的问题，其中包含错误屏幕截图以及我从服务接收到的 blob
尝试新的更新代码，它应该可以工作我怀疑你的响应是原始字节数组。首先用 var bytes = new Uint8Array(resData); 丰富你的数据
您的回复似乎是 base64 格式，因此您可以尝试 win.document.write('') ;