Загрузка файлов с помощью vue.$http не работает на хромированном мобильном телефоне

У меня есть функция в моем 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 и на сафари на моем телефоне. Но он не работает в хроме на моем телефоне. Я не понимаю, почему это происходит. Любая помощь будет оценена по достоинству. Спасибо


google-chrome vue.js vue-resource
person Abdulaziz Yesuf    schedule 04.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете проверить атрибут Chrome Download не работает для возможных решений для атрибута download. Вы также можете проверить, какая у вас версия и поддерживает ли она атрибут download здесь.

Вы сказали, что причина, по которой вы используете 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
    });
}
person Shoejep    schedule 04.05.2020
comment
Единственная причина, по которой я не привязывал URL к href, заключалась в том, что я пытался привязать issue['path'], и это не сработало. Большое спасибо - person Abdulaziz Yesuf; 04.05.2020