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

您所在的位置：网站首页 › 下载微信小程序中的文档怎么弄 › 【小程序预览文件】在微信小程序中在线预览文件wx.downloadFile和wx.openDocument（包含自定义修改打开文件的文件名）

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

2024-07-06 04:46:14| 来源: 网络整理| 查看: 265

△ 前部分先大致说下需要注意的点(便于理解，时间宽裕可收藏后查看)，后部分直接放代码实现，着急的小伙伴可以直接移步后部分。一. 使用微信小程序提供的api（注意顺序，先下载，再打开） (1-1).wx.downloadFile 下载文件资源到本地（临时的文件，退出即销毁）

△ 客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。 △ 使用前请注意阅读微信小程序官网文档指南-网络：https://developers.weixin.qq.com/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, // 文件的本身url filePath: 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(); } }); }, // 文件路径过滤【文件名+.后缀名】 // 例如：哈哈.pdf getFilePathName(path) { let pos1 = path.lastIndexOf('/'); let pos2 = path.lastIndexOf('\\'); let position = Math.max(pos1, pos2); if ( position

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

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

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

今日新闻

点击排行

推荐新闻

图片新闻

专题文章

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

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

今日新闻

点击排行

推荐新闻

图片新闻

专题文章

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

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