微信小程序預(yù)覽二進(jìn)制流文件的方法
更新時間：2022年08月28日 11:57:53 作者：花辭榭柳
這篇文章主要為大家詳細(xì)介紹了微信小程序預(yù)覽二進(jìn)制流文件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
微信小程序?qū)⒑蠖私涌诜祷氐亩M(jìn)制流PDF 文件在線預(yù)覽，供大家參考，具體內(nèi)容如下
一、微信小程序的文件系統(tǒng)
微信小程序文件系統(tǒng)參考官方文檔：微信小程序文檔
我們主要是把后端接口獲取到的pdf二進(jìn)制流，下載保存到微信的本地用戶文件，下載后預(yù)覽再刪掉，因?yàn)楸镜赜脩粑募總€用戶只有200M，所以預(yù)覽后刪掉。
二、小程序?qū)崿F(xiàn)文件預(yù)覽
代碼如下（示例）：
//使用登記牌掃碼查詢
usequercode() {
?? ?uni.scanCode({
?? ??? ??? onlyFromCamera: true,
?? ??? ??? ??? ?success: function(res) {
?? ??? ??? ??? ??? ?wx.showLoading({
?? ??? ??? ??? ??? ??? ?title: '正在識別中....'
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ?//掃描二維碼
?? ??? ??? ??? ??? ?if (res.scanType != 'QR_CODE') {
?? ??? ??? ??? ??? ??? ?uni.showToast({
?? ??? ??? ??? ??? ??? ??? ?title: '請掃描正確的使用登記牌二維碼',
?? ??? ??? ??? ??? ??? ??? ?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', //此處是請求文件流，必須帶入的屬性
?? ??? ??? ??? ??? ??? ?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 指定臨時文件存入的路徑，后面字符串自定義
?? ??? ??? ??? ??? ??? ??? ??? ?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 指定臨時文件存入的路徑，后面字符串自定義
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??//success(res) {
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?//console.log(res);
?? ??? ??? ??? ??? ??? ??? ??? ???//}
?? ??? ??? ??? ??? ??? ??? ?? ?//});
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??});
?? ??? ??? ??? ??? ??? ?? ?},
?? ??? ??? ??? ??? ??error(error) {
?? ??? ??? ??? ?console.log(error);
?? ??? ??? ??? ??? ? ?}
?? ??? ??? ??? ????});
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ???}
?? ??});
},三、實(shí)現(xiàn)效果圖
總結(jié)
我本來想打開后刪除的，再真機(jī)調(diào)試下沒問題，但發(fā)布在手機(jī)上提示預(yù)覽失敗，請?jiān)谄渌麘?yīng)用打開，刪除寫在compltet也一樣，后面考慮到服務(wù)器資源內(nèi)存資源比存儲性能高，由放在服務(wù)器上了pdf。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了javascript cookie的基本操作的相關(guān)資料,這里對Cookie的操作進(jìn)行了詳細(xì)介紹包括獲取，新建，設(shè)置有效期，添加和刪除等，需要的朋友可以參考下2017-07-07
Set是一種叫做集合的數(shù)據(jù)結(jié)構(gòu)(結(jié)構(gòu)和Array很像),Map是一種叫做字典的數(shù)據(jù)結(jié)構(gòu),這篇文章主要為大家詳細(xì)介紹了JavaScript中Map與Set用法與區(qū)別,需要的小伙伴可以參考下2023-11-11
JavaScript設(shè)計(jì)模式適配器模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式適配器模式實(shí)例，適配器設(shè)計(jì)模式可以讓彼此不兼容的功能在一塊工作，有助于避免大規(guī)模的修改代碼，并且易于擴(kuò)展和兼容2022-06-06
前端微信H5公眾號實(shí)現(xiàn)授權(quán)登錄的方法總結(jié)
這篇文章主要介紹了如何在微信公眾號中實(shí)現(xiàn)網(wǎng)頁授權(quán)功能,包括創(chuàng)建微信服務(wù)公眾號、配置重定向地址、調(diào)試和開發(fā)使用等步驟,文中通過圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
JavaScript實(shí)現(xiàn)一個空中避難的小游戲
最近利用Javascript實(shí)現(xiàn)了一個小游戲，覺著還不錯，所以分享給大家，下面這篇文章主要給大家介紹了利用JavaScript實(shí)現(xiàn)一個空中避難的小游戲的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-06-06
本篇文章主要分享了微信小程序拖拽排序的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
微信小程序列表渲染功能之列表下拉刷新及上拉加載的實(shí)現(xiàn)方法分析
這篇文章主要介紹了微信小程序列表渲染功能之列表下拉刷新及上拉加載的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了微信小程序列表下拉刷新及上拉加載的相關(guān)實(shí)現(xiàn)方法與技巧操作,需要的朋友可以參考下2017-11-11
javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)
for循環(huán)是非常基礎(chǔ)的javascript知識，但由于JS太靈活了，所以可能出現(xiàn)一些讓初學(xué)者崩潰的寫法。我決定由淺入深的解釋一下for循環(huán)，算是給比我還新手的新手解惑吧，少走彎路2012-08-08
JavaScript代碼異常監(jiān)控實(shí)現(xiàn)過程詳解
這篇文章主要介紹了JavaScript代碼異常監(jiān)控實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
今天小編就為大家分享一篇解決layui輪播圖有數(shù)據(jù)不顯示的情況，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09