前端导入导出Excel
本人是在校大二学生一枚，最近暑期在校实习想学习一下关于前端的导入导出的功能的插件，希望大家可以推荐一些，谢谢！
exceljs库
中文：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md
英文：https://github.com/exceljs/exceljs/blob/HEAD/README.md
您好，我们公司的SpreadJS产品您可以试一下：
https://www.grapecity.com.cn/developer/spreadjs/feature/io-excel%EF%BC%88%E5%AE%98%E7%BD%91%E4%BB%8B%E7%BB%8D）
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/workbook/excel-import-export/purejs（实战代码库）
无需开发工具可以直接在在线编辑代码运行的哈
。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {calcOnDemand: true});
spread.fromJSON(jsonData);
var excelIo = new GC.Spread.Excel.IO();
document.getElementById('loadExcel').onclick = function () {
var excelFile = document.getElementById("fileDemo").files[0];
var password = document.getElementById('password').value;
var incrementalEle = document.getElementById("incremental");
var loadingStatus = document.getElementById("loadingStatus");
incrementalEle.addEventListener('change', function (e) {
document.getElementById('loading-container').style.display = incrementalEle.checked ? "block" : "none";
});
// here is excel IO API
excelIo.open(excelFile, function (json) {
var workbookObj = json;
if (incrementalEle.checked) {
spread.fromJSON(workbookObj, {
incrementalLoading: {
loading: function (progress, args) {
progress = progress * 100;
loadingStatus.value = progress;
console.log("current loading sheet", args.sheet && args.sheet.name());
},
loaded: function () {
}
}
});
} else {
spread.fromJSON(workbookObj);
}
}, function (e) {
// process error
alert(e.errorMessage);
}, {password: password});
};
document.getElementById('saveExcel').onclick = function () {
var fileName = document.getElementById('exportFileName').value;
var password = document.getElementById('password').value;
if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx';
}
var json = spread.toJSON();
// here is excel IO API
excelIo.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
// process error
console.log(e);
}, {password: password});
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/excel_data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<div class="inputContainer">
<input type="checkbox" id="incremental" checked/>
<label for="incremental">Incremental Loading</label>
<p class="summary" id="loading-container">
Loading progress:
<input style="width: 231px;" id="loadingStatus" type="range" name="points" min="0" max="100" value="0" step="0.01"/>
</p>
<input type="file" id="fileDemo" class="input">
<br>
<input type="button" id="loadExcel" value="import" class="button">
</div>
<div class="inputContainer">
<input id="exportFileName" value="export.xlsx" class="input">
<input type="button" id="saveExcel" value="export" class="button">
</div>
</div>
<div class="option-row">
<div class="group">
<label>Password:
<input type="password" id="password">
</label>
</div>
</div>
</div>
</div></body>
</html>
https://github.com/SheetJS/sheetjs 可以在前端解析和导出 Excel 数据
js-xlsx，vue-json-excel，exceljs等，懂基础的情况下找个开源项目，基本上导入导出都有的
export function handelExportExcel(data,name){
let blob = new Blob([data], {
type: 'application/vnd.ms-excel;chartset=UTF-8'
})
let fileURL = URL.createObjectURL(blob);
const downloadLink = document.createElement('a')
downloadLink.href = fileURL
downloadLink.download = name
document.body.appendChild(downloadLink)
downloadLink.click()
document.body.removeChild(downloadLink)
window.URL.revokeObjectURL(fileURL);
}
导入可以直接用element里面的组件参照文档就可以 导出的话可以用代码段的方法