uniapp - [微信小程序] 实现点击预览各种文件 pdf文档、视频mp4、mp3音乐、图片图像、word/excel/ppt 等，uniapp小程序文件预览功能（详细示例代码，一键复制开箱即用）

已于 2024-05-10 09:48:49 修改
阅读量5.1k 收藏 6
点赞数 4
分类专栏： 前端组件与功能(开箱即用) 文章标签： uniapp小程序文件预览 微信小程序在线查看文件 支付宝小程序实现文件预览 uniapp小程序开发预览文档 office文件预览word 预览excel xls文档 预览mp3音乐mp4视频
于 2023-11-18 22:10:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/134484541
版权

效果图

在uniapp微信小程序平台开发中，详细实现文件预览功能，支持预览pdf/mp3/mp4/图片/word/excel/ppt等常见文件，在线下载并预览功能。

uniapp Vue3和Vue2都能用，直接复制运行示例代码，稍微改下就能用了。

在这里插入图片描述

示例源码

下面就是全部源码了，请复制运行后

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
uniapp(全端兼容) - 最新详细实现预览pdf文件功能，uniapp安卓苹果app、H5网页、微信小程序、nvue等端打开本地或在线PDF文档进行预览，uniapp预览pdf教程（详细示例代码）
高级前端工程师
06-06 4346
uni-app，pdf，打开预览PDF，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，uniapp预览PDF，App端 实现pdf文件预览，在app端怎么预览pdf，网页h5怎么预览pdf，pdf下载、上传和预览，H5预览pdf文件，小程序预览pdf，nvue平台怎么打开预览pdf呢，除了uni.opendocument还有什么方法打开，预览pdf的插件，pdf预览组件，uni-app实现PDF预览功能，app查看下载pdf文件，如何做pd
微信小程序实现文件预览
01-18
微信小程序的文件预览，供大家参考，具体内容如下 微信小程序的文件预览需要先使用wx.downloadFile下载文件，然后使用下载文件的临时路径通过wx.openDocument进行文件的 预览 wxml代码： <button bindtap='preview'>简历预览</button> js代码： //简历预览 preview: function () { var that = this; console.log(简历预览) //这里的value是先在data里面初始化，然后我根据用户切换单选框，获取的简历文件的主键id console.log(this.data.val
uniapp预览文件（pdf、视频、音频、图片、xls、docx）效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-23 4142
注意：只能真机调试预览 <template> <view class="demo"> <!-- <status-bar title="测试"></status-bar> --> <view class="activity_enclosure margin-top100" v-if="attachmentTemplateList.length > 0"> <view class="top_box">
app（uniapp）端如何查看pdf、图片、视频
熬夜搬码员的博客
05-26 1853
调用 uni.downloadFile 和 uni.openDocument。调用 uni.previewImage。
uni-app实现PDF预览功能（避坑看这）
热门推荐
7c
04-10 2万+
去年就想写一篇关于uni-app的pdf预览功能，拖很久了，补上。（避坑看这）
uniapp 流文件pdf_uniapp pdf预览
weixin_39760434的博客
12-21 1995
//一个是通过第三方软件查看pdfuni.downloadFile({ //通过uniapp的api下载下来url: 'test.pdf',success: function (res) {var filePath = res.tempFilePath;uni.openDocument({filePath: filePath,success: function (FileRes) {console...
uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器+企业微信H5
qq_45091359的博客
11-08 8989
uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器+企业微信H5
使用uni-app组件播放视频
lw18751836671的专栏
11-15 1万+
想做一个简单的视频播放器，能够在局域网播放硬盘上的视频。如下图所示，从硬盘指定位置读取视频数据，由服务器返回视频流，在浏览器端播放。
uniapp App端 实现pdf文件预览
我的博客
05-27 2万+
一、下载pdf预览需要用到的相关文件（即hybrid文件夹） 二、将步骤一下载解压得到的hybrid文件夹放在/src目录下，即 /src/hybrid 三、预览pdf 1、预览pdf需要用到uniapp的webview组件，所以注册并创建一个专门用于预览pdf的页面，页面使用webview组件。 /pages/webview/index.vue： <template> <view style="width: 100%;"> ..
uniapp 在线预览各种格式文件(支持doc, xls, ppt, pdf, docx, xlsx, pptx格式) 适用于小程序 (解决了真机调试可以打开,发布体验版打不开的问题)(可设置文件名)
weixin_44805839的博客
11-02 5450
uni.saveFile(OBJECT) @savefile | uni-app官网。1. 文件地址须保证能正常打开(在浏览器中尝试是否能预览或正常下载)2.注意文件名最好为数字字母(非中文)如果打不开,则注意判断是否出了以下问题。
uni-app预览文件
poisons__的博客
03-15 667
uni-app预览文件
前端uniapp-demo《实现微信小程序授权登录》
05-20
前端uniapp-demo《实现微信小程序授权登录》
微信小程序开发纸质翻页效果源码-小程序翻页效果 uniapp实现
10-23
在微信小程序开发中，为了提供更生动、真实的用户体验，开发者经常需要实现各种视觉效果，其中纸质翻页效果就是一个常见的需求。本源码是基于微信小程序和uniapp框架实现的翻书特效，它允许用户在浏览内容时感受到...
uniapp - 微信小程序 - 自定义底部tabbar
最新发布
06-26
uniapp是一款由DCloud（即5+App）推出的多端开发框架，它允许开发者编写一次代码，就能发布到iOS、Android、Web（H5）、以及各种小程序等多个平台。uniapp提供了丰富的组件和API，大大简化了跨平台应用的开发工作。 ...
疫情期间学生请假与销假系统微信小程序代码 - 小程序 - java - uniapp -springboot - 微信小程序
01-11
疫情期间学生请假与销假系统微信小程序代码 | 小程序 | java | uniapp |springboot | 微信小程序 | 代码 1、技术栈：微信小程序，springboot，uniapp，vue，ajax，maven，mysql，MyBatisPlus 2、系统的实现 用户...
微信小程序实现上传word、txt、Excel、PPT等文件功能
10-16
主要为大家详细介绍了微信小程序实现上传word、txt、Excel、PPT等文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uni.app对接海康视频播放、回放，以及注意点
m0_67790636的博客
01-26 2311
给大家避个坑，这种格式会使你输入的时间与它转换完的时间有差别，举例：你选择的是"2023-01-26 12:36:33" 但是你用这种格式的话，他就会输出2023-01-26T04:36:33Z,字面上看就是会比你选择的时间少8个小时，那是因为在JavaScript中，日期对象的toJSON()方法会将日期对象转换为ISO 860 1格式的字符串。在转换过程中，会将日期对象 的时间调整为UTC时间。如果太长，会使我们那个html文件成为一个文本，也就是说你看到的不是一个页面，而是你写在编译器里的代码。
uniapp小程序实现上传图片功能，并显示上传进度
m0_47791238的博客
08-17 4481
通过uni.chooseMedia方法选择本地图片；使用uni.uploadFile(OBJECT)方法上传文件；使用progress进度条组件，实现上传进度显示
uniapp - 微信小程序平台实现预览 office 文件及保存下载到本地功能，将word/excel/ppt/pdf等文件在小程序内进行预览，用户可以保存和转发给好友进行下载到手机（一键复制运行）
高级前端工程师
09-27 5088
uniapp微信小程序平台端，uniapp小程序下载office文档，uniapp小程序将word/excel/pdf保存到手机里，uniapp把office文档打开预览并保存或发给朋友文件，如何在uniapp中预览下载doc pdf，uniapp官方下载office文件详细教程，uniapp小程序开pdf文档文件，uniapp怎么在小程序平台上预览下载office文件，uniapp怎么在小程序内打开预览下载word文档，小程序网页打开pdf功能，兼容安卓和苹果系统，uniapp微信小程序实现‘下载+保存至
uniapp实现微信小程序文件预览
02-20
UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发微信小程序、H5、App等多个平台的应用。在UniApp中实现微信小程序文件预览可以通过以下步骤： 1. 首先，在UniApp项目中创建一个页面用于展示文件预览，可以命名为FilePreview.vue。 2. 在FilePreview.vue中，使用`<web-view>`组件来加载微信小程序的文件预览页面。`<web-view>`组件是UniApp提供的用于在小程序中加载网页的组件。 3. 在FilePreview.vue中，通过传递参数的方式将需要预览的文件路径传递给`<web-view>`组件。可以使用`uni.navigateTo`或者`uni.redirectTo`等方法跳转到FilePreview页面，并在跳转时传递文件路径参数。 4. 在微信小程序的后台配置中，需要将FilePreview页面的路径添加到小程序的合法域名列表中，以便能够正常加载预览页面。 5. 在FilePreview.vue中，可以根据需要自定义样式和交互效果，例如添加返回按钮、加载动画等。 需要注意的是，由于微信小程序的限制，部分文件类型可能无法直接在小程序中预览，例如PDF、Word等文件。对于这些文件类型，可以考虑使用第三方插件或者服务来实现预览功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值