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

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

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

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

2回答

11027閲覧

JavaScriptでのダウンロード処理が,Chromeだとうまくいかない

knyk

総合スコア17

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2018/09/22 09:30

編集2018/09/22 09:33

前提・実現したいこと

全体としてはHyperappによるクラウドサービスを作っており,そのうちUIの調整部分を今作業しています。
その中で,リンクをクリックすると,サーバー上のファイルの内容に基づいたテキストファイル
(最終的には置換処理などを行った上で出力したい)をダウンロードする機能を実装しようとしています。
サーバーからのファイルの呼び出しはaxiosで行っています。

発生している問題

chromeでコードを実行すると,test.txtのダウンロード自体はできるのですが,
ファイルを開いてみると,想定している「01output.txt」の内容ではなく,
エントリーポイント?を記述している「index.html」の内容になってしまいます。
console.logでは,ちゃんとcontentの内容が表示されているのに,
なぜダウンロードされるファイルには反映されないのかわからず,ハマってしまっています。
chrome特有の設定が何かいるのでしょうか?

該当のソースコード

typescript

1<a href = "#" id ="download" download="test.txt" 2 onclick={()=> { 3 const url = `/templates/01output.txt`; 4 axios.get(url).then(res => { 5 const content = res.data 6 const blob = new Blob([ content ], { type : "text/plain" }); 7 if (window.navigator.msSaveBlob) { 8 window.navigator.msSaveBlob(blob, "ie.txt");} 9 else { 10 console.log(content); 11 document.getElementById("download").href = window.URL.createObjectURL(blob); 12 } 13 }); 14 }} 15 > 16 書面をダウンロード 17 </a>

試したこと

edgeでは,ie.txtという名前でダウンロードができ,内容は想定どおり01output.txtの内容になっていました。
firefoxでは,test.txtがダウンロードされ,内容も想定どおり01output.txtの内容になっていました。

補足情報(FW/ツールのバージョンなど)

chrome( 69.0.3497.100(Official Build) (64 ビット))

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

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

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

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

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

guest

回答2

0

自己解決

チームの他の人のヘルプで以下のようなコードになりました。
無事に動作しています。
何がどう違うことで挙動に違いが出るのか,正直あまり分かっていないところはありますが。。

該当箇所のコード

Typescript

1<a 2 href="#" 3 id="download" 4 onclick={() => { 5 const url = `/templates/01output.txt`; 6 axios.get(url).then(res => { 7 const content = res.data; 8 const blob = new Blob([content], { 9 type: 'text/plain', 10 }); 11 doExportFile('test.xml', blob); 12 }); 13 }} 14 > 15 書面をダウンロード 16 </a>

別のComponentとして以下の記述

Typescript

1export const doExportFile = (name, blob) => { 2 if (window.navigator && window.navigator.msSaveOrOpenBlob) { 3 // If IE, you must uses a different method. 4 window.navigator.msSaveOrOpenBlob(blob, name); 5 } else { 6 var url = window.URL.createObjectURL(blob); 7 var a = document.createElement('a'); 8 document.body.appendChild(a); 9 a.href = url; 10 a.download = name; 11 a.click(); 12 window.URL.revokeObjectURL(url); 13 document.body.removeChild(a); 14 } 15};

投稿2018/09/24 03:22

knyk

総合スコア17

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

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

spookybird

2018/09/24 03:36

クリックした対象とは別に新たにaタグを作成してbodyに追加し、そこにhref属性を設定してクリックを発火してから追加したaタグを削除しています。 もうちょっとやり方考えた方がいいと思いますが...まあ動くなら別にそれでいいのかもしれませんが。
guest

0

onclickイベントハンドラ内で非同期通信した結果をhref属性に突っ込んでるので、その値が設定されるのが遅くてブラウザがダウンロード始めるのに間に合ってないんじゃないですか。
href#のままダウンロードやっちゃってる気がします。

結果を待ってあげる必要があるので、こうですかね。

html

1<a id ="download" download="test.txt" 2 onclick={(e) => { 3 // href属性が設定されていればここで終了 4 // 終了前にhref属性を空にしておけば次のクリックで再度取得しなおします 5 if (e.target.href) return; 6 7 // デフォルト動作をキャンセル 8 e.preventDefault(); 9 10 const url = `/templates/01output.txt`; 11 axios.get(url).then(res => { 12 const content = res.data 13 const blob = new Blob([ content ], { type : "text/plain" }); 14 if (window.navigator.msSaveBlob) { 15 window.navigator.msSaveBlob(blob, "ie.txt");} 16 else { 17 console.log(content); 18 e.target.href = window.URL.createObjectURL(blob); 19 // hrefを設定した上で再度自身のクリックイベント発火 20 e.target.click(); 21 } 22 }); 23 }} 24 > 25 書面をダウンロード 26</a>

aタグからhref属性削ったらスタイルがリンクにならないので、そこはCSSでうまいこと加工してください。

投稿2018/09/23 13:28

spookybird

総合スコア1803

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

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

knyk

2018/09/24 03:23

ご回答ありがとうございます! 非同期通信のタイミングが問題になっているということなんですね。。 大変勉強になりました! 現実の本件の解決としては,結果的にチームの他の人がヘルプをしてくれました。 解決方法のところにコードを記載しておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問