JSでZipファイルをエクスポートする方法

Writer： tokuyasu　更新日：2025/02/12

こんにちは、デジナーレ福岡オフィスの徳安です。

フロントエンドでエクスポート機能を実装する際、

CSVファイルのエクスポートに関する記事はよく見かけますが、

Zipファイルのエクスポートに関する内容はあまり見かけませんでした。

実際にZipファイルをエクスポートする機会があったため、

今回は　「Zipファイルをエクスポートする方法」　と、

「ファイルの中身が壊れている際に考えられる原因」　についてまとめました。

最初に試したコード

以下は、最初に実装したコード

const { data, headers } = await axios.get("~api url~")
const blob = new Blob([data], { type: "application/zip" })
const fileUrl = window.URL.createObjectURL(blob)

const a = document.createElement("a")
a.href = fileUrl
a.download = "example.zip"
a.click()

const { data, headers } = await axios.get("~api url~")

const blob = new Blob([data], { type: "application/zip" })

const fileUrl = window.URL.createObjectURL(blob)

const a = document.createElement("a")

a.href = fileUrl

a.download = "example.zip"

a.click()

上記のコードでは、Zipファイルのエクスポートはできるが、

解凍すると、ファイルの中身が壊れてしまう。

原因

Zipファイルをエクスポートする際に、ファイルが正しくエクスポートできない主な原因

原因1: Axiosのレスポンスデータ形式が適切でない

デフォルトでは、axios のレスポンスデータは文字列（string）として処理される。

バイナリデータ（Zipファイルなど）を扱う場合、

responseTypeを適切に指定しないとデータが壊れてしまう。

Axios公式 - Response Schema (GitHub)

原因2: Blob作成時のデータ形式エラー

取得したデータが文字列や不適切な形式だと、Blobに変換する際に問題が発生する。

これが原因で、解凍時に壊れたファイルとして認識されることがある。

Blob - Web API _ MDN

原因3: サーバーのレスポンスヘッダーが不正確

サーバーが返すレスポンスの Content-Type ヘッダーが正しく設定されていないと、

ブラウザがデータを正しく処理できないことがある。

その場合はサーバー側で Content-Type: application/zip が返されているか確認する。

Content-Type - HTTP _ MDN

解決策

今回は原因1の、 Axiosのレスポンスデータ形式が適切でないことが原因だったため、

下記のように修正。

const { data } = await axios.get("~api url~", {
  responseType: "arraybuffer",
})
const blob = new Blob([data], { type: "application/zip" })
const fileUrl = window.URL.createObjectURL(blob)

const a = document.createElement("a")
a.href = fileUrl
a.download = "example.zip"
a.click()

const { data } = await axios.get("~api url~", {

responseType: "arraybuffer",

})

const blob = new Blob([data], { type: "application/zip" })

const fileUrl = window.URL.createObjectURL(blob)

const a = document.createElement("a")

a.href = fileUrl

a.download = "example.zip"

a.click()

また、responseType: 'blob'を指定すると、レスポンスを直接Blob形式で取得できる。

下記のコードのように、responseType: 'blob' を指定することで、

取得したデータがすでにBlob形式になっているため、new Blob()の記述が不要になる。

const { data } = await axios.get("~api url~", {
   responseType: "blob",
})
const fileUrl = window.URL.createObjectURL(data)

const a = document.createElement("a")
a.href = fileUrl
a.download = "example.zip"
a.click()