如何在 Javascript 中从 Chrome iOS 下载 blob 文件？答案

【问题标题】：How to download a blob file from Chrome iOS in Javascript?如何在 Javascript 中从 Chrome iOS 下载 blob 文件？
【发布时间】：2015-05-21 23:12:20
【问题描述】：

如何在 Javascript 中从 Chrome iOS 下载 blob 文件？

我正在从 iOS 下载文件（pdf、excel、txt、png）。 iOS 没有文件系统，这对下载来说是个问题。如果需要，我创建一个代码，根据操作系统和导航器下载 blob 文件。它在桌面（Chrome 和 IE 的最新版本）、移动 Android（Chrome、本机导航器）和 iOS iPad2 (Safari) 上运行良好。

现在，Chrome iOS 应该像 Safari 移动版，但算法不起作用，Chrome iO 通过在新标签页中打开来下载文件，但页面是空的。

我创建自己的 blob 来创建 downloadUrl。

这是下载功能的一部分。

    var URL = window.URL || window.webkitURL;
    var downloadUrl = URL.createObjectURL(iobBLOB);
    var newWindow = null;   

    if (typeof a.download === 'undefined') {
            var newWindow = null;
            newWindow = window.open(downloadUrl, '_blank');
            setTimeout(function() {
                newWindow.document.title = isbFilename;
            }, 10);
    }

更多详情

在 iPad 2 和 iPhone 4 上调试

尝试下载 Excel、pdf、txt 和 Png 文件。

设备没有文件系统。

感谢您帮助我...如果您需要更多信息，请告诉我，这是我的第一个问题。

【问题讨论】：

你可以使用我的下载脚本下载blob：github.com/rndme/downloaddownload(iobBLOB, "file.ext", "text/plain")
我使用锚点完成了 blob 下载。创建锚点，将href设置为ObjectURL数据，将download设置为文件名，并触发click()。有帮助吗？
@dandavis 感谢 dan，但您的代码无法在没有文件系统的设备上运行
我在ipad上测试过...我认为你需要iOS7.1+，所以你可能需要更新iPad。（只是猜测）
您能帮我写下从 iPad 上的 Chrome 下载的代码吗？我正在实施 download.min.js 但它在我的设备上不起作用。我刚刚将 de iPad 更新到 iOS 8.2

标签： javascript ios download blob chrome-ios

【解决方案1】：

经过搜索，该解决方案似乎在 ChromeiOS 和 Safari 上运行良好。我在这篇文章“https://stackoverflow.com/questions/24485077/how-to-open-blob-url-on-chrome-ios?answertab=oldest#tab-top”中找到了它。这解决了我的问题：

//isbContentType i.e. 'text/plain'
//isbFilename i.e. 'This is a title'
 var reader = new FileReader();
    reader.onload = function(e) {
       var bdata = btoa(reader.result);
       var datauri = 'data:' + isbContentType + ';base64,' + bdata;
       window.open(datauri);
       newWindow = setTimeout(function() {
           newWindow.document.title = isbFilename;
       }, 10);
    };
    reader.readAsBinaryString(iobBLOB);

我相信有办法下载 blob 文件，但事实并非如此。还是谢谢

【讨论】：

isbContentType 是什么？ isbFilename?请为您的解决方案提供更详细的说明。
isbContentType 是文件类型，即'text/plain'。 isbFilename 是文件的名称，即'Journey into the wild'

【解决方案2】：

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

// var blob = new Blob([response.data], { type: "application/pdf" });
var fileURL = URL.createObjectURL(out);
var a = document.createElement('a');
a.href = fileURL;
a.target = '_blank';
a.download = 'lkn_' + id + '.pdf';
document.body.appendChild(a);
a.click();

【讨论】：

【解决方案3】：

我们有一个 wordpress 网站，在下载 csv 文件的回调中，我们必须为 ipad/pod/phone 特定的下载添加以下内容；

if(stristr($_SERVER['HTTP_USER_AGENT'], 'ipad') OR stristr($_SERVER['HTTP_USER_AGENT'], 'iphone') OR stristr($_SERVER['HTTP_USER_AGENT'], 'ipod')) {
      header("Content-Type: application/octet-stream");   
} else {
      header('Content-Type: application/vnd.ms-excel');   
}

【讨论】：