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

Question

I have a function in my vue that I use to download files from the firebase cloud storage. The functions look like:

    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'))
    },

As you can see above I am using vue-resource to download the file. 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 as follows:

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

This works fine on my ubuntu chrome and on safari on my phone. But it's not working in chrome on my phone. I don't understand why this is happening. Any help would be appreciated. Thanks

Answer 1

You can check 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.

You said that the reason you're using vue-resource is because

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

You should be able to use an anchor tag. The only reasons (that I'm aware of) that you can't use an anchor tag for downloads are if there's some authentication on your backend that looks at an authorization header for example or you would want to do some custom javascript, like a progress bar for example.

You can bind the href to your path property.

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

Then log the download on click:

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