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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xxdddail/article/details/78443261

在小程序中，有时数据中含有一些必要的文档需要下载，当我们与后端交互得到了文档的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的错误提示。)，有的手机可以用。这样又会成为一个神坑了。

转载请注明出处。