使用js实现excel的读取展示以及导出

在JavaScript中，实现Excel的读取和展示通常需要使用第三方库，例如SheetJS js-xlsx库。对于导出Excel，可以使用SheetJS库进行操作。

以下是使用SheetJS库读取和展示Excel文件的示例代码：

// 引入SheetJS库
const XLSX = require('xlsx');
 
// 读取Excel文件
function readExcel(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, {type: 'array'});
 
    // 假设我们只读取第一个工作表
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
 
    // 在这里处理json数据，例如显示在表格中
    console.log(json);
  };
  reader.readAsArrayBuffer(file);
}
 
// 用于文件输入的DOM元素
const inputElement = document.getElementById('input-excel');
inputElement.addEventListener('change', function(e) {
  const file = e.target.files[0];
  readExcel(file);
});

导出Excel的示例代码：

// 导出Excel
function exportToExcel(data, fileName) {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  
  const excelBuffer = XLSX.write(workbook, {bookType: 'xlsx', type: 'array'});
  const dataBlob = new Blob([excelBuffer], {type: ''});
  FileSaver.saveAs(dataBlob, fileName + '.xlsx');
}
 
// 假设我们有一些数据需要导出
const dataToExport = [
  { name: 'Alice', email: 'alice@example.com' },
  { name: 'Bob', email: 'bob@example.com' }
];
 
// 触发导出操作
exportToExcel(dataToExport, 'users');

注意：上述代码示例中使用了FileReader和SheetJS库来处理文件读取和Excel操作，以及FileSaver库来实现Excel的导出。在实际应用中，你需要确保这些库已经通过npm或其他方式安装到你的项目中。