当前位置：首页 > wzjs >正文

学校网站建设的重要意义惠州seo收费

wzjs 2025/8/22 17:38:53

学校网站建设的重要意义,惠州seo收费,网站做自己的超链接,app怎么查网站备案目录一. 前提条件二. 方式一2.1 实现思路2.2 脚本内容三. 方式二3.1 实现思路3.2 脚本内容一. 前提条件 ⏹之前在如下两遍文章中通过PowerShell和Python实现了该需求，现在使用JavaScript来实现此功能 Powershell 生成批量投入数据用的csv文件Python 生成批量投…

一. 前提条件

⏹之前在如下两遍文章中通过PowerShell和Python实现了该需求，现在使用JavaScript来实现此功能

Powershell 生成批量投入数据用的csv文件
Python 生成批量投入数据用的csv文件

🤔优缺点

直接一个HTML文件就搞定，可以考虑把相关参数写到网页中，更加方便参数输入，更加灵活
但如果要生成的文件体积过大，会引起浏览器内存溢出，导致网页工具崩溃

二. 方式一

2.1 实现思路

⏹多线程
浏览器中的JavaScript是运行在单一的主线程上的，同一个时间内只能做一件事情，没有像PowerShell和Python那样的多线程。
但是JavaScript有web worker，可以将生成csv这样的消耗资源的运算交给web worker完成。

⏹JS形式
可以将web worker相关的JS代码写在HTML中，直接一个文件搞定。

⏹CSV文件生成
可以将生成的csv数据先转换为字节数组，然后转换为Blob对象，然后再通过URL.createObjectURL创建临时文件下载链接，实现下载。

2.2 脚本内容

web worker相关的js代码按照规范而言，应该写到JS代码中，此案例为了实现一个单HTML文件的小工具，所以并没有进行拆分。
web worker所在的<script>标签的type属性必须是一个浏览器不认识的值，否则无法通过document.querySelector("#sub_worker").textContent来去获取其JS文本。
web worker使用完毕之后，需要关闭，以节约资源。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSV 生成器</title>
</head>
<body><button onclick="generateCSV()">生成 CSV</button><a id="downloadLink" style="display:none">下载 CSV</a>
</body>
<script id="sub_worker" type="app/worker">// 子worker监听主worker的message事件self.addEventListener('message', function({ data: {startRow, endRow} }) {const csvRows = [];for (let i = startRow; i <= endRow; i++) {// 随机年龄const randomAge = Math.floor(Math.random() * (60 - 18 + 1)) + 18;// 随机日期const randomDate = new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000);const dateString = randomDate.toISOString().slice(0, 19).replace("T", " ");// csv的行数据const csvRowData = `"${i}","Name_${i}",${randomAge},"你好${i}@example.com","${dateString}"`csvRows.push(csvRowData);}/*子worker将生成的数据发送给主worker, 最后一行要添加一个换行符,目的是保证多个 csv数据块 进行拼接的时候, 拼接处的数据可以换行*/postMessage(csvRows.join("\n") + "\n");// 子worker的任务执行完毕之后关闭,节约资源self.close();}, false);
</script>
<script>// 生成500万行csvconst ROWS = 5_000_000;// 线程数, 根据电脑的配置自行调整const PROCESS_COUNT = 8;// 每个 worker 处理的行数const CHUNK_SIZE = Math.ceil(ROWS / PROCESS_COUNT);// 读取 worker 的文本代码内容, 将其创建为Blob对象后, 转换为临时URLconst blobData = new Blob([document.querySelector("#sub_worker").textContent])const tempUrl = URL.createObjectURL(blobData)// 生成 CSV 数据function generateCSV() {console.time("CSV 生成耗时");// 存储所有 worker 所做成的数据let byteCsvArray = [];let completedWorkers = 0;// 开启多个 子worker 创建csvfor (let i = 0; i < PROCESS_COUNT; i++) {const startRow = i * CHUNK_SIZE + 1;const endRow = Math.min((i + 1) * CHUNK_SIZE, ROWS);// 创建 Web Worker 对象, 指定Worker的名称const worker = new Worker(tempUrl, {name: `csv_create_worker_${i}`});// 主worker通知子worker工作worker.postMessage({ startRow, endRow });// 主worker监听子worker的postMessage事件worker.addEventListener("message", ({data}) => {// 通过 TextEncoder 将csv文本转换为 字节数组byteCsvArray.push(new TextEncoder().encode(data));completedWorkers++;// 所有 worker 任务完成，下载csvif (completedWorkers === PROCESS_COUNT) {downloadCSV(byteCsvArray);console.timeEnd("CSV 生成耗时");}// 关闭主worker,节约资源worker.terminate()});}}// 下载 CSVfunction downloadCSV(byteCsvArray) {const blob = new Blob(byteCsvArray, { type: "text/csv;charset=utf-8" });const link = document.getElementById("downloadLink");link.href = URL.createObjectURL(blob);link.download = "person_data.csv";link.style.display = "block";link.textContent = "点击下载 CSV";}
</script>
</html>

三. 方式二

3.1 实现思路

整体实现思路和方式一基本相同
不同点在于文件下载的方式，文件下载使用了window.showDirectoryPicker()的api
该api可以将大文件的数据以流的方式分批写入的本地文件，避免了一次性加载到浏览器的内存中。
由于代码较多，所以按照功能进行了拆分。

3.2 脚本内容

⏹CSS部分

<style>@keyframes donut-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.donut-container {display: flex;justify-content: center;align-items: center;margin-top: 20%;}.donut {display: inline-block;border: 4px solid rgba(0, 0, 0, 0.1);border-left-color: #7983ff;border-radius: 50%;width: 30px;height: 30px;animation: donut-spin 1.2s linear infinite;}.hidden {display: none;}
</style>

⏹HTML部分

<body><button onclick="selectCsvFileSaveDir()">📂 选择保存CSV的文件夹</button><ul id="file-list"></ul><button onclick="generateCSV()">生成 CSV</button><!-- loading效果 --><div class="donut-container hidden" id="loading"><div class="donut"></div></div>
</body>

⏹JavaScript部分 - 文件夹选择功能的代码

<script>let csvDirHandle = null;const csvDirFileNameList = [];async function selectCsvFileSaveDir() {try {// 清空页面上的文件名展示区域const fileList = document.getElementById("file-list");fileList.innerHTML = "";// 获取选中的文件夹对象csvDirHandle = await window.showDirectoryPicker();for await (const [name, handle] of csvDirHandle.entries()) {if (handle.kind !== "file") {continue;}// 创建li标签, 将文件夹下的所有文件展示在页面上const liTag = document.createElement("li");liTag.textContent = name;fileList.appendChild(liTag);// 将文件夹下的所有文件名缓存到list中csvDirFileNameList.push(name);}} catch (err) {console.error("选择文件夹时发生异常:", err);}}
</script>

⏹JavaScript部分 - 子worker生成csv数据的代码

<script id="sub_worker" type="app/worker">// 子worker监听主worker的message事件self.addEventListener('message', function({ data: {startRow, endRow} }) {let csvRows = [];for (let i = startRow; i <= endRow; i++) {// 随机年龄const randomAge = Math.floor(Math.random() * (60 - 18 + 1)) + 18;// 随机日期const randomDate = new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000);const dateString = randomDate.toISOString().slice(0, 19).replace("T", " ");// csv的行数据const csvRowData = `"${i}","Name_${i}",${randomAge},"你好${i}@example.com","${dateString}"`csvRows.push(csvRowData);}self.postMessage(csvRows.join("\n") + "\n");csvRows.length = 0;// 子worker的任务执行完毕之后关闭,节约资源self.close();}, false);
</script>

⏹JavaScript部分 - 调用，下载文件部分的代码

<script>// 生成500万行csvconst ROWS = 5000000;// 线程数const PROCESS_COUNT = 8;// 每个 worker 处理的行数const CHUNK_SIZE = Math.ceil(ROWS / PROCESS_COUNT);// 读取 worker 的文本代码内容, 将其创建为Blob对象后, 转换为临时URLconst blobData = new Blob([document.querySelector("#sub_worker").textContent])const tempUrl = URL.createObjectURL(blobData)// 生成 CSV 数据async function generateCSV() {if (!csvDirHandle) {alert("请先选择文件夹之后, 再生成CSV文件...")return}let completedWorkers = 0;let fileWriterHelper = null;console.time("CSV 生成耗时");try {const fileHandle = await csvDirHandle.getFileHandle("person_data.csv", { create: true });fileWriterHelper = await fileHandle.createWritable();} catch (error) {if (error.name === "NotAllowedError") {alert("用户拒绝了文件访问权限...");} else {console.error("发生错误:", error);}return;}// 显示loading效果document.querySelector("#loading").classList.remove("hidden");// 开启多个 子worker 创建csvfor (let i = 0; i < PROCESS_COUNT; i++) {const startRow = i * CHUNK_SIZE + 1;const endRow = Math.min((i + 1) * CHUNK_SIZE, ROWS);// 创建 Web Worker 对象, 指定Worker的名称const worker = new Worker(tempUrl, {name: `csv_create_worker_${i}`});// 主worker通知子worker工作worker.postMessage({ startRow, endRow });// 主worker监听子worker的postMessage事件worker.addEventListener("message", async ({data: csvStr}) => {// 将csv字符串数据转换为字节数据后, 通过 fileWriterHelper 将内容写入本地文件中await fileWriterHelper.write(new TextEncoder().encode(csvStr));completedWorkers++;// 判断所有 worker 任务完成if (completedWorkers === PROCESS_COUNT) {// 隐藏loading效果document.querySelector("#loading").classList.add("hidden");// 关闭fileWriterHelper写入对象, 将csv文件保存到本地await fileWriterHelper.close();alert("csv文件已保存成功...");}// 关闭主worker,节约资源worker.terminate()});}}
</script>