1. Export Excel by js
<html>
<head>
</head>
<body>
<script type="text/javascript" src="./"></script>
<script type="text/javascript">
/**
* A common method of opening the download dialog box, no specific compatibility has been tested
* @param url download address, it can also be a blob object, a must-have
* @param saveName Save the file name, optional
*/
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = (url); // Create a blob address }
var aLink = ('a');
= url;
= saveName || ''; // New attributes added to HTML5, specify the file name to save, you can do not have a suffix. Note that file:/// mode will not take effect var event;
if () event = new MouseEvent('click');
else {
event = ('MouseEvents');
('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
(event);
}
// Convert a sheet into the final excel file blob object, and then use the downloadfunction sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
[sheetName] = sheet;
// Generate excel configuration items var wopts = {
bookType: 'xlsx', // The file type to generate bookSST: false, // Whether to generate a Shared String Table, the official explanation is that the generation speed will decrease if enabled, but there is better compatibility on low-version IOS devices type: 'binary'
};
var wbout = (workbook, wopts);
var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
// String to ArrayBuffer function s2ab(s) {
var buf = new ArrayBuffer();
var view = new Uint8Array(buf);
for (var i = 0; i != ; ++i) view[i] = (i) & 0xFF;
return buf;
}
return blob;
}
</script>
<script type="text/javascript">
var exportDataSource = [{
name: 'Passenger A',
phone: '123456789',
email: '000@'
}, {
name: 'Cannon Fodder B',
phone: '123456789',
email: '000@'
}, {
name: 'Bandit C',
phone: '123456789',
email: '000@'
}, {
name: 'Rogue',
phone: '123456789',
email: '000@'
}, ]; //Export json data sourcefunction exportExcel() {
var excelItems = [];
for (let i = 0; i < ; i++) {
if (exportDataSource[i].name != "") {
({
"Name": exportDataSource[i].name,
"Telephone": exportDataSource[i].phone,
"Mail": exportDataSource[i].email
}); //property }
}
var sheet = .json_to_sheet(excelItems);
openDownloadDialog(sheet2blob(sheet), '');
}
</script>
<a style="float: right;" onclick="exportExcel()">Export and download</a>
</body>
</html>2. JS implements json to export csv
<html>
<head>
<p style="font-size: 20px;color: red;">useaThe tag method willjsonExportcsvdocument</p>
<button onclick='tableToExcel()'>Export</button>
</head>
<body>
<script>
function tableToExcel(){
//Json data to be exported const jsonData = [
{
name:'Passenger A',
phone:'123456789',
email:'000@'
},
{
name:'Cannon Fodder B',
phone:'123456789',
email:'000@'
},
{
name:'Bandit C',
phone:'123456789',
email:'000@'
},
{
name:'Rogue',
phone:'123456789',
email:'000@'
},
]
//Column titles are separated by commas, each comma is separated by a cell let str = `Name,Telephone,Mail\n`;
//Increase\tIn order not to display scientific notation or other formats, for(let i = 0 ; i < ; i++ ){
for(let item in jsonData[i]){
str+=`${jsonData[i][item] + '\t'},`;
}
str+='\n';
}
//encodeURIComponent solves Chinese garbled code let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//Implemented by creating a tag let link = ("a");
= uri;
//Name the downloaded file = "json data table.csv";
(link);
();
(link);
}
</script>
</body>
</html>3. JS implements json export csv
<html>
<head>
<p style="font-size: 20px;color: red;">usetableThe tag method willjsonExportxlsdocument</p>
<button onclick='tableToExcel()'>Export</button>
</head>
<body>
<script>
function tableToExcel(){
//Json data to be exported const jsonData = [
{
name:'Passenger A',
phone:'123456',
email:'123@'
},
{
name:'Cannon Fodder B',
phone:'123456',
email:'123@'
},
{
name:'Bandit C',
phone:'123456',
email:'123@'
},
{
name:'Rogue',
phone:'123456',
email:'123@'
},
]
//Column title let str = '<tr><td>Name</td><td>Tel</td><td>Email</td></tr>';
//Loop traversal, add tr tags for each row, and add td tags for each cell for(let i = 0 ; i < ; i++ ){
str+='<tr>';
for(let item in jsonData[i]){
//Increase\tIn order not to display scientific notation or other formats, str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
}
str+='</tr>';
}
//Worksheet name let worksheet = 'Sheet1'
let uri = 'data:application/-excel;base64,';
//Downloaded table template data let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http:///TR/REC-html40">
<head><!--[if gte mso 9]><xml><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>`;
//Download template = uri + base64(template)
}
//Output base64 encoding function base64 (s) { return (unescape(encodeURIComponent(s))) }
</script>
</body>
</html>4. JS implements Tab to Excel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>excel Export test</title>
<style>
table {
border-collapse: collapse;
text-align: center;
vertical-align: middle;
width: 800px;
font-size: 20px;
}
button {
height: 30px;
width: 100px;
margin: 20px 20px;
background: yellowgreen;
border-radius: 10px;
outline: none;
}
input {
height: 30px;
padding-left: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div style="width:900px;margin:20px auto;">
<h3>jsscript Exportexceltest</h3>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>ID</th>
<th>Name</td>
<th>age</td>
<th>motto</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Zhang San</td>
<td>18</td>
<td>There are more people leaving，Turned into a road。</td>
</tr>
<tr>
<td>2</td>
<td>Li Si</td>
<td>88</td>
<td>Everyone has their own way，Which one belongs to you？</td>
</tr>
<tr>
<td>3</td>
<td>Wang Wu</td>
<td>81</td>
<td>Walking someone else's way，Let him have no idea！</td>
</tr>
</tbody>
</table>
<label>
Name：<input type="text" autocomplete placeholder="Please enter your name..." >
</label>
<label>
age：<input type="text" autocomplete placeholder="Please enter your age...">
</label>
<label>
motto：<input type="text" autocomplete placeholder="Please enter your motto..." >
</label>
<button >Add information</button>
<button onclick="btn_export()">Export文件</button>
</div>
<script src="./"></script>
<script src="./"></script>
<script src="./"></script>
<script>
function btn_export() {
var table = ("#tb");
var sheet = .table_to_sheet(table); //Convert a table object to a sheet object openDownloadDialog(sheet2blob(sheet), '');
}
var id = $("input").length + 1;
$(function() {
$("#add").click(function() {
var name = $("#name").val();
var age = $("#age").val();
var sex = $("#sex").val();
$("tbody").append("<tr><td>" + id + "</td><td>" + name + "</td> <td>" + age + "</td> <td>" + sex + "</td></tr>");
id++;
$("input").val('');
});
})
</script>
</body>
</html>This is all about this article about JS implementation exporting Excel and CSV files. I hope it will be helpful to everyone's learning and I hope everyone will support me more.