微信小程序預(yù)覽二進(jìn)制流文件的方法
微信小程序?qū)⒑蠖私涌诜祷氐亩M(jìn)制流PDF 文件在線預(yù)覽,供大家參考,具體內(nèi)容如下
一、微信小程序的文件系統(tǒng)
微信小程序文件系統(tǒng)參考官方文檔:微信小程序文檔
我們主要是把后端接口獲取到的pdf二進(jìn)制流,下載保存到微信的本地用戶文件,下載后預(yù)覽再刪掉,因?yàn)楸镜赜脩粑募總€(gè)用戶只有200M,所以預(yù)覽后刪掉。
二、小程序?qū)崿F(xiàn)文件預(yù)覽
代碼如下(示例):
//使用登記牌掃碼查詢 usequercode() { ?? ?uni.scanCode({ ?? ??? ??? onlyFromCamera: true, ?? ??? ??? ??? ?success: function(res) { ?? ??? ??? ??? ??? ?wx.showLoading({ ?? ??? ??? ??? ??? ??? ?title: '正在識(shí)別中....' ?? ??? ??? ??? ??? ?}); ?? ??? ??? ??? ??? ?//掃描二維碼 ?? ??? ??? ??? ??? ?if (res.scanType != 'QR_CODE') { ?? ??? ??? ??? ??? ??? ?uni.showToast({ ?? ??? ??? ??? ??? ??? ??? ?title: '請(qǐng)掃描正確的使用登記牌二維碼', ?? ??? ??? ??? ??? ??? ??? ?duration: 2000, ?? ??? ??? ??? ??? ??? ??? ?icon: 'none' ?? ??? ??? ??? ??? ??? ?}); ?? ??? ??? ??? ??? ??? ?return; ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ?//未攜帶需要的參數(shù) ?? ??? ??? ??? ??? ?else if (res.result.indexOf('applyId') < 0 || res.result.indexOf('applyType') < 0) { ?? ??? ??? ??? ??? ??? ?uni.showToast({ ?? ??? ??? ??? ??? ??? ??? ?title: '解析二維碼中存在非法參數(shù)', ?? ??? ??? ??? ??? ??? ??? ?duration: 2000, ?? ??? ??? ??? ??? ??? ??? ?icon: 'none' ?? ??? ??? ??? ??? ??? ?}); ?? ??? ??? ??? ??? ??? ?return; ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ?console.log('條碼類型:' + res.scanType); ?? ??? ??? ??? ??? ?console.log('條碼內(nèi)容:' + res.result); ?? ??? ??? ??? ??? ?//再文件下載后的用處 ?? ??? ??? ??? ??? ?const result = res.result; ?? ??? ??? ??? ??? ?const applyid = result.substring(result.lastIndexOf('=') + 1); //獲取到條碼內(nèi)容,獲取參數(shù)訪問接口 ?? ??? ??? ??? ??? ?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', //此處是請(qǐng)求文件流,必須帶入的屬性 ?? ??? ??? ??? ??? ??? ?success: res => { ?? ??? ??? ??? ??? ??? ??? ?console.log(res); ?? ??? ??? ??? ??? ??? ??? ?var data = res.data; ?? ??? ??? ??? ??? ??? ??? ?//將接口返回的二進(jìn)制數(shù)據(jù)轉(zhuǎn)成pdf文件 ?? ??? ??? ??? ??? ??? ??? ?//uni.getFileSystemManager() ?? ??? ??? ??? ??? ??? ??? ?wx.getFileSystemManager().writeFile({ ?? ??? ??? ??? ??? ??? ??? ??? ?// 寫文件 ?? ??? ??? ??? ??? ??? ??? ??? ?filePath: wx.env.USER_DATA_PATH + '/使用登記牌.pdf', // wx.env.USER_DATA_PATH 指定臨時(shí)文件存入的路徑,后面字符串自定義 ?? ??? ??? ??? ??? ??? ??? ??? ?data: data, ?? ??? ??? ??? ??? ??? ??? ??? ?encoding: 'binary', //二進(jìn)制流文件必須是 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 指定臨時(shí)文件存入的路徑,后面字符串自定義 ?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??//success(res) { ?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?//console.log(res); ?? ??? ??? ??? ??? ??? ??? ??? ???//} ?? ??? ??? ??? ??? ??? ??? ?? ?//}); ?? ??? ??? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ??? ??? ??}); ?? ??? ??? ??? ??? ??? ?? ?}, ?? ??? ??? ??? ??? ??error(error) { ?? ??? ??? ??? ?console.log(error); ?? ??? ??? ??? ??? ? ?} ?? ??? ??? ??? ????}); ?? ??? ??? ??? ?} ?? ??? ??? ?}); ?? ??? ???} ?? ??}); },
三、實(shí)現(xiàn)效果圖
總結(jié)
我本來想打開后刪除的,再真機(jī)調(diào)試下沒問題,但發(fā)布在手機(jī)上提示預(yù)覽失敗,請(qǐng)?jiān)谄渌麘?yīng)用打開,刪除寫在compltet也一樣,后面考慮到服務(wù)器資源內(nèi)存資源比存儲(chǔ)性能高,由放在服務(wù)器上了pdf。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例
這篇文章主要介紹了JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07js中使用DOM復(fù)制(克?。┲付ü?jié)點(diǎn)名數(shù)據(jù)到新的XML文件中的代碼
使用DOM復(fù)制(克隆)指定節(jié)點(diǎn)名數(shù)據(jù)到新的XML文件中 ,用到三個(gè)類的相關(guān)知識(shí)點(diǎn) : DOMDocument - DOMNodeList - DOMNode2011-07-07Javascript中設(shè)置默認(rèn)參數(shù)值示例
這篇文章主要介紹了Javascript中默認(rèn)參數(shù)值的設(shè)置,很簡單,但很實(shí)用,需要的朋友可以參考下2014-09-09JavaScript簡單驗(yàn)證表單空值及郵箱格式的方法
這篇文章主要介紹了JavaScript簡單驗(yàn)證表單空值及郵箱格式的方法,涉及javascript基本的表單與字符串操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-0110 種最常見的 Javascript 錯(cuò)誤(頻率最高)
本文是小編給大家收藏的JavaScript 中頻度最高的 10 種錯(cuò)誤,我們會(huì)告訴你什么原因?qū)е铝诉@些錯(cuò)誤,以及如何防止這些錯(cuò)誤發(fā)生。需要的朋友參考下2018-02-02