微信小程序預覽二進制流文件的方法
微信小程序將後端接口返回的二進制流PDF 文件在線預覽,供大傢參考,具體內容如下
一、微信小程序的文件系統
微信小程序文件系統參考官方文檔:微信小程序文檔
我們主要是把後端接口獲取到的pdf二進制流,下載保存到微信的本地用戶文件,下載後預覽再刪掉,因為本地用戶文件每個用戶隻有200M,所以預覽後刪掉。
二、小程序實現文件預覽
代碼如下(示例):
//使用登記牌掃碼查詢 usequercode() { uni.scanCode({ onlyFromCamera: true, success: function(res) { wx.showLoading({ title: '正在識別中....' }); //掃描二維碼 if (res.scanType != 'QR_CODE') { uni.showToast({ title: '請掃描正確的使用登記牌二維碼', duration: 2000, icon: 'none' }); return; } //未攜帶需要的參數 else if (res.result.indexOf('applyId') < 0 || res.result.indexOf('applyType') < 0) { uni.showToast({ title: '解析二維碼中存在非法參數', duration: 2000, icon: 'none' }); return; } console.log('條碼類型:' + res.scanType); console.log('條碼內容:' + res.result); //再文件下載後的用處 const result = res.result; const applyid = result.substring(result.lastIndexOf('=') + 1); //獲取到條碼內容,獲取參數訪問接口 const applytype = result.substring(result.indexOf('=') + 1, result.indexOf('&')); console.log(applyid); console.log(applytype); //讀取本地文件 const fs = uni.getFileSystemManager(); uni.request({ url: getApp().globalData.config.url + 'enterprise/useApply/usingCodeUpload', method: 'POST', headers: { isToken: false }, data: { applyId: applyid, applyType: applytype }, responseType: 'arraybuffer', //此處是請求文件流,必須帶入的屬性 success: res => { console.log(res); var data = res.data; //將接口返回的二進制數據轉成pdf文件 //uni.getFileSystemManager() wx.getFileSystemManager().writeFile({ // 寫文件 filePath: wx.env.USER_DATA_PATH + '/使用登記牌.pdf', // wx.env.USER_DATA_PATH 指定臨時文件存入的路徑,後面字符串自定義 data: data, encoding: 'binary', //二進制流文件必須是 binary success(res) { wx.openDocument({ // 新開頁面打開文檔 filePath: wx.env.USER_DATA_PATH + '/使用登記牌.pdf', //拿上面存入的文件路徑 success: function(res) { console.log(res); setTimeout(() => { wx.hideLoading(); }, 500); //查看後刪除本地用戶文件 //wx.getFileSystemManager().unlink({ // 寫文件 //filePath: wx.env.USER_DATA_PATH + '/使用登記牌.pdf', // wx.env.USER_DATA_PATH 指定臨時文件存入的路徑,後面字符串自定義 //success(res) { //console.log(res); //} //}); } }); }, error(error) { console.log(error); } }); } }); } }); },
三、實現效果圖
總結
我本來想打開後刪除的,再真機調試下沒問題,但發佈在手機上提示預覽失敗,請在其他應用打開,刪除寫在compltet也一樣,後面考慮到服務器資源內存資源比存儲性能高,由放在服務器上瞭pdf。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 微信小程序使用同聲傳譯實現語音識別功能
- 微信小程序使用百度AI識別接口的通用封裝Promise詳解
- uniapp中常用的幾種提示彈框
- 微信小程序獲取當前位置的詳細步驟
- 微信小程序uploadFile接口實現文件上傳