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

Question

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

Tevon2.0 1,106

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

1 answer

Your answer

Answer 1

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.

RaytheonXie_MSFT 40,471 Reputation points Microsoft External Staff

2023-05-26T09:07:23.6466667+00:00

Hi @Tevon2.0 ,

Would you tell me whether your issue has been resolved or have any update?

I am looking forward to your reply.

Share via

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

1 answer

Your answer