<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建及下载二进制文件</title>
</head>
<body>
<textarea id="text" placeholder="请输入一些文字">
</textarea>
<br />
<button id="btndownload" onclick="Blob_test()">创建及下载二进制文件</button>
<output id="result"></output>
<script>
let data = {}
let text = document.getElementById("text")
text.focus()
Object.defineProperty(data, "text", {
set: function (val) {
text.value = val
this.value = val
},
get: function () {
return this.value
}
})
text.addEventListener('change', (e) => {
data.text = e.target.value
})
function Blob_test() {
let blob
let result = document.getElementById("result")
if (!window.Blob) {
result.innerHTML = "您的电脑不支持Blob对象"
} else {
blob = new Blob([data.text])
console.log(blob)
}
if (window.URL) {
result.innerHTML = '<a download href="' + window.URL.createObjectURL(blob) + '"target="_blank">文件下载</a>'
}
}
function autoHeight(el) {
let setStyle = (el, auto = false) => {
if (auto) el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
}
el.addEventListener('input',()=>{
setStyle(el,true);
}, false);
setStyle(el)
}
autoHeight(text)
</script>
</body>
</html>
