问：如何获取文本内容并显示在前端页面🤔

前言

今天在水友群里看到有个前端小伙伴在群里发了个问题，“后端给我返了.txt文本的地址，我怎么通过这个地址获取文本内容显示在页面上呀”，接着后面的群友的回答语出惊人，“工资给我，我来帮你”。“蛤，有这么简单吗”，我心头顿时冒出这个疑问。这不巧了吗，我正在看ArrayBuffer的知识，看到说FileReader API有个方法—readAsArrayBuffer，能返回一个ArrayBuffer对象，然后就写了个示例去读取上传的文件…… 结果还真有那么简单。

好吧，前面的内容和主题基本没啥太大关系，下面进入我们的正餐环节

FileReader

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。

其中File对象来自用户在一个input元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的DataTransfer对象，还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

以上内容来自 MDN FileReader 😀

FileReader为我们提供了几个方法，用于读取数据：

• readAsArrayBuffer(blob): 用于将指定的Blob或File内容读取成ArrayBuffer数据对象
• readAsText(blob[, encoding]): 用于将指定的Blob或File读取成字符串内容
• readAsDataURL(blob): 用于将指定的Blob或File读取成包含data: URL格式的base64字符串内容

一旦读取完成，将会触发一个load事件，并且可以通过reader.result的方式获取到读取的内容

读取文件

现在我们知道了FileReader能读取File和Blob对象指定的数据，首先我们需要先创建一个FileReader实例

const reader = new FileReader()

读取上传的文件

const fileInput = document.querySelector('input[type="file"]');

// 监听选择文件
fileInput.addEventListener('change', e => {
  // 获取选中的文件，这里是单选
  const file = e.target.files[0]

  // 读取文件
  reader.readAsText(file)

  // 监听读取完成
  reader.addEventListener('load', () => {
    // 获取读取的文件内容
    console.log(reader.result)
  })
})

以上就完成了我们在本地选择的文件的读取操作

回到前面，我们遇到的问题是“后端给我返了.txt文本的地址，我怎么通过这个地址获取文本内容显示在页面上呀”，因此，我们需要发起一个请求来获取这个文件

fetch('http://localhost/test.txt')
// 响应数据转换成blob对象
.then(res => res.blob())
.then(blob => {
  // 读取blob
  reader.readAsText(blob)

  // 监听读取完成
  reader.addEventListener('load', () => {
    // 获取读取的文件内容
    console.log(reader.result)
  })
})

剩下的显示到前端页面，就看具体逻辑实现了

总结

FileReader 对象为我们提供了读取文件的能力，只要将需要读取的文件转换成Blob对象，我们就能获取文件的内容，然后剩下的，就是对文件读取的内容进行相应的解码操作

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader