vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库

踩坑1：Warning: getHexString - ignoring invalid character: 33 渲染失败

（1）在vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地方；

（2）引用时，不能使用相对路径，因为使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。写法：“/static/pdf/show.pdf"，/即表示public文件夹(需略去public)；

一、文档链接

https://gitcode.com/mirrors/501351981/vue-office/overview?utm_source=csdn_github_accelerator&isLogin=1
https://501351981.github.io/vue-office/examples/docs/guide/

二、安装

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

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

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

使用示例

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

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

.docx文件预览
使用网络地址预览

<template>
  <vue-office-docx 
      :src="docx"
      style="height: 100vh;"
      @rendered="rendered"
  />
</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:{
   
   
    rendered(){
   
   
      console.log("渲染完成")
    }
  }
}
</script>

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

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