uniapp下載excel(在線預覽效果)，后端用springboot-有解無憂

看了網上很多文章，很多都是只給了后端或者只給的前端打開檔案微信那個openDocument的方法

而后端很多也只是給了回傳流方法，這里看了很多總結下

首先后端要引入依賴

<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>4.1.0</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>4.1.0</version>
</dependency>

藍色的依賴必須要引入，第二個依賴應該不用，不過先貼上，以防下面的java代碼需要
這里貼上controller的方法

    @PostMapping("/download")
    public R downLoad(@RequestBody FyGroupProjectItemUserDTO itemUserList, HttpServletResponse response) {

        try {
            //命名列名
            List<String> cellNameList = new ArrayList<>();
            cellNameList.add("id");
            cellNameList.add("名字");
            cellNameList.add("當日報數");
            cellNameList.add("累計報數");

            //給檔案命名

            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd");
            String dateformat = simpleDateFormat.format(new Date());
            String excelPath = "報數記錄" + dateformat + ".xls";
            //給表命名
            String title = "報數記錄";
            HSSFWorkbook excel = Excel.createExcel(title, cellNameList);
            int row = 1;
            //從資料庫讀資料然后回圈寫入
            List<FyGroupProjectItemUser> itemUserListList = itemUserList.getList();
            for (FyGroupProjectItemUser itemUser : itemUserListList) {
                List<String> excelData = https://www.cnblogs.com/share-record/p/new ArrayList<>();
                excelData.add(itemUser.getId().toString());
                excelData.add(itemUser.getName().toString());
                excelData.add(itemUser.getCount().toString());
                excelData.add(itemUser.getNewCount().toString());
                excel = Excel.createExcelData(excel, excelData, row);
                row++;
            }
            //輸出資料
            //FileOutputStream fos = new FileOutputStream(excelPath);
            OutputStream out = null;
            //防止中文亂碼
            String headStr = "attachment; filename=\"" + new String(excelPath.getBytes("utf-8"), "ISO8859-1") + "\"";
            //response.setContentType("octets/stream");
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition", headStr);
            out = response.getOutputStream();
            //將excel寫入流
            excel.write(out);
            out.flush();
            out.close();
            System.out.println("寫出去了");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

回傳的型別R是我用了springblade的一個自帶的型別，里面封裝了很多構造方法，便于回傳，不用的話直接void，或者隨便回傳型別就行，反正都是寫出去的流，回傳null或者不回傳都行

這里貼上uniapp的前端代碼：

downLoadExcel() {
                wx.showLoading({
                    title: '加載中',
                })
                console.log("list",this.projectList)
                for (var i = 0; i < this.projectList.length; i++) {
                    this.projectList[i].newCount = this.projectList[i].totalNum  //這里我做下資料處理，可忽略
                }
                wx.request({
                    url: 'http://localhost:8886/count/export/download', //呼叫后臺介面的全路徑
                    data: {
                        list: this.projectList
                    },
                    method: "POST",
                    header: {
                        // 'Content-type': 'application/x-www-form-urlencoded',
                        'Content-type': 'application/json',  //這里指定的資料要和后端對應
                        // 'Cookie': app.globalData.userInfo && app.globalData.userInfo.cookie ? app.globalData.userInfo.cookie : '',
                    },
                    responseType: 'arraybuffer', //此處是請求檔案流，必須帶入的屬性
                    success: res => {
                        if (res.statusCode === 200) {
                            console.log("200")
                            const fs = wx.getFileSystemManager(); //獲取全域唯一的檔案管理器
                            fs.writeFile({
                                // filePath: wx.env.USER_DATA_PATH + "/身體成分報告.pdf", // wx.env.USER_DATA_PATH 指定臨時檔案存入的路徑，后面字串自定義
                                filePath: wx.env.USER_DATA_PATH + "/test.xls", // wx.env.USER_DATA_PATH 指定臨時檔案存入的路徑，后面字串自定義
                                data: res.data,
                                encoding: "binary", //二進制流檔案必須是 binary
                                success(res) {
                                    console.log("success(res)",res)
                                    
                                    wx.openDocument({ // 打開檔案
                                        filePath: wx.env.USER_DATA_PATH + "/test.xls", //拿上面存入的檔案路徑
                                        // showMenu: true, // 顯示右上角選單
                                        success: function(res) {
                                            console.log("successfun",res)
                                            setTimeout(() => {
                                                wx.hideLoading()
                                            }, 500)
                                        },fail:function(res){
                                            console.log("failfun",res)
                                        }
                                    })
                                },
                                fail(res){
                                    console.log("fail",res)
                                }
                            })
                        }else{
                            console.log("不是200")
                        }
                        console.log("success",res)
                    },
                    fail:res =>{
                        console.log("fail",res)
                    }
                })
            },

這樣就可以做到在線預覽了

看網上說也可以上傳到服務器，讓服務器回傳一個url，然后再打開這樣

應該也可以這樣，可能這樣更好，不過可能比較耗服務器，先寫到這，上面的代碼直接復制就可，資料換成自己的資料即可

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/253368.html

標籤：Java

上一篇：C語言經典題練習（投票統計功能、列印平行四邊形、控制臺列印楊輝三角）！

下一篇：阿里 Mock 工具正式開源，干掉市面上所有 Mock 工具！