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,208 questions
Excel
Excel
A family of Microsoft spreadsheet software with tools for analyzing, charting, and communicating data.
1,441 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,655 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,569 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. RaytheonXie_MSFT 30,906 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.