vue 文件预览word, excel,pdf

vue 文件预览word, excel,pdf

word文件预览

• 安装

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

• 网络地址预览

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

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

export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      docx: 'http://www.baidu.com/test6.docx', //设置文档网络地址，可以是相对地址
      // docx: '/api/test6.docx' //或者自己的项目的接口地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}

• 上传文件预览, 读取文件的ArrayBuffer

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

import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
  components: {
    VueOfficeDocx
  },
  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
      }
    }
  }
}

excel文件预览

• 安装

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

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

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

//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            excel: 'http://www.baidu.com/demo/excel.xlsx',//设置文档地址
            // excel: '/api/test.xlsx' //或者自己的项目的接口地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}

pdf文件预览

• 安装

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

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

<template>
    <vue-office-pdf 
        :src="pdf"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
template>

//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'

export default {
    components: {
        VueOfficePdf
    },
    data() {
        return {
            pdf: 'http://static.shanhuxueyuan.com/test.pdf', //设置文档地址
            // pdf: '/api/test.pdf' //或者自己的项目的接口地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}