单击 Meteor 中的链接时下载文件答案

【问题标题】：Download file when clicking on the link in Meteor单击 Meteor 中的链接时下载文件
【发布时间】：2015-10-08 22:11:08
【问题描述】：

我使用https://github.com/CollectionFS/Meteor-CollectionFS 将mp3 文件存储在我的服务器上。我想让用户只需单击链接即可下载文件，并且“下载”属性在这里应该可以正常工作，即：

 <a href="/cfs/files/audio/ubcq5Xev4mkQ3sv5t/file.mp3" download="file.mp3">download</a>

问题是文件正在浏览器中打开/播放，而不是刚刚开始下载到磁盘。

正如这里所讨论的https://code.google.com/p/chromium/issues/detail?id=373182我来宾这是因为跨源请求，所以我尝试按照建议的解决方案并使用此链接

<a href="#" download data-url="{{url}}" type="button" class="btn btn-default">download</a>

使用这个处理程序

Template.podcastItemSummary.events({
    'click a.btn-download': function(event, instance){
        event.preventDefault();            
        downloadFile($(event.currentTarget).attr('data-url'));
    }
});

if (Meteor.isClient) {
    downloadFile = function(sUrl){
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', sUrl, true);
        xhr.responseType = 'blob';
        xhr.onload = function(e) {
            var res = xhr.response;               
            var blob = new Blob([res], {type:"audio/mp3"});
            url = window.URL.createObjectURL(blob);
            var a = document.createElement("a");
            a.style.display = "none";
            a.href = url;            
            a.download = sUrl.split('/').pop();
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        };
        xhr.send();
    }
}

现在文件已按预期下载，但对于大文件，“单击”和开始下载之间存在奇怪的延迟。有更好的解决方案吗？

【问题讨论】：

你不使用流星内置HTTP.get有什么原因吗？另外，这与跨域无关，因为它不是跨域的。它甚至不是一个绝对 URL！它是您自己的服务器的相对 URL。不，你的问题与跨域无关，只是下载一个 mp3 而不是播放它。我希望这里有关于这个问题的一些答案，不是吗？也许这可以帮助：stackoverflow.com/questions/3499773/…
ps：延迟来自于下载出现在浏览器中之前发生的下载，因为真正的下载是在 javascript 中完成的，而您所说的下载（用户看到的）只是提取 Blob从浏览器作为一个文件（因此我们应该超快的对比）。
继续@Christian Fritz 的评论，在浏览器获取要下载的文件对象之前，整个下载都在 js 中进行。这甚至可能不适用于 iOS 或 Safari。
试试href="{{url}}&download"。它对我有用
@ZuzEL 谢谢！就是这样！我希望接受您的回复，但由于您添加了评论而不是回答，因此无法执行此操作。

标签： javascript meteor download

【解决方案1】：

正如@ZuzEL 所写，解决方案是用?download 结束链接

<a href="/cfs/files/audio/ubcq5Xev4mkQ3sv5t/file.mp3?download" target="_parent">download</a>

我将 url 存储在一个单独的集合中，现在我意识到我应该只存储文件的 id (ubcq5Xev4mkQ3sv5t)，因为有一个设计解决方案https://github.com/CollectionFS/Meteor-CollectionFS/wiki/How-to:-Provide-a-download-button

Template.fileList.helpers({
  files: function () {
    return Files.find();
  }
});

和模板

<template name="fileList">
  <div class="fileList">
    {{#each files}}
      <div class="file">
        <strong>{{this.name}}</strong> <a href="{{this.url download=true}}" class="btn btn-primary" target="_parent">Download</a>
      </div>
    {{/each}}
  </div>
</template>

它会生成一个包含令牌的 url

<a href="/cfs/files/audio/WdBfMy2gSLRwx3XKw/file.mp3?token=eyJhdXRoVG9rZW4iOiJ2bHd6WGNoT3ktUzNoOTJUUHJnLXFMZDd6OE9yS3NHMFNkaGMwbTRKWVVUIn0%3D&amp;download=true" target="_parent">Download</a>

【讨论】：

+1。我不知道{{this.url download=true}}。不记得他们是否记录了这样的事情