www.dextsolution.com
DEXTUPLOAD
X5
製品の説明 > Vue.js > ダウンロード

# Vue.js ダウンロード

この文書では、Vue.js 環境で DEXTUploadX5（以下 X5）のダウンロードを接続する基本フローを説明します。ダウンロードは、サーバーに保存されたファイル情報を X5 のリストに仮想ファイルとして登録して構成します。

仮想ファイルの登録

      function handleCreated(id) {
        const dx = DX5.get(id);

        dx.addVirtualFile({
          vindex: "FD0001",
          name: "sample-1.jpg",
          size: 509147,
          downUrl: "/api/download?key=FD0001"
        });
      }

  ダウンロード機能は downUrl が設定された仮想ファイルを基準に動作します。

ダウンロード実行

      function download(flag, multiple = false) {
        DX5.get("dext5")?.download(flag, multiple);
      }

  - AUTO: 既定の対象を使用します。
  - SELECTED: 選択された項目を使用します。
  - CHECKED: チェックされた項目を使用します。
最も単純な例

      <script setup>
      import { ref } from "vue";
      import { DX5, DEXTUploadX5List } from "dextuploadx5-vue";

      const ready = ref(false);

      function handleCreated(id) {
        const dx = DX5.get(id);
        dx.setLimitMultiDownloadSize(300 * 1024 * 1024);
        dx.addVirtualFile({ vindex: "FD0001", name: "sample-1.jpg", size: 509147, downUrl: "/api/download?key=FD0001" });
        ready.value = true;
      }

      function download(flag, multiple = false) {
        DX5.get("dext5")?.download(flag, multiple);
      }
      </script>

      <template>
        <DEXTUploadX5List id="dext5" :style="{ width: '100%', height: '320px' }" @created="handleCreated" />
        <button :disabled="!ready" @click="download('AUTO')">単一ファイルダウンロード</button>
        <button :disabled="!ready" @click="download('AUTO', true)">複数ファイルダウンロード</button>
      </template>

サーバー応答条件

  ダウンロード URL は最終的にファイルデータを応答する必要があります。ブラウザにファイル保存として処理させるには、通常 Content-Disposition: attachment ヘッダーを含めます。

      router.get("/api/download", handleDownload);
      router.head("/api/download", handleDownload);