微信小程序实现文件预览


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 相关文章推荐
深入理解Javascript闭包 新手版
Dec 28 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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/02/26 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
经济信息管理专业大学生求职信
2013/09/27 职场文书
个人实用简单的自我评价
2013/10/19 职场文书
高中的自我鉴定
2013/12/16 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
给学校的建议书
2014/03/12 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
公司经营目标责任书
2015/01/29 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Java 定时任务技术趋势简介
2022/05/04 Java/Android
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers