前端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>
相关推荐
毕设源码-朱学姐5 小时前
【开题答辩全过程】以 工厂能耗分析平台的设计与实现为例,包含答辩的问题和答案
java·vue.js
老前端的功夫6 小时前
Vue 3 性能深度解析:从架构革新到运行时的全面优化
javascript·vue.js·架构
天天扭码7 小时前
如何实现流式输出?一篇文章手把手教你!
前端·aigc·ai编程
前端 贾公子7 小时前
vue移动端适配方案 === postcss-px-to-viewport
前端·javascript·html
GISer_Jing8 小时前
AI营销增长:4大核心能力+前端落地指南
前端·javascript·人工智能
明远湖之鱼8 小时前
一种基于 Service Worker 的渐进式渲染方案的基本原理
前端
前端小端长9 小时前
Vue 中 keep-alive 组件的原理与实践详解
前端·vue.js·spring
FeelTouch Labs9 小时前
Nginx核心架构设计
运维·前端·nginx
雪球工程师团队9 小时前
别再“苦力”写后台,Spec Coding “跑” 起来
前端·ai编程