{"id":18373459,"url":"https://github.com/lavieAll/Seal-UniPlugin-Demo","last_synced_at":"2025-10-25T01:31:04.733Z","repository":{"id":41742659,"uuid":"304575669","full_name":"silianpan/Seal-UniPlugin-Demo","owner":"silianpan","description":"跨平台Office文档、图片在线预览，音视频播放原生插件Seal-OfficeOnline【非X5离线、组件嵌入、水印、WPS预览编辑】。百度OCR文字识别、证卡识别、票据识别原生插件Seal-OCR。百度语音在线识别原生插件Seal-VoiceASR。","archived":false,"fork":false,"pushed_at":"2025-01-05T13:30:42.000Z","size":289837,"stargazers_count":52,"open_issues_count":1,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-01-31T13:37:26.801Z","etag":null,"topics":["aar","android","android-native-plugin","baidu-aip","file-preview","framework","ios","ios-native","ocr","office-online","preview","tbs","tencent-x5","uni-app","uniapp-plugin","webview","wps","x5"],"latest_commit_sha":null,"homepage":"https://ext.dcloud.net.cn/plugin?id=3226","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/silianpan.png","metadata":{"files":{"readme":"README-ImageVideo.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-16T09:08:59.000Z","updated_at":"2025-01-10T04:23:11.000Z","dependencies_parsed_at":"2023-12-28T06:05:31.839Z","dependency_job_id":"e6360c6c-f4cf-4825-941e-2f978c23c649","html_url":"https://github.com/silianpan/Seal-UniPlugin-Demo","commit_stats":{"total_commits":148,"total_committers":3,"mean_commits":"49.333333333333336","dds":0.5067567567567568,"last_synced_commit":"e023e32e7da4f5a91c0f5ac3a5a9bb9eae4ccb6d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silianpan%2FSeal-UniPlugin-Demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silianpan%2FSeal-UniPlugin-Demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silianpan%2FSeal-UniPlugin-Demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silianpan%2FSeal-UniPlugin-Demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/silianpan","download_url":"https://codeload.github.com/silianpan/Seal-UniPlugin-Demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238053513,"owners_count":19408702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aar","android","android-native-plugin","baidu-aip","file-preview","framework","ios","ios-native","ocr","office-online","preview","tbs","tencent-x5","uni-app","uniapp-plugin","webview","wps","x5"],"created_at":"2024-11-06T00:10:29.721Z","updated_at":"2025-10-25T01:30:56.357Z","avatar_url":"https://github.com/silianpan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 引言\n\nSeal-ImageVideo原生插件，实现了**图片预览**和**音视频播放**。\n\n[Seal-ImageVideo插件下载使用地址](https://ext.dcloud.net.cn/plugin?id=5478)\n\n\n\n## 〇、前言\n\n2023年3月13日，腾讯发布了调整公告：[关于腾讯浏览服务内核SDK-内核文档能力调整公告](https://mp.weixin.qq.com/s/rmSa4Fs77MDdjFioRKwXPA)，公告里面明确说明了：**2023年4月13日零时起，内核文档能力正式下线**。插件2.x版本使用了腾讯X5云服务能力，**已经上线的项目需要及时升级插件到3.x版本哟**，3.x版本不再依赖腾讯X5以及任何第三方插件。\n\n### 原生Android项目离线集成，查看Demo工程及README文档： [Seal-Office-Android-Demo](https://github.com/silianpan/Seal-Office-Android-Demo)\n\n\u003cspan style=\"color:red\"\u003e各位同学，对于插件使用还有疑问的，可以加QQ群（170683293）咨询，也可以扫下面二维码进微信群。\u003c/span\u003e\n\n\u003cimg src=\"http://silianpan.cn/upload/2022/01/01/Seal-UniPlugin-WeiXin.jpeg\" width=\"240\" style=\"width:240px;\" /\u003e\n\n## 一、注意事项\n\n* ##### 本插件不需要其他任何配置，也不需要依赖其他任何库，不要在manifest.json-\u003eApp模块配置中勾选Android X5 Webview`\n\n* ##### 不要同时使用其他同类文档预览插件，否则，可能会引起包冲突\n\n\n\n## 二、快速上手\n\nGithub克隆（[demo工程地址](https://github.com/silianpan/Seal-UniPlugin-Demo) ）或在右上角直接下载示例工程\n\n安装开发工具：[HBuilderX](https://www.dcloud.io/hbuilderx.html)\n\n安装依赖包环境：[NodeJS](https://nodejs.org/en)\n\n### Step1. 下载demo工程，使用HBuilderX打开\n\n* 代码根目录下执行\n\n  ```bash\n  npm install --registry https://registry.npm.taobao.org\n  ```\n\n\u003cspan style=\"color:red\"\u003e注意：Vue版本要选择2，不要用3\u003c/span\u003e\n\n### Step2. 添加本文插件\n\n插件名称：[Seal-ImageVideo](https://ext.dcloud.net.cn/plugin?id=5478)\n\n点击右上角`试用`或者`购买`，选择你的云打包插件\n\n### Step3. 选择`manifest.json-\u003eApp原生插件配置`中加载云端插件\n\n\u003cimg src=\"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-lau3cirf3bhq53ac04/eb31ccf0-15dc-11eb-8ff1-d5dcf8779628.png\" width=\"600\" style=\"width:600px\" /\u003e\n\n### Step4. 使用插件\n\n* 在vue或nvue组件中，导入插件\n\n```js\nconst sealImageVideoModule = uni.requireNativePlugin('Seal-ImageVideo');\n```\n\n* **openFile**方法（推荐）：支持Android和IOS，预览Office文件，支持如下格式：pdf、txt、doc、docx、xls、xlsx、ppt、pptx、epub等近50种类型文件，同时支持常见的音视频格式。\n\n**\u003cspan style=\"color:red\"\u003e接口使用方法，参考如下章节《三、使用方法》\u003c/span\u003e**\n\n### Step5. 调试\n\n* 制作自定义调试基座：在开发工具中点击“运行到手机或模拟器-》制作自定义调试基座”\n* 选择自定义调试基座：然后“运行到手机或模拟器-》基座运行选择-》自定义调试基座”\n* 连接真机，运行到手机或模拟器-》运行到Android App基座，进行运行调试\n\n## 三、使用方法\n\n### 1、图片预览\n\n使用接口：openFile（Android）、openFileImage（IOS）\n\n\u003e 支持平台：Android、IOS\n\n```javascript\n/**\n* 图片预览，支持jpg、jpeg、png、bmp、jpg、gif等多种常用图片格式\n* 图片可以来源于列表或九宫格，传递给imageUrls数组\n* @param {Object} fileUrl 图片url\n* @param {Object} imageCurrentIndex 当前图片位置下标，从0开始\n*/\nopenImage(fileUrl, imageCurrentIndex) {\n    if (this.platform === 'android') {\n        // Android\n        sealImageVideoModule.openFile({\n            imageUrls: this.imageList,\n            imageCurrentIndex, // 当前点击图片在imageUrls中的下标，从0开始，默认为0\n            imageIndexType: 'number', // 图片底部指示器类型，默认为'dot'，可选：'number':数字；'dot':点\n            isSaveImg: true, // 是否长按保存图片\n        });\n    } else if (this.platform === 'ios') {\n        // IOS\n        sealImageVideoModule.openFile(\n            {\n                url: fileUrl, // 同时支持在线和本地文档，三种参数传递方式，具体查看文档说明\n                title: 'IOS图片预览', // 顶栏标题，默认为：APP名称\n                topBarBgColor: '#3394EC' // 顶栏背景颜色，默认为：#3394EC（科技蓝）\n            },\n            res =\u003e {\n                uni.showModal({\n                    content: 'IOS图片预览事件结果：' + JSON.stringify(res)\n                });\n            }\n        );\n    }\n},\n```\n\n\n\n### 2、音视频播放\n\n使用接口：openFile\n\n\u003e 支持平台：Android、IOS\n\n```javascript\n/**\n* 视频播放，支持市面上几乎所有的音视频格式，包括mp4, flv, avi, 3gp, webm, ts, ogv, m3u8, asf, wmv, rm, rmvb, mov, mkv等18种视频格式，以及mp3，wav，wma，flac等音频格式\n* 功能包括：播放、暂停、重播、全屏播放、直播等\n* 支持Android和IOS\n* @param {String} fileUrl 音视频url\n*/\nopenVideo(fileUrl) {\n  sealImageVideoModule.openFile(\n    {\n      videoUrl: fileUrl,\n      isLive: true,\n      title: '音视频播放标题',\n      isTopBar: true,\n      isBackArrow: false,\n      topBarBgColor: '#F77234',\n      topBarTextColor: '#FCF26B',\n      topBarTextLength: 12\n    },\n    res =\u003e {\n      this.printInfo('播放音视频事件结果：', res);\n    }\n  );\n}\n```\n\n\n\n## 四、openFile接口参数说明\n\n支持打开在线文档，本地文档\n\n\u003e 支持平台：Android、IOS\n\n| 参数名            | 说明                                                         | 类型          | 是否必填 | 默认值            | 可选值                  |\n| ----------------- | ------------------------------------------------------------ | ------------- | -------- | ----------------- | ----------------------- |\n| isTopBar          | 是否显示顶栏，\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | bool          | 否       | true              | false                   |\n| title             | 顶栏标题，isTopBar为true时有效                               | string        | 否       | APP名称           |                         |\n| topBarHeight      | 顶栏自定义高度，isTopBar为true时有效，类型为正整数，\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | int           | 否       | actionBarSize     |                         |\n| topBarBgColor     | 顶栏背景颜色，isTopBar为true时有效                           | string        | 否       | #3394EC（科技蓝） |                         |\n| topBarTextColor   | 顶栏文本颜色（isTopBar为true时有效）                         | string        | 否       | #FFFFFF（白色）   |                         |\n| topBarTextLength  | 顶栏标题文字长度（isTopBar为true时有效），\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | int           | 否       | 12                |                         |\n| isBackArrow       | 是否显示返回按钮（isTopBar为true时有效），\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | bool          | 否       | true              | false                   |\n| videoUrl          | 视频在线url，此参数优先于图片预览和文档预览                  | string        | 是       |                   |                         |\n| isLive            | 是否是视频直播，\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | bool          | 否       | false             | true                    |\n| imageUrls         | 图片url数组，此参数优先于文档预览；长按图片底部弹出保存图片菜单，保存图片至相册，\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | array\u003cstring\u003e | 是       |                   |                         |\n| imageCurrentIndex | 当前点击图片在imageUrls中的下标，从0开始，\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | int           | 否       | 0                 |                         |\n| imageIndexType    | 图片底部指示器类型，\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | string        | 否       | 'dot'             | 'number':数字；'dot':点 |\n| isSaveImg         | 是否长按保存图片，\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | bool          | 否       | null              | true/false              |\n| canScreenshot     | 是否可以截屏，\u003cspan style=\"color:blue\"\u003e**3.0.2版本以上支持**\u003c/span\u003e，\u003cspan style=\"color:red\"\u003e**IOS端无此配置**\u003c/span\u003e | bool          | 否       | true（可以截屏）  | false（禁止截屏）       |\n\n## 五、回调结果\n\n### 1、回调结果格式\n\n```json\n// openFile接口\n{\n    \"code\": 1010,\n    \"msg\": \"页面返回\"\n}\n```\n\n### 2、回调结果状态码说明\n\n| 状态码 | 说明     |\n| ------ | -------- |\n| 1010   | 页面返回 |\n\n## 六、预览效果\n\n### 1、Android\n\n* 预览mp4\n\n  \u003cimg src=\"https://i.imgtg.com/2023/05/30/Ool44l.jpg\" style=\"width:200px;height:auto\" width=\"200px\" /\u003e\n\n  \u003cimg src=\"https://i.imgtg.com/2023/05/30/OolD6g.jpg\" style=\"width:600px;height:auto\" width=\"200px\" /\u003e\n\n* 预览jpg\n\n  \u003cimg src=\"https://i.imgtg.com/2023/05/30/OolJQ6.jpg\" style=\"width:200px;height:auto\" width=\"200px\" /\u003e\n\n\n\n###  2、IOS\n\n* 预览mp4\n\n  \u003cimg src=\"https://i.imgtg.com/2023/05/30/Oolf6X.png\" style=\"width:200px;height:auto\" width=\"200px\" /\u003e\n\n* 预览jpg\n\n  \u003cimg src=\"https://i.imgtg.com/2023/05/30/OolYDi.png\" style=\"width:200px;height:auto\" width=\"200px\" /\u003e\n\n转载请注明：[我的技术分享](http://silianpan.cn) » [跨平台Office文档预览原生插件，非腾讯X5，支持离线，稳定高可用](http://silianpan.cn/archives/filepreviewuninative)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FlavieAll%2FSeal-UniPlugin-Demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FlavieAll%2FSeal-UniPlugin-Demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FlavieAll%2FSeal-UniPlugin-Demo/lists"}