告别繁琐，拥抱简洁：vue-office，Vue文件预览的终极解决方案

目录

Web预览Office组件

介绍

功能特色

效果截图

安装使用

项目地址

---

 

Web预览Office组件

介绍

vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3。

目标是成为使用最简单，功能最强大的文件预览库

功能特色

• • 一站式：提供docx、.xlsx、pdf多种文档的在线预览方案，有它就够了，不用再四处寻找、测试、集成各种库了

• • 使用简单：只需提供文档的src(网络地址)即可完成文档预览，也支持ArrayBuffer、Blob等多种格式

• • 支持样式：不仅能预览内容，也支持文档样式，最大限度还原office文件内容

效果截图

安装使用

npm install @vue-office/docx vue-demi

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

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

<template>
    <vue-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

项目地址

• • 项目文档：https://501351981.github.io/vue-office

• • Github：https://github.com/501351981/vue-office

• • 在线预览：https://501351981.github.io/vue-office/examples/dist/#/pdf  

引入地址