uni-app文档、图片预览查看

前景:实现下载文档并且能够预览查看

注意：需要把下载的文件添加到白名单，此时需要添加到downLoadFile合法域名

image.png

uni.saveFile- 保存文件到本地。

uni.saveFile(OBJECT)

uni.openDocument

uni.openDocument(OBJECT)

新开页面打开文档，支持格式：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)
              }
            })
          }
        }
    });
    }

最终沟通需求后，实现效果为，点击可预览即可，无需下载

• 文档的预览

//文件预览
    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));
        }
      });
    },

• 图片的预览

    //预览图片
    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);
      }
    }`

参考文章

1、uniapp,实现下载文件，并保存到本地，打开文件预览
2、uni-app 小程序文件下载并分享
3、uni-app 微信小程序中打开预览pdf文件
4、 跨平台（uni-app）文件在线预览解决方案
5、文件下载保存， 遇到uni.downloadFile的坑