更新记录

1.0.3（2024-01-19）

优化文档说明

1.0.2（2024-01-16）

优化

1.0.1（2023-06-02）

删除多余文件

平台兼容性

ss-preview

在线预览文档（pdf)，图片和视频,如果想预览doc,docx,xls,xlsx等文档可通过服务端转换成pdf文件流实现预览，例如

此处仅为.doc,.docx,.xls,.xlsx示例，通过服务端接口把相关文件转换为pdf文件流

把doc等链接通过https://xxxx接口传参转为浏览器可识别的文件流 https://xxxx?file==${encodeURIComponent('http://xxxx.doc')}

不清楚使用方式可点击右侧导入示例项目运行完整示例

使用说明

图片支持多张预览，所以传递数组进去

注意事项

小程序端因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

<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

<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>