微信小程序预览 word、excel、ppt、pdf 等文件
- 微信小程序预览 word、excel、ppt、pdf 等文件
- 预览效果
- 前言
- 注意点
- 实现代码
微信小程序预览 word、excel、ppt、pdf 等文件
预览效果
前言
微信官方提供了相关的 API 来预览常见文件,目前支持如下格式的文件
总结一下就是先用 wx.downloadFile
API 把文件下载下来,再用 wx.openDocument
API 把它打开
- wx.downloadFile:下载文件到本地
- wx.openDocument:新开页面打开本地文档
注意点
wx.downloadFile API 单次下载允许的最大文件为 200MB
网络-使用说明(域名只支持
https
(wx.uploadFile、wx.downloadFile) 和wss
(wx.connectSocket) 协议)可以结合 DownloadTask 相关 API 实现下载进度展示
需要在小程序后台配置 downloadFile 合法域名才能下载文件
实现代码
以预览 PDF 文件为例
- 下载文件需要一个等待过程,所以加上加载提示很有必要
const util = require('../../utils/util') // 引入封装过的加载提示Page({// 预览文件previewFile(fileLink) {if(!fileLink) {return false}util.showLoading()// 单次下载允许的最大文件为 200MBwx.downloadFile({url: fileLink, // 地址已打码,自己换个其他的地址("https://www.xxxxx.com/file/测试通知.pdf")success: function (res) {console.log(res, "wx.downloadFile success res")if(res.statusCode != 200) {util.hideLoadingWithErrorTips()return false}var Path = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用wx.openDocument({filePath: Path,showMenu: true,success: function (res) {console.log('打开成功');util.hideLoading()}})},fail: function (err) {console.log(err, "wx.downloadFile fail err");util.hideLoadingWithErrorTips()}})}
})
util.js
/* 加载动画相关 */
const showLoading = (tips = '加载中...') => {wx.showNavigationBarLoading()wx.showLoading({title: tips,})
}const hideLoading = () => {wx.hideLoading()wx.hideNavigationBarLoading()
}const hideLoadingWithErrorTips = (err = '加载失败...') => {hideLoading()wx.showToast({title: err,icon: 'error',duration: 2000})
}module.exports = {showLoading: showLoading,hideLoading: hideLoading,hideLoadingWithErrorTips: hideLoadingWithErrorTips,
}
微信小程序预览 word、excel、ppt、pdf 等文件相关推荐
- 关于在线预览word,excel,ppt,pdf的需求处理方法。
参考文档:http://www.cnblogs.com/wolf-sun/p/3574278.html 我选用的方案:先用office com组件生成pdf,然后使用pdf.js在线预览pdf文档.在 ...
- 微信小程序预览word,doc,excel文件
代码如下: 配置好对应的filePath,之后保存即可 Page({data: {},onLoad: function () {var that = this;var filePath = " ...
- 微信小程序预览无法播放视频
微信小程序预览无法播放视频,但是用开发工具可以播放,真机调试也可以播放,是因为勾选了"不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS 证书"吗?
- Vue 预览word,excel,ppt等office文档-内网访问(基于onlyoffice,后端返回文件流)
Vue 预览word,excel等office 先看效果!! 需求背景:在前端页面中预览office文件且是内网访问,服务器不可访问外网的前提. 因此微软的接口就废掉了,因为他接口的条件是可以访问外网 ...
- 【预览pdf】:uniapp在微信小程序预览pdf,兼容安卓/IOS
前言 提示:因最近项目需求,项目需要用uniapp来开发微信小程序预览pdf的功能, 后端以链接形式返回pdf地址. 一.方法概述 开始用uniapp提供微信自带方法:wx.downloadFile( ...
- 实现微信小程序预览文件,预览页面添加倒计时
项目场景: 提示:1.实现小程序预览doc.docx.xls.xlsx.ppt.pptx.pdf类型文件 2.进入页面展示文件内容.开始按钮,点击,按钮变为[(**s)]倒计时 3.倒计时结束后,此按 ...
- 微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
- 微信小程序预览常见问题 未找到app.json这个怎么解决
第一步.查看项目中文件,确实没有app.json 文件 那说明HbuilderX在编译之后 会自己生成 app.json.因为此文件是微信小程序的标配入口文件. 所以开始找一下HbuilderX在编译 ...
- 解决uniapp开发微信小程序预览pdf文件ios\安卓兼容问题
问题 项目需要用uniapp来开发微信小程序,其中,有一个功能是预览pdf, 后台以链接形式返回pdf地址,一开始使用web-view做链接跳转,但是出现ios文件可以正常打开,android打不开的 ...
最新文章
- CentOS 7 添加系统开机服务
- oauth2_带有Spring Security的OAuth 2.0快速指南
- 如何扩展EAS主界面?0514
- android ndk调用出错,由于Android-NDK应用程序的权限问题,为什么fopen在本地方法中失败?...
- Visual Studio交叉编译器提供对ARM的支持
- 数学图形之Boy surface
- ffmpeg 0.6.3 代码, 经过我努力,能够在vs 2005 下单步调试代码
- java super用法_Java基础面试题汇总
- HDU 4753 Fishhead’s Little Game(DFS)
- 大数据分析实战-信用卡欺诈检测
- 牛客 2022年中国高校计算机大赛-团队程序设计天梯赛(GPLT)上海理工大学校内选拔赛 签到题13题
- lucky前面加a还是an_加方法 || 让孩子赶超学霸!这份小学英语知识精编,千万不能错过啦!...
- 谁负责本单位的各部门计算机,关于加强计算机校园网管理的若干认识
- Androidstudio开发ARcore
- phpstorm 配置 xdebug断点调试
- 阈值法matlab程序,遗传算法优化BP神经网络权值和阈值的通用MATLAB源码
- 论文阅读: BotCamp: Bot-driven Interactions in Social Campaigns WWW 2019
- PHP7的session无法使用memcache
- H.266/VVC技术学习:帧内预测之PDPC技术
- 《疯狂的程序员》读后感
热门文章
- oracle 11g安装包下载地址合集
- ConnectBot的使用
- 通过浏览器响应实现excel导出
- 《悲情曹雪芹》——诗篇总结
- 最小可行产品方法_最低可行产品说明。
- C++ GUI Programming with Qt4 Second Edition 之 附录A.3 Mac系统Qt的安装
- HTML5+CSS大作业——汽车自驾游(10页) 主题HTM5网页设计作业成品
- java,mqtt-client开发创建客户端
- “故宫小书包”公益活动走进四川乡村学校
- Unity Shader之燃烧消散效果