Vue フォーム処理でフォームフィールドのファイルダウンロードを実装する方法

Vue.js は、ユーザーインターフェイスを構築するための人気のある JavaScript フレームワークです。Vue アプリケーションでは、フォーム操作を処理する必要があることが多く、一般的な要件の 1 つはファイルのダウンロードを実装することです。以下では、Vue のフォーム処理でフォームフィールドのファイルダウンロードを実現し、全員でコミュニケーションできるようにする方法を説明します。

1. HTML の a タグを使用してファイルをダウンロードする
最も簡単な方法は、HTML の a タグを使用し、その href 属性をファイルのリンクアドレスとして設定し、a タグをクリックしてファイルをダウンロードすることです。

HTMLコード:

<template>
  <div>
    <a :href="fileUrl" download>下载文件</a>
  </div>
</template>

Vue コード:

<script>
export default {
  data() {
    return {
      fileUrl: 'http://baidu.com/file_test.pdf'  // 文件的链接地址
    };
  }
};
</script>

上記のコード例では、[ファイルのダウンロード] リンクをクリックして、file_test.pdf という名前のファイルをダウンロードします。

2. Fetch API を使用してファイルをダウンロードする
バックエンドインターフェイスを通じてファイルのダウンロードリンクを取得する必要がある場合は、Fetch API を使用してファイルをダウンロードできます。

Vue コード:

<script>
export default {
  methods: {
    downloadFile() {
      fetch('http://test.com/api/download', {
        method: 'GET',
        responseType: 'blob'  // 声明返回数据类型为二进制数据
      })
        .then(response => response.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(new Blob([blob]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'file.pdf');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
    }
  }
};
</script>

HTMLコード:

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

上記のコード例では、「ファイルのダウンロード」ボタンをクリックした後、Vue コンポーネントはバックエンドインターフェイスからファイルを要求し、バイナリデータを取得した後に Blob オブジェクトを作成し、タグを動的に作成して、Blob の URL を割り当てます。 a タグの href 属性に object を設定し、 download 属性にダウンロードするファイルの名前を設定して、 a タグのクリックをシミュレートしてダウンロードします。

3. axios を使用してファイルをダウンロードする
Vue アプリケーションの HTTP リクエストライブラリとして axios を使用している場合、axios の特性を利用してファイルのダウンロードを実現できます。

Vue コード:

<script>
import axios from 'axios';

export default {
  methods: {
    downloadFile() {
      axios({
        url: 'http://test.com/api/download',
        method: 'GET',
        responseType: 'blob'  // 声明返回数据类型为二进制数据
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pdf');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    }
  }
};
</script>

HTMLコード:

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

上記のコード例では、Vue コンポーネントのメソッドを呼び出してaxiosGET リクエストを送信し、返されたデータをバイナリデータ型に設定します。次に、a タグを動的に作成し、返されたバイナリデータを Blob オブジェクトとして作成し、それを a タグの href 属性に割り当てます。最後に、ダウンロードするラベルをクリックすることをシミュレートします。

上記は、Vue フォーム処理でフォームフィールドのファイルダウンロードを実現する方法であり、HTML タグを使用する、Fetch API を使用する、axios を使用する 3 つの実装方法を提供します。特定のリクエスト方法とバックエンドインターフェイスから返されるデータ形式に応じて、ファイルのダウンロードを実現するために最適な方法を選択します。この記事が、Vue アプリケーションでファイルのダウンロードを処理するニーズに役立つことを願っています。

Vue フォーム処理でフォームフィールドのファイルダウンロードを実装する方法

おすすめ