index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <div class="file-preview">
  3. <div v-if="isSupported">
  4. <!-- PDF 预览 -->
  5. <iframe
  6. v-if="fileType === 'pdf'"
  7. :src="fileUrl"
  8. width="100%"
  9. height="822px"
  10. ></iframe>
  11. <!-- 图片预览 -->
  12. <img
  13. v-else-if="isImage"
  14. :src="fileUrl"
  15. alt="图片预览"
  16. style="max-width: 100%; max-height: 822px"
  17. />
  18. <!-- Word 文档预览 -->
  19. <div v-if="isWord && wordLoaded" v-html="wordContent" class="word-preview"></div>
  20. <div v-else-if="isWord && !wordLoaded" class="loading-word">
  21. {{ wordLoadingError ? '加载失败,请重试' : '加载中...' }}
  22. </div>
  23. <!-- 其他 Office 文档预览 -->
  24. <iframe
  25. v-else-if="isOffice"
  26. :src="officePreviewUrl"
  27. width="100%"
  28. height="822px"
  29. ></iframe>
  30. <!-- 文本文件预览 -->
  31. <pre
  32. v-else-if="fileType === 'txt'"
  33. style="max-height: 822px; overflow: auto"
  34. >{{ textContent }}</pre
  35. >
  36. </div>
  37. <div v-else class="unsupported-file">
  38. 不支持预览该文件类型,<a :href="fileUrl" download>点击下载</a>
  39. </div>
  40. </div>
  41. </template>
  42. <script>
  43. import mammoth from "mammoth";
  44. export default {
  45. props: {
  46. fileUrl: {
  47. type: String,
  48. required: true,
  49. },
  50. fileType: {
  51. type: String,
  52. required: true,
  53. },
  54. },
  55. data() {
  56. return {
  57. textContent: "",
  58. wordContent: "",
  59. supportedTypes: [
  60. "pdf",
  61. "doc",
  62. "docx",
  63. "xls",
  64. "xlsx",
  65. "ppt",
  66. "pptx",
  67. "txt",
  68. "jpg",
  69. "jpeg",
  70. "png",
  71. "gif",
  72. ],
  73. wordLoaded: false,
  74. wordLoadingError: false,
  75. };
  76. },
  77. watch: {
  78. fileUrl: {
  79. immediate: true,
  80. handler() {
  81. if (this.isWord) {
  82. this.loadWordContent();
  83. }
  84. },
  85. },
  86. },
  87. computed: {
  88. isSupported() {
  89. return this.supportedTypes.includes(this.fileType);
  90. },
  91. isImage() {
  92. return ["jpg", "jpeg", "png", "gif"].includes(this.fileType);
  93. },
  94. isWord() {
  95. return ["doc", "docx"].includes(this.fileType);
  96. },
  97. isOffice() {
  98. return ["xls", "xlsx", "ppt", "pptx"].includes(this.fileType);
  99. },
  100. },
  101. mounted() {
  102. if (this.fileType === "txt") {
  103. this.loadTextContent();
  104. } else if (this.isWord) {
  105. this.loadWordContent();
  106. }
  107. },
  108. methods: {
  109. async loadWordContent() {
  110. this.wordLoaded = false;
  111. this.wordLoadingError = false;
  112. this.fileUrl=localStorage.getItem('href')
  113. try {
  114. const response = await fetch(this.fileUrl);
  115. if (!response.ok) {
  116. throw new Error(`HTTP error! status: ${response.status}`);
  117. }
  118. const blob = await response.blob();
  119. const arrayBuffer = await this.blobToArrayBuffer(blob);
  120. const result = await mammoth.convertToHtml({ arrayBuffer });
  121. this.wordContent = result.value;
  122. this.wordLoaded = true;
  123. } catch (error) {
  124. console.error("加载Word文档内容时出错:", error);
  125. this.wordContent = "无法加载Word文档内容";
  126. this.wordLoadingError = true;
  127. } finally {
  128. this.wordLoaded = true;
  129. }
  130. },
  131. blobToArrayBuffer(blob) {
  132. return new Promise((resolve, reject) => {
  133. const reader = new FileReader();
  134. reader.onload = () => resolve(reader.result);
  135. reader.onerror = reject;
  136. reader.readAsArrayBuffer(blob);
  137. });
  138. },
  139. },
  140. };
  141. </script>
  142. <style scoped>
  143. .file-preview {
  144. width: 100%;
  145. height: 822px;
  146. overflow: auto;
  147. }
  148. .unsupported-file {
  149. display: flex;
  150. justify-content: center;
  151. align-items: center;
  152. height: 100%;
  153. font-size: 18px;
  154. color: #909399;
  155. }
  156. .word-preview {
  157. padding: 20px;
  158. background-color: white;
  159. }
  160. .loading-word {
  161. display: flex;
  162. justify-content: center;
  163. align-items: center;
  164. height: 100%;
  165. font-size: 18px;
  166. color: #909399;
  167. }
  168. </style>