查看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>