当前位置: 首页 > 编程笔记 >

微信小程序实现文件预览

刁璞
2023-03-14
本文向大家介绍微信小程序实现文件预览,包括了微信小程序实现文件预览的使用技巧和注意事项,需要的朋友参考一下

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

微信小程序的文件预览需要先使用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)
  }
  })
 }
 })
 }
 },

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序实现天气预报功能,包括了微信小程序实现天气预报功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现天气预报功能的具体代码,供大家参考,具体内容如下 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定

  • 本文向大家介绍微信小程序实现文件、图片上传功能,包括了微信小程序实现文件、图片上传功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现文件图片上传的具体代码,供大家参考,具体内容如下 在我看来微信小程序的功能挺强大的,提供了很多API让你直接使用。 这里我说一下微信小程序如何实现图片的上传 1、在微信公众号平台设置uploadFile合法域名 点击设置-开发设置,可以看

  • 本文向大家介绍微信小程序实现留言板,包括了微信小程序实现留言板的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现留言板的具体代码,供大家参考,具体内容如下 CSS: js: html 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍微信小程序实现聊天室,包括了微信小程序实现聊天室的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现聊天室的具体代码,供大家参考,具体内容如下 正文: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍微信小程序 实战小程序实例,包括了微信小程序 实战小程序实例的使用技巧和注意事项,需要的朋友参考一下 微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块。这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start。 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading

  • 本文向大家介绍微信小程序实现天气预报功能(附源码),包括了微信小程序实现天气预报功能(附源码)的使用技巧和注意事项,需要的朋友参考一下 前言 最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下。 效果图     天气API获取 这里我用的是和风天气的API,打开官网注册或者登陆你的账号 进入控制台,新建应用 这是刚刚我们创建好的应用,点击添加KEY 选择WebAPI 这注册好我们的A

  • 本文向大家介绍微信小程序 MINA文件结构,包括了微信小程序 MINA文件结构的使用技巧和注意事项,需要的朋友参考一下 文件结构 框架程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个框架程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表 一个

  • 本文向大家介绍微信小程序wx.previewImage预览图片实例详解,包括了微信小程序wx.previewImage预览图片实例详解的使用技巧和注意事项,需要的朋友参考一下 一.小知识 二.例子 1.wxml 2.wxss 3.js 使用网络的图 使用本地的图片: 所以这个接口, 按照官方示例, 可能只支持 http 或者 https 协议的网络图片地址. 注意: 网上还有说本地图片确实是不可以