前言

最近基于uniAPP的app遇到了个需求，需要文件预览。其实官方已经提供了这个解决方案

uni.downloadFile(OBJECT)

uni.openDocument(OBJECT)

基于上面这两个API可以实现文件预览。本质上是先将文件下载到本地，然后调用手机内的其他app来打开你要预览的这个文件

简单写了个简单组件，样式比较丑，可以自己改一下

文件预览

<template>
  <div class="file-view">
    <div v-for="(item, index) in list" :key="index" @click="downLoadFile(item)">
      <div class="file-item">
        <div class="file-name">{{ handleText(item[name]) }}</div>
        <icon type="download" size="30" />
      </div>
      <hr class="file-hr" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    name: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleText(str) {
      if (typeof str === "string") {
        if (str.length < 20) {
          return str;
        }
        return str.substring(0, 20) + "...";
      }
      return "";
    },
    //下载附档
    downLoadFile(file) {
      uni.showLoading({
        mask: true,
      });
      uni.downloadFile({
        url: this.$downloadUrl + file.filePath, //仅为示例，并非真实的资源
        success: (res) => {
          if (res.statusCode === 200) {
            uni.hideLoading();
            var filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              success: function (res) {
                console.log("打开文档成功");
              },
            });
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.file-view {
  margin: 20rpx 50rpx;
  width: 600rpx;
  max-height: 200rpx;
  background: #f2f4f9;
  border-radius: 5px;
  overflow-y: auto;

  .file-item {
    height: 40px;
    width: calc(100% - 40px);
    margin-left: 30px;
    display: flex;
    align-items: center;

    .file-name {
      margin-right: 10px;
      font-size: 15px;
      color: blue;
      width: calc(100% - 20px);
      height: 40px;
      display: flex;
      align-items: center;
    }
  }

  .file-hr {
    border: 0;
    padding-top: 2px;
    background: linear-gradient(to right, transparent, #d0d0d5, transparent);
  }
}
</style>

效果图