微信小程序实现文件预览

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

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

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

(0)

相关推荐

  • 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

    1.多张图片循环渲染后预览.保存.识别带参数二维码 wxml页面 <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>

  • 微信小程序实现图片选择并预览功能

    本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明 做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textarea使用,底部保存按钮固定 (二).小程序接口说明 wx.chooseLocation(Object object) 从本地相册选择图片或使用相机拍照. (三).效果图 效果如下: (四).代码展示 WXML页面: <view class="wrap"> <view cl

  • 微信小程序 解决请求服务器手机预览请求不到数据的方法

    微信小程序 解决请求服务器手机预览请求不到数据的方法 微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat配置好了https.然后用开发者工具测试是否能请求到数据,发现能获取到很开心. 后来是注册了小程序,在小程序后台也进行了设置,见下图 给项目加了APPID,准备进行手机预览的测试 这里说一下,在开发小程序时尽量把图片放到自己的服务器上,因为小程序在上传和预览时都有编译包的限制,没有算过,大概是1M,

  • 微信小程序选择图片和放大预览图片功能

    视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage({}) 此方法是用来选择图片的方法,具体使用如下: data: { avatarUrl:null }, 首先在数据中定义接收数据的变量,然后调用方法选择图片,将图片显示出来. bindViewTap:function(){ var that = this; wx.chooseImage({ // 设置最多可以选择的图片张数,默认9,如果我们设置了多张,那么接收时//就不在是单个变量了, c

  • 微信小程序实现图片上传、删除和预览功能的方法

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i

  • 微信小程序实现点击图片放大预览

    这个强大的API( wx.previewImage() ),接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤! 思路: 1.点击事件 2.放大 3.左右滑动查看上.下一张 在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了) index.wxml <view class='topic_answerImg'> <block wx:for='{{item.answerImg}}' wx:

  • 微信小程序wx.previewImage预览图片实例详解

    一.小知识 二.例子 1.wxml <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container"> <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <im

  • 微信小程序实现预览图片功能

    本文实例为大家分享了微信小程序实现预览图片的具体代码,供大家参考,具体内容如下 先看下效果图: 这种效果在一些商城类的小程序里是很常见的一种功能,实现起来也很简单 下面我们来看一下代码: 我的这些图片资源是从后台拿到的,你们看一下具体的需求,一般都是后台返回,毕竟小程序是有大小限制的. <view class='contentbot'> <view class='contentWa' wx:key='id' wx:for='{{wawa}}'> <image src='{{i

  • 微信小程序实现图片放大预览功能

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码: <!--图片描述--> <view wx:if="{{item.pictures}}" class="list-dImg"> <image bindtap="imgYu" data-list="{{item

  • 微信小程序图片选择、上传到服务器、预览(PHP)实现实例

    微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用) 小程序前端代码: <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name=&quo

随机推荐