小程序开发系列(九)文档下载与预览

在小程序中,有时数据中含有一些必要的文档需要下载,当我们与后端交互得到了文档的URL后,无法直接预览,需要将其下载,然后再预览。

UI代码如下

 <view bindtap='previewFile' data-url='{{doc.Url}}'>
      <label>文档:</label>{{doc.Name}}</view>
其中doc是后端返回的数据,内部包含了Url和Name两个字段。同时在View中绑定了一个下载文件的事件。

 previewFile: function (event) {
    var that = this;
    var url = event.currentTarget.dataset.url;
    if (url === undefined || url === null || url.length <= 0) {
      wx.showToast({
        title: 'URL为空',
      })
      return;
    }

    var index1 = url.lastIndexOf(".");
    var suffixName = url.substring(index1 + 1, url.length);//后缀名 
    if (suffixName === undefined || suffixName === null || suffixName.length <= 0) {
      wx.showToast({
        title: '无法从URL中解析出后缀名',
      })
      return;
    }
    suffixName = suffixName.toLowerCase();

    var imageSuffixArr = ["bmp", 'jpg', 'jpeg', 'png', 'gif'];
    for (var i = 0; i < imageSuffixArr.length; i++) {
      if (suffixName == imageSuffixArr[i]) {
         wx.previewImage({
           urls: [url],
         })
	return;
      }
    }

    var supportSufixArr = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];
    var isSupport = false;
    for (var i = 0; i < supportSufixArr.length; i++) {
      if (suffixName == supportSufixArr[i]) {
        isSupport = true;
        break;
      }
    }
    if (!isSupport) {
      wx.showToast({
        title: '不支持' + suffixName,
      })
      return;
    }
    wx.showLoading({
      title: '加载中..',
    })
    wx.downloadFile({
      url: url,
      success: function (res) {
        var filePath = res.tempFilePath;
        console.log(filePath);
        wx.openDocument({
          filePath: filePath,
          success: function () {
            console.log("打开文档成功:" + url);
            wx.hideLoading();
          },
          fail: function (r) {
            console.log(r);
            wx.hideLoading();
            wx.showToast({
              title: '打开失败',
              duration: 2000
            })
          },
          complete: function (r) {
            console.log(r);
            wx.hideLoading();
          }
        })
      },
      fail: function (r) {
        console.log("下载失败:" + url + "." + r);
        wx.hideLoading();
        wx.showToast({
          title: '下载失败',
          duration: 2000
        })
      }
    })
  }
在PreviewFile事件中,先依据url提取文件的后缀,来判断是否是图片,如果是图片则直接调用wx.previewImage来预览图片。如果不是图处,那就判断是否是支持预览的文档。如果是支持预览的文档则下载该文档后然后预览。

需要注意:下载文档的时候,必须要在小程序的后台将URL的域名配置到下载的列表中,同时需要采用https,否则会下载失败。在没的手机中,对https协议支持版本不同,所以必须要支持多版本的HTTPS才好,不然有的手机会用不了(可能会出现socket hang up的错误提示。),有的手机可以用。这样又会成为一个神坑了。

转载请注明出处。


©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值