When Exporting a sharepoint list to excel does it save to jquery?

Tevon2.0 1,101 Reputation points
2023-05-19T15:55:25.4033333+00:00

Curious as to what happens when you export a SharePoint to excel.

SharePoint Server
SharePoint Server
A family of Microsoft on-premises document management and storage systems.
2,297 questions
Excel
Excel
A family of Microsoft spreadsheet software with tools for analyzing, charting, and communicating data.
1,687 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,807 questions
SharePoint Server Development
SharePoint Server Development
SharePoint Server: A family of Microsoft on-premises document management and storage systems.Development: The process of researching, productizing, and refining new or existing technologies.
1,597 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. RaytheonXie_MSFT 33,641 Reputation points Microsoft Vendor
    2023-05-22T02:26:07.55+00:00

    Hi @Tevon2.0 ,

    You can get the items by rest api and write the data to excel by jquery. Please refer to the following js code

    $(document).ready(function() {
    	$("#pageTitle").hide();
    
    	fnGetListNames();//Bind the lists to radio buttons 
    
    	$("#exportListBtn").on("click", function() {
    		var selectedVal = $("input[type='radio']:checked").val();
    		if(selectedVal){
    		    $("#exportListBtn").hide();
    		    $("#alertMsg").text('File Ready To Download!');
    		    $("#alert").css("display", "block");
    		    fnExport2Excel(selectedVal);
    		} else{
    		    alert('Select a list to export.!');
    		}
    	});
    });
    
    function fnGetListNames() {
    	var htmlContent = '';
    	var listNamesID = document.getElementById("listNamesID");
    	$.ajax({
    		url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/",
    		type: "GET",
    		headers: {
    			"Accept": "application/json;odata=verbose",
    		},
    		success: function(data, status, xhr) {
    			var dataResults = data.d.results;
    			for(var i = 0; i < dataResults.length; i++) {
    				if(dataResults[i].BaseTemplate === 100 && dataResults[i].Hidden === false) {
    					var listTitle = dataResults[i].Title;
    					htmlContent += '<tr>' + '<td><input type="radio" id="ValueID' + i + '" name="listNames" value="' + listTitle + '"></td><td>' + listTitle + '</td></tr>';
    				}
    			}
    			listNamesID.innerHTML = htmlContent;
    		},
    		error: function(xhr, status, error) {
    			console.log("Failed to Get List Names");
    		}
    	});
    }
    
    function fnExport2Excel(selectedValue) {
    	$.ajax({
    		url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('"+selectedValue+"')/items?",
    		type: "GET",
    		headers: {
    			"Accept": "application/json;odata=verbose"
    		},
    		success: function(data, status, xhr) {
    			var listData = data.d.results;
    			var fileName = selectedValue+'.xlsx';
    			var jsonToSheet = XLSX.utils.json_to_sheet(listData);
    			var excelBook = XLSX.utils.book_new();
    			XLSX.utils.book_append_sheet(excelBook, jsonToSheet, selectedValue);
    			XLSX.writeFile(excelBook, fileName);
    		},
    		error: function(xhr, status, error) {
    			console.log("Failed to download");
    		}
    	});
    }
    
    
    
    

    And here is the html resource

    <HTML>
        <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
           <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.1/xlsx.full.min.js"></script>
           <script src="../SiteAssets/Export2Excel/export2Excel.js"></script>
           <style>
               .card {
                    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
                    transition: 0.3s;
                    width: 40%;
                    margin: 25px auto;
                }
                .card:hover {
                    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
                }
                .container {
                    padding: 2px 16px;
                }
                h4, #exportListDiv, #listNamesID{
                  text-align: center;
                  margin: 20px auto;
                }
              #listNamesID td {
                padding: 0px 20px;
              }
           </style>
        </head>
        <body>
            <div class="card">
                <div class="container">
                  <h4>Choose a list to export</h4>
                  <table id="listNamesID">
    
                  </table>
                  <div id="exportListDiv">
                    <button type="button" class="btn btn-primary" id="exportListBtn">Export to Excel</button>
                    <div class="alert alert-success" id="alert" style="display: none;">
                      <strong id="alertMsg"></strong>
                    </div>
                  </div>
                </div>
            </div>   
        </body>
     </html>
    

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.