開(kāi)發(fā)時(shí)使用調(diào)試基準(zhǔn)庫(kù)版本

需求

在線預(yù)覽doc/xls/xlsx/ppt/txt/pdf 的文件和圖片。

思路

1. 將后臺(tái)返回的二進(jìn)制流，寫(xiě)入微信的文件管理器。
2. 打開(kāi)文件。

根據(jù)文件類(lèi)型調(diào)用不同預(yù)覽方法

wx.openDoucument不支持預(yù)覽txt文件。

    bindTapFile: function (e) {
      let currentPage = this;
      let { objectId, name, filetype } = e.currentTarget.dataset.file;
      let fileType = name.split(".").pop().toLowerCase();
      if (
        ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf"].includes(fileType)
      ) {
        currentPage.binaryPreview(objectId, name, filetype);
      } else if (["txt"].includes(fileType)) {
        currentPage.downloadFilePreview(objectId, name, filetype, true);
      }
    },

原本寫(xiě)的預(yù)覽方法，安卓不支持

原本都是調(diào)用這個(gè)方法，根據(jù)isTxt判斷是否為文本文件做不同的操作。在安卓真機(jī)調(diào)試發(fā)現(xiàn)打開(kāi)失敗，說(shuō)找不到路徑。

    downloadFilePreview: function (objectId, name, type, isTxt = false) {
      let currentPage = this;
      let filePath = `${wx.env.USER_DATA_PATH}/${name}`;
      ui.showLoading("加載中……");
      wx.downloadFile({
        url: `${app.globalData.loscamUrl}...`,
        filePath: filePath, // 自定義文件的名稱(chēng)
        method: "GET",
        header: {
          Authorization: "Bearer " + token.access_token,
        },
        success(res) {
          let Path = res.filePath;
          let fs = wx.getFileSystemManager();
          fs.getFileInfo({
            filePath: Path,
            success: (f) => {
              fs.saveFile({
                tempFilePath: Path ?? filePath,
                filePath: filePath,
              });
              if (isTxt) {
                let textContent = fs.readFileSync(filePath, "utf-8");
                currentPage.goTxtPage(name, textContent);
              } else {
                // 現(xiàn)api支持doc docx xls xlsx ppt pptx pdf
                wx.openDocument({
                  filePath: Path ?? filePath,
                  showMenu: true,
                  fileType: type,
                  success: function (res) {
                    console.log("打開(kāi)文檔成功");
                  },
                  fail: function (err) {
                    console.log("打開(kāi)文檔失敗：", err);
                  },
                });
              }
            },
          });
        },
        complete() {
          setTimeout(() => {
            ui.hideLoading();
          }, 1000);
        },
      });
    },

蘋(píng)果、安卓真機(jī)均可預(yù)覽文件

    binaryPreview: function (objectId, name, type) {
      let filePath = `${wx.env.USER_DATA_PATH}/${name}`;
      ui.showLoading("加載中……");
      wx.request({
        url: `${app.globalData.loscamUrl}...`,
        header: {
          Authorization: "Bearer " + token.access_token,
        },
        method: "GET",
        responseType: "arraybuffer", //此處是請(qǐng)求文件流，必須帶入的屬性
        success: (rest) => {
          if (rest.statusCode === 200) {
            const fs = wx.getFileSystemManager(); //獲取全局唯一的文件管理器
            fs.writeFile({
              // 寫(xiě)文件
              filePath: filePath,
              data: rest.data,
              encoding: "binary",
              success(res) {
                wx.openDocument({
                  filePath: filePath, //拿上面存入的文件路徑
                  showMenu: true,
                  success: function (res) {
                    console.log("open success");
                  },
                  fail: function (err) {
                    console.log("open fail", err);
                  },
                });
              },
            });
          }
        },
        complete() {
          setTimeout(() => {
            ui.hideLoading();
          }, 1000);
        },
      });
    },

預(yù)覽圖片

縮略圖預(yù)覽（增加請(qǐng)求頭部）

效果圖

代碼實(shí)現(xiàn)

    downloadImgToTemUrl(imgObjectId, imgName) {
      let currentPage = this;
      wx.downloadFile({
        url: `${app.globalData.loscamUrl}/file/downloadfile?fileUrl=${imgObjectId}`,
        filePath: `${wx.env.USER_DATA_PATH}/${encodeURIComponent(imgName)}`, // 自定義文件的名稱(chēng)
        method: "GET",
        header: {
          Authorization: "Bearer " + currentPage.data.access_token,
        },
        success(res) {
          let path = wx
            .getFileSystemManager()
            .readFileSync(res.filePath, "base64");
          currentPage.properties.fileList.forEach((x, i) => {
            if (imgObjectId == x.objectId) {
              currentPage.setData({
                ["fileList[" + i + "].imgToTemUrl"]: `data:image/jpg;base64,${path}`,
              });
            }
          });
        },
        complete() {},
      });
    },

點(diǎn)擊縮略圖預(yù)覽圖片

效果圖

代碼實(shí)現(xiàn)
注意點(diǎn)：路徑含有中文的圖片預(yù)覽不了。
改正：將圖片的名字改為全英文字符就可以了。

    bindImgPreview: function (e) {
      let { name, idx } = e.currentTarget.dataset;
      let currentIndex = -1;
      let currentPage = this;
      let urls = currentPage.data.urls;
      urls.forEach((x, i) => {
        if (x == `${wx.env.USER_DATA_PATH}/${name}`) {
          currentIndex = i;
          return;
        }
      });
      wx.previewImage({
        current: urls[currentIndex],
        urls: urls,
        success(res) {
          console.log("預(yù)覽成功");
        },
        fail(err) {
          console.log("預(yù)覽失敗，原因：", err);
        },
        complete() {},
      });
    },

最后

如果你有更好的辦法可以相互交流，共同進(jìn)步！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-483609.html

到了這里，關(guān)于微信小程序預(yù)覽二進(jìn)制流文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！