如何在Chrome iOS上打开Blob URL

Question

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

这段代码可以在除iOS Chrome和IE之外的所有浏览器上运行（当然可以解决IE）。但是在Chrome iOS中，窗口未重定向到正确的URL（或者至少与其他浏览器中的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，但它也没有起作用。

- daerin

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

- daerin

---

由于某种原因，这段代码在 Chrome IOS 上对 PDF 有效，但对于 epub 却无效。其中 epub 的应用类型为：blob = new Blob([oReq.response], {type: 'application/epub+zip'}); 在 Safari 中，这段代码对两种类型都有效，但在 Chrome 中却不行。 :( - nrshapiro

哦，我的生活中的这一部分被称为幸福。 - Jhonycage

大家好，我需要在Chrome IOS中管理一个归档文件，这可行吗？我尝试创建一个Blob，如 new Blob([........], {type: 'application/zip'}); 但代码无法工作。 - ottis79

在iOS中是否可以在新窗口中打开文件？ - Rutul Patel

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

- keano

---

嗨，Keano 你的解决方案在Firefox上运行良好，但是当我尝试在Chrome上使用时似乎无法工作。它只显示URL，但PDF未加载。你能否指导我如何解决这个问题？ 提前致谢。 - Girish Vadhel

嗨，我在Firefox和Chrome中使用FileReader.readAsDataURL和PDF流正常工作。然而，最近几天或几周，用户向我报告在Chrome或Vivaldi（相同的引擎）上无法正常工作，但在Firefox上仍然有效。可能是Chromium的回退问题吗？ - Floyd

Answer 3

这些解决方案在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)

- dǝɥɔS ʇoıןןƎ

Answer 4

我通过将 content-type 从 application/json 更改为 application/octet-stream 来解决了问题。我的 xlsx 文件被下载为 json。

@PostMapping(value = "/export", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)

- Arjun