123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- <template>
- <div class="file-preview">
- <div v-if="isSupported">
- <!-- PDF 预览 -->
- <iframe
- v-if="fileType === 'pdf'"
- :src="fileUrl"
- width="100%"
- height="822px"
- ></iframe>
- <!-- 图片预览 -->
- <img
- v-else-if="isImage"
- :src="fileUrl"
- alt="图片预览"
- style="max-width: 100%; max-height: 822px"
- />
- <!-- Word 文档预览 -->
- <div v-if="isWord && wordLoaded" v-html="wordContent" class="word-preview"></div>
- <div v-else-if="isWord && !wordLoaded" class="loading-word">
- {{ wordLoadingError ? '加载失败,请重试' : '加载中...' }}
- </div>
- <!-- 其他 Office 文档预览 -->
- <iframe
- v-else-if="isOffice"
- :src="officePreviewUrl"
- width="100%"
- height="822px"
- ></iframe>
- <!-- 文本文件预览 -->
- <pre
- v-else-if="fileType === 'txt'"
- style="max-height: 822px; overflow: auto"
- >{{ textContent }}</pre
- >
- </div>
- <div v-else class="unsupported-file">
- 不支持预览该文件类型,<a :href="fileUrl" download>点击下载</a>
- </div>
- </div>
- </template>
-
- <script>
- import mammoth from "mammoth";
- export default {
- props: {
- fileUrl: {
- type: String,
- required: true,
- },
- fileType: {
- type: String,
- required: true,
- },
- },
- data() {
- return {
- textContent: "",
- wordContent: "",
- supportedTypes: [
- "pdf",
- "doc",
- "docx",
- "xls",
- "xlsx",
- "ppt",
- "pptx",
- "txt",
- "jpg",
- "jpeg",
- "png",
- "gif",
- ],
- wordLoaded: false,
- wordLoadingError: false,
- };
- },
- watch: {
- fileUrl: {
- immediate: true,
- handler() {
- if (this.isWord) {
- this.loadWordContent();
- }
- },
- },
- },
- computed: {
- isSupported() {
- return this.supportedTypes.includes(this.fileType);
- },
- isImage() {
- return ["jpg", "jpeg", "png", "gif"].includes(this.fileType);
- },
- isWord() {
- return ["doc", "docx"].includes(this.fileType);
- },
- isOffice() {
- return ["xls", "xlsx", "ppt", "pptx"].includes(this.fileType);
- },
- },
- mounted() {
- if (this.fileType === "txt") {
- this.loadTextContent();
- } else if (this.isWord) {
- this.loadWordContent();
- }
- },
- methods: {
- async loadWordContent() {
- this.wordLoaded = false;
- this.wordLoadingError = false;
- this.fileUrl=localStorage.getItem('href')
- try {
- const response = await fetch(this.fileUrl);
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- const blob = await response.blob();
- const arrayBuffer = await this.blobToArrayBuffer(blob);
- const result = await mammoth.convertToHtml({ arrayBuffer });
- this.wordContent = result.value;
- this.wordLoaded = true;
- } catch (error) {
- console.error("加载Word文档内容时出错:", error);
- this.wordContent = "无法加载Word文档内容";
- this.wordLoadingError = true;
- } finally {
- this.wordLoaded = true;
- }
- },
- blobToArrayBuffer(blob) {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.onload = () => resolve(reader.result);
- reader.onerror = reject;
- reader.readAsArrayBuffer(blob);
- });
- },
- },
- };
- </script>
-
- <style scoped>
- .file-preview {
- width: 100%;
- height: 822px;
- overflow: auto;
- }
- .unsupported-file {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- font-size: 18px;
- color: #909399;
- }
- .word-preview {
- padding: 20px;
- background-color: white;
- }
- .loading-word {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- font-size: 18px;
- color: #909399;
- }
- </style>
|