微信小程序实现文件预览


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 24 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
Javascript之String对象详解
Jun 08 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 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
Protoss建筑一览
2020/03/14 星际争霸
如何过滤高亮显示非法字符
2006/10/09 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
JavaScript作用域链使用介绍
2013/08/29 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
学生党支部先进事迹
2014/02/04 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
工作年限证明模板
2014/11/01 职场文书
毕业生学校组织意见
2015/06/04 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
Python OpenCV 图像平移的实现示例
2021/06/04 Python