在前端页面中预览word和pdf文件_浏览器word预览

方式一：新窗口中打开了一个 HTML 页面预览
为在 Vue 中预览 PDF 和 DOC 文件，你可以使用以下两个插件：

1. vue-pdf - 用于预览 PDF 文件。
2. vue-doc-preview - 用于预览 Microsoft Word (DOC/DOCX) 文件。

安装这两个插件的步骤如下：

1. 首先安装 vue-pdf：

npm install vue-pdf
1

2. 然后安装 vue-doc-preview：

npm install vue-doc-preview
1

安装完成后，你可以在你的 Vue 组件中使用它们。

以下是一个在 Vue 中预览 PDF 和 DOC 文件的简单示例：

<template>
  <div>
    <button @click="previewPdf">预览PDF</button>
    <br>
    <button @click="previewDoc">预览DOC</button>
  </div>
</template>

<script>
import VuePdf from 'vue-pdf'
import VueDocPreview from 'vue-doc-preview'

export default {
  components: {
    VuePdf,
    VueDocPreview
  },
  methods: {
    async previewPdf() {
      const pdfUrl = '/path/to/your/pdf/file.pdf'
      const pdfWindow = window.open()
      pdfWindow.document.write(`<div id="app"><vue-pdf src="${pdfUrl}" /></div>`)
      await new Promise((resolve) => setTimeout(resolve, 1000)) // 等待 VuePdf 组件加载
      pdfWindow.document.getElementById('app').__vue_app__.$mount()
    },
    async previewDoc() {
      const docUrl = '/path/to/your/doc/file.doc'
      const docWindow = window.open()
      docWindow.document.write(`<div id="app"><vue-doc-preview src="${docUrl}" /></div>`)
      await new Promise((resolve) => setTimeout(resolve, 1000)) // 等待 VueDocPreview 组件加载
      docWindow.document.getElementById('app').__vue_app__.$mount()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

请注意，上述代码中的 pdfUrl 和 docUrl 是要预览的文件的相应 URL。你需要将它们替换为你自己的文件 URL。

在上面的示例中，我们在新窗口中打开了一个 HTML 页面，并将 vue-pdf 和 vue-doc-preview 组件渲染在其中。等待片刻以确保组件加载完毕，然后将根 Vue 实例挂载到页面上。

这样，当你点击 “预览PDF” 或 “预览DOC” 按钮时，会打开一个新窗口并预览相应的文件。

需要注意的是，由于涉及到在新窗口中加载组件，并非所有浏览器都支持此操作。某些浏览器可能会阻止弹出新窗口或限制在新窗口中运行 JavaScript。因此，请确保你的应用程序环境和浏览器支持在新窗口中加载 Vue 组件。

另外，如果你的需求更加复杂，你可能需要进一步定制预览功能并适应你的项目需求。

=======================================================

方式二：在指定页面预览

1、安装插件docx-preview
2、在页面引入import { renderAsync } from ‘docx-preview’;
3、写js文件

 getFileUrl(file) {
      this.type = file.fileName.split('.')[1]; // docx或pdf格式的文件扩展名
      // res.data接口返回数据，是个流文件
      const blob = new Blob([res.data]);
      if (this.type === 'pdf') {
        const url = URL.createObjectURL(blob);
        const fileUrl = '/js/pdfJs/pdfjs-2.7.570-dist/web/viewer.html?file=';
        this.url = fileUrl + url;
      } else {
        renderAsync(blob, this.$refs.word);
      }
 }
1
2
3
4
5
6
7
8
9
10
11
12

4、在页面使用，打开预览

<div v-show="type === 'docx'" ref="word" class="height-full"></div>
<div v-show="type === 'pdf'" class="height-pdf">
     <iframe ref="pdfShow" height="100%" width="100%" style="border: 0" :src="url"></iframe>
</div>
1
2
3
4