前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微搭中实现文件的下载

微搭中实现文件的下载

原创
作者头像
韩锴
发布于 2022-02-07 14:53:05
发布于 2022-02-07 14:53:05
1.2K00
代码可运行
举报
运行总次数:0
代码可运行

我们用附件上传组件上传文件后,如何在小程序中下载呢?解决思路是使用微信的下载api,结合在线打开api实现附件的在线预览。

在页面中添加如下的代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default function({event, data}) {
  try{
wx.cloud.downloadFile({
  fileID: 'cloud://lowcode-4g3rs4de0a58b06e.6c6f-lowcode-4g3rs4de0a58b06e-1305601167/weda-uploader/file-87d05eb1-3f6b-4c44-b96b-f9efee5cd7c3-1月17–21日.xlsx', // 文件 ID
  success: res => {
    // 返回临时文件路径
    console.log(res.tempFilePath)
    let filePath = res.tempFilePath
    wx.openDocument({
      showMenu:true,
      filePath: filePath,

      success: function (res) {

        console.log('打开文档成功')

      }

    })
  },
  fail: console.error
})
}catch(e){
  console.log('错误代码', e.code, '错误信息', e.message);
}
}

这里的fileID来源于数据库

在这里插入图片描述
在这里插入图片描述

最终效果

在这里插入图片描述
在这里插入图片描述

点击下载按钮,可以在线预览文档

在这里插入图片描述
在这里插入图片描述

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
滴滴前端高频react面试题总结
当调用 setState时, React做的第一件事是将传递给setState的对象合并到组件的当前状态,这将启动一个称为和解( reconciliation)的过程。
flyzz177
2022/09/14
4.1K0
前端react面试题(必备)2
this.props是组件之间沟通的一个接口,原则上来讲,它只能从父组件流向子组件。React具有浓重的函数式编程的思想。
beifeng1996
2023/01/04
2.5K0
前端工程师的20道react面试题自检
Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性,并为不同类型的更新分配优先级,以及新的并发原语。
beifeng1996
2022/11/08
1K0
校招前端二面经典react面试题及答案_2023-03-13
实际上,diff 算法探讨的就是虚拟 DOM 树发生变化后,生成 DOM 树更新补丁的方式。它通过对比新旧两株虚拟 DOM 树的变更差异,将更新补丁作用于真实 DOM,以最小成本完成视图更新。 具体的流程如下:
用户10358021
2023/03/13
6730
前端react面试题(边面边更)
(1)无状态函数式组件 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到state状态的操作
beifeng1996
2022/10/26
1.4K0
字节前端面试题总结
由ES6的继承规则得知,不管子类写不写constructor,在new实例的过程都会给补上constructor。
buchila11
2022/07/27
1.7K0
作为一个菜鸟前端开发,面了20+公司之后整理的面试题
在 React 组件中,应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用 setState,这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
beifeng1996
2022/09/23
1.2K0
阿里前端二面必会react面试题指南_2023-02-24
没有什么问题。这种方式很少被使用,咱们可以将一个函数传递给setState,该函数接收上一个 state 的值和当前的props,并返回一个新的状态,如果咱们需要根据以前的状态重新设置状态,推荐使用这种方式。
xiaofeng123aa
2023/02/24
2K0
高频React面试题及详解
以下面试题来源于github项目前端面试指南,那里有超过200道高频前端面试题及答案,目前拥有1400star.
前端小tips
2021/11/30
2.7K0
高频React面试题及详解
一天梳理完react面试题
setState 是 React 中最常用的命令,通常情况下,执行 setState 会触发 render。但是这里有个点值得关注,执行 setState 的时候不一定会重新渲染。当 setState 传入 null 时,并不会触发 render。
beifeng1996
2022/11/14
5.7K0
2021前端react面试题汇总
(2)区别 Redux更多的是遵循Flux模式的一种实现,是一个 JavaScript库,它关注点主要是以下几方面∶
zz1998
2021/09/24
2.4K0
京东前端经典react面试题合集
如果您尝试直接改变组件的状态,React 将无法得知它需要重新渲染组件。通过使用setState()方法,React 可以更新组件的UI。
beifeng1996
2022/11/09
1.4K0
高级前端react面试题总结
(1)不要在循环,条件或嵌套函数中调用Hook,必须始终在 React函数的顶层使用Hook
beifeng1996
2022/12/15
4.4K0
滴滴前端高频react面试题汇总_2023-02-27
(3)组件事件回调函数方法的作用域是组件实例化对象(绑定父组件提供的方法就是父组件实例化对象),无法改变。
xiaofeng123aa
2023/02/27
1.2K0
字节前端面试被问到的react问题
Refs 提供了一种方式,用于访问在 render 方法中创建的 React 元素或 DOM 节点。Refs 应该谨慎使用,如下场景使用 Refs 比较适合:
beifeng1996
2022/11/01
2.3K0
字节前端必会react面试题1
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
beifeng1996
2023/01/03
3.4K0
2022社招react面试题 附答案
React的异步请求到底应该放在哪个⽣命周期⾥,有⼈认为在componentWillMount中可以提前进⾏异步请求,避免⽩屏,其实这个观点是有问题的。
用户9264421
2021/12/07
2.3K0
前端高频react面试题整理5
createElement是JSX被转载得到的,在 React中用来创建 React元素(即虚拟DOM)的内容。cloneElement用于复制元素并传递新的 props。
beifeng1996
2023/01/09
9850
通宵整理的react面试题并附上自己的答案
Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性,并为不同类型的更新分配优先级,以及新的并发原语。
beifeng1996
2022/11/16
1.6K0
高频react面试题自检
展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态。
beifeng1996
2022/11/14
9210
相关推荐
滴滴前端高频react面试题总结
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验