質問編集履歴

2

ソースコードの追加

2020/11/23 13:32

投稿

kgSuzuki1994
kgSuzuki1994

スコア9

test CHANGED
@@ -1 +1 @@
1
- iPhone版chromeでダウンロードしたファイル名が「document」にな
1
+ iPhone版chromeでダウンロードしたファイル名が「document」になってしまう
test CHANGED
@@ -1,33 +1,91 @@
1
- ダウンロードのURLをData: URLで記述るサイトを、iPhone版chromeで開き、ダウンロードした際に「document」いう名前でダウンロードされてしまいます。
1
+ ## 実現
2
2
 
3
- この際指定したファイル形式でダウンロードするにはどうすればよいでしょうか
3
+ サーバ上あるmp4ファイルの動画を"example.mp4"としてiPhone上にダウンロードしたいです。
4
4
 
5
5
 
6
6
 
7
- ## 再現手順
7
+ ## 発生している問題
8
8
 
9
- 1. iPhone版chromeで、[こちらのサイト](https://wkwebview-download.glitch.me/)をひらく
9
+ iPhone版Chromeで、ダウンロードした際に「document」という名前でダウンロードされてしまいます。
10
10
 
11
- 2. 「Download data: URL」をタップしファイルをダウンロードする
11
+ ![chromeにてダウンロードした結果](2a1704b85608eda49b97f200f3fbf4e8.png)
12
12
 
13
13
 
14
14
 
15
- ## 期待する動作
15
+ ## 環境
16
16
 
17
- 「example.gif」がダウンロードされる。
17
+ - iOS: 14.1
18
18
 
19
- PC上では「example.gif」がダウンロードされることを確認しています。
19
+ - chromeのバージョン:86.0.4240.93
20
20
 
21
21
 
22
22
 
23
- ## 実際の動作
23
+ ## ソースコード
24
24
 
25
- 「document」という名前で動画がダウンロードされます。
25
+ ファイルをダウンロードするため、[FileServer.js](https://github.com/eligrey/FileSaver.js/)を使用しています。
26
26
 
27
- ![chromeにてダウンロードした結果](2a1704b85608eda49b97f200f3fbf4e8.png)
27
+ ```html
28
28
 
29
+ <!doctype html>
30
+
29
- 拡張子などついていないので、iPhone上ではgifとして認識していません。
31
+ <html lang="ja">
30
32
 
31
33
 
32
34
 
35
+ <head>
36
+
37
+ <meta charset="utf-8">
38
+
39
+ <title>Download Sample</title>
40
+
41
+ <script src="js/FileSaver.js"></script>
42
+
43
+ <script type="text/javascript">
44
+
45
+ const contents_url = "a.mp4";
46
+
47
+ const file_reader = new FileReader();
48
+
49
+ var out;
50
+
51
+
52
+
53
+ file_reader.onload = function (e) {
54
+
55
+ saveAs(e.target.result, "example.mp4");
56
+
57
+ }
58
+
59
+
60
+
61
+ function handleDownload() {
62
+
63
+ out = new Blob([contents_url], { type: 'video/mp4' });
64
+
65
+ file_reader.readAsDataURL(out);
66
+
67
+ }
68
+
69
+ </script>
70
+
71
+ </head>
72
+
73
+
74
+
75
+ <body>
76
+
77
+ <a href="#" onclick="handleDownload()">ダウンロード</a>
78
+
79
+ </body>
80
+
81
+
82
+
83
+ </html>
84
+
85
+ ```
86
+
87
+
88
+
89
+ ## 試したこと
90
+
33
- ダウンロードされた「document」に「.gif」の拡張子をつけるとgifとして再生きるので、データとしては期待するものがダウンロードされていると考えています。
91
+ PC、Android、iPhone版safariにて試ましたが、全"example.mp4"でダウンロードできます。

1

タグを追加

2020/11/23 13:31

投稿

kgSuzuki1994
kgSuzuki1994

スコア9

test CHANGED
File without changes
test CHANGED
File without changes