WEB制作、マーケティングに関する情報をお届けします。

ウェブサイト上では図面やカタログなどたくさんのファイルなどをダウンロードができますがファイルサイズが大きくなることもあります。
このファイルサイズはモバイルユーザーに対しては特に配慮する必要があります。
通信量や大きすぎる場合はダウンロード時間がかかり途中で止まってしまったりする場合もあります。
上記を解消する方法としてファイルサイズを表示してあげるとモバイル回線でダウンロードができそうかどうかをユーザーが判断することができます。

今回はjavascriptでダウンロード先のファイルの容量、さらにファイル名を取得する方法を紹介します。

コード紹介

<ul id="file-list">
  <li><a href="file/IT技術の進歩(chatGPTにて生成).pdf" target="_blank">ファイル情報取得中...</a></li>
  <li><a href="file/日本の経済動向(chatGPTにて生成).docx" target="_blank">ファイル情報取得中...</a></li>
</ul>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const links = document.querySelectorAll("#file-list a"); 

    links.forEach(link => {
      const url = link.getAttribute("href");

      if (url.startsWith("file/")) { // `file/`
        fetch(url, { method: "HEAD" }) // `HEAD` 
          .then(response => {
            if (response.ok) {
              const fileName = decodeURIComponent(url.split("/").pop()); 
              const fileSize = response.headers.get("content-length");

              if (fileSize) {
                const fileSizeKB = (fileSize / 1024).toFixed(1) + " KB"; 
                link.textContent = `${fileName} (${fileSizeKB})`; 
                link.setAttribute("download", fileName); // `download` 
              } else {
                link.textContent = `${fileName} (サイズ不明)`;
              }
            } else {
              link.textContent = "ファイル取得エラー";
            }
          })
          .catch(() => {
            link.textContent = "ファイル情報取得失敗";
          });
      }
    });
  });
</script>

コードを解説

HTMLを解説

ダウンロードさせるファイルのリストにJavascriptで発火させるためのIDを振っておきます。

<ul id="file-list">
  <li><a href="file/IT技術の進歩(chatGPTにて生成).pdf" target="_blank">ファイル情報取得中...</a></li>
  <li><a href="file/日本の経済動向(chatGPTにて生成).docx" target="_blank">ファイル情報取得中...</a></li>
</ul>

Javascript

読み込みが終わってから実行します。

document.addEventListener("DOMContentLoaded", function() {});

idを振っていたリストタグ内のリンクを全て取得します。

const links = document.querySelectorAll("#file-list a");

全てのリンクに対してループで処理を行います。

links.forEach(link => {
}

フォルダ内のファイルのみを対象に処理を行います。

if (url.startsWith("file/")) {
}

HTTP HEADメソッドを使用してサーバーサイドにリクエストをかけて情報を取得します。
成功した場合は、処理を実行、取得できなかった場合はエラーを出力します。

fetch(url, { method: "HEAD" }) 
.then(response => {
  if (response.ok) {
  } else {
  link.textContent = "ファイル取得エラー";
 }
})
.catch(() => {
   link.textContent = "ファイル情報取得失敗";
});

次に情報を取得できた場合の処理を書きます。
日本語の文字化けを防ぐためにデコードします。

const fileName = decodeURIComponent(url.split("/").pop());

content-lengthからファイルサイズを取得します。

const fileSize = response.headers.get("content-length");

ファイルサイズを取得できた場合とできなかった場合で分岐をかけます。

if (fileSize) {
} else {
  link.textContent = `${fileName} (サイズ不明)`;
}

取得できた場合の処理を書きます。
取得したファイルサイズをkb単位に変換

const fileSizeKB = (fileSize / 1024).toFixed(1) + " KB";

ファイル名をHTMLにセットし、リンクにダウンロード属性を付与します。

link.textContent = `${fileName} (${fileSizeKB})`;
link.setAttribute("download", fileName);

以上で、実装完了です。

まとめ

以上、『Javascriptでダウンロードするファイルのファイル名とファイルサイズを取得する方法』でした。
ワードプレスであればファイル取得に関するコマンドがありますが静的ファイルなどの場合はこちらの記事を参考にしてみてください。