app（uniapp）端如何查看pdf、图片、视频

想把星星变成糖

已于 2023-05-26 10:44:10 修改

阅读量1.9k

点赞数 1

分类专栏： vue 前端 uniapp 文章标签： uni-app pdf

于 2023-05-26 10:26:22 首次发布

本文链接：https://blog.csdn.net/m0_58060036/article/details/130881403

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue

16 篇文章 0 订阅

订阅专栏

uniapp

6 篇文章 0 订阅

订阅专栏

文章介绍了在移动端应用中如何处理不同类型的媒体内容。对于图片，可以使用uni.previewImage进行预览；视频需要结合u-modal和video组件来展示；至于PDF，通过uni.downloadFile下载后，利用uni.openDocument打开并显示。

摘要由CSDN通过智能技术生成

1、看图片：

调用 uni.previewImage

uni.previewImage({
	urls: arr, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
	current:0, // 当前显示图片的http链接，默认是第一个
	success: function(res) {},
	fail: function(res) {},
	complete: function(res) {},
})

2、看视频（我记得不能直接调用必须搭配vedio使用）：

<u-modal :show="show" cancelText="关闭" :showConfirmButton="false" :showCancelButton="true" @cancel="cancel">
	<video id="myVideo" class="myVideo" :src="previewVideoSrc">
	</video>
</u-modal>

3、看pdf：

调用 uni.downloadFile 和 uni.openDocument

uni.downloadFile({
	url: url,
	success: function (res) {
		var filePath = res.tempFilePath;
			uni.openDocument({
				filePath: filePath,
				showMenu: true,
				success: function (res) {
					 console.log('打开文档成功');
				}
			});
			}
});