vue在线查看docx,pdf,txt,md文档

最新推荐文章于 2025-06-18 09:00:27 发布

原创最新推荐文章于 2025-06-18 09:00:27 发布 · 712 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #pdf #前端

文章描述了一个Vue应用中如何使用VueOfficeDocx和VueOfficePdf组件来加载和渲染docx和pdf文件，同时展示了如何通过axios获取TXT和Markdown文件，并解析Markdown内容。

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

查看docx与pdf

<template>
  <div style="height: calc(100vh - 60px); overflow: auto">
    <div v-if="this.type === 'docx'">
      <vue-office-docx :src="docx" @rendered="rendered" />
    </div>
    <div v-if="this.type === 'pdf'">
      <vue-office-pdf :src="pdf" @error="errorHandler" />
    </div>
    <div v-if="this.type === 'md'" class="markdown-body">
      <markdown-viewer></markdown-viewer>
    </div>
    <div v-if="this.type === 'txt'">
      <txt-viewer></txt-viewer>
    </div>
  </div>
</template>

<script>
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePdf from "@vue-office/pdf";
import MarkdownViewer from "./MarkdownViewer.vue";
import TxtViewer from "./TxtViewer.vue";
import DocViewer from "./DocViewer.vue";

//引入相关样式
import "@vue-office/docx/lib/index.css";
import baseurl from "@/config/baseurl";
export default {
  components: {
    VueOfficeDocx,
    VueOfficePdf,
    MarkdownViewer,
    TxtViewer,  },
  data() {
    return {
      path: this.$store.getters.getFiles.path,//服务端公共地址
      type: this.$store.getters.getFiles.type,
      docx: `${baseurl}/files${this.$store.getters.getFiles.path}`, //设置文档地址
      pdf: `${baseurl}/files${this.$store.getters.getFiles.path}`,
      txt: "",
      md: "",
    };
  },
  mounted() {
    this.rendered();
    this.type = this.$store.getters.getFiles.type;
  },
  methods: {
    rendered() {},
  },
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
</style>

查看txt

<template>
  <div class="txt-viewer">
    <pre>{{ txtContent }}</pre>
  </div>
</template>
<script>
import axios from "axios";
import baseurl from "@/config/baseurl";
export default {
  data() {
    return {
      path: this.$store.getters.getFiles.path,
      txtContent: "",
    };
  },
  created() {
    this.fetchTxtFile();
  },
  methods: {
    fetchTxtFile() {
      const serverUrl = `${baseurl}/files${this.$store.getters.getFiles.path}`;
      // 使用Axios或其他HTTP库从服务端获取txt文件内容
      axios
        .get(serverUrl)
        .then((response) => {
          this.txtContent = response.data;
        })
        .catch((error) => {
          console.error("Error fetching txt file:", error);
        });
    },
  },
};
</script>
<style scoped>
.txt-viewer {
  max-width: 800px; /* 根据需要调整最大宽度 */
  margin: 0 auto;
}
pre {
  white-space: pre-wrap; /* 保留文本换行 */
}
</style>

查看md并解析样式

<template>
  <div style="white-space: pre-line; padding: 10px 20px">
    <div class="markdown-content" v-html="renderedMarkdown"></div>
  </div>
</template>
<script>
import VueMarkdown from "vue-markdown";
import MarkdownIt from "markdown-it";
import MarkdownItFootnote from "markdown-it-footnote";
import baseurl from "@/config/baseurl";
export default {
  components: {
    VueMarkdown,
  },
  data() {
    return {
      path: this.$store.getters.getFiles.path,
      markdownContent: "",
      renderedMarkdown: "",
    };
  },
  created() {
    // 发起请求获取Markdown文件内容
    this.fetchMarkdownFile(`${baseurl}/files${this.path}`);
  },
  mounted() {},
  methods: {
    async fetchMarkdownFile(url) {
      try {
        const response = await fetch(url);
        if (response.ok) {
          this.markdownContent = await response.text();
        } else {
          console.error("Failed to fetch Markdown file");
        }
      } catch (error) {
        console.error("Error fetching Markdown file:", error);
      }
      const md = new MarkdownIt().use(MarkdownItFootnote); // 使用你导入的插件
      // 要解析的Typora风格Markdown内容
      const markdownText = this.markdownContent;
      this.renderedMarkdown = md.render(markdownText);
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需求进行自定义 */
.markdown-content {
  /* 添加自定义样式 */
  /* 例如：设置字体样式、颜色、间距等 */
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

/* 你还可以为特定元素添加样式 */
.markdown-content h1 {
  font-size: 24px;
}
.markdown-content h2 {
  font-size: 20px;
}
</style>