vue在线预览pdf,word,excel文件

### 实现 Vue.js 中 PDF、Word 和 Excel 文件的在线预览 #### 安装依赖包 为了在 Vue.js 项目中集成 PDF、Word 和 Excel 的在线预览功能，需安装特定的库。对于 `vue-pdf` 及其配套使用的工具： ```bash npm install vue-pdf pdfjs-dist file-saver ``` 针对 Word 和 Excel 文档，则推荐使用 [@vue-office](https://github.com/vue-office) 组件库来简化开发流程[^2]。 #### 初始化配置 确保已正确引入并注册所需模块。如果使用的是 Vue 2.x 版本，还需额外安装 Composition API 支持: ```javascript // main.js 或入口文件 import Vue from 'vue'; import { createApp } from 'vue'; // 对于Vue3+ import App from './App.vue'; if (process.env.VUE_APP_VERSION === "2") { import VueCompositionAPI from '@vue/composition-api'; Vue.use(VueCompositionAPI); } const app = process.env.VUE_APP_VERSION === "3" ? createApp(App) : new Vue({ render: h => h(App), }); app.mount('#app'); ``` #### 配置 PDF 预览组件 创建一个新的 Vue 组件用于展示 PDF 文件的内容： ```html <template> <div class="pdf-viewer"> <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data() { return { pdfSrc: null, loadingTask: null, numPages: undefined } }, methods: { loadPdf(url) { this.loadingTask = pdf.createLoadingTask(url) this.loadingTask.promise.then(pdf => { this.numPages = pdf.numPages; this.pdfSrc = url; }).catch(err => console.error('加载失败:', err)); } }, mounted(){ const filePath = '/path/to/sample.pdf' this.loadPdf(filePath); } } </script> ``` 此部分实现了基本的 PDF 加载逻辑，并通过循环渲染每一页内容[^1]。 #### 添加 Office 文档支持 利用 `@vue-office/docx` 和 `@vue-office/excel` 来处理 Docx 和 Xlsx 类型的数据源： ```bash npm install @vue-office/docx @vue-office/excel vue-demi ``` 接着可以在相应页面导入这些插件并调用它们提供的方法完成文档解析与呈现工作[^3]。 例如，在一个名为 `DocumentPreview.vue` 的新组件里可以这样写： ```html <!-- DocumentPreview.vue --> <template> <!-- 这里放置具体的视图结构 --> </template> <script> import { defineComponent, ref } from 'vue'; import { useDocxViewer } from '@vue-office/docx'; import { useExcelViewer } from '@vue-office/excel'; export default defineComponent({ setup() { let docxUrl = ref('/path/to/document.docx') let excelUrl = ref('/path/to/spreadsheet.xlsx') function previewDocx() { useDocxViewer(docxUrl.value).then((content) => { // 处理返回的结果... }); } function previewExcel() { useExcelViewer(excelUrl.value).then((data) => { // 显示表格数据... }); } return { previewDocx, previewExcel }; } }); </script> ``` 上述代码片段展示了如何分别初始化两个不同类型的文档查看器实例，并提供了简单的回调函数模板以便进一步定制化界面布局和交互行为。