使用 vue.$http 下载文件无法在 chrome 移动设备上运行

Question

我的 vue 中有一个功能，用于从 firebase 云存储下载文件。函数如下所示：

    forceFileDownload(response, issue, index){
        const increment = firebase.firestore.FieldValue.increment(1)
        db.collection('issues').doc(this.ids[index]).update({
            downloads: increment
        })
        var extension = mimeTypes.extension(response.headers['map']['content-type'][0]);


        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', issue['name']+"."+extension) //or any other extension
        document.body.appendChild(link)
        link.click()
    },
    downloadWithVueResource(issue, index) {
        this.$http({
            method: 'get',
            url: issue['path'],
            responseType: 'arraybuffer'
        })
        .then(response => {
            this.forceFileDownload(response, issue, index)  
        })
        .catch(() => console.log('error occured'))
    },

正如您在上面看到的，我正在使用 vue-resource 下载文件。我这样做而不是将 link 绑定到锚标记的原因是因为文件是使用 v-for 动态呈现的，如下所示：

<div v-for="(issue, index) in issues" :key="index">
    <button @click="downloadWithVueResource(issue, index)">Download</button>
</div>

这在我的 ubuntu chrome 和我的 phone 的 safari 上运行良好。但它在我的 phone 上的 chrome 中不起作用。我不明白为什么会这样。任何帮助，将不胜感激。谢谢

Answer 1

您可以查看Chrome Download Attribute not working for potential solutions for the download attribute. You can also check what version you have and whether it supports the download attribute here。

你说你使用 vue-resource 的原因是因为

The reason I am doing this instead of binding the link to an anchor tag is because the file is dynamically rendered using a v-for

您应该可以使用锚标记。您不能使用锚标记进行下载的唯一原因（据我所知）是，如果您的后端有一些验证，例如查看授权 header，或者您想要做一些自定义javascript，比如进度条。

您可以将 href 绑定到您的 path 属性。

<div v-for="(issue, index) in issues" :key="index">
    <a :href="issue.path" @click="logDownload(issue, index)">Download</a>
</div>

然后点击登录下载：

logDownload(issue, index)
{
    const increment = firebase.firestore.FieldValue.increment(1);
    db.collection('issues').doc(this.ids[index]).update({
        downloads: increment
    });
}

使用 vue.$http 下载文件无法在 chrome 移动设备上运行

Downloading files using vue.$http not working on chrome mobile

google-chrome

vue.js

vue-resource