Applet Download Preview PDF, document cannot open solution

The applet opens pdf, Yes 3 Ways of planting

1、webview open , I won't elaborate here

2、 Document binary stream open , Refer to other articles

3、 Today's point ,wx.downloadFile,wx.openDocument

Some pits encountered during operation , First of all, I use the conventional online operation wx.downloadFile,wx.openDocument, The development tool displays normally , The real machine may go to ‘ Failed to open document ’; Real machine debugging found that filePath= wx.env.USER_DATA_PATH + '/' + ‘xxx.pdf’, There is no permission to modify the name if an error is reported , As shown in figure 2 ：

Or this bug, After opening the document , Open another pdf file , It is the first time to open pdf file , That is to say, the first cached file is opened , This caching mechanism will be studied by yourself .

if (that.data.pdfSrc1) {
  wx.showLoading({
    title: 'pdf Preview in preparation ',
  })
  wx.downloadFile({
    url: that.data.pdfSrc1,//pdf link 
    success(res) {
      let  filePath= wx.env.USER_DATA_PATH + '/' + ' Report details .pdf';
      wx.openDocument({
        filePath: filePath,
        success: function (res) {
          wx.showToast({
            title: ' Successfully opened the document ',
          })
          wx.hideLoading()
        },
        fail: function (res) {
          wx.showToast({
            title: ' Failed to open document ',
          })
        },
      })
    },
  })
}

Solution ： Use wx.saveFile Temporary storage path of wechat saved files , Then use the official wx.env.USER_DATA_PATH Modify the local path name , thus , Solve the display problem 、 Cache problem and name modification problem
                    

wx.downloadFile({
  url: that.data.pdfSrc1,//pdf link 
  success(res) {
    wx.saveFile({ // a key  wx.saveFile Be sure to have     Avoid file storage missing    Then open failed 
      tempFilePath: res.tempFilePath,
      filePath: wx.env.USER_DATA_PATH + '/' + ' Report details .pdf',
      success(res) {
        wx.openDocument({
          filePath: res.savedFilePath,
          fileType: "pdf",
          showMenu: true,
          success: function (res) {
            wx.showToast({
              title: ' Successfully opened the document ',
            })
            wx.hideLoading()
          },
          fail: function (res) {
            wx.showToast({
              title: ' Failed to open document ',
            })
          },
        })
    }}) 
  },
})

Add a binary stream scheme   You need to cooperate with the background to write a parsing interface

  wx.request({
    url: 'http:/XXXXX/downloadReport.cs?id='+ obj.id,
    method: 'POST',
    header: {
      "content-type": "application/json",
    },
    responseType: "arraybuffer", // Notice the responseType
    success: (result) => {
      console.log(" Download successful ！", result);
      var fileManager = wx.getFileSystemManager();
      var FilePath =  wx.env.USER_DATA_PATH + '/' + ' Report details 1111'+'.pdf';
        // There may also be problems    When I open this, it shows that the document is damaged     Refer to the above solution   
      fileManager.writeFile({
        data: result.data,
        filePath: FilePath, 
        showMenu: true, //  Show upper right menu 
        encoding: "binary", // Encoding mode  
        success: res => {
          console.log(' Coding format ');
          wx.openDocument({ // Open directly after success 
            filePath: FilePath, 
            showMenu:true,
            fileType: "pdf",
            success: result => {
              console.log(" Successfully opened the document ");
            },
            fail: err => {
              console.log(" Failed to open document ", err);
            }
          });
        },
        fail: res => {
          wx.showToast({
            title: ' Export failed !',
            icon: 'none',
            duration: 2000,
          })
          console.log(res);
        }
      })
    },
    fail(err) {
      console.log(err)
    }
  })