时间戳

首页 > 解决方案 > 使用 SheetJS 获取 excel 列标题

javascript - 使用 SheetJS 获取 excel 列标题

问题描述

我目前正在创建一个 Web 应用程序，允许用户将 excel 文件上传到数据库中，但在用户上传文件之前，我想让他们检查 excel 文件的标题是否与数据库上的预设匹配。下面的代码允许我在 excel 文件中显示所有内容：

$('#inputfile').change(function(e){
                var reader = new FileReader();
                reader.readAsArrayBuffer(e.target.files[0]);
                reader.onload = function(e) {
                        var data = new Uint8Array(reader.result);
                        var wb = XLSX.read(data,{type:'array'});
                        var htmlstr = XLSX.write(wb,{sheet:"Sheet1", type:'binary',bookType:'html'});
                        $('#printHere')[0].innerHTML += htmlstr;
                }
});

我只想将excel文件的标题存储在一个数组中并显示它。我是 Javascript 的新手，所以任何帮助都将不胜感激。

标签： javascriptexcelsheetjs

解决方案

您可以执行以下操作：

  const header = []
  const columnCount = XLSX.utils.decode_range(ws['!ref']).e.c + 1
  for (let i = 0; i < columnCount; ++i) {
    header[i] = ws[`${XLSX.utils.encode_col(i)}1`].v
  }

这是整个示例：

function extractHeader(ws) {
  const header = []
  const columnCount = XLSX.utils.decode_range(ws['!ref']).e.c + 1
  for (let i = 0; i < columnCount; ++i) {
    header[i] = ws[`${XLSX.utils.encode_col(i)}1`].v
  }
  return header
}

function handleFile() {
  const input = document.getElementById("file")
  const file = input.files[0]
  
  if (file.type !== 'application/vnd.ms-excel') {
    renderError()
  }
  
  const reader = new FileReader()
  const rABS = !!reader.readAsBinaryString
  reader.onload = e => {
    /* Parse data */
    const bstr = e.target.result

    const wb = XLSX.read(bstr, { type: rABS ? 'binary' : 'array' })
    /* Get first worksheet */
    const wsname = wb.SheetNames[0]
    const ws = wb.Sheets[wsname]

    const header = extractHeader(ws)
    renderTable(header)
  }
  
  if (rABS) reader.readAsBinaryString(file)
    else reader.readAsArrayBuffer(file)
}

function renderTable(header) {
  const table = document.createElement('table')
  const tr = document.createElement('tr')
  for (let i in header) {
    const td = document.createElement('td')
    const txt = document.createTextNode(header[i])
    td.appendChild(txt)
    tr.appendChild(td)
  }
  
  table.appendChild(tr)
  
  document.getElementById('result').appendChild(table)
}

function renderError() {
  const errorMsg = 'Unexpected file type'
  const error = document.createElement('p')
  error.setAttribute('class', 'error')
  const txt = document.createTextNode(errorMsg)
  error.appendChild(txt)
  document.getElementById('result').appendChild(error)
  throw new Error(errorMsg)
}
#result table tr td {
  border: 2px solid grey;
}

#result .error {
  color: red;
}
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

<input type="file" onchange="handleFile()" id='file' accept=".csv"/>
<div id="result"><div>

推荐阅读