smart-office

支持多种文件(docx、excel、pdf)预览,以及思维导图设计的vue组件库，支持vue2/3。也支持非Vue框架的预览。

功能特色

• 一站式：提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档的在线预览方案，有它就够了
• 简单：只需提供文档的src(网络地址)即可完成文档预览
• 体验好：选择每个文档的最佳预览方案，保证用户体验和性能都达到最佳状态
• 性能好：针对数据量较大做了优化

安装

#docx文档预览组件
npm install @smart-office/docx [email protected]

#excel文档预览组件
npm install @smart-office/excel [email protected]

#pdf文档预览组件
npm install @smart-office/pdf [email protected]

#mind思维导图组件
npm install @smart-office/mind

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

npm install @vue/composition-api

使用示例

文档预览场景大致可以分为两种：

• 有文档网络地址，比如 https://***.docx
• 文件上传时预览，此时可以获取文件的ArrayBuffer或Blob

.docx文件预览

使用网络地址预览

<template>
    <smart-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="rendered"
    />
</template>

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

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

上传文件预览

读取文件的ArrayBuffer

<template>
    <div>
        <input type="file" @change="changeHandle"/>
        <smart-office-docx :src="src"/>
    </div>
</template>

<script>
import SmartOfficeDocx from '@smart-office/docx'
import '@smart-office/docx/lib/index.css'

export default {
    components: {
        SmartOfficeDocx
    },
    data(){
        return {
            src: ''
        }
    },
    methods:{
        changeHandle(event){
            let file = event.target.files[0]
            let fileReader = new FileReader()
            fileReader.readAsArrayBuffer(file)
            fileReader.onload =  () => {
                this.src = fileReader.result
            }
        }
    }
}
</script>

二进制文件预览

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

<template>
    <smart-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="rendered"
    />
</template>

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

export default {
    components:{
        SmartOfficeDocx
    },
    data(){
        return {
            docx: ''
        }
    },
    mounted(){
        fetch('你的API文件地址', {
            method: 'post'
        }).then(res=>{
            //读取文件的arrayBuffer
            res.arrayBuffer().then(res=>{
                this.docx = res
            })
        })
    },
    methods:{
        rendered(){
            console.log("渲染完成")
        }
    }
}
</script>

excel文件预览

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

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

<script>
//引入SmartOfficeExcel组件
import SmartOfficeExcel from '@smart-office/excel'
//引入相关样式
import '@smart-office/excel/lib/index.css'

export default {
    components: {
        SmartOfficeExcel
    },
    data() {
        return {
            excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

pdf文件预览

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

<template>
    <smart-office-pdf
        :src="pdf"
        style="height: 100vh"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入SmartOfficePdf组件
import SmartOfficePdf from '@smart-office/pdf'

export default {
    components: {
        SmartOfficePdf
    },
    data() {
        return {
            pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

mind思维导图组件

<template>
    <smart-office-mind :mind="mind" :options="options" style="height: 800px; width: 500px" />
</template>

<script>
//引入SmartOfficePdf组件
import SmartOfficeMind from '@smart-office/mind'

export default {
    data() {
        return {
            mind: {
                /* 元数据，定义思维导图的名称、作者、版本等信息 */
                meta: {
                name: "思维导图",
                author: "",
                version: "0.2",
                },
                /* 数据格式声明 */
                format: "node_tree",
                /* 数据内容 */
                data: {
                id: "root",
                topic: "smart-office",
                children: [
                    {
                    id: "mind", // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略
                    topic: "smart-office-mind", // [必选] 节点上显示的内容
                    direction: "right", // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
                    // expanded: false, // [可选] 该节点是否是展开状态，默认为 true
                    children: [
                        {
                        id: "easy8",
                        topic: "Easy to show",
                        children: [
                            { id: "open7", topic: "on GitHub" },
                            { id: "easy7", topic: "Easy to embed" },
                        ],
                        },
                        { id: "easy2", topic: "Easy to edit" },
                        { id: "easy3", topic: "Easy to store" },
                        { id: "easy4", topic: "Easy to embed" },
                    ],
                    },
                    {
                    id: "open",
                    topic: "smart-office-docx",
                    direction: "right",
                    // expanded: false,
                    children: [
                        { id: "open1", topic: "on GitHub" },
                        { id: "open2", topic: "BSD License" },
                    ],
                    },
        
                    {
                    id: "powerful",
                    topic: "smart-office-excel",
                    direction: "right",
                    // expanded: false,
        
                    children: [
                        { id: "powerful1", topic: "Base on Javascript" },
                        { id: "powerful2", topic: "Base on HTML5" },
                        { id: "powerful3", topic: "Depends on you" },
                    ],
                    },
                    {
                    id: "other",
                    topic: "smart-office-pdf",
                    direction: "right",
                    // expanded: false,
        
                    children: [
                        { id: "other1", topic: "I'm from local variable" },
                        { id: "other2", topic: "I can do everything" },
                    ],
                    },
                ],
                },
            },
            options: {
                container: "jsmind_container", // [必选] 容器的ID
                editable: true, // [可选] 是否启用编辑
                theme: "primary", // [可选] 主题
                view: {
                engine: "canvas", // 思维导图各节点之间线条的绘制引擎
                hmargin: 20, // 思维导图距容器外框的最小水平距离
                vmargin: 20, // 思维导图距容器外框的最小垂直距离
                line_width: 2, // 思维导图线条的粗细
                line_color: "#ddd", // 思维导图线条的颜色
                hide_scrollbars_when_draggable: true,
                },
                layout: {
                hspace: 100, // 节点之间的水平间距
                vspace: 20, // 节点之间的垂直间距
                pspace: 20, // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
                },
                shortcut: {
                enable: false, // 是否启用快捷键 默认为true
                }
            }
        }
    }
}
</script>