質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5716閲覧

javasciprtのaxiosで取得したxlsxのバイナリデータをFileSaver.jsでブラウザからダウンロードしたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/04/22 01:26

編集2021/04/22 05:16

javasciprtのaxiosで取得したxlsxのバイナリデータをFileSaver.jsでGoogle chromeからダウンロードしたいですが、
うまくいかなくて困っています。

サーバー側では実施せず、クライアント側で実施したいです。

下記の記事のことを試してみましたができませんでした。
Downloading excel(.xlsx) with blob and FileSaver.js in vue project getting coruppted

どなたかわかる方がいらっしゃいましたら、ご教授をお願いします。

javascript

1function onExcelExportClicked() { 2 axios({ 3 method: "get", 4 url: "***", 5 responseType: "blob", // blog or arraybuffer? 6 dataType: "binary", 7 params: { id: 1 } 8 }).then((response) => { 9 // ① arraybufferで試したこと 10 // var blob = new Blob([response.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); 11 // FileSaver.saveAs(blob, "test.xlsx"); 12 13 // ② blobで下記はだめだった 14 FileSaver.saveAs(response.data, "test.xlsx"); 15 16 }).catch((response) => { 17 // エラー処理 18 }); 19}

このコードでうまくいき、ファイル名も内容も日本語でも正しく表示されました。
ただし、Excelがそのままオープンしてしまい、FileSaverでブラウザのダウンロード機能が働いてくれなくて困っています。

Edgeではダウンロード機能が働きましたが、Google Chromeで働いていないです。
FileSaverが対応していなさそうなので、他の方法があればよいのですが。

javascript

1function onExcelExportClicked() { 2 axios({ 3 method: "get", 4 url: "***", 5 responseType: "blob", 6 params: { id: 1 } 7 }).then((response) => { 8 var blob = new Blob([response.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); 9 saveAs(blob, "テスト.xlsx"); 10 11 }).catch((response) => { 12 // エラー処理 13 }); 14}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

Google Chromeでは解決しなさそうなので、xlsxを一度zipにして対応しました。

javascirpt

1onExcelExportClicked() { 2 axios({ 3 method: "get", 4 url: "***", 5 responseType: "blob", 6 params: { id: 1 } 7 }).then((response) => { 8 var blob = new Blob([response.data], { type: "application/zip" }); 9 saveAs(blob, "テスト.zip"); 10 11 }).catch((response) => { 12 // エラー処理 13 }); 14},

投稿2021/04/22 06:05

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

Blobのtypeを変えてみるとかどうでしょう。

【ファイルを強制ダウンロードさせるヘッダについて調べた - 技術メモなど】
https://shkn.hatenablog.com/entry/2019/03/22/235503

投稿2021/04/22 05:18

kei344

総合スコア69398

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/04/22 05:35

ご回答ありがとうございます。 記事より、下記のヘッダを試してみましたが、だめでした。 Content-Type: application/force-download Content-Type: application/octet-stream Content-Disposition: attachment 去年ぐらいからGoogle chromeでxlsxをダウンロードできなくなったような記事を見かけたので、 一度zipにしてからダウンロードするなどを検討してみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問