1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【小程序预览文件】 在微信小程序中预览文件wx.downloadFile和wx.openDocument(

【小程序预览文件】 在微信小程序中预览文件wx.downloadFile和wx.openDocument(

时间:2024-04-07 17:48:12

相关推荐

【小程序预览文件】 在微信小程序中预览文件wx.downloadFile和wx.openDocument(

△ 前部分先大致说下需要注意的点(便于理解,时间宽裕可收藏后查看),后部分直接放代码实现,着急的小伙伴可以直接移步后部分。

一. 使用微信小程序提供的api(注意顺序,先下载,再打开)

(1-1).wx.downloadFile下载文件资源到本地(临时的文件,退出即销毁)

△ 客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单次下载允许的最大文件为200MB

△ 使用前请注意阅读微信小程序官网文档指南-网络:https://developers./miniprogram/dev/framework/ability/network.html

△ 在用到此 api 时,需要小程序在对应的微信公众后平台添加合法域名白名单,否则将会在编译器中报错,获取不到网络文件!!!(非常重要!!!)操作方法路径为:开发 - 开发管理 - 开发设置 - 服务器域名 - downloadFile合法域名。

(1-2).wx.openDocument新开页面打开文档

△ 微信客户端7.0.12版本前默认显示右上角菜单按钮,之后的版本默认不显示,需主动传入showMenu

△ 指定文件类型打开文件有:doc、docx、xls、xlsx、ppt、pptx、pdf

(1-3). 自定义修改打开文件的文件名称:

官方文档并没有明确给出直接修改打开文件的参数,查阅众多小伙伴智慧的结晶(有说使用rename,有说先用saveFile先将文件保存至本地之后再自定义文件名),之后还是觉得可能会有更好的办法实现。终于在知识的海洋里,总结了一个改动最少且是好用的方法。在官方文档里,请注意wx.downloadFile这个api中的filePath参数:

二. 上菜:

// 点击事件openFile(item) {// item为当前点击的事物对象let file = decodeURIComponent(item.pathUrl); // 解码(注意:涉及到文件名中有中文需要转码)file = this.getFilePathName(file); // 将文件路径过滤,格式为【文件名+.后缀名】// 加载状态uni.showLoading({title: '文件打开中',mask: true});let _this = this;// 预览网络文档wx.downloadFile({url: item.pathUrl, // 文件的本身urlfilePath: wx.env.USER_DATA_PATH + '/' + file, // 本地自定义的文件名success: function (res) {let filePath = res.filePath; // 微信临时文件路径(这里要使用自定义的名字文件名,否则打开的文件名是乱码)wx.openDocument({filePath: filePath,showMenu: true, // 是否显示右上角菜单按钮 默认为false(看自身需求,可要可不要。后期涉及到右上角分享功能)success: function () {_this.$util.toast({title: '打开文件成功' });},fail: function() {_this.$util.toast({title: '打开文件失败,请稍后重试' });}});uni.hideLoading();},fail: function() {_this.$util.toast({title: '打开文件失败,请稍后重试' });uni.hideLoading();}});},// 文件路径过滤【文件名+.后缀名】// 例如:哈哈.pdfgetFilePathName(path) {let pos1 = path.lastIndexOf('/');let pos2 = path.lastIndexOf('\\');let position = Math.max(pos1, pos2);if ( position< 0 )return path;elsereturn path.substring(position+ 1);}

△ 查看下效果:

【修改前】文件名是一串随机的名字

【修改后】文件名修改成功

查看最终文件打开的效果还是要在手机上预览打开。

有疑问请直接指出。

整理不易! 不要吝惜你的小手,有用就点赞或收藏吧。

【小程序预览文件】 在微信小程序中在线预览文件wx.downloadFile和wx.openDocument(包含自定义修改打开文件的文件名)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。