vue-office文档预览插件

简述：

在项目中，可能会有录入信息时预览上传的文件，或者在详情页查看文件等在线预览附件的需求场景，但是，一般除pdf外，其余类型文件并不支持直接客户端打开。 vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，能够很好的实现在项目中各种在线预览附件的功能需求

优点：

• 使用简单，只需提供文档的src(网络地址)即可完成文档预览

• 支持docx、pdf、excel多种文档的在线预览方案

• 用户体验和性能比较好，可以选择每个文档的最佳预览方案

1. 安装

// docx文档预览组件
npm install @vue-office/docx vue-demi
 
// excel文档预览组件
npm install @vue-office/excel vue-demi
 
// pdf文档预览组件
npm install @vue-office/pdf vue-demi复制

注意点：

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

成功效果： 如下图，已经成功安装会出现added xx packages提示

2. 引入组件、注册

引入进来是个组件，注册一下就可以直接使用了 。
使用模块不多，不建议使用全局引入、注册

// docx文档引入、注册
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
 
<script>
export default {
  components: { VueOfficeDocx }
}
</script>
 
 
// excel文档引入、注册
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
 
<script>
export default {
  components: { VueOfficeDocx }
}
</script>
 
// pdf文档引入、注册
import VueOfficePdf from '@vue-office/pdf'
 
<script>
export default {
  components: { VueOfficeDocx }
}
</script>复制

3. 使用

3.1 常用属性和方法：

示例：

<VueOfficeDocx :template="myTemplate" :options="editorOptions" ref="docxEditor" 
@document-loaded="handleDocumentLoaded"></VueOfficeDocx>
 
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
 
<script>
export default {
  components: { VueOfficeDocx },
  data() {
  return {
    myTemplate: '/path/to/template.docx'，
    editorOptions: {
      toolbar: true,
      width: '800px',
      height: '600px'
    }
  };
}，
mounted() {
  const editor = this.$refs.docxEditor.editor;
  // 使用 editor 实例执行操作
},
methods:{
	testDocument() {
		// 保存文档
    	this.$refs.docxEditor.save('/path/to/save.docx');
    	// 加载文档
    	this.$refs.docxEditor.load('/path/to/document.docx');
   },
   handleDocumentLoaded() {
    // 文档加载完成后执行的操作
  	}
 }
 
}
</script>
 
 复制

3.2 常见使用场景：

• 预览指定地址文档，例如网络地址等
• 文件上传后点击预览查看

3.2.1. 使用网络地址示例（docx文件预览）

excel文件预览和pdf文件预览与docx的使用方式一致，注意文档格式即可。

<template>
   <el-button size="small" type="primary" @click="isShowDocx=true">点击预览</el-button>
   <VueOfficeDocx v-if="isShowDocx" :src="docx" style="height: 100vh;" @rendered="rendered" />
</template>
 
import VueOfficeDocx from '@vue-office/docx' //引入VueOfficeDocx组件
import '@vue-office/docx/lib/index.css' //引入相关样式
 
export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
     isShowDocx: false,
     //设置文档网络地址，可以是相对地址
     docx: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx' 
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}复制

效果图：

3.2.2. 上传文件预览示例（docx文件预览）

excel文件预览和pdf文件预览与docx的使用方式一致，注意文档格式即可。
接收后台返回的文件流也是相同的，设置responseType为"blob"，返回的也就是文件流Blob对象，只要将文件流赋值给src即可

<template>
  <div>
    <input type="file" @change="changeHandle"/>
    <VueOfficeDocx :src="src"/>
  </div>
</template>
 
 
import VueOfficeDocx from '@vue-office/docx' //引入VueOfficeDocx组件
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
      }
    }
  }
}复制

效果图：

4. 注意事项

1. 目前vue-office不支持doc格式。
2. 需要确保数据格式正确，否则可能会出现转换错误的情况。