Vue + vue-office realiza la vista previa de varios archivos (docx, excel, pdf)

Una biblioteca de componentes vue que admite la vista previa de varios archivos ( docx, excel, pdf ), admite vue2/3. También se admiten vistas previas para marcos que no sean Vue.

github: "Dirección del almacén"

Demostración: "Efectos de demostración"

Características

• One-stop: Proporcione soluciones de vista previa en línea para documentos docx, pdf y excel, es suficiente
• Simple: solo proporcione el src (dirección web) del documento para completar la vista previa del documento
• Buena experiencia: elija la mejor solución de vista previa para cada documento para garantizar la mejor experiencia de usuario y rendimiento

Instalar

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

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

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

Si es la versión vue2.6 o inferior, debe instalar @vue/composition-api adicionalmente

npm install @vue/composition-api/

Ejemplo de uso

Los escenarios de vista previa de documentos se pueden dividir aproximadamente en dos tipos:

• Hay una dirección de red del documento, como https://***.docx
• Obtenga una vista previa cuando se cargue el archivo, puede obtener el ArrayBuffer o Blob del archivo en este momento

vista previa del archivo .docx

Vista previa con dirección web

<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://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}

subir vista previa del archivo

Leer el ArrayBuffer del archivo

<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
      }
    }
  }
}

La vista previa del archivo Excel y la vista previa del archivo PDF se obtienen a través del archivo ArrayBuffer de la misma manera que el docx anterior.