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);