61 lines
2.0 KiB
HTML
61 lines
2.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>BZ2 Test</title>
|
||
|
|
<style>
|
||
|
|
#drop {
|
||
|
|
border: 2px dashed #bbb;
|
||
|
|
-moz-border-radius: 5px;
|
||
|
|
-webkit-border-radius: 5px;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 25px;
|
||
|
|
text-align: center;
|
||
|
|
font: 20pt bold, "Vollkorn";
|
||
|
|
color: #bbb;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>bz2 Live Demo</h1>
|
||
|
|
<h5>This demo decompresses bz2 archives in your web browser. No data is sent to an external server.</h5>
|
||
|
|
<a href="https://github.com/sheetjs/bz2">Source code on GitHub</a>
|
||
|
|
<div id="drop">
|
||
|
|
<p>Drag a bzip2 file into this area to see the contents</p>
|
||
|
|
</div>
|
||
|
|
<input type="checkbox" id="download"> Download decompressed output (Recommended for .tar.bz2 and other compressed binary data)
|
||
|
|
<pre id="out"></pre>
|
||
|
|
<script type="module">
|
||
|
|
import { decompress } from 'https://unpkg.com/bz2?module';
|
||
|
|
|
||
|
|
document.querySelector('#drop').addEventListener('drop', (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
let file;
|
||
|
|
if (event.dataTransfer.items) {
|
||
|
|
file = event.dataTransfer.items[0].getAsFile();
|
||
|
|
} else {
|
||
|
|
file = event.dataTransfer.files[0];
|
||
|
|
}
|
||
|
|
|
||
|
|
const download = document.querySelector('#download').checked;
|
||
|
|
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.addEventListener('load', (e) => {
|
||
|
|
const bytes = decompress(new Uint8Array(reader.result));
|
||
|
|
const result = new TextDecoder('utf8').decode(bytes);
|
||
|
|
if (download) {
|
||
|
|
const blob = new Blob([result], { type: 'application/octet-stream' });
|
||
|
|
document.location = URL.createObjectURL(blob);
|
||
|
|
} else {
|
||
|
|
document.querySelector('#out').textContent = result;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
reader.readAsArrayBuffer(file);
|
||
|
|
});
|
||
|
|
document.querySelector('#drop').addEventListener('dragover', (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|