微信小程序中预览文档不同平台全文档的兼容处理

微信小程序预览文档解决方案

微信小程序中有预览文档的API，但缺点是只能预览固定的几种格式，如下所示

官方文档地址：wx.openDocument()

如果需求是打开一个.txt文档，这种方法就行不通了，那么怎么办呢？

当然是用万能的webVIew，直接把文档链接放到webView中，绝大多数的时候都能打开，至少我还没遇到过打不开的，如果有人遇到过可以在评论区留言哦。但是用webView也有缺点，我在小程序中做了具体测试，不同文件，不同打开方式的体验，大家可以扫码试一下差别

那么就需要有一种方式，如果能用微信API打开的时候就用API，如果不能打开的时候就跳转webView打开，具体的判断代码如下：

//测试文档地址：http://www.cztouch.com/upfiles/soft/testpdf.pdf
openFile: function (e) {

    var fileUrlStr = this.data.fileUrl

    var isSupport = false
    if (fileUrlStr.indexOf(".doc") >= 0 || fileUrlStr.indexOf(".docx") >= 0 || fileUrlStr.indexOf(".xls") >= 0 || fileUrlStr.indexOf(".xlsx") >= 0 || fileUrlStr.indexOf(".ppt") >= 0 || fileUrlStr.indexOf(".pptx") >= 0 || fileUrlStr.indexOf(".pdf") >= 0) {
      isSupport = true
    }
    if (!isSupport) {
      wx.navigateTo({
        url: './fileWebView/fileWebView?fileUrl=' + fileUrlStr
      })
      return;
    }

    try {
      var res = wx.getSystemInfoSync()
      if (res.platform == "android" || res.platform == "devtools") { //ios 直接用webView方式打开文档
        // console.log("downLoadFile文件地址是:", fileUrlStr);
        var typeStr = ''
        if (fileUrlStr.indexOf(".doc") >= 0) {
          typeStr = 'doc'
        } else if (fileUrlStr.indexOf(".docx") >= 0) {
          typeStr = 'docx'
        } else if (fileUrlStr.indexOf(".xls") >= 0) {
          typeStr = 'xls'
        } else if (fileUrlStr.indexOf(".xlsx") >= 0) {
          typeStr = 'xlsx'
        } else if (fileUrlStr.indexOf(".ppt") >= 0) {
          typeStr = 'ppt'
        } else if (fileUrlStr.indexOf(".pptx") >= 0) {
          typeStr = 'pptx'
        } else if (fileUrlStr.indexOf(".pdf") >= 0) {
          typeStr = 'pdf'
        }
        if (typeStr == '') {
          wx.navigateTo({
            url: './fileWebView/fileWebView?fileUrl=' + fileUrlStr
          })
          return;
        }
        wx.showLoading({
          title: '正在加载...',
        })
        wx.downloadFile({
          url: fileUrlStr,
          success: function (res) {
            var filePath = res.tempFilePath; // 小程序中文件的临时文件
            wx.openDocument({
              filePath: filePath,
              fileType: typeStr,
              success: function (res) {
                console.log('打开文档成功' + JSON.stringify(res))
              },
              fail: (e) => {
                console.log('打开文档失败：' + JSON.stringify(e));
                var errMsg = e.errMsg
                wx.showToast({
               	  icon: 'none',
                  title: errMsg
                })
              },
              complete: function (s) {}
            })
          },
          fail: function (error) {
            console.log('下载失败：' + JSON.stringify(error));
            var errMsg = error.errMsg
            wx.showToast({
              icon: 'none',
              title: errMsg
            })
          },
          complete: function (s) {
            wx.hideLoading()
          }
        })
      } else { //iOS直接webview 打开文档
        wx.navigateTo({
          url: './fileWebView/fileWebView?fileUrl=' + fileUrlStr
        })
      }
    } catch (e) {
      wx.navigateTo({
        url: './fileWebView/fileWebView?fileUrl=' + fileUrlStr
      })
    }
  },

可以看到判断在iOS端的时候不用这个API打开，具体原因就是iOS文档限制太多，当时我写这块需求的时候好像文档限制是不能打开超过15M大小的文档，随着小程序的不断更新，现在不知道变成什么了，反正当时出问题太多，就直接把iOS平台的都换成了webView打开

另贴出我的小程序码，欢迎大家体验