微信小程序预览二进制流文件
开发时使用调试基准库版本
需求
在线预览doc/xls/xlsx/ppt/txt/pdf 的文件和图片。
思路
- 将后台返回的二进制流，写入微信的文件管理器。
- 打开文件。
根据文件类型调用不同预览方法
wx.openDoucument不支持预览txt文件。
bindTapFile: function (e) {let currentPage = this;let { objectId, name, filetype } = e.currentTarget.dataset.file;let fileType = name.split(".").pop().toLowerCase();if (["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf"].includes(fileType)) {currentPage.binaryPreview(objectId, name, filetype);} else if (["txt"].includes(fileType)) {currentPage.downloadFilePreview(objectId, name, filetype, true);}},
原本写的预览方法，安卓不支持
原本都是调用这个方法，根据isTxt判断是否为文本文件做不同的操作。在安卓真机调试发现打开失败，说找不到路径。
downloadFilePreview: function (objectId, name, type, isTxt = false) {let currentPage = this;let filePath = `${wx.env.USER_DATA_PATH}/${name}`;ui.showLoading("加载中……");wx.downloadFile({url: `${app.globalData.loscamUrl}...`,filePath: filePath, // 自定义文件的名称method: "GET",header: {Authorization: "Bearer " + token.access_token,},success(res) {let Path = res.filePath;let fs = wx.getFileSystemManager();fs.getFileInfo({filePath: Path,success: (f) => {fs.saveFile({tempFilePath: Path ?? filePath,filePath: filePath,});if (isTxt) {let textContent = fs.readFileSync(filePath, "utf-8");currentPage.goTxtPage(name, textContent);} else {// 现api支持doc docx xls xlsx ppt pptx pdfwx.openDocument({filePath: Path ?? filePath,showMenu: true,fileType: type,success: function (res) {console.log("打开文档成功");},fail: function (err) {console.log("打开文档失败：", err);},});}},});},complete() {setTimeout(() => {ui.hideLoading();}, 1000);},});},
苹果、安卓真机均可预览文件
binaryPreview: function (objectId, name, type) {let filePath = `${wx.env.USER_DATA_PATH}/${name}`;ui.showLoading("加载中……");wx.request({url: `${app.globalData.loscamUrl}...`,header: {Authorization: "Bearer " + token.access_token,},method: "GET",responseType: "arraybuffer", //此处是请求文件流，必须带入的属性success: (rest) => {if (rest.statusCode === 200) {const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器fs.writeFile({// 写文件filePath: filePath,data: rest.data,encoding: "binary",success(res) {wx.openDocument({filePath: filePath, //拿上面存入的文件路径showMenu: true,success: function (res) {console.log("open success");},fail: function (err) {console.log("open fail", err);},});},});}},complete() {setTimeout(() => {ui.hideLoading();}, 1000);},});},
预览图片
缩略图预览（增加请求头部）
效果图
代码实现
downloadImgToTemUrl(imgObjectId, imgName) {let currentPage = this;wx.downloadFile({url: `${app.globalData.loscamUrl}/file/downloadfile?fileUrl=${imgObjectId}`,filePath: `${wx.env.USER_DATA_PATH}/${encodeURIComponent(imgName)}`, // 自定义文件的名称method: "GET",header: {Authorization: "Bearer " + currentPage.data.access_token,},success(res) {let path = wx.getFileSystemManager().readFileSync(res.filePath, "base64");currentPage.properties.fileList.forEach((x, i) => {if (imgObjectId == x.objectId) {currentPage.setData({["fileList[" + i + "].imgToTemUrl"]: `data:image/jpg;base64,${path}`,});}});},complete() {},});},
点击缩略图预览图片
效果图
代码实现
注意点：路径含有中文的图片预览不了。
改正：将图片的名字改为全英文字符就可以了。
bindImgPreview: function (e) {let { name, idx } = e.currentTarget.dataset;let currentIndex = -1;let currentPage = this;let urls = currentPage.data.urls;urls.forEach((x, i) => {if (x == `${wx.env.USER_DATA_PATH}/${name}`) {currentIndex = i;return;}});wx.previewImage({current: urls[currentIndex],urls: urls,success(res) {console.log("预览成功");},fail(err) {console.log("预览失败，原因：", err);},complete() {},});},
最后
如果你有更好的办法可以相互交流，共同进步！
微信小程序预览二进制流文件相关推荐
- 微信小程序预览 word、excel、ppt、pdf 等文件
目录 微信小程序预览 word.excel.ppt.pdf 等文件 预览效果 前言 注意点 实现代码 微信小程序预览 word.excel.ppt.pdf 等文件 预览效果 前言 微信官方提供了相关的 ...
- 【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS
前言 提示:因最近项目需求,项目需要用uniapp来开发微信小程序预览pdf的功能, 后端以链接形式返回pdf地址. 一.方法概述 开始用uniapp提供微信自带方法:wx.downloadFile( ...
- 微信小程序预览无法播放视频
微信小程序预览无法播放视频,但是用开发工具可以播放,真机调试也可以播放,是因为勾选了"不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS 证书"吗?
- 实现微信小程序预览文件，预览页面添加倒计时
项目场景: 提示:1.实现小程序预览doc.docx.xls.xlsx.ppt.pptx.pdf类型文件 2.进入页面展示文件内容.开始按钮,点击,按钮变为[(**s)]倒计时 3.倒计时结束后,此按 ...
- 解决uniapp开发微信小程序预览pdf文件ios\安卓兼容问题
问题 项目需要用uniapp来开发微信小程序,其中,有一个功能是预览pdf, 后台以链接形式返回pdf地址,一开始使用web-view做链接跳转,但是出现ios文件可以正常打开,android打不开的 ...
- 微信小程序预览常见问题 未找到app.json这个怎么解决
第一步.查看项目中文件,确实没有app.json 文件 那说明HbuilderX在编译之后 会自己生成 app.json.因为此文件是微信小程序的标配入口文件. 所以开始找一下HbuilderX在编译 ...
- 微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
- 微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明 做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
- 微信小程序预览base64图片
起因:微信小程序下载图片,请求后台返回一堆乱码的字符 解决办法 1.请求部分加上 responseType: 'arraybuffer' 2.由于微信官方不再维护wx.arrayBufferToBas ...
最新文章
- Spring+Hibernate整合
- centeros /redhate密码破解
- VBScript教程-第一章. 脚本的定义和术语
- 百度智能云人脸采集SDK通过CFCA权威安全测评
- 手把手教你研发属于自己的智能无人机
- leetcode 53 python 动态规划
- 《深入理解OSGi：Equinox原理、应用与最佳实践》一3.4 事件监听
- 易用性软件测试用例,软件性能测试规定——易用性测试规定
- Linux 迅雷 chrome插件,Chrome（Chromium）迅雷下载支持扩展1.1测试版【更新】
- 【Android智能硬件开发】【010】安卓读写串口
- Maxwell 介绍
- zxr10交换机配置手册vlan_中兴ZXR10交换机配置
- 为什么成功启动ngnix之后还是无法用ip地址访问网站
- 人物画像及“七步人物角色法”
- Kali Linux 安装 COMFAST CF-WU925A Realtek RTL8811CU/RTL8821CU USB 无线网卡驱动
- 手把手带你撸一个校园APP（七）：校园文化模块（社团活动表白墙图说校园）
- 《软技能》读书笔记——职业篇
- 使用Python下载flbook.com.cn电子书
- 激励函数简介 Tensorflow最简单的三层神经网络及matplotlib可视化 附激励函数常见类型
- 『基础教学第二章』MMD基本功能详解-Kinsama