更新记录
1.0.3(2023-02-22) 下载此版本
本插件将于2023/11/30停止提供服务
1.0.2(2022-07-19) 下载此版本
- 【添加】 兼容大部分小程序
- 【修复】 微信小程序中直接打开问题
1.0.1(2022-07-02) 下载此版本
修复在 ios 下背景出现大量标题,主题,创作者等等数据
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | × | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | × | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
插件介绍
预览的文件地址必须是可以通过互联网访问的!!!
预览的文件地址必须是可以直接复制在浏览器地址中访问的!!!
本插件将于2023/11/30停止提供服务
文档预览工具新版本已上线
对比当前版本支持了手机端双手缩放操作,office文件不在依赖微软的解析接口,支持服务端完全私有化部署(内网部署),UI界面有单独的电脑端、ios端、安卓端。
新版地址:h5office。预览office文件,预览文档,打开PDF WORD PPT EXCEL 文件 - DCloud 插件市场
插件原理
pdf 文件预览是通过
pdf.js
开源库,搭建了一个pdf预览的网站。前端只需要使用 iframe 加载这个网站即可。pdf.js 官网offce 文件的预览是通过微软offce在线接口进行解析的。offce在线地址:https://view.officeapps.live.com/op/embed.aspx?src=‘你的文件网络地址’
在微信小程序中,是通过小程序中的API进行预览的。小程序文档
使用环境
不支持nvue 。小程序中使用官方提供的api。h5与其他环境是通过上面介绍的插件原理加载。
插件使用
插件已支持 uni_modules 支持组件easycom,以下代码演示的是普通使用
<!-- HTML -->
<mumu-previewOffce :fileUrl='fileUrl' v-model='showPreview'></mumu-previewOffce>
<button @click='showPreview = true'></button>
import MumuPreviewOffce from '@/uni_modules/mumu-previewOffce/components/mumu-previewOffce/mumu-previewOffce.vue'
export default {
components: {
MumuPreviewOffce
},
data() {
return {
showPreview: false,
fileUrl: 'https://h5plugin.mumudev.top/public/previewOffce/333.docx'
}
},
methods: {
},
}
相关 API
可传属性(Props)
参数 | 说明 | 类型 | 默认值 | 可选 |
---|---|---|---|---|
v-model | 双向绑定,显示或隐藏组件 | Boolean | false | false / true |
fileUrl | 预览文件的网络地址 | String | - | - |
打开本地预览
本地预览功能还在开发中...
开发思路是:
选择打开本地文件,上传到服务器。获取到服务器中的文件地址,传递给当前组件展示。
没有办法直接在本地打开,所有采取这种方案。有条件的同学可以自己开发。我也会尽快把这个功能做出来。