09 在uni-app 中打开文档

使用 api -> uni.openDocument(OBJECT)

// 实例代码
uni.downloadFile({
  url: 'https://example.com/somefile.pdf',
  success: function (res) {
    var filePath = res.tempFilePath;
    uni.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功');
      }
    });
  }
});

——————————————————————demo ———————————————————————————————————

<template>
    <u-image @longpress="handleLongpress()" @click="documentClick" width="100%" height="800rpx" :src="`${$public()}/helpCenter/company.png`" />
</template>
<script>
 export default {
    data:()=>({
      docUuid:'',
      docUuidUrl:'',
      format:'pdf',
    }),
    methods:{
      getFileExtensionFn() { // 获取文件拓展名
        getFileExtension({
          uuid: this.docUuid,
        }).then(re => {
          if (re.success) {
            this.format = re.data
            console.log("11", this.format)
          }
        });
      },
      getUrlByUuidFnDownUrl(uuid) { //获得文档的下载地址
        getUrlByUuid({
          uuid: this.docUuid
        }).then(re => {
          if (re.success) {
            this.docUuidUrl = re.data
          }
        });
      },
      async handleLongpress() {
        var fileType = this.format;
        uni.downloadFile({
          // url: this.docUuidUrl,
          url:'https://pmbimcloud-test-company.oss-cn-hangzhou.aliyuncs.com/ad43011a-d8ad-2c92-8686-01991893b03b.pdf?Expires=1627451113&OSSAccessKeyId=LTAI8PPrIEVEAQCK&Signature=v9i3VL1Ir0hFHP3dNK%2BXTG1%2BcVc%3D',
          success: function(res) {
            var filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              fileType: fileType,
              success: function(res) {
                console.log('打开文档成功');
              },
            });
          }
        });
      },
      documentClick() {
        this.$u.route({
          url: 'pages/supervisionThroughTrain/pages/meetingDetail/documentView'
        })
      },  
    }
  }
</script>

// documentView 文件 使用 web-view 在线查看文档
<template>
  <view>
    <web-view :webview-styles="webviewStyles" :src="urls"></web-view>
  </view>
</template>
<script>
  import {
    getUrlByUuid
  } from '@/pages/supervisionThroughTrain/utils/meetingDetailApi.js';
  export default {
    data() {
      return {
        urls: '',
        webviewStyles: {
          progress: {
            color: '#FF3333'
          }
        }
      }
    },
    methods: {
      getUrlByUuidFn() { //获取文档浏览地址
        this.urls=`https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject`;
      },
    },
    onLoad(){
      this.getUrlByUuidFn()
    }
  }
</script>

长按 ->

注 : @longpress 是 uni-app 自带的长按方法

点击 -> 跳转到 documentView界面