网页预览Excel表格excel-viewer xspreadsheet.js在线打开xlsx文件Demo

网页预览Excel表格excel-viewer + xspreadsheet.js在线打开xlsx文件Demo

https://github.com/SuperYesifang/excel-viewer
https://www.npmjs.com/package/excel-viewer
已知问题，表格背景色、文字颜色会丢失。以此来看，并不算是一个稳定的、企业级的方案。
  • 浏览器预览excel表格的Demo
  • js解析excel表格并在线预览例子 / office表格在线预览 在线测试
  • xlsx在线预览 网页上直接打开
  • excel-viewer.js Demo online
  • excel-viewer.js 支持excel的多工作表 多tab展示，开源免费能做到如此，也算是不错了
demo 完整的源代码
可以导入 excel 文件测试

demo 源码下载

<div id="excel-view" style="height: 50vh;"></div>

<script src="https://cdn.jsdelivr.net/npm/promisify-file-reader@4.1.0/dist/index.min.js"></script>

<script>
  file1.onchange = onGetFile

  function onGetFile(event) {
    let file = event.target.files[0]
    // let firstSheet = 0
    // let rows = await getSheetByindex(file, firstSheet) // [['姓名', '手机']]

    PromisifyFileReader.readAsArrayBuffer(file).then(function (arrayBuffer) {
      new ExcelViewer("#excel-view", arrayBuffer, { themeBtn: false });
    })
  }
</script>

<link rel="stylesheet" href="https://unpkg.com/excel-viewer@1.0.1/dist/excel/xspreadsheet.css">
<script src="https://unpkg.com/excel-viewer@1.0.1/dist/excel/xspreadsheet.js"></script>
<script src="https://unpkg.com/excel-viewer@1.0.1/dist/excel/xlsx.full.min.js"></script>
<script src="https://unpkg.com/excel-viewer@1.0.1/dist/excel-viewer.js"></script>

<script>
  fetch('https://cdn.jsdelivr.net/gh/SheetJS/test_files@b07031a7bd5a8b86b9baac94267f20cf81c6d5eb/AutoFilter.xlsx.xls.0.csv')
  // fetch('https://github.com/exceljs/exceljs/blob/master/test/data/comments.xlsx')
  // fetch('https://cdn.jsdelivr.net/gh/exceljs/exceljs@master/test/data/comments.xlsx')
  .then(function (res) {
    return res.blob()
  })
  .then(function (file) {
    var mockEvent = { target: { files: [file] } }
    onGetFile(mockEvent)
  }).catch(function(error) {
    var mockEvent = { target: { files: [new Blob([''])] } }
    onGetFile(mockEvent)
  })
</script>