使用js读取文本文件并渲染到页面中

设计师工作日常

已于 2024-01-22 10:34:03 修改

阅读量1.2k

点赞数 24

分类专栏：前端的诱惑文章标签： javascript 前端开发语言 html

于 2024-01-21 22:19:55 首次发布

本文链接：https://blog.csdn.net/justliu1989/article/details/135736340

版权

前端的诱惑专栏收录该内容

19 篇文章 0 订阅

订阅专栏

引

网站改版后，需要重新设计详情长图，我需要以前老图的一些文案信息，就找后台人员要以前老图的地址，后台给我整理后给我了一些 txt 文本，里面是一大段代码，而且因为都是一些长图，图片都是切成好多块的小图拼在一起的，从数据库拿出来的字符串是好多 img 标签连在一起的。

在这里插入图片描述

我需要把所有小图复制到 ps 里合并成长图后，再参考上面的文字信息，重新设计长图。

想法

一开始，我是把后缀名改成 .html，直接在浏览器渲染，但是直接渲染出来，并不理想。

图片出来有时候会乱掉，还需要进去写一些 css 样式进行调整，才会出来一整个长图，而且每个 txt 文件还要手动改后缀，还是不太理想。

而且由于 txt 文件和要改的图比较多，最终还是决定写个脚本，毕竟提高效率后，才有时间摸鱼嘛。

思路

因为是 txt 文件，所以我当时的想法是，通过点击上传该文件，然后获取文件里的内容，再把内容渲染到页面中显示出来。

这样我就不用去复制每个小图到 ps 里再合并成长图，可以在页面中直接截一个长图复制到 ps 里就可以了，一步到位。

解决方案

步骤一：先写一个静态页面，可以上传文件，以及渲染显示图片的位置。

界面：

HTML代码：

<body style="background-color: #e8e8e8;">
  <input type="file" name="file" id="file">
  <h4>图片：</h4>
  <div id='read'></div>
</body>

步骤二：当上传了文件后，读取文件里的内容，并打印出来。

这里主要使用 FileReader() 在 js 里去读取本地文件。

JS代码：

<script>
  // 获取文件选择框DOM元素
  var fileInput = document.getElementById('file');
   
  // 当文件选择框的值发生变化时
  fileInput.addEventListener('change', function() {
    // 获取选择的文件对象
    var file = fileInput.files[0];
  
    // 创建一个FileReader对象
    var reader = new FileReader();
    
    // 当文件读取完成时
    reader.onload = function() {
      // 获取文件内容
      var fileContent = reader.result;
      console.log(fileContent);
    };
  
    // 读取文件内容
    reader.readAsText(file);
  });
</script>

打印结果：

步骤三：检查打印结果，看是否读取到了文本里的内容，然后将读取到的内容渲染到页面中去就可以了。

上面的打印结果说明我已经成功读取到了文本里的内容，我就可以将其渲染到页面中去了。

这里主要使用 innerHTML 将文本内容转成 html 标签，然后插入到图片要显示的地方去。

JS代码：

<script>
    
    // 获取文件选择框和文件内容输出框的DOM元素
    var fileInput = document.getElementById('file');
    
    // 当文件选择框的值发生变化时
    fileInput.addEventListener('change', function() {
      // 获取选择的文件对象
      var file = fileInput.files[0];
    
      // 创建一个FileReader对象
      var reader = new FileReader();
      
      // 当文件读取完成时
      reader.onload = function() {
        // 获取文件内容
        var fileContent = reader.result;
        console.log(fileContent);
        
        // 调用渲染方法
        txtContent(fileContent);
      };
    
      // 读取文件内容
      reader.readAsText(file);
    });
    
    function txtContent(f){
      // 将文本转成html标签并渲染
      document.getElementById('read').innerHTML = f;
    }
</script>

页面渲染结果：

页面渲染成功，但这里有一个小问题，每个小图之间都有一点空隙，这是因为 img 标签是行内元素，以基线对齐。

给它的父元素加上 font-size: 0; 的样式，就可以了。

这样空隙就没有了，到这里这个脚本就成功了，我又有时间可以摸鱼了。

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>渲染长图</title>
  </head>
  <body style="background-color: #e8e8e8;">
    <input type="file" name="file" id="file">
    <h4>图片：</h4>
    <div id='read' style="font-size: 0;"></div>
  </body>
  <script>
    
    // 获取文件选择框和文件内容输出框的DOM元素
    var fileInput = document.getElementById('file');
    
    // 当文件选择框的值发生变化时
    fileInput.addEventListener('change', function() {
      // 获取选择的文件对象
      var file = fileInput.files[0];
    
      // 创建一个FileReader对象
      var reader = new FileReader();
      
      // 当文件读取完成时
      reader.onload = function() {
        // 获取文件内容
        var fileContent = reader.result;
        console.log(fileContent);
        
        // 调用渲染方法
        txtContent(fileContent);
      };
    
      // 读取文件内容
      reader.readAsText(file);
    });
    
    function txtContent(f){
      // 将文本转成html标签并渲染
      document.getElementById('read').innerHTML = f;
    }
</script>
</html>