web-dev-qa-db-ja.com

Vue / HTML / JSダウンロードタグを使用してブラウザにファイルをダウンロードする方法

私の質問はVUE=とif VUEにもデフォルトのメソッドを防ぐ方法があります。

この質問は、HTML 5の「ダウンロード」とVUEの：hrefのバインド、および新しいタブでファイルを開くデフォルトのブラウザー動作を防ぐことができない理由です。

期待される動作：ファイルをブラウザーにダウンロードする

実際の動作：ファイルを新しいタブで開きます

例外：画像、pdf、ブラウザ互換ファイルのみが新しいタブで開かれ、.exeなどの他のファイルは通常どおりダウンロードされます-これはなぜですか、htmlでこの動作を変更できますか？

Target = "_ blank"を追加しても問題は解決しません

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

上記のリンクをクリックすると、ファイルが新しいブラウザタブで開かれます。このデフォルトの動作を防止し、クリック時にダウンロードを強制する必要があります。 HTML 5タグ「ダウンロード」は、この問題を解決するために動作しないようです。

Chromeは最近、クロスドメインダウンロードで機能するダウンロードタグフォームを廃止しました。 vueこのデフォルトを防ぐための修飾子がありますか？javascriptまたはhtmlでファイルをダウンロードする他の方法はありますか？

提案された解決策の1つは、URLをarrayBufferとして読み取り、DOMで新しいblobを作成し、アンカー要素を作成してクリックすることです。しかし、ファイルのダウンロードを強制するのはハッキングのようです。

私は彼らがURLからファイルをダウンロードするためのよりクリーンなソリューションでなければならないと確信しています、それは簡単なソリューションを望んで、些細な問題です。

ありがとう。

html5vue.jsarraybuffer
8
Ricky-U

CORSの問題を回避するためのハッキングの少ない方法は、XHRリクエストを介してファイルを取得し、そのファイルをblobとして提供することです。

テンプレート

<a
  :href="item.url"
  v-text="item.label"
  @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を使用しましたが、必要なlibを使用できるはずです。また、ブロブのMIMEタイプとダウンロードの名前の両方が、単純化のために固定されていることに注意してください。

13
Lars Beck