前端js读取本地md或txt文件内容

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端js读取本地md或txt文件内容</title>
  </head>
  <body>
    <script>
      function readTextFile(fileName) {
        var rawFile = new XMLHttpRequest()
        var filePath = location.origin + '/' + fileName
        rawFile.open('GET', fileName, false)
        rawFile.onreadystatechange = function () {
          if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
              var allText = rawFile.responseText
              document.getElementById('showmd').innerHTML = allText
              console.log(666.20001, allText, location)
            }
          }
        }
        rawFile.send(null)
      }
    </script>
    <div id="showmd"></div>
    <button onclick="readTextFile('text.md')">测试按钮</button>
    <button onclick="readTextFile('public/text.md')">测试按钮2</button>
  </body>
</html>
相关推荐
低保和光头哪个先来9 分钟前
CSS+JS实现单例老虎机切换图片动画
前端·javascript·css
苏琢玉11 分钟前
用 Go 像写 Web 一样做桌面应用:完全离线的手机号归属地查询工具
vue.js·golang
坐公交也用券12 分钟前
适用于vue3+pnpm项目自动化类型检查及构建的Python脚本
开发语言·javascript·python·typescript·自动化
IT_陈寒16 分钟前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了40%
前端·人工智能·后端
guoyp212621 分钟前
组件化开发解决传统前端开发哪些痛点
vue.js·性能优化
小小鸟00823 分钟前
Vue响应式原理
前端·javascript·vue.js
lee57626 分钟前
鄙人的 Vue 3.0 商业级开源甘特图已经发布到 npm
前端·vue.js·npm·开源·甘特图
计算机学姐28 分钟前
基于SSM的社区外来务工人员管理系统【2026最新】
java·vue.js·java-ee·tomcat·maven·intellij-idea·mybatis
前端老曹28 分钟前
vue3 三级路由无法缓存的终终终终终终极解决方案
前端·javascript·vue.js
零Suger28 分钟前
React Router v7数据模式使用指南
javascript·笔记·react.js