2. 程式人生 > 實用技巧 >uniapp匯入匯出Excel

uniapp匯入匯出Excel

阿新 • • 發佈：2020-08-11

眾所周知，uniapp作為跨端利器，有諸多限制，其中之一便是vue頁面不支援傳統網頁的dom、bom、blob等物件。

所以，百度上那些所謂的匯入匯出excel的方法，大部分都用不了，比如xlsx那個外掛，雖然很多方法在vue裡不支援，但解析資料等不包含dom那些物件的方法可以考慮下。

外掛git:https://github.com/SheetJS/js-xlsx

話不多說，經過一段時間的摸索，uniapp中，app端匯入匯出，實現方案如下：

匯出Excel，走的是系統IO流，程式碼如下：dateUtil.js的程式碼點這裡

<template>
    <view class="content"
 
>
        <view class="top_box">{{title}}</view>
        
        <view class="btn_cube" @click="tableToExcel">匯出一個表來看</view>
        
        <view class="tip">tips：合併什麼的可以直接用table標籤相關的行內屬性合併，如colspan、rowspan</view>
        <view class="tip">tips：建立目錄時，一個大目錄，下面再有一級年月的目錄，方便到時候讀取目錄</
 
view>
        <view class="tip">{{successTip}}</view>
        
    </view>
</template>

<script>
    import {formatNumber,formatDateThis,getUnixTime} from "@/common/util/dateUtil.js"
    var that;
    export default {
        components:{
            
        },
        data() {
            
 
return {
                title:"app端匯出excel",
                successTip:""
            }
        },
        onLoad() {
            that = this;
        },
        methods: {
            tableToExcel() {
                //要匯出的json資料
                const jsonData = [{
                        name: '測試資料',
                        phone: '123456',
                        email: '[email protected]'
                    }
                ]
                //列標題
                let worksheet = "sheet1";
                let str = '<tr><td>姓名</td><td>電話</td><td>郵箱</td></tr>';
                //迴圈遍歷，每行加入tr標籤，每個單元格加td標籤
                for (let i = 0; i < jsonData.length; i++) {
                    str += '<tr>';
                    for (let item in jsonData[i]) {
                        //增加\t為了不讓表格顯示科學計數法或者其他格式
                        str += `<td>${ jsonData[i][item] + '\t'}</td>`;
                    }
                    str += '</tr>';
                }
                //下載的表格模板資料
                let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
        xmlns:x="urn:schemas-microsoft-com:office:excel" 
        xmlns="http://www.w3.org/TR/REC-html40">
        <head><!--[if gte mso 9]><xml encoding="UTF-8"><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
                //下載模板
                exportFile(template);
            }
            
        }
    }
    
    // 匯出檔案到手機 fileData:要寫入到檔案的資料，返回引數為文件路徑
    function exportFile (fileData,documentName="專案Excel檔案") {
        /*
        PRIVATE_DOC: 應用私有文件目錄常量
        PUBLIC_DOCUMENTS: 程式公用文件目錄常量
        */
        plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
            
            let rootObj = fs.root;
            let fullPath = rootObj.fullPath;
            // let reader = rootObj.createReader();
            // console.log(reader);
            // reader.readEntries((res)=>{
            //     console.log(res); //這裡拿到了該目錄下所有直接檔案和目錄
            // },(err)=>{console.log(err);})
            
            console.log("開始匯出資料********");
            // 建立資料夾
            rootObj.getDirectory(documentName, {
                create: true
            }, function(dirEntry) {
                //獲取當前的年月繼續建立資料夾
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                dirEntry.getDirectory(`${year}年${month}月`,{
                    create:true
                },function(dirEntry2){
                    // 建立檔案,防止重名
                    let fileName = "excel"+getUnixTime(formatDateThis(new Date()));
                    console.log(fileName);
                    dirEntry2.getFile(`${fileName}.xlsx`, {
                        create: true
                    }, function(fileEntry) {
                        fileEntry.createWriter(function(writer) {
                            writer.onwritestart = (e)=>{
                                uni.showLoading({
                                    title:"正在匯出",
                                    mask:true
                                })
                            }
                            
                            //  /storage/emulated/0指的就是系統路徑
                            let pathStr = fullPath.replace("/storage/emulated/0","");
                            writer.onwrite = (e) => {
                                // 成功匯出資料;
                                uni.hideLoading();
                                setTimeout(()=>{
                                    uni.showToast({
                                        title:"成功匯出",
                                        icon:"success"
                                    })
                                    that.successTip = `檔案位置：${pathStr}/${documentName}/${year}年${month}月`;
                                },500)
                                
                            };
                            // 寫入內容;
                            writer.write(fileData);
                            
                        }, function(e) {
                            console.log(e.message);
                        });
                    });
                })
                
            });
    
        });
        
    }

    
</script>

至於匯入Excel，我這裡就不貼程式碼了，思路就是利用uniapp的web-view標籤，相當於是傳統網頁的做法，利用input標籤的file屬性，最後把解析到的值，傳遞迴vue頁面。

web-view相關閱讀：https://uniapp.dcloud.io/component/web-view

    uni.postMessage({
        data: {
            excelData: finalData
        }
    });

tips:手機上不比電腦，如果要除錯如上功能，建議下個辦公軟體，比如wps手機版，這樣找excel檔案就比較快。

相關推薦

uniapp匯入匯出Excel

眾所周知，uniapp作為跨端利器，有諸多限制，其中之一便是vue頁面不支援傳統網頁的dom、bom、blob等物件。

使用EasyPoi輕鬆匯入匯出Excel文件的方法示例

提到Excel的匯入匯出，大家肯定都知道alibaba開源的EasyExcel，該專案的github地址為：https://github.com/alibaba/easyexcel。

thinkphp5.1 框架匯入/匯出excel檔案操作示例

本文例項講述了thinkphp5.1 框架匯入/匯出excel檔案操作。分享給大家供大家參考，具體如下：

Java實現匯入匯出Excel：POI和EasyExcel

文章與CSDN同步，歡迎訪問：https://blog.csdn.net/qq_40280582/article/details/107300081 程式碼地址：https://gitee.com/ilovemo/poi-study

NPOI匯入匯出Excel

　　最近較忙，上一篇文章的其他交換機沒時間寫，我又遇到一個新需求NPOI匯入匯出Excel，不多廢話了，上原始碼：

Java實現匯入匯出Excel檔案的方法（poi，jxl）

目前，比較常用的實現Java匯入、匯出Excel的技術有兩種Jakarta POI和Java Excel直接上程式碼：

【springboot+poi】實現匯入匯出excel

一.pom引入 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.17</version> </dependency><dependency><groupId&

jxl匯入/匯出Excel(Maven)

jxl && POI jxl是一個開源的Java Excel API專案，通過Jxl，Java可以很方便的操作微軟的Excel文件。除了Jxl之外，還有Apache的一個POI專案，也可以操作Excel，兩者相比之下：Jxl使用方便，但功能相對POI比較

Springboot整合easyExcel匯入匯出Excel

背景： 最近公司有個需求要求可以匯入、匯出excel，因此在此記錄學習一下如何使用Springboot整合easyExcel；需求：資料庫中有張user表，有個業務要求可以匯入、匯出“使用者名稱單.xls”表

前端通過檔案流匯入匯出excel（相容IE）

技術標籤：JavaScriptVue 前端通過檔案流匯入匯出excel（相容IE） api資料夾內新建config.js，封裝匯入匯出的請求方法

Springboot使用模板匯入匯出excel檔案

技術標籤：後臺開源分享專案springbootmysqlspring bootjava資料庫 製作excel模板 將模板放入專案中 下載模板程式碼介面

NPIO匯入匯出excel檔案

最近在一個專案上幫忙 ，做了一個將excel檔案資料匯入到資料庫的功能 用到的輔助類：

React實現匯入匯出Excel檔案

目錄表示層業務層核心外掛xlsxexcel 匯入excel 匯出excel 匯出外掛（-export-excel）實現效果結語表示層

js使用js-xlsx將資料匯入匯出Excel

前言：因為業務要求，需要在前端從Excel表格中讀取資料後以json或array格式傳送到後端，或者將後端獲取的資料匯出到Excel中提供檔案下載功能。以下正文：

.netcore匯入匯出Excel

使用NPOI包2.5.4版 思路:簡單的匯入匯出，就是一表、一行、一單元格讀寫的過程

Net Core NPOI匯入匯出Excel

一、NuGet包 1.1安裝NPOI和Npoi.Mapper 二、Excel幫助類 /// <summary> /// Excel 操作幫助類

Java線上資料匯入匯出Excel

利用hutool 匯入匯出 Excel 匯入maven <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId>

非同步匯入匯出Excel方案

一、非同步匯出Excel檔案 1、設計思想 使用者無需在當前頁面等待匯出結果，點選匯出按鈕後服務端即可返回前端提示使用者匯出處理中請到下載中心檢視結果。

C# NPOI匯入/匯出Excel

安裝 Install-Package NPOI ExcelHelper using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel;

java實現Excel的匯入匯出

本文例項為大家分享了java實現Excel匯入匯出的具體程式碼，供大家參考，具體內容如下