vue-office 预览docx，excel，pdf文件

 vue-office 官网

一、安装

1) 分开安装

# docx 文档预览组件
npm install @vue-office/docx vue-demi@0.14.6

# excel 文档预览组件
npm install @vue-office/excel vue-demi@0.14.6

# pdf 文档预览组件
npm install @vue-office/pdf vue-demi@0.14.6

 vue-demi@0.14.6;  其中 @0.14.6 为版本号，可以不加，默认下载最新版。

如果是 vue2.6 版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

2) 全部安装

npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi@0.14.6

 二、使用

1) 组件封装

① 创建文件 @/components/FileView/index.vue

我这里预览 PDF 时用的 PDFJS，因为功能更全面。你们不用的话可以去掉，或者自行比较一下。

② 创建文件 @/components/FileView/PDF.vue

此文件主要是通过 PDFJS 预览 PDf，没用到的可以不用管。

详细使用可以参考我的另一篇文章：记录一下使用 PDFJS 遇到的坑。

2) 调用组件

import fileViewModal from "@/components/FileView/index.vue"

三、非 Vue 框架文件预览

1) 安装

# docx 文件预览库
npm i @js-preview/docx

# excel 文件预览库
npm i @js-preview/excel

# pdf 文件预览库
npm i @js-preview/pdf

 全部安装: 

npm install @js-preview/docx @js-preview/excel @js-preview/pdf

 2) 预览

① docx 文件预览

import jsPreviewDocx from "@js-preview/docx";
import '@js-preview/docx/lib/index.css'

// 初始化时指明要挂载的父元素 Dom 节点
const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));

// 传递要预览的文件地址即可
myDocxPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx').then(res=>{console.log('预览完成');
}).catch(e=>{console.log('预览失败', e);
})

② excel 文件预览

import jsPreviewExcel from "@js-preview/excel";
import '@js-preview/excel/lib/index.css';

const myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));
myExcelPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx').then(res=>{console.log('预览完成');
}).catch(e=>{console.log('预览失败', e);
})

③ pdf 文件预览

import jsPreviewPdf from "@js-preview/pdf";

const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'), {onError: (e)=>{console.log('发生错误', e)
    },
    onRendered: ()=>{console.log('渲染完成')
    }
});
myPdfPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf');

四、注意

• vue-office 不支持 doc 文件的预览（如果需要预览 doc，请更换其他组件或者找后端帮忙转换成 docx）

• 如果后端给的不是 CDN 地址，而是一些 POST 接口，该接口返回二进制流，则可以调用接口获取文件的 ArrayBuffer 数据，传递给 src 属性。