在vue项目中，如何读取自定义的.txt文件？

K哇伊

已于 2023-02-07 16:47:00 修改

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js vue 文章标签： javascript 前端

于 2023-02-07 16:46:31 首次发布

本文链接：https://blog.csdn.net/caoluotuo/article/details/128921431

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

8 篇文章

订阅专栏

文章讲述了在读取TXT文件时，特别是含有HTML代码的文件，需要确保文件以UTF-8编码，否则可能会出现乱码。使用XMLHttpRequest进行GET请求，通过指定charset参数来正确解析内容。示例代码展示了如何获取并显示文本文件的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.不管你是本地.txt文件还是线上.txt文件，打开是文件时文档内容：
提示：若是想要读出文件中的html代码，则需要格式是utf-8d的，若不是utf-8d的格式，解析后会出现乱码情况
在这里插入图片描述

第二步：可以通过以下函数获取其中内容：

    OpenPup(val){
     let xhr = new XMLHttpRequest()
    //  let okStatus = document.location.protocol === "file:" ? 0 : 200;
    // xhr.open("GET", val.url, false); // 线上链接地址
     xhr.open("GET", "text.txt", false); // public文件夹下的绝对路径
     xhr.overrideMimeType("text/html;charset=utf-8")
     xhr.send(null)
     console.log(xhr.responseText)  // xhr.responseText为文本中的内容
     this.agreementContent = xhr.responseText
     this.agreementShow = true
    },