VUE在线预览展示md文件

在飘着呢6751

已于 2024-01-06 15:32:05 修改

阅读量1.4k

点赞数 6

文章标签： vue.js 前端 javascript

于 2024-01-04 10:11:10 首次发布

本文链接：https://blog.csdn.net/honghongzZ/article/details/135379465

版权

最近项目需要做一个能在线预览docx,pdf,md,MP4等文件,其中md文件通过调研发现使用markdown-it-vue组件挺好用的

vue在线预览word

vue在线播放音视频

vue在线预览pdf

markdown-it-vue

安装插件markdown-it-vue

npm install markdown-it-vue

在页面引入

<template>
  <div class="md-content">
    <markdown-it-vue class="md-body"  />
  </div>
</template>


import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";


export default {
  components: {
    MarkdownItVue,
  },
 
};
</script>

引入好组件之后,通过md文件url请求回md文件,把值赋予给htmlMD,在markdown-it-vue标签中通过content绑定上文件流就可以展示

完整代码

<template>
  <div class="md-content">
    <markdown-it-vue class="md-body" :content="htmlMD" />
  </div>
</template>
<script>
import axios from "axios";
import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";
export default {
  data() {
    return {
      htmlMD: "",//md文件
    };
  },
  components: {
    MarkdownItVue,
  },
  created() {
//文件上传到minio,通过获取的文件url请求md文件
    axios
      .get(
        "http://192.168.1.50:8080/profile/upload/2023-12-29/20231229143140A003.md"
      )
      .then((response) => {
        this.htmlMD = response.data;
        console.log(this.htmlMD);
      });
  },
};
</script>
<style></style>