# ss-preview

### 在线预览文档（pdf)，图片和视频,如果想预览doc,docx,xls,xlsx等文档可通过服务端转换成pdf文件流实现预览，例如
##  此处仅为.doc,.docx,.xls,.xlsx示例，通过服务端接口把相关文件转换为pdf文件流
##  把doc等链接通过https://xxxx接口传参转为浏览器可识别的文件流 `https://xxxx?file==${encodeURIComponent('http://xxxx.doc')}`	
 
### 不清楚使用方式可点击右侧导入示例项目运行完整示例

## 使用说明
| 属性		| 是否必填	|  值类型	| 默认值	| 说明			|
| --------- | -------- 	| -----: 	| --: 	| :------------:|
| fileUrl	|	否 		| String	|空	    | 预览单个文档或视频传递url		|
| fileType	|	是 		| String	|空	    | 类型（1.预览图片，2.预览文件，3.预览视频）		|
| imageList	|	否 		| Array	    |空数组  | 预览单个或多个图片传递数组 |
###图片支持多张预览，所以传递数组进去


## 注意事项
### 小程序端因hybrid不能使用本地HTML，所以插件提供的是从微信官方方法uni.downloadFile下载成功之后通过uni.openDocument打开，此方法兼容APP，在APP上打开的效果是调用系统相关应用打开，无相关应用则不能打开 不兼容H5。
### APP预览视频要在manifest.json-App模块配置里面勾选VideoPlayer(视频播放)
### 预览图片也可以使用uni-app的方法uni.previewImage实现预览，可以视需求而定
### 预览视频也可以直接使用video标签，但是video为原生组件，层级较高，在APP滑动的界面可能会产生兼容性问题，所以我这边是单独提取出来，使用者可以视需求而定

## 注意！！！此处请一定注意！！！
### uni_modules一定要在根目录
### 如果不在根目录，在src下方，请全局搜索`/uni_modules/ss-preview/hybrid/html/pdf-reader/index.html?file=${encodeURIComponent(value)}`改为`/src/uni_modules/ss-preview/hybrid/html/pdf-reader/index.html?file=${encodeURIComponent(value)}`
## 不支持vite打包！！！

## 基本用法
### 引入uni_modules
### 新建一个preview.vue
```vue
<template>
	<view>
		<ss-preview :fileUrl="fileUrl" :fileType="fileType" :imageList="imageList"></ss-preview>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileUrl: '',
				fileType:'',
				imageList:[],
			}
		},
		onLoad(option) {
			let options = JSON.parse(decodeURIComponent(option.item))
			this.fileType = options.type;
			if(options.type === '1') return this.imageList = options.src
            this.fileUrl = options.src;
			//此处仅为.doc,.docx,.xls,.xlsx示例，通过服务端接口把相关文件转换为pdf文件流
			// let types = options.src.substr(options.src.lastIndexOf('.'));
			// if(types ！== '.pdf'){
				// this.fileUrl = `https://xxxx?file==${encodeURIComponent(options.src)}`
			// }			
		},
	}
</script>

```

### 预览文件页面示例index.vue
```vue
<template>
    <view class="box">
		<view style="margin-bottom:32rpx;">uni-app预览文件</view>
		<view v-for="(item,index) in fileList" :key="index">
			<view style="word-break: break-all;">{{item.src}}</view>
			<button class="previewBtn" @click="toPage(item)">{{item.name}}</button>
		</view>
    </view>
</template>

<script>
export default {
	components:{},
    data() {
        return {
			fileList:[
				{
					type:'1',
					name:'预览图片',
					src:['https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/efd8e280-60a9-11eb-a16f-5b3e54966275.jpg','https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/efd8e280-60a9-11eb-a16f-5b3e54966275.jpg']
				},
				{
					type:'2',
					name:'预览文档',
					src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
				},
				{
					type:'3',
					name:'预览视频',
					src:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
				},
			]
        };
    },
    onLoad(options) {},
    methods: {
		toPage(item){
			if(item.type === '2'){//预览文档
				//#ifdef MP-WEIXIN
				//微信小程序预览文档可以直接打开，不用跳转页面
				this.previewWechat(item.src)
				return
				//#endif
			}
			uni.navigateTo({
				url:'/pages/preview?item='+encodeURIComponent(JSON.stringify(item))
			})
		},
		//微信小程序预览文档,可预览.doc,.docx,.xls,.xlsx,.pdf等文件
		previewWechat(urlPdf) {
			uni.showLoading({
				title: '正在加载中..'
			})
			uni.downloadFile({
				url: urlPdf,
				success: function(res) {
					var filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						showMenu: true,
						success: function(res) {
							console.log('打开文档成功');
							uni.hideLoading()
						},
					});
				},
				complete: function(r) {
					uni.hideLoading()
				}
			});
		},
	}
};
</script>
<style lang="scss" scoped>
.box {
    padding: 20rpx 40rpx;
	.previewBtn{
		height:60rpx;
		width:200rpx;
		border-radius:16rpx;
		background-color:#409eff;
		color:#fff;
		line-height:60rpx;
		margin:24rpx 12rpx;
	}
}
</style>


```