微信小程序实现文件预览


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 Highcharts 动态生成图表的方法
Nov 15 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
简述JS控制台的使用
Jul 15 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
python字典DICT类型合并详解
2017/08/17 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
eBay加拿大站:eBay.ca
2019/06/20 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
在求职信中如何凸显个人优势
2013/10/30 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
运动会演讲稿
2014/05/07 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书