Vue / HTML / JS, как загрузить файл в браузер, используя тег загрузки

Question

Этот вопрос отличается от другого предоставленного ответа, потому что мой вопрос сосредоточен на VUE и если VUE также имеет способ предотвратить метод по умолчанию.

Этот вопрос более специфичен для «загрузки» HTML 5 вместе с привязкой VUE для: href и почему он не работает для предотвращения поведения браузера по умолчанию при открытии файла в новой вкладке.

Ожидаемое поведение: загрузка файла в браузер

Фактическое поведение: открывает файл в новой вкладке

Исключение: в новой вкладке открываются только изображения, файлы, совместимые с PDF и браузером.другие файлы, такие как .exe, загружаются как обычно - Почему это можно изменить в html?

Добавление target = "_ blank" не решает проблему

<a :href="downloadById(item.url)" download>Download</a>

Когданажата ссылка выше, файл открывается в новой вкладке браузера, мне нужно запретить это поведение по умолчанию и вызвать загрузку при нажатии.Предполагается, что HTML-тег «download», чтобы решить эту проблему, не работает.

Chrome недавно устарел в форме тегов загрузки, работающей с междоменными загрузками.У vue есть модификатор, чтобы предотвратить это по умолчанию?Есть ли другие способы загрузить файл в javascript или html?

Одним из предлагаемых решений является чтение URL-адреса как arrayBuffer, а затем создание нового большого двоичного объекта в DOM, а затем создание элемента привязки ищелкните по нему .. Но это кажется хакерским, чтобы принудительно загрузить файл.

Я уверен, что это должно быть более чистое решение для загрузки файла из URL, это тривиальная проблема, в надежде на простое решение.

Спасибо.

Answer 1

Менее хакерский способ избежать проблем с CORS - получить файл с помощью XHR-запроса и предоставить файл в виде большого двоичного объекта:

Шаблон

<a
  :href="item.url"
  v-text="Download"
  @click.prevent="downloadItem(item.url)" />

Vue

methods: {
  downloadItem (url) {
    Axios.get(url, { responseType: 'blob' })
      .then(({ data }) => {
        const blob = new Blob([data], { type: 'application/pdf' })
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'Download.pdf'
        link.click()
      .catch(error => console.error(error))
    })
  }
}

Я использовал Axios для моего примера, но вы должны иметь возможность использовать любую библиотеку, какую захотите.Также обратите внимание, что и тип mime блоба, и имя загружаемого файла для простоты запрограммированы.