在小程式中，有時資料中含有一些必要的文件需要下載，當我們與後端互動得到了文件的URL後，無法直接預覽，需要將其下載，然後再預覽。

UI程式碼如下

<view class='category-item'>
    <block wx:for="{{fileTypeList}}">
      <view bindtap='previewFile' data-url='{{item.url}}'>
        <label>文件:</label>{{item.name}}
      </view>
    </block>
  </view>
 

其中fileTypeList是後端返回的資料，內部包含了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的錯誤提示。)，有的手機可以用。這樣又會成為一個神坑了。
--------------------- 
作者：_學而時習之_ 
來源：CSDN 
原文：https://blog.csdn.net/xxdddail/article/details/78443261?utm_source=copy 
版權宣告：本文為博主原創文章，轉載請附上博文連結！