原文链接: worker中创建文件, 在页面中使用
在worker中创建文件, 返回一个文件的url, 在主页面通过这个url来使用
主要目的是将计算放在worker中, 避免复杂计算将用户UI卡死
worker.js
self.addEventListener(
"message",
function({ data }) {
const blob = new Blob([data])
const url = URL.createObjectURL(blob)
console.log("worker url", data, url)
self.postMessage(url)
},
false,
)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
const blob = new Blob(["Hello World"])
const url = window.URL.createObjectURL(blob)
const link = document.createElement("a")
link.href = url
link.innerText = "Open the array URL"
document.body.appendChild(link)
var worker = new Worker("./worker.js")
worker.postMessage("Hello World")
worker.onmessage = function(event) {
console.log("Received message " + event.data)
const link = document.createElement("a")
link.href = event.data
link.innerText = "Open the array URL"
document.body.appendChild(link)
}
// worker.postMessage({method: 'echo', args: ['Work']});
</script>
</body>
</html>
