微信小程序雲開發-雲存儲-下載並打開文件文件（word/excel/ppt/pdf）

一、wxml文件

1、寫文本框，用來獲取文件鏈接。

2、按鈕，點擊下載文件

<!-- 下載文件（word/excel/ppt/pdf等） -->
<view class="inputContent">
<text>請輸入下載鏈接：</text>
<input type="text" bindinput="getContent"></input>
</view>
<button bindtap="downloadFile" type="primary" >下載文件</button>

二、wxss文件

wxss文件用來設置文本框顯示樣式

.inputContent{
  margin: 100rpx 20rpx 20rpx 20rpx;
}
input{
  border: 1rpx solid #ccc;
  margin-top: 20rpx;
  height: 80rpx;
  min-height: 80rpx;
}

三、js文件

獲取輸入內容getContent()和downloadFile()兩個函數。文本框里面輸入的是文件的file ID（雲存儲的路徑），自動打開文件

Page({
  data:{
    fileID :null
  },
  //功能：下載並自動打開文件（word/excel/ppt/pdf等）

  
  //獲取輸入內容
  getContent(e){
    console.log(e.detail.value);
    this.setData({
      fileID:e.detail.value
    })
  },

  //下載文件
  downloadFile(){
    let fileID = this.data.fileID //取data里面的fileID
    if(fileID!=null&&fileID.length>0){
      console.log("下載鏈接",fileID);
      wx.cloud.downloadFile({
        fileID: fileID,
        success: res => { 
          console.log("文件下載成功",res);
          //提示框
          wx.showToast({
            title: '文件下載成功',
            icon:"success",
            duration:2000
          })

          //打開文件
          const filePath = res.tempFilePath
          wx.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log('打開文檔成功',res)
            }
          })
        },
      fail: err => {
          console.log("文件下載失敗",err);
        }    
    })
   }else{
    wx.showToast({
      title: '下載鏈接為空',
      icon:"none"
    })
  }      
}
  
})

 

四、實現