uniapp文件下载并预览

大概就是这样的咯，文件展示到页面上，点击文件下载并预览该文件； 

 通过点击事件handleDownLoad(file.path)，file.path为文件的地址；

<view class="files">
    <view class="cont" v-for="(file, index) in dataInfo.experience" :key="index" @click="handleDownLoad(file.path)">
      <image
        :src="file.path.split('.')[1] == 'word' ? '/static/images/icons/icon_word.png' : '/static/images/icons/icon_pdf.png'"
        mode="scaleToFill"
      />
      <text>{{ file.filename }}</text>
    </view>
</view>

 功能代码：

// 文件下载
const handleDownLoad = (path: string) => {
  if (!path) return;
  Loading("加载中");
  uni.downloadFile({
    url: fullUrl(path),//完整地址
    success: res => {
      if (res.statusCode === 200) {
        uni.getFileSystemManager().saveFile({
          tempFilePath: res.tempFilePath,
          success: function (res1) {
            const savedFilePath = res1.savedFilePath;
            HideLoading();
            // 打开文件
            uni.openDocument({
              filePath: savedFilePath,
              success: function (res2) {
                console.log(res2);
              }
            });
          }
        });
      } else {
        Toast("下载失败", {
          icon: "error"
        });
      }
    }
  });
};

样式的话，大家根据自己需求写吧，我只功能代码展示出来就可以了；