回答編集履歴
2
「Aタグ」→「A要素」
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
> したいことはダウンロードフォルダにファイルをダウンロードしたいです！！
|
|
2
2
|
|
|
3
|
-
[Blob](https://developer.mozilla.org/ja/docs/Web/API/Blob)に向けて[download属性](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#Attributes)を付与したa
|
|
3
|
+
[Blob](https://developer.mozilla.org/ja/docs/Web/API/Blob)に向けて[download属性](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#Attributes)を付与したa要素で実現できました。
|
|
4
4
|
|
|
5
5
|
必要に応じ、S3側で[CORSを許可](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors)しておいて
|
|
6
6
|
|
1
ファイルの保存ダイアログを出すようにしてみました。
answer
CHANGED
|
@@ -30,4 +30,28 @@
|
|
|
30
30
|
</body>
|
|
31
31
|
|
|
32
32
|
</html>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
# 追記
|
|
36
|
+
|
|
37
|
+
> ローカルPCの「ダウンロード」フォルダーを指定して保存する
|
|
38
|
+
|
|
39
|
+
ファイルの保存ダイアログを出すようにしてみました。
|
|
40
|
+
(chrome://flags のページで #native-file-system-api を有効にしてお試しください)
|
|
41
|
+
|
|
42
|
+
```javascript:
|
|
43
|
+
// sign up origin trial; or enable the #native-file-system-api flag in chrome://flags.
|
|
44
|
+
// see: https://web.dev/native-file-system#write-file
|
|
45
|
+
async function writeFile(contents) {
|
|
46
|
+
const fileHandle = await window.chooseFileSystemEntries({ type: 'saveFile' });
|
|
47
|
+
const writer = await fileHandle.createWriter();
|
|
48
|
+
await writer.truncate(0);
|
|
49
|
+
await writer.write(0, contents);
|
|
50
|
+
await writer.close();
|
|
51
|
+
}
|
|
52
|
+
function download_and_save(src) {
|
|
53
|
+
fetch(src.attributes['data-href'].value)
|
|
54
|
+
.then(res => res.blob())
|
|
55
|
+
.then(writeFile)
|
|
56
|
+
}
|
|
33
57
|
```
|