Angular读取文件内容并显示

刺骨的言语ヽ痛彻心扉 2023-05-30 10:46 90阅读 0赞

**一、读取文件内容**

**html**

**ts**

openFile(event: any): void {
      const input = event.target;
      const reader = new FileReader();
      reader.onload = (() => {
        if (reader.result) {
          console.log(reader.result);
        }
      });
      reader.readAsText(input.files[0], 'utf-8');
    }

文件：

大寺，日本，美国，中国，韩国
    12，13，14，11，15
    23，24，25，23，26
    33，34，36，37，34

Log：

![20191109194637417.png][]

**常用API：**

FileReader.onload                      //在文件成功读取时触发

FileReader.readAsDataURL()        //转换成base64格式

FileReader.readAsText()             //转换成字符串格式

FileReader.readAsArrayBuffer()      //转换成ArrayBuffer格式

FileReader.readAsBinaryString()      //转换成原始二进制格式

**二、显示文件信息**

首先将每一行的信息提取出来，用 split 来根据换行符将每一行信息存到数组里，这里用到正则表达式 \\n（查找换行符）

const array = reader.result.toString().split(/\n/);

![20191109194557851.png][]

然后再根据 ，（逗号）分隔，之后再循环数组遍历出数据

**home.component.html**

**home.component.ts**

import { Component } from '@angular/core';
    
    
    export class SearchInfo {
      item1: string = '';
      item2: string = '';
      item3: string = '';
      item4: string = '';
      item5: string = '';
    }
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html'
    })
    
    export class HomeComponent {
    
      list: SearchInfo[] = [];
    
      openFile(event: any): void {
        const input = event.target;
        const reader = new FileReader();
        reader.onload = (() => {
          if (reader.result) {
            const array = reader.result.toString().split(/\n/);
            array.filter((line: string) => line.trim() !== '').forEach((line: string) => {
              const searchInfo: SearchInfo = new SearchInfo();
              const item = line.split('，');
              if (item.length >= 5) {
                searchInfo.item1 = item[0];
                searchInfo.item2 = item[1];
                searchInfo.item3 = item[2];
                searchInfo.item4 = item[3];
                searchInfo.item5 = item[4];
              }
              this.list.push(searchInfo);
            });
          }
        });
        reader.readAsText(input.files[0], 'utf-8');
      }
    }

[20191109194637417.png]: https://img-blog.csdnimg.cn/20191109194637417.png
[20191109194557851.png]: https://img-blog.csdnimg.cn/20191109194557851.png