51 lines
1.7 KiB
HTML
51 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
<button id="$start">Start</button>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>
|
|
<!-- includes blob.stream() polyfill -->
|
|
<script src="https://cdn.jsdelivr.net/gh/eligrey/Blob.js/Blob.js"></script>
|
|
<script src="../StreamSaver.js"></script>
|
|
<script>
|
|
// Saving a blob is as simple as the fetch example, you just get the
|
|
// readableStream from the blob by calling blob.stream() to get a
|
|
// readableStream and then pipe it
|
|
$start.onclick = () => {
|
|
const blob = new Blob(['StreamSaver is awesome'])
|
|
const fileStream = streamSaver.createWriteStream('sample.txt', {
|
|
size: blob.size // Makes the procentage visiable in the download
|
|
})
|
|
|
|
// One quick alternetive way if you don't want the hole blob.js thing:
|
|
// const readableStream = new Response(
|
|
// Blob || String || ArrayBuffer || ArrayBufferView
|
|
// ).body
|
|
const readableStream = blob.stream()
|
|
|
|
// more optimized pipe version
|
|
// (Safari may have pipeTo but it's useless without the WritableStream)
|
|
if (window.WritableStream && readableStream.pipeTo) {
|
|
return readableStream.pipeTo(fileStream)
|
|
.then(() => console.log('done writing'))
|
|
}
|
|
|
|
// Write (pipe) manually
|
|
window.writer = fileStream.getWriter()
|
|
|
|
const reader = readableStream.getReader()
|
|
const pump = () => reader.read()
|
|
.then(res => res.done
|
|
? writer.close()
|
|
: writer.write(res.value).then(pump))
|
|
|
|
pump()
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|