uni-app documents, pictures, file preview view

Note: The downloaded file needs to be added to the whitelist. At this time, it needs to be added to the legal domain name of downLoadFile. Open a
new page to open the document. Supported formats: doc, xls, ppt, pdf, docx, xlsx, pptx.

// 开始以为需要下载下文件
//下载附件
    uploadFile() {
      uni.downloadFile({
        url: 'https://www.example.com/file/test', //仅为示例，并非真实的资源
        success: (response) => {
          console.log('response',response)
          if (response.statusCode === 200) {
            console.log('下载成功');
            // 保存文件到本地
            uni.saveFile({
              tempFilePath: response.tempFilePath,
              success: (resData) => {
                console.log('saveFile =====> resData',resData);
                // 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
                uni.openDocument({
                  filePath: resData.savedFilePath,
                  fileType: 'pdf', // 指定文件的格式
                  showMenu: true, // 允许出现分享功能
                  success: r => {
                    console.log('openDocument ===> res',r)
                  },
                  fail: openError => {
                    console.log('打开失败: ', openError)
                  }
                })
              },
              fail: error => {
                console.log('error: ', error)
              }
            })
          }
        }
    });
    }

Click to preview, no need to download

//文件预览
    previewFile(url,typeName) {
      console.log('e =====> 预览',url,'typeName',typeName);
      //支持预览的文件类型
      //微信小程序
      let fileType = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx' ]; 
      // if(!fileType.includes(typeName)) {
      //   return uni.showToast({
      //     title: '不支持预览当前文件类型',
            //     icon: 'none'
      //   })
      // }
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      //下载文件资源到本地
      uni.downloadFile({
        url: url,
        success: function(res) {
          console.log('downloadFile ==> ',res)
          uni.hideLoading();
          var filePath = res.tempFilePath;
          if(!fileType.includes(typeName)) {
            return false;
          }
          uni.showLoading({
            title: '正在打开',
            mask: true
          })
          // 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
          uni.openDocument({
            filePath: filePath,
            fileType: typeName,// 文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx 
            // showMenu: true, // 允许出现分享功能
            success: res => {
              uni.hideLoading();
              console.log('打开文档成功',res);
            },
            fail: openError => {
              uni.hideLoading();
              console.log('fail:' + JSON.stringify(openError));
            }
          });
        },
        fail: function(err) {
          uni.hideLoading();
          console.log('fail:' + JSON.stringify(err));
        }
      });
    },

image preview

    //预览图片
    previewImg(imgUrl) {
      console.log('imgUrl',imgUrl);
      // 预览图片
      uni.previewImage({
        urls: [ imgUrl ],
        longPressActions: {
          // itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function(data) {
            //console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function(err) {
            console.log(err.errMsg);
          }
        }
      });
    },
    previewAll({ currentTarget: { dataset: { url, imgUrl, type } } }) {
      // el.type === 'png' || el.type === 'jpg' || el.type === 'jpeg'
      let fileType = ['png', 'jpg', 'jpeg'];
      console.log('fileType.includes(type)',fileType.includes(type));
      if(fileType.includes(type)) {
        this.previewImg(imgUrl);
      } else {
        this.previewFile(url,type);
      }
    }`

<view class="right-item" :data-type="el.type" :data-url="el.url" :data-img-url="el.url" @tap="previewAll">
            <view class="dotted"></view><view class="dotted"></view><view class="dotted"></view>
          </view>