Uint8ArrayオブジェクトからFileオブジェクトを生成する。
Uint8ArrayオブジェクトとテキストからBlobオブジェクトを生成し、BlobオブジェクトからFileオブジェクトを生成する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
DownloadLinkを生成する。テキストをダウンロードする。<br>
<br>
<br>
<button id="button">DownloadLinkを生成する</button>
<br>
<br>
<div>
<a id="download"></a>
</div>
<script>
const test = (function() {
const Button = document.getElementById('button');
const Download = document.getElementById('download');
const createDownloadLink = async function() {
if (Download.href) {
URL.revokeObjectURL(Download.href);
console.warn('URL.revokeObjectURL(Download.href)を実行した。');
} else {
console.log('else Download.href = ', Download.href);
}
// バイナリデータ[65, 66, 67]は文字列ABCに相当する。
const binaryData1 = new Uint8Array([65, 66, 67]); // バイナリデータ
// バイナリデータ[68, 69, 70]は文字列DEFに相当する。
const binaryData2 = new Uint8Array([68, 69, 70]); // バイナリデータ
const textData = "Hello, World!\n"; // テキストデータ
// Blobオブジェクトを作成
const blob = new Blob([binaryData1, binaryData2, textData]);
console.log(blob); // Blob { size: 19, type: "" }
// BlobオブジェクトからFileオブジェクトに変換
// 第2引数はファイルの名前を指定する。
const file = new File([blob], 'hello.txt');
console.log(file); // File { name: "hello.txt", lastModified: 1694486744724, webkitRelativePath: "", size: 19, type: "" }
// lastModifiedはファイルが生成された時間である。
const date = new Date(file.lastModified);
const str = date.getFullYear() +
'/' + ('0' + (date.getMonth() + 1)).slice(-2) +
'/' + ('0' + date.getDate()).slice(-2) +
' ' + ('0' + date.getHours()).slice(-2) +
':' + ('0' + date.getMinutes()).slice(-2) +
':' + ('0' + date.getSeconds()).slice(-2);
// ファイルの最終更新日時
console.log(str); // 2023/09/11 14:11:33
Download.href = URL.createObjectURL(file);
Download.download = file.name;
Download.textContent = `Click to download '${file.name}' (${file.size} bytes)`;
console.log('Download.href = ', Download.href);
};
// 実行する。
Button.addEventListener('click', () => createDownloadLink());
})();
</script>
</body>
</html>
Uint8ArrayオブジェクトとテキストからFileオブジェクトを生成する。
BlobオブジェクトとFileオブジェクトの第1引数には、Uint8Arrayオブジェクトやテキストなど、バイナリまたはテキストデータを渡すことができる。BlobオブジェクトやFileオブジェクトは、それらのデータをファイルとして扱う。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
DownloadLinkを生成する。テキストをダウンロードする。<br>
<br>
<br>
<button id="button">DownloadLinkを生成する</button>
<br>
<br>
<div>
<a id="download"></a>
</div>
<script>
const test = (function() {
const Button = document.getElementById('button');
const Download = document.getElementById('download');
const createDownloadLink = async function() {
if (Download.href) {
URL.revokeObjectURL(Download.href);
console.warn('URL.revokeObjectURL(Download.href)を実行した。');
} else {
console.log('else Download.href = ', Download.href);
}
// バイナリデータ[65, 66, 67]は文字列ABCに相当する。
const binaryData1 = new Uint8Array([65, 66, 67]); // バイナリデータ
// バイナリデータ[68, 69, 70]は文字列GHIに相当する。
const binaryData2 = new Uint8Array([71, 72, 73]); // バイナリデータ
const textData = "Hello, World!\n"; // テキストデータ
// 第2引数はファイルの名前を指定する。
const file = new File([binaryData1, binaryData2, textData], 'hello.txt');
console.log(file); // File { name: "hello.txt", lastModified: 1694486744724, webkitRelativePath: "", size: 19, type: "" }
// lastModifiedはファイルが生成された時間である。
const date = new Date(file.lastModified);
const str = date.getFullYear() +
'/' + ('0' + (date.getMonth() + 1)).slice(-2) +
'/' + ('0' + date.getDate()).slice(-2) +
' ' + ('0' + date.getHours()).slice(-2) +
':' + ('0' + date.getMinutes()).slice(-2) +
':' + ('0' + date.getSeconds()).slice(-2);
// ファイルの最終更新日時
console.log(str); // 2023/09/11 14:11:33
Download.href = URL.createObjectURL(file);
Download.download = file.name;
Download.textContent = `Click to download '${file.name}' (${file.size} bytes)`;
console.log('Download.href = ', Download.href);
};
// 実行する。
Button.addEventListener('click', () => createDownloadLink());
})();
</script>
</body>
</html>