微信小程序怎么實(shí)現(xiàn)預(yù)覽二進(jìn)制流文件功能

這篇文章主要介紹“微信小程序怎么實(shí)現(xiàn)預(yù)覽二進(jìn)制流文件功能”，在日常操作中，相信很多人在微信小程序怎么實(shí)現(xiàn)預(yù)覽二進(jìn)制流文件功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”微信小程序怎么實(shí)現(xiàn)預(yù)覽二進(jìn)制流文件功能”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

一、微信小程序的文件系統(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)效果圖

到此，關(guān)于“微信小程序怎么實(shí)現(xiàn)預(yù)覽二進(jìn)制流文件功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！