uni-app移动端-H5-微信小程序在线预览pdf，图片，视频

封装了一个插件，可直接导入hbuilderx查看使用；
插件地址：uni-app移动端-H5-微信小程序在线预览pdf，图片，视频

<template><view class="page"><!-- 预览图片 --><view v-if="previews.type === '1'" class="g-p-16" style="width:100%;height:100vh;margin:0 auto;"><image :src="src" style="width:100%;height:100%;" mode="aspectFit"></image></view><!-- 预览文件 --><web-view :webview-styles="webviewStyles" :src="src" v-if="previews.type === '2'"></web-view><!-- 预览视频 --><view class="video-detail-page" v-if="previews.type === '3'"><view class="video-box"><video v-if="src" :src="src"></video></view></view>   </view>
</template><script>
export default {data() {return {fileSrc: '',webviewStyles: {progress: {color: '#FF3333'}},url: '',src: '',previews: {type: '1'}};},onLoad(option) {console.log('file', option.file);if (option.file) {console.log(333, option);this.previews.type = option.type;let types = option.file.substr(option.file.lastIndexOf('.'));if (types === '.doc' || types === '.docx' || types === '.xls' || types === '.xlsx' || types === '.pdf') {let url = option.file;this.fileSrc = encodeURIComponent(url);this.src = `/hybrid/html/pdf-reader/index.html?file=${this.fileSrc}`;}else{this.src = option.file;}}}
};
</script><style lang="scss" scoped>
.page {height: 100%;.video-detail-page{width:100%;uni-video{width:100%;}video{width:100%;}}
}
</style>

uni-app移动端-H5-微信小程序在线预览pdf，图片，视频相关推荐

记录一次微信小程序实现预览pdf
微信小程序预览pdf需要注意的是,在安卓端和ios端是有差异的. 安卓端不能用web-view直接打开,需要先下载到本地,再打开文件进行预览. 网上说的ios端可以直接用web-view进行预览,但是 ...
微信小程序九宫格预览+单张图片预览
我们废话不多说直接上效果图下面是代码  <image style="width:550rpx; height: 600rpx;" sr ...
微信小程序：预览pdf，ppt，word等文件
wx.openDocument 可打开文件类型有: doc doc 格式 docx docx 格式 xls xls 格式 xlsx xlsx 格式 ppt ppt 格式 pptx pptx 格式 pd ...
微信小程序 - 在线预览 Office 文件（doc / docx / xls / xlsx / ppt / pptx / pdf）
效果图前言网上大部分教程功能有问题且文章无逻辑混乱,本文将提供优秀的示例. 本文只适用于预览服务端接口返回的网络地址文件,"本地上传" 文件并预览原理一样, 例如服务端接口返 ...
移动端H5+vue使用vue-pdf在线预览PDF
需求是点击查看收据按钮,进入新页面直接显示收据,可以放大.缩小.旋转.下载,没有分页 1.安装 npm i vue-pdf --save 2.使用 <template><div &g ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序打开预览下载的文件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 使用 wx.openDocument(obj) 方法预览 wx.downloadFile({url: 'htt ...
uniapp微信小程序老预览失败，或者上传失败（已解决）
uniapp微信小程序提示报错老是提示超过了2M 但是我改完之后还是提示超过2M的错误 message:Error: 系统错误,错误码:80058,preloadRule [pages/index ...
unicloud开发微信小程序调试预览、体验版无法获取数据
unicloud开发微信小程序使用的云空间是阿里的.使用腾讯自家的配置上简单些,但开始收费了.使用阿里的云空间需要在小程序平台配置域名白名单.问题出在,我已经配置了阿里云空间的域名,在使用体验版小程序 ...

uni-app移动端-H5-微信小程序在线预览pdf，图片，视频

uni-app移动端-H5-微信小程序在线预览pdf，图片，视频相关推荐

最新文章

热门文章