Java实现Excel导入导出功能(前端anglar,后端poi,jpa)

本文介绍如何使用Java的Apache POI库在前端Angular和后端结合JPA来实现Excel文件的导入与导出功能。前端部分涉及导出和导入的交互设计,后端则详细阐述了Controller和Service层的处理逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端

导出

<kendo-button class="k-button-icontext k-primary" ng-click="export();"><span
                    class="k-button-icon icon-download"></span>导出</kendo-button>
//数据下载
var downloadUrl = DSJS.getWebRoot() + "/addressbookbatch/export_excel?template=";

 // 导出
    $scope.export = function () {
   
        $scope.filename = "contact_person.xlsx";
        $http.get(downloadUrl + "contact_person",{
   responseType: 'arraybuffer'}).success(function(data, status, headers){
   
            headers = headers();
            var contentDisposition = headers['content-disposition'];
            var contentType = headers['content-type'];
            var linkElement = document.createElement('a');
            var blob = new Blob([data], {
   type: contentType});
            var url = window.URL.createObjectURL(blob);
            var filename =
                linkElement.setAttribute('href', url);
            linkElement.setAttribute("download", $scope.filename);
            //document.body.appendChild(linkElement);
            //linkElement.click();
            //document.body.remove(linkElement);
            var clickEvent = new MouseEvent("click", {
   
                "view": window,
                "bubbles": true,
                "cancelable": false
            });
            linkElement.dispatchEvent(clickEvent);
        });
    }

导入

<kendo-button class="k-button-icontext k-primary" ng-click="showUpload();"><span
                    class="k-button-icon icon-upload"></span>导入</kendo-button>
// 初始化弹出网页--导入
    $scope.showUpload = function() {
   
        $scope.winEdit.title($translate.instant("导入"));
        $scope.winEdit.refresh({
   
            url: "personOrOrgUpload.html?type=contact_person"
            //iframe: true
        });
        $scope.winEdit.center();
        $scope.winEdit.open();
    };

or(其他页面书写差异不大,会忽略)

// 初始化弹出网页--导入
    $scope.showUpload = function() {
   
        $scope.winEdit.setOptions({
   
            width: 800,
            height: 500
        });
        $scope.winEdit.title($translate.instant("导入"));
        $scope.winEdit.refresh({
   
            url: "personOrOrgUpload.html?type=contact_org",
            iframe: true
        });
        $scope.winEdit.center();
        $scope.winEdit.open();
    };

弹出导入页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>联系方式文件上传</title>
    <#include "/basic/head-css.ftl" encoding="utf-8" />
    <#include "/basic/head-js.ftl" encoding="utf-8" />
    <style>
    .k-upload .k-clear-selected, .k-upload .k-upload-selected {
     
    line-height: 5px;
    padding: .84em 0
	}
	
	.k-upload .k-upload-selected {
     
    color: #525252
	}
    </style>
</head>

<body>
<div class = "container-fluid">
	<div id="container">
		<input id="file" type="file" name="file" accept=".xlsx" />
	</div>
	<div id="msg" style="border: 1px solid #cdced2;height: 80px;padding:7px 13px">
		<p id=""></p>
	</div>
</div>
    
</body>
<script>
	
	var clear = "clear";
	var fail = "Data import failed";
	var success = "Data import successed";
	if(top.current_lang != undefined && top.current_lang != null){
     
		switch(top.current_lang){
     
		case "zh-cn":
			clear = "清除";
			fail = "数据导入异常";
			success = "数据导入成功";
			break;
		case "en-us":
			clear = "clear";
			fail = "An error occurs during data import.";
			success = "Data imported successfully.";
			break;
		case "fr-fr":
			clear = "clair";
			fail = "Importation anomale.";
			success = "Importation réussie.";
			break;
		default:
			break;
		}
	}

	var type = DSJS.getQueryString("type");
	$("#msg").hide();
	
    $("#file").kendoUpload({
     
    	        localization: {
     
    	        	clearSelectedFiles: clear
    	        },
    	    	
    	    	async: {
     
    	            // saveUrl: DSJS.getWebRoot() + "/batch/import_excel?type=",
    	            saveUrl: DSJS.getWebRoot() + "/addressbookbatch/import_excel?type=",
    	            removeUrl: "remove",
    	            autoUpload: false
    	        },
    	        success: onSuccess,
    	        select: onSelect,
    	        upload: onUpload,
    	        clear: onClear,
    	        remove: onRemove,
    	        
    	        multiple: false
    	    });   
   
    
    function onSuccess(e) {
     
    	if(e.response.ret == 'error'){
     
    		$("#msg").show();
    		var upload = $("#file").data("kendoUpload");
    		upload.localization.headerStatusUploaded = fail;
    		e.preventDefault();
    		$("#msg").find("p").eq(0).html(e.response.msg);
    	}
    	
    	if(e.response.ret == 'ok'){
     
    		$("#msg").find("p").eq(0).html(e.response.msg);
    		$("#msg").show();
    		var upload = $("#file").data("kendoUpload");
    		upload.localization.headerStatusUploaded = success;
    	}
    }
    
    function onSelect(e) {
     
    }
    
    function onUpload(e) {
     
    	var url = e.sender.options.async.saveUrl; 
    	if(url.substr(url.length-1,1) === "="){
     
    		e.sender.options.async.saveUrl += type;
    	}
    }
    
    function onClear(e) {
     
    	$("#msg").find("p").eq(0).
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值