vue引用vue-office实现docx、excel、pdf等文件预览

vue-office

vue-office支持多种文件(docx、excel、pdf)预览的vue组件库，支持vue2/3，也支持非Vue框架的预览。

安装命令

#docx文档预览
npm install @vue-office/docx

#excel文档预览
npm install @vue-office/excel

#pdf文档预览
npm install @vue-office/pdf

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

npm install @vue/composition-api

文件预览
 

<template>
    <div>
        <button @click="FilePreviewDialogHandle('docx')">测试doc文件预览</button>
        <button @click="FilePreviewDialogHandle('pdf')">测试pdf文件预览</button>
        <button @click="FilePreviewDialogHandle('xlxs')">测试xlsx文件预览</button>
        <div>
            <div v-if="getFileType(fileUrl) == 'docx'">
              <vue-office-docx
                :src="fileUrl"
                style="height: 100vh;overflow: auto"
                @rendered="rendered"