vue预览excel文件

最近有个需求是预览excel，经过一顿猛搜，找到了又一解决方案——vue-office。

官方文档|

xlsx文件预览 | vue-office

vue-office: 支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3

进入实操模式。

第一、安装

//excel文档预览组件
npm install @vue-office/excel vue-demi @vue/composition-api@1.3.0

第二、预览

// 下边是伪代码  千万不要直接复制
 
 
// 渲染组件
<template>
  <vue-office-excel :src="excel" @rendered="rendered"/>
</template>
 
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
 
// 引入接口
 
import getExcelData from '..........'
 
export default {
  components:{
    VueOfficeExcel
  },
  data(){
    return {
      excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    },
 
 
       /**
        在这里开始请求数据
      */
 
       fetchExcelData () {
            getExcelData ().then(res => {
                this.excel= res
            })
 
       },
 
 
 
        /******* getExcelData 注意 
            这个接口的responseType要设置为'arraybuffer',不设置可以渲染不出来
    
        ********/
 
 
 
 
  }
}
</script>

第三、自定义样式

还可以根据这个函数进行自定义样式。

transformData: (workbookData) => {
          
          workbookData[0].styles = workbookData[0].styles.map(item => {
 
            // 修改文字大小
            item.font.size = 18;
 
            // 颜色
            item.color = '#888'
            
            // 修改背景颜色
            item.bgColor = '#f40';
 
            // 修改border
 
            item.border = {
 
                top: ['thin', '#fff']
            }
 
 
            .......
 
            
 
}

此次预览，使用的是vue-office。

当然我们还可以使用其他的框架插件进行预览。

下篇文章继续谈论。