XLSX + LuckySheet + LuckyExcel + Web Worker实现前端的excel预览

c.2024-07-07 17:58

文章目录

功能简介

  1. 通过LuckyExcel的transformExcelToLucky方法， 我们可以把一个文件直接转成LuckySheet需要的json字符串， 之后我们就可以用LuckySheet预览excel
  2. LuckyExcel只能解析xlsx格式的excel文件，因此对于xls和csv的格式，我们需要通过XLSX来转化成xlsx格式，但在转化过程中会丢失样式
  3. 对于excel中存在很多的空白行，在显示的时候可能会出现卡顿，所以我们需要将过多的空白行移除

简单代码实现

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Excel File Upload and Preview with Luckysheet</title>
</head>
<body>

<!-- 文件上传控件 -->
<input type="file" id="fileUpload"/>

<!-- Luckysheet 的容器 -->
<div id="luckysheet" style="position: relative; width: 100%; height: 500px;"></div>
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css'/>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>


<script src="https://cdn.jsdelivr.net/npm/luckyexcel/dist/luckyexcel.umd.js"></script>

<script>
 
 const _xlsxType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  const  _xlsType = 'application/vnd.ms-excel';
  const  _csvType = 'text/csv';

  //如果后端是以流的方式返回，可以调用这个方法
  const handleExcel = (res, fileName) => {
    const file = getExcelFile(res, fileName);
    handleExcelFile(file);
  }


 // 获取Excel文件
  const getExcelFile = (res, fileName) => {
  // 根据文件后缀名判断文件类型
    if (fileName.endsWith('.xlsx')) {
      return new File([res], fileName, {type: _xlsxType});
    } else if (fileName.endsWith('.xls')) {
      return new File([res], fileName, {type: _xlsType});
    } else if (fileName.endsWith('.csv')) {
      return new File([res], fileName, {type: _csvType});
    } else {
      throw new Error("Unsupported file type");
    }
  }
  
	// 处理Excel文件
  const handleExcelFile = (file) => {
    const fileName = file.name;
    // 根据文件后缀名判断文件类型并进行处理
    if (fileName.endsWith('.xlsx')) {
      console.log("handle excel for xlsx type..", fileName);
      handleExcelForXlsxType(file, fileName);
    } else if (fileName.endsWith('.xls') || fileName.endsWith('.csv')) {
      console.log("handle excel for xls or csv type..", fileName);
      handleExcelForXlsAndCsvType(file, fileName);
    } else {
      throw new Error("Unsupported file type");
    }
  }

// 处理xlsx类型的Excel文件
  const handleExcelForXlsxType = (file, fileName) => {
    const reader = new FileReader();
    reader.onload = function (event) {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, {type: 'array'});
       // 获取Excel文件中的最大行数
      let maxRowCountFromExcel = getMaxRowCountFromExcel(workbook);
      // 如果行数大于100000，则处理Excel文件中的空行
      if (maxRowCountFromExcel > 1000000) {
        console.log("excel file has too many blank row..", maxRowCountFromExcel);
        handleBlankRowForExcelWithTooManyBlankRow(workbook);
        const xlsxFile = toXlsxExcelFile(workbook, fileName);
        createLuckySheet(xlsxFile);
      } else {
        createLuckySheet(file);
      }
    };
    reader.readAsArrayBuffer(file);
  }

// 处理xls和csv类型的Excel文件
  const handleExcelForXlsAndCsvType = (file, fileName) => {
    const reader = new FileReader();
     // 读取文件完成后的回调函数
    reader.onload = function (event) {
      const data = new Uint8Array(event.target.result);
        // 读取Excel文件内容
      const workbook = XLSX.read(data, {type: 'array'});
       // 将Excel文件转换为xlsx类型
      const xlsxFile = toXlsxExcelFile(workbook, fileName);
       // 处理xlsx类型的Excel文件
      handleExcelForXlsxType(xlsxFile, fileName);
    };
    // 以ArrayBuffer的形式读取文件
    reader.readAsArrayBuffer(file);
  }

/ 创建Luckysheet
  const createLuckySheet = (file) => {
  // 销毁已存在的Luckysheet
    window.luckysheet.destroy();
     // 将Excel文件转换为Luckysheet的json
    LuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {
      if (exportJson.sheets == null || exportJson.sheets.length === 0) {
        throw new Error("Failed to load excel file");
      }
      // 创建Luckysheet的配置项
      const options = {
        container: 'luckysheet',
        data: exportJson.sheets, // title: exportJson.info.name,
        // userInfo: exportJson.info.name.creator,
        column: 10,
        row: 10,
        showinfobar: false,
        sheetFormulaBar: true,
        showConfigWindowResize: false
      };
      // 创建Luckysheet
      window.luckysheet.create(options);
    });
  }
  // 获取Excel文件中的最大行数
  const getMaxRowCountFromExcel = (workbook) => {
    let maxRowCount = 0;
    if (workbook.SheetNames == null || workbook.SheetNames.length === 0) {
      return maxRowCount;
    }
    // 遍历每个sheet，获取最大行数
    workbook.SheetNames.forEach(sheetName => {
      const worksheet = workbook.Sheets[sheetName];
      if (worksheet['!ref'] === undefined) {
        return;
      }
      const range = XLSX.utils.decode_range(worksheet['!ref']);
      maxRowCount = maxRowCount + range.e.r;
    });
	console.log("max:", maxRowCount)
    return maxRowCount;
  }
  const reduceBlankRow = (row, range, worksheet) => {
   // 从给定的行开始，向上遍历到工作表的起始行
    while (row > range.s.r) {
     // 假设当前行是空的
      let allEmpty = true;
       // 遍历当前行的所有列
      for (let col = range.s.c; col <= range.e.c; col++) {
      // 获取当前单元格的引用
        const cell_ref = XLSX.utils.encode_cell({c: col, r: row});
         // 如果当前单元格不为空，则将allEmpty设置为false并跳出循环
        if (worksheet[cell_ref]) {
          allEmpty = false;
          break;
        }
      }
      // 如果当前行是空的，则将行数减一，否则跳出循环
      if (allEmpty) {
        row--;
      } else {
        break;
      }
    }
     // 更新工作表范围的结束行
    range.e.r = row;
     // 更新工作表的范围引用
    worksheet['!ref'] = XLSX.utils.encode_range(range.s, range.e);
  }
  // 处理Excel文件中的空行
  const handleBlankRowForExcelWithTooManyBlankRow = (workbook) => {
    if (workbook.SheetNames == null || workbook.SheetNames.length === 0) {
      return;
    }
     // 遍历每个sheet，处理空行
    workbook.SheetNames.forEach(sheetName => {
      const worksheet = workbook.Sheets[sheetName];
      if (worksheet['!ref'] === undefined) {
        return;
      }
      const range = XLSX.utils.decode_range(worksheet['!ref']);
      let row = range.e.r;
      reduceBlankRow(row, range, worksheet);
    });
  }
	// 将Excel文件转换为xlsx类型
  const toXlsxExcelFile = (workbook, fileName) => {
    const newWorkbook = XLSX.write(workbook, {bookType: 'xlsx', type: 'binary'});
    const data = new Uint8Array(newWorkbook.length);
    for (let i = 0; i < newWorkbook.length; i++) {
      data[i] = newWorkbook.charCodeAt(i);
    }
    return new File([data], fileName, {type: _xlsxType});
  }


 // 文件上传控件的change事件处理函数
  document.getElementById('fileUpload').addEventListener('change', function (e) {
 	 // 获取上传的文件
    const file = e.target.files[0];
     // 处理Excel文件
    handleExcelFile(file);

  });




</script>

</body>
</html>

web worker 版本

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Excel File Upload and Preview with Luckysheet</title>
</head>
<body>

<!-- 文件上传控件 -->
<input type="file" id="fileUpload"/>

<!-- Luckysheet 的容器 -->
<div id="luckysheet" style="position: relative; width: 100%; height: 500px;"></div>
<div id="worker" style="display:none">


  importScripts("https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js")
  const _xlsxType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  const _xlsType = 'application/vnd.ms-excel';
  const _csvType = 'text/csv';
  const _maxRowCount = 5000000;


  self.addEventListener('message', (e) => {
  console.log('Worker get message:', e.data)
  handleExcel(e.data.data, e.data.fileName)
  });


  const handleExcel = (res, fileName) => {
  const file = getExcelFile(res, fileName);
  handleExcelFile(file);
  }

  const getExcelFile = (res, fileName) => {
  if (fileName.endsWith('.xlsx')) {
  return new File([res], fileName, {type: _xlsxType});
  } else if (fileName.endsWith('.xls')) {
  return new File([res], fileName, {type: _xlsType});
  } else if (fileName.endsWith('.csv')) {
  return new File([res], fileName, {type: _csvType});
  } else {
  throw new Error("Unsupported file type");
  }
  }

  const handleExcelFile = (file) => {
  const fileName = file.name;
  if (fileName.endsWith('.xlsx')) {
  console.log("handle excel for xlsx type..", fileName);
  handleExcelForXlsxType(file, fileName);
  } else if (fileName.endsWith('.xls') || fileName.endsWith('.csv')) {
  console.log("handle excel for xls or csv type..", fileName);
  handleExcelForXlsAndCsvType(file, fileName);
  } else {
  throw new Error("Unsupported file type");
  }
  }

  const handleExcelForXlsxType = (file, fileName) => {
  const reader = new FileReader();
  reader.onload = function (event) {
  const data = new Uint8Array(event.target.result);
  const workbook = XLSX.read(data, {type: 'array', cellDates: true});
  let maxRowCountFromExcel = getMaxRowCountFromExcel(workbook);
  if (maxRowCountFromExcel > _maxRowCount) {
  console.log("excel file has too many blank row..", maxRowCountFromExcel);
  handleBlankRowForExcelWithTooManyBlankRow(workbook);
  const xlsxFile = toXlsxExcelFile(workbook, fileName);
  createLuckySheet(xlsxFile);
  } else {
  createLuckySheet(file);
  }
  };
  reader.readAsArrayBuffer(file);
  }

  const handleExcelForXlsAndCsvType = (file, fileName) => {
  const reader = new FileReader();
  reader.onload = function (event) {
  const data = new Uint8Array(event.target.result);
  const workbook = XLSX.read(data, {type: 'array', cellDates: true});
  let maxRowCountFromExcel = getMaxRowCountFromExcel(workbook);
  if (maxRowCountFromExcel > _maxRowCount) {
  console.log("excel file has too many blank row..", maxRowCountFromExcel);
  handleBlankRowForExcelWithTooManyBlankRow(workbook);
  }
  const xlsxFile = toXlsxExcelFile(workbook, fileName);
  handleExcelForXlsxType(xlsxFile, fileName);
  };
  reader.readAsArrayBuffer(file);
  }

  const createLuckySheet = (file) => {
  const reader = new FileReader();
  reader.onload = (event => {
  postMessage({
  fileArrayBuffer: event.target.result ,
  fileName: file.name,
  })
  });
  reader.readAsArrayBuffer(file);

  }
  const getMaxRowCountFromExcel = (workbook) => {
  let maxRowCount = 0;
  if (workbook.SheetNames == null || workbook.SheetNames.length === 0) {
  return maxRowCount;
  }
  workbook.SheetNames.forEach(sheetName => {
  const worksheet = workbook.Sheets[sheetName];
  if (worksheet['!ref'] === undefined) {
  return;
  }
  const range = XLSX.utils.decode_range(worksheet['!ref']);
  maxRowCount = maxRowCount + range.e.r;
  });
  return maxRowCount;
  }
  const reduceBlankRow = (row, range, worksheet) => {
  while (row > range.s.r) {
  let allEmpty = true;
  for (let col = range.s.c; col <= range.e.c; col++) {
  const cell_ref = XLSX.utils.encode_cell({c: col, r: row});
  if (worksheet[cell_ref]) {
  allEmpty = false;
  break;
  }
  }
  if (allEmpty) {
  row--;
  } else {
  break;
  }
  }
  range.e.r = row;
  worksheet['!ref'] = XLSX.utils.encode_range(range.s, range.e);
  }
  const handleBlankRowForExcelWithTooManyBlankRow = (workbook) => {
  if (workbook.SheetNames == null || workbook.SheetNames.length === 0) {
  return;
  }
  workbook.SheetNames.forEach(sheetName => {
  const worksheet = workbook.Sheets[sheetName];
  if (worksheet['!ref'] === undefined) {
  return;
  }
  const range = XLSX.utils.decode_range(worksheet['!ref']);
  let row = range.e.r;
  reduceBlankRow(row, range, worksheet);
  });
  }

  const toXlsxExcelFile = (workbook, fileName) => {
  const newWorkbook = XLSX.write(workbook, {bookType: 'xlsx', type: 'binary'});
  const data = new Uint8Array(newWorkbook.length);
  for (let i = 0; i < newWorkbook.length; i++) {
  data[i] = newWorkbook.charCodeAt(i);
  }
  return new File([data], fileName, {type: _xlsxType});
  }


  self.addEventListener('error', function (event) {
  console.log("test....................", event)
  });


</div>
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css'/>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>


<script src="https://cdn.jsdelivr.net/npm/luckyexcel/dist/luckyexcel.umd.js"></script>

<script>


  const createLuckySheet = (exportJson) => {
    console.log(exportJson)
    window.luckysheet.destroy();
    const options = {
      container: 'luckysheet',
      data: exportJson.sheets, // title: exportJson.info.name,
      // userInfo: exportJson.info.name.creator,
      column: 10,
      row: 10,
      showinfobar: false,
      sheetFormulaBar: true,
      showConfigWindowResize: false
    };
    window.luckysheet.create(options);

  }

  const createLuckySheetByFileArrayBuffer = (arrayBuffer, fileName) => {
    const xlsxTtpe = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    const file = new File([arrayBuffer], fileName, {type: xlsxTtpe});
    LuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {
      createLuckySheet(exportJson);
    });
  }

  var blob = new Blob([document.querySelector('#worker').textContent]);
  var url = window.URL.createObjectURL(blob);
  var worker = new Worker(url);
  worker.addEventListener('message', (event) => {
    const data = event.data
    createLuckySheetByFileArrayBuffer(data.fileArrayBuffer, data.fileName)

  })

  document.getElementById('fileUpload').addEventListener('change', function (e) {
    const file = e.target.files[0];

    const reader = new FileReader();
    reader.onload = (event => {
      worker.postMessage({
        data: event.target.result,
        fileName: file.name
      })
    });
    reader.readAsArrayBuffer(file);

  });


</script>

</body>
</html>

效果

参考

https://juejin.cn/post/7211805251216031801
https://segmentfault.com/a/1190000043720845
https://juejin.cn/post/7232524757525659708
https://blog.csdn.net/q2qwert/article/details/130908294
https://www.cnblogs.com/ajaemp/p/12880847.html
https://blog.csdn.net/weixin_40775791/article/details/135409716
https://blog.csdn.net/u013113491/article/details/129106671

相关推荐
bysking20 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓35 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41139 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v40 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry2 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解