# tbs离线集成原生插件演示

**Repository Path**: muyao_gitee/tbs-office-plugin-demo

## Basic Information

- **Project Name**: tbs离线集成原生插件演示
- **Description**: tbs离线集成原生插件演示，uniapp DEMO
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-03-06
- **Last Updated**: 2023-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### jhhaha-office文档预览 使用说明 ###

离线集成x5好处就是无需远程下载安装x5内核(<font color="red"><u>注意首次使用需要联网！！！</u></font>**)，从而避免各种原因安装失败。
**此插件为componet视图组件，仅在nvue页面(当前不支持vue页面，今后支不支持以官方说明为准)使用，path属性暂仅支持本地路径。

演示代码(xxx.nvue)

有问题的话可以把详细问题发我邮箱，我随时在线的，jianghong2020@qq.com

```html
<template>
    <div>
        <div>
			<text class="title">离线tbs文档预览测试</text>
		</div>
        <div class="btns-box">
			<button class="btn" @click="reflesh('test.docx')">
				<text class="btn-text">文件1</text>
			</button>
			<button class="btn" @click="reflesh('test2.docx')">
				<text class="btn-text">文件2</text>
			</button>
			<button class="btn" @click="reflesh('')">
				<text class="btn-text">刷新</text>
			</button>
		</div>
        <office ref="office" :path="path" @onReady="onReady" @on Error="onError" style="width: 750rpx;height: 450rpx;border: 1px;"/>
    </div>
</template>
<script>
export default{
    data(){
      return {
          //仅支持本地文件，可先下载到本地。
          base: '/storage/emulated/0/Download/',
		  path: '/storage/emulated/0/Download/test.docx',
      }  
    },
	methods: {
			on Error(e) {
				//出现错误时
				uni.showModal({
					content: e.detail.msg,
				})
				console.log(e.detail)
			},
			reflesh(f) {
				//刷新显示，如果改变文件路径则打开新文件
				if (f) {
					this.path = this.base + f;
				}

				this.$refs.office.refresh()
			},
			onReady(e) {
				//初始化成功，此时才可以正常使用
				// uni.showModal({
				// 	content:e.detail.msg,
				// })
			}
		}
}
</script>
<style scoped>
	.title{
		text-align: center;
		font-size: 16rpx;
	}
	
	.btns-box {
		display: flex;
		justify-content: center;
		flex-direction: row;
		margin: 20rpx 0;
	}

	.btns-box .btn {
		padding: 0.5em 1em;
		background-color: #3F536E;
		margin: 1em 0;
		width: 120rpx;
	}
	
	.btn-text{
		color: #FFFFFF;
		text-align: center;
		font-size: 22rpx;
	}
</style>
```

office组件

```markdown
//属性
path:string #要打开的文档本地路径
//事件
on Error	#发生错误时触发
onReady	#初始化完成时触发，通常初始化过程在30s内。
//方法
refresh	#刷新，如果改变path后执行则会打开新的文档。
```

事件对象 e.detail

```json
{
	ready:true,//是否初始化完毕
    msg:'初始化成功',//调试信息
    version:0,//x5内核版本
	
}
```

注意：目前不支持模拟器，请使用真机调试