使用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下载文件。我这样做而不是将链接绑定到锚标记的原因是因为该文件是使用v-for动态呈现的，如下所示：

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

这在我的ubuntu chrome和手机上的safari上都可以正常工作。但这在我的手机上无法在Chrome中使用。我不明白为什么会这样。任何帮助，将不胜感激。谢谢

Answer 1

您可以在Chrome Download Attribute not working中检查download属性的潜在解决方案。您还可以检查您拥有的版本以及它是否支持download属性here。

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

我这样做而不是将链接绑定到锚标记的原因是因为该文件是使用v-for动态呈现的

您应该能够使用定位标记。 （我知道）您不能使用锚标记进行下载的唯一原因是，例如，您的后端是否有一些身份验证（例如，查看授权标头），或者您想要执行一些自定义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
    });
}