微信小程序实现文件预览


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的一些总结
Nov 03 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
一些实用性较高的js方法
Apr 19 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
JavaScript实现区块链
Mar 14 Javascript
vue的for循环使用方法
Feb 12 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
ztree+ajax实现文件树下载功能
May 18 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合并js请求的例子
2013/11/01 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
JS 继承实例分析
2008/11/04 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
pycharm快捷键汇总
2020/02/14 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
父亲节活动总结
2015/02/12 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
创业计划书之干洗店
2019/09/10 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python