Web 端 office 文件预览工具库

vue-office 是一个支持多种文件预览的 vue 插件工具库，支持 word、excel、pdf 等各类型 office 文件，支持 vue2、vue3 以及其他非 vue 框架端的预览，支持在线地址预览、上传文件预览。

插件安装：

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

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

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

vue 中使用：

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

</template> 
<script>  
	import VueOfficeDocx from '@vue-office/docx' 
	import '@vue-office/docx/lib/index.css'  
	
	export default {   
		components: {    
		VueOfficeDocx   
	},   
	 
	data() {   
		return {    
		docx: 'xxx.docx' //设置文档网络地址，可以是相对地址  
		}   
	},    
	methods: { 
		renderedHandler() {     
			console.log("渲染完成")  
		},     
		 
		errorHandler() {     
			console.log("渲染失败")     
			}   
		} 
	}  
</script>

其他方式使用：

// npm  
npm i @js-preview/docx  
import jsPreviewDocx from "@js-preview/docx";  
import '@js-preview/docx/lib/index.css'  

// init 
const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx')); 
	myDocxPreviewer.preview('xxx.docx').then(res=>{  
		console.log('预览完成'); 
	}).catch(e=>{   
	console.log('预览失败', e);
})

功能和特性：

• 支持 word、excel、pdf 等各类型 office 文件预览。
• 支持在线链接地址文件预览，支持上传文件预览， 可以解析 ArrayBuffer、Blob 等多种格式。
• 支持各种文件格式相关配置，比如渲染行数、列数、宽、高等等各种样式，支持事件监听功能。