Ruoyi-Vue前端页面展示MarkDown文档或者html页面

1、打开Typora编辑器（或者其他MarkDown编辑器），将需要的内容导出到html页面

2、将导出的html文件导入ruoyi-ui下的public文件夹下

3、在Vue页面使用v-html来展示HTML文件，添加回到顶部按钮

<template>
  <div class="app-container home">
    <p v-html="htmlContent"></p>
    <button v-show="showBackToTop" class="back-to-top" @click="scrollToTop">回到顶部</button>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      htmlContent: '',
      showBackToTop: false, // 控制回到顶部按钮的显示与隐藏
    };
  },
  mounted() {
    // 在组件挂载时将HTML内容加载到htmlContent中
    this.loadHtmlFile();
    // 监听页面滚动事件
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    // 组件销毁前移除滚动监听事件，避免内存泄漏
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    loadHtmlFile() {
      this.htmlContent = "";
      let xhr = new XMLHttpRequest()
      // 线上链接地址
      // xhr.open("GET", val.url, false);

      // public文件夹下的绝对路径
      xhr.open("GET", "doc.html", false);
      xhr.overrideMimeType("text/html;charset=utf-8")
      xhr.send(null)
      this.htmlContent = xhr.responseText;
    },
    handleScroll() {
      // 当页面滚动距离超过 300px 时，显示回到顶部按钮
      this.showBackToTop = window.scrollY > 300;
    },
    scrollToTop() {
      // 平滑滚动到页面顶部
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
};
</script>
<style scoped>
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 100;
}

.back-to-top:hover {
  background-color: #0056b3;
}
</style>

注意：导出的Html页面里的图片不会显示。可以使用图床工具显示图片；也可以将图片放在public/images 目录下，可以使用类似 /images/image.jpg 的路径显示图片