vue-office 支持预览多种文件(docx、excel、pdf、pptx)预览的vue组件库

官网地址:https://github.com/501351981/vue-office

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

1.在线预览word文件(以及本地上传预览)

1.1:下载组件库
html 复制代码
npm install @vue-office/docx [email protected]
1.2:页面使用
html 复制代码
<template>
    <div>
        <!-- 在线word预览 -->
        <!-- 本地文件上传预览 -->
        <input type="file" @change="changeHandle" />
        <vue-office-docx :src="docx" class="wordOffce" @rendered="rendered" />
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css';

let docx = ref<any>('http://static.shanhuxueyuan.com/test6.docx');
let rendered = () => {
    console.log("渲染完成")
}
// 本地文件上传预览
let changeHandle = (event: any) => {
    let file = event.target.files[0]
    let fileReader = new FileReader()
    fileReader.readAsArrayBuffer(file)
    fileReader.onload = () => {
        docx.value = fileReader.result;
    }
}
</script>
<style lang="less" scoped>
.wordOffce {
    height: 80vh !important;

    :deep(.docx-wrapper) {
        background-color: #fff !important;
    }
}
</style>

2. 在线预览PDF文件(以及本地上传预览)

2.1:下载组件库
html 复制代码
npm install @vue-office/pdf [email protected]
2.2: 页面使用
html 复制代码
<template>
    <div>
        <!-- 在线pdf预览 -->
        <!-- 本地文件上传预览 -->
        <input type="file" @change="changeHandle" />
        <vue-office-pdf :src="pdf" class="wordOffce" @rendered="renderedHandler" @error="errorHandler" />
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//引入VueOfficeDocx组件
import VueOfficePdf from '@vue-office/pdf'

let pdf = ref<any>('http://static.shanhuxueyuan.com/test.pdf');
let renderedHandler = () => {
    console.log("渲染完成")
}
let errorHandler = () => {
    console.log("渲染失败")
}
// 本地文件上传预览
let changeHandle = (event: any) => {
    let file = event.target.files[0]
    let fileReader = new FileReader()
    fileReader.readAsArrayBuffer(file)
    fileReader.onload = () => {
        pdf.value = fileReader.result;
    }
}
</script>
<style lang="less" scoped>
.wordOffce {
    height: 80vh !important;
    box-shadow: 0px 0px 5px 27px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 5px 27px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 27px rgba(0, 0, 0, 0.75);

    :deep(.vue-office-pdf-wrapper) {
        background-color: #fff !important;
    }
}
</style>

3. 在线预览Excel文件(以及本地上传预览)

3.1:下载组件库
html 复制代码
npm install @vue-office/excel [email protected]
3.2:页面使用
html 复制代码
<template>
    <div>
        <!-- 在线pdf预览 -->
        <!-- 本地文件上传预览 -->
        <input type="file" @change="changeHandle" />
        <vue-office-excel :src="excel" class="wordOffce" @rendered="renderedHandler" @error="errorHandler" />
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//引入VueOfficeDocx组件
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'

let excel = ref<any>('http://static.shanhuxueyuan.com/demo/excel.xlsx');
let renderedHandler = () => {
    console.log("渲染完成")
}
let errorHandler = () => {
    console.log("渲染失败")
}
// 本地文件上传预览
let changeHandle = (event: any) => {
    let file = event.target.files[0]
    let fileReader = new FileReader()
    fileReader.readAsArrayBuffer(file)
    fileReader.onload = () => {
        excel.value = fileReader.result;
    }
}
</script>
<style lang="less" scoped>
.wordOffce {
    height: 80vh !important;
}
</style>

4. 在线预览pptx文件(以及本地上传预览)

4.1:下载组件库
html 复制代码
npm install @vue-office/pptx [email protected]
4.2:页面使用
html 复制代码
<template>
    <div>
        <!-- 在线pdf预览 -->
        <!-- 本地文件上传预览 -->
        <input type="file" @change="changeHandle" />
        <vue-office-pptx :src="pptx" class="wordOffce" @rendered="renderedHandler" @error="errorHandler" />
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//引入VueOfficeDocx组件
import VueOfficePptx from '@vue-office/pptx'

let pptx = ref<any>('http://static.shanhuxueyuan.com/test.pptx');
let renderedHandler = () => {
    console.log("渲染完成")
}
let errorHandler = () => {
    console.log("渲染失败")
}
// 本地文件上传预览
let changeHandle = (event: any) => {
    let file = event.target.files[0]
    let fileReader = new FileReader()
    fileReader.readAsArrayBuffer(file)
    fileReader.onload = () => {
        pptx.value = fileReader.result;
    }
}
</script>
<style lang="less" scoped>
.wordOffce {
    height: 80vh !important;
}
</style>
相关推荐
阿珊和她的猫1 小时前
React 与 Vue 的区别:你会选择哪个框架呢
前端·vue.js·react.js
浪裡遊1 小时前
前端高频面试题day2
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
Vue3 首款 3D 数字孪生编辑器 正式开源!
前端·javascript·vue.js
海盐泡泡龟2 小时前
deepSeek浅谈对vue的mixin的理解,用于什么应用场景?
开发语言·前端·javascript·vue.js
不思念一个荒废的名字2 小时前
【黑马JavaWeb+AI知识梳理】前端Web基础02 - JS+Vue+Ajax
前端·javascript·vue.js
工业互联网专业2 小时前
基于springboot+vue的摄影师分享交流社区的设计与实现
java·vue.js·spring boot·毕业设计·源码·课程设计·摄影师分享交流社区
艾小逗6 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
Hamm9 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
HhhDreamof_11 小时前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源