微信小程序实现文件预览


Posted in Javascript onOctober 22, 2020

微信小程序的文件预览,供大家参考,具体内容如下

微信小程序的文件预览需要先使用wx.downloadFile下载文件,然后使用下载文件的临时路径通过wx.openDocument进行文件的

预览

wxml代码:

<button bindtap='preview'>简历预览</button>

js代码:

//简历预览
 preview: function () {
 var that = this;
 console.log("简历预览")
 
//这里的value是先在data里面初始化,然后我根据用户切换单选框,获取的简历文件的主键id
 console.log(this.data.value)
 var id = that.data.value;

 if (id == "") {
 wx.showModal({
 title: '',
 content: '请选择一份简历',
 showCancel: false,
 confirmColor: "#FFB100"
 })
 } else {

 //先通过简历的主键id,查询简历路径(大家可以根据自己的需求来传数据)
 wx.request({
 url: app.globalData.url + "/api/interview/queryFilePath",
 data: {
  id: id
 },
 method: 'POST',
 header: { "content-type": "application/x-www-form-urlencoded" },
 success: function (res) {
  console.log(res.data)
  that.setData({
  path: res.data.path,
  type: res.data.type
  })
  //下载简历
  wx.downloadFile({
  url: app.globalData.url + that.data.path,
  success: function (res) {
  var filePath = res.tempFilePath
  console.log(filePath)

  //预览简历
  wx.openDocument({
  filePath: filePath,
  fileType: that.data.type,
  success: function (res) {
   console.log("打开文档成功")
   console.log(res);
  },
  fail: function (res) {
   console.log("fail");
   console.log(res)
  },
  complete: function (res) {
   console.log("complete");
   console.log(res)
  }
  })
  },
  fail: function (res) {
  console.log('fail')
  console.log(res)
  },
  complete: function (res) {
  console.log('complete')
  console.log(res)
  }
  })
 }
 })
 }
 },

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 #Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 #Javascript
vue实现下拉菜单树
Oct 22 #Javascript
Javascript柯里化实现原理及作用解析
Oct 22 #Javascript
Node.js fs模块原理及常见用途
Oct 22 #Javascript
使用vue构建多页面应用的示例
Oct 22 #Javascript
vue 单页应用和多页应用的优劣
Oct 22 #Javascript
You might like
PHP4实际应用经验篇(6)
2006/10/09 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
DOM 高级编程
2015/05/06 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python编程实现12306的一个小爬虫实例
2017/12/27 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
基于python的Paxos算法实现
2019/07/03 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
广告学毕业生求职信
2014/01/30 职场文书
婚前协议书
2014/04/15 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
中小学生学籍证明
2014/10/25 职场文书
优秀员工推荐材料
2014/12/20 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
python中对列表的删除和添加方法详解
2022/02/24 Python
2022年显卡天梯图(6月更新)
2022/06/17 数码科技
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python