【记事本】-你懂个der-分割记事本

已于 2023-09-06 10:22:02 修改
阅读量133 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2023-09-06 10:20:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tzpaly/article/details/132709552
版权

提示：【记事本】-你懂个der-分割记事本

文章目录

前言

为了方便文件记事本分割麻烦产生的问题

提示：以下是本篇文章正文内容，下面案例可供参考

一、记事本是什么？

记事本是一种用于记录和保存文本信息的电子文档，它是一种简单的文本编辑工具，可以用来输入、编辑和保存文本信息。记事本通常不具备复杂的格式设置功能，只能实现基本的文本输入和保存操作。它在计算机上广泛应用，可以用来创建文本文件、编写程序代码、写日记等。

二、使用步骤

1.新建index.html文件

在这里插入图片描述

2.技术html/css/js

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分割记事本小网页</title>
  <style>
    body {
      background-color: #f7f7f7;
      font-family: Arial, sans-serif;
    }

    .container {
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 10px 10px 10px #9a9c9e;
    }

    h2 {
      text-align: center;
    }
    
    h4 {
      text-align: center;
    }

    label {
      display: block;
      margin-bottom: 10px;
      font-size: 16px;
    }

    input[type='file'] {
      margin-bottom: 10px;
    }

    input {
      width: calc(100% - 10px);
    }

    button {
      display: block;
      width: 100%;
      padding: 10px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 12px ;
    }

    #result {
      margin-top: 20px;
      padding: 10px;
      background-color: #f7f7f7;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .info {
      text-align: center;
      margin-bottom: 10px;
    }

    .notebook-link {
      display: block;
      margin-bottom: 10px;
      font-size: 14px;
      color: #007bff;
      text-decoration: none;
      transition: color 0.3s;
    }

    .notebook-link:hover {
      color: #004cb3;
    }

    @media (max-width: 768px) {
      .container {
        max-width: 90%;
      }

      h1 {
        font-size: 20px;
      }

      label {
        font-size: 14px;
      }

      button {
        font-size: 14px;
      }

      .notebook-link {
        font-size: 14px;
      }
    }
    .spinner {
      margin: 20px auto;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 5px solid #f3f3f3;
      border-top: 5px solid #3498db;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>记事本数据分割</h2>
    <h4>公众号：你懂个der</h4>

    <label for="fileInput">选择记事本文件：</label>
    <input type="file" id="fileInput" accept=".txt" />

    <label for="size">输入每个记事本的数据条数：</label>
    <input type="number" id="size" min="1" placeholder="按照多少条数据进行分解"/>

    <label for="notebookName">输入记事本名称：</label>
    <input type="text" id="notebookName" placeholder="记事本名称默认（notebook）" />

    <label for="zipName">输入压缩包文件名称：</label>
    <input type="text" id="zipName" placeholder="压缩包文件名称默认（all_notebooks）" />

    <button οnclick="splitNotebooks()">分割记事本</button>

    <div id="result"></div>
    <div id="loading" style="display: none">
      <h2>正在分割记事本，请稍候...</h2>
      <div class="spinner"></div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
  <script>
    function splitNotebooks() {
      var fileInput = document.getElementById('fileInput');
      var file = fileInput.files[0];

      if (!file) {
        alert('请选择记事本文件');
        return;
      }

      var allowedExtensions = ['.txt'];
      var fileExtension = file.name.split('.').pop();

      if (!allowedExtensions.includes('.' + fileExtension)) {
        alert('请选择记事本文件（.txt）');
        return;
      }
      var resultEl = document.getElementById('result');
      resultEl.innerHTML = '';
      showLoading();
      var reader = new FileReader();
      reader.onload = function (e) {
        var content = e.target.result;

        let lines = content.split('\n');
        if (lines[0].trim() === '') {
          lines.shift();
        }
        if (lines[lines.length - 1].trim() === '') {
          lines.pop();
        }
        var size = Number(document.getElementById('size').value);
        if (size < 1) {
          alert('请输入每个记事本的数据条数');
          hideLoading();
          return;
        }
        var notebookCount = Math.ceil(lines.length / size);

        var infoEl = document.createElement('p');
        infoEl.className = 'info';
        infoEl.innerText =
          '一共解析了 ' + lines.length + ' 条数据，将数据分割成了 ' + notebookCount + ' 个记事本';
        resultEl.appendChild(infoEl);
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var time = year + '-' + month + '-' + day;
        var notebookName = document.getElementById('notebookName').value || 'notebook';
        let zipName = document.getElementById('zipName').value;
        if (zipName != null && zipName != '' && zipName != undefined) {
          zipName = zipName + '_' + lines.length + '_' + time + '.zip';
        } else {
          zipName = 'all_notebooks_' + '_' + lines.length + '_' + time + '.zip';
        }
        var num = lines.length - size * (notebookCount - 1);
        var zip = new JSZip();

        for (var i = 0; i < notebookCount; i++) {
          var notebookContent = lines.slice(i * size, (i + 1) * size).join('\n');

          zip.file(
            i + 1 + '_' + notebookName + '_' + (notebookCount == i + 1 ? num : size) + '.txt',
            notebookContent
          );
        }

        zip.generateAsync({ type: 'blob' }).then(function (content) {
          var downloadLink = document.createElement('a');
          var name = file.name.split('.').shift() || '记事本 '
          downloadLink.href = URL.createObjectURL(content);
          downloadLink.download = zipName;
          downloadLink.innerText = `下载${notebookCount}个x${size}条数据的压缩包（${name}.zip）`;
          downloadLink.className = 'notebook-link';
          resultEl.insertBefore(downloadLink, resultEl.firstChild);
          for (var i = 0; i < notebookCount; i++) {
            var notebookContent = lines.slice(i * size, (i + 1) * size).join('\n');

            var notebookLink = document.createElement('a');
            notebookLink.href = URL.createObjectURL(
              new Blob([notebookContent], { type: 'text/plain' })
            );
            notebookLink.download =
              i + 1 + '_' + notebookName + '_' + (notebookCount == i + 1 ? num : size) + '.txt';
            notebookLink.innerText = name + '_' + (i + 1);
            notebookLink.className = 'notebook-link';
            resultEl.appendChild(notebookLink);
          }

          hideLoading();
        });
      };
      reader.readAsText(file);
    }

    function showLoading() {
      var loadingEl = document.getElementById('loading');
      loadingEl.style.display = 'block';
    }

    function hideLoading() {
      var loadingEl = document.getElementById('loading');
      loadingEl.style.display = 'none';
    }
  </script>
</body>
</html>

总结

这段HTML代码实现了一个简单的记事本分割小工具，通过用户在网页上选择记事本文件并输入相关参数后，可以将记事本内容按照指定的数据条数进行分割，并生成一个可以下载的压缩包文件，同时还提供每个分割后记事本的下载链接。网页的样式简洁清晰，功能实用，可以方便地进行记事本的分割和管理。

你懂个der
关注
TXT文本分割工具 小工具
06-13
TXT文本分割器，很适合分割比较大的TXT文档，解决了打开速度慢的问题。
用Python实现TXT文件分割
xingyv010的博客
12-21 5304
一个Python程序，可以将一个TXT文件分割为多个可自定义行数的TXT文件
txt文件分割器－绿色最终版(按照章节、行数、字数、大小分割)
03-09
TXT杀手－txt文件分割器－ 绿色最终版(按照章节、行数、字数、大小分割) 绝对好用,推荐一下.
最强大的txt文件分割工具
11-10
最强大的txt文件分割工具 可以分行 分段全自动任意替换
txt文本分割器，行号分割
04-16
txt文本分割器，挺好用的，、按行号分割，不打乱格式，
Tk记事本-预览版 1.0
11-24
《Tk记事本-预览版 1.0：Python中的简单文本编辑器开发》 Tk记事本预览版1.0是一个基于Python的轻量级文本编辑器，尽管功能相对有限，但其核心的打开和保存文件操作已经得到了实现。这个项目旨在为用户提供一个基础...
安卓期末大作业记事本-结课大作业-期末大作业
最新发布
10-10
安卓期末大作业记事本-结课大作业-期末大作业，含有代码注释，满分大作业资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能...
Android记事本-demo
05-03
以下是对这个"Android记事本-demo"中涉及的关键技术的详细解释： 1. **文本数据的存储**：在Android中，有多种方式可以存储文本数据。最简单的是使用SharedPreferences，适合保存小量的键值对数据。对于更复杂的...
Java记事本-Java程序设计作业
03-21
在本项目中，"Java记事本"是一个用Java编程语言实现的简易文本编辑器，常见于计算机科学教育中的课程设计任务。这个记事本系统旨在让学生熟悉Java的基础语法、面向对象编程概念以及GUI（图形用户界面）设计，这些都...
winform记事本-加强版.zip
03-07
（1）记事本实现查找和替换功能，包括按照大小写查找和向上和向下查找。四种情况： 大写向上查找，大写向下查找，小写向上查找，小写向下查找。并实现替换和全部替换。 （2）实现文件菜单项的功能：保存文件时，先...
基于文本文件/记事本进行数据帧拆分
CaT
06-13 706
背景 最近一直在处理串口通信的一些问题，因为大部分操作都在探黑箱，因此先弄清楚串口里面的内容就显得尤为重要，我们知道串口通信的信头一般都是固定的字节(大多数情况下习惯为0xAA或者0x55，因为这两个字节分别对应为二进制的10101010b和01010101b在发送和接收时比较容易捕捉到)，因此观察数据的规律显得尤为重要。一般的串口助手都会支持数据保存到本地，但形式上一般都是文本文件，因此看起来。...
python进行拆分大文件
热门推荐
IBoyMan
03-02 1万+
python按指定行数把大文件进行拆分 如图大文件有7000多万行，大小为16G 需要拆分成多个200万行的小文件 代码如下： # -*- coding:utf-8 -*- from datetime import datetime def Main(): source_dir = '/jz_yuanshi_list0206.txt' target_dir = '/...
sql 将多个括号及内容删除_将Excel单元格中的内容按行拆分成多个单元格
weixin_39680121的博客
12-06 375
Windows 自带的记事本是个宝藏工具，可惜很多人都忽略了。比如单元格中有多个强制换行，如何将每行拆分出来，变成多个独立的单元格？如果纠结于 Excel 本身，很多问题就容易想复杂了，比如技术流们推崇的 VBA 解决一切，虽然能达到目的，但是会难倒一众普通群众。但是如果懂得合理利用记事本，这个问题就异常简单。案例：将“姓名”列的中的每个人名单独拆分成一个单元格。解决方案：如果要拆分的单元格很少，...
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1463
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
React中的refs是什么？
Front end development engineer
10-10 380
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
Vue-cli + Webpack构建记事本项目详解与实践
本文将详细介绍如何使用vue-cli + webpack构建一个记事本项目，适合对Vue 2.0有一定基础，但对webpack和其功能不太熟悉的开发者参考。首先，你需要具备以下基础知识： 1. **Vue 2.0**：理解Vue的核心概念、组件化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你懂个der

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值