Question

我想在浏览器窗口中打开Blob对象。

此代码无处不在，但iOS Chrome（当然IE也可以解决IE）。窗口未重定向到URL（这是正确的或至少与其他浏览器相同）。 Chrome iOS是否有任何已知的解决方法？

var blob = new window.Blob(['Hello, world!'], {type: 'text/plain;charset=utf-8'});
window.URL = window.URL || window.webkitURL;
var url = window.URL.createObjectURL(blob);
window.location.href = url;

我已尝试<a href="{blobUrl}>代替window.location.href，但它也无效。

Answer 1

FileReader解决了我的问题。

var reader = new FileReader();
var out = new Blob([this.response], {type: 'application/pdf'});
reader.onload = function(e){
  window.location.href = reader.result;
}
reader.readAsDataURL(out);

Answer 2

FileReader.readAsBinaryString方法已被弃用。

有点晚了，但我使用FileReader.readAsDataURL做了类似的事情 - 产生了一个dataUrl。我使用AngularJS $ http服务来调用API来创建pdf。希望这会有所帮助，见下文：

$http.post('/api/pdf', {id: '123'}, {responseType: 'arraybuffer'})
    .success(function (response) {
        var blob = new Blob([response.data], {type: 'application/pdf'});
        var reader = new FileReader();
        reader.onloadend = function(e) {
             $window.open(reader.result);
        }
        reader.readAsDataURL(blob);
    });

Answer 3

我通过将内容类型从application / json更改为application / octet-stream修复了它。我的xlsx文件以json格式下载。

@PostMapping（值=“ / export”，产生= MediaType.APPLICATION_OCTET_STREAM_VALUE）

Answer 4

这些解决方案都不适合我在 Safari 上使用。我必须在页面上创建一个链接。

const downloadBlob = (fileName, blob) => {
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.target = '_blank';
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
}

const blob = new Blob([data], { type: 'video/mp4' });
downloadBlob('myfile.mp4', blob)

如何在Chrome iOS上打开Blob网址

4 个答案: