JS实现前端本地Excel表格上传到网页显示并实现反向导出（解决乱码问题）

最新推荐文章于 2021-05-28 19:18:09 发布

wingchiehpih

最新推荐文章于 2021-05-28 19:18:09 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/wingchiehpih/article/details/108292517

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

演示效果
在这里插入图片描述
使用到的第三方库：
导入：xlsx.full.min.js 链接: xlsx.full.min.js.
导出：export.js

	// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
  sheetName = sheetName || 'sheet1';
  var workbook = {
    SheetNames: [sheetName],
    Sheets: {},
  };
  workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

  var wopts = {
    bookType: 'xlsx', // 要生成的文件类型
    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    type: 'binary',
  };
  var wbout = XLSX.write(workbook, wopts);
  var blob = new Blob([s2ab(wbout)], {
    type: 'application/octet-stream',
  }); // 字符串转ArrayBuffer
  function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
  return blob;
}

function openDownloadDialog(url, saveName) {
  if (typeof url == 'object' && url instanceof Blob) {
    url = URL.createObjectURL(url); // 创建blob地址
  }
  var aLink = document.createElement('a');
  aLink.href = url;
  aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
  var event;
  if (window.MouseEvent) event = new MouseEvent('click');
  else {
    event = document.createEvent('MouseEvents');
    event.initMouseEvent(
      'click',
      true,
      false,
      window,
      0,
      0,
      0,
      0,
      0,
      false,
      false,
      false,
      false,
      0,
      null
    );
  }
  aLink.dispatchEvent(event);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>上传文件</title>
  </head>

  <body>
    <input type="file" id="file" />
    <div class="title">文件名称</div>
    <div class="content">文件内容</div>
    <table class="table"></table>
    <button class="export">导出文件</button>
    <script src="./xlsx.full.min.js"></script>
    <script src="./export.js"></script>
    <script>
    //导入操作
      //首先监听input框的变动，选中一个新的文件会触发change事件
      document.querySelector('#file').addEventListener('change', () => {
        //获取到选中的文件
        var file = document.querySelector('#file').files[0];
        let title = document.querySelector('.title');
        let title_name = document.createElement('span');
        title_name.innerHTML = `${file.name}`;
        title.append(title_name);
        var type = file.name.split('.');
        if (
          type[type.length - 1] !== 'xlsx' &&
          type[type.length - 1] !== 'xls'
        ) {
          alert('只能选择excel文件导入');
          return false;
        }
        const reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = (e) => {
          const data = e.target.result;
          const zzexcel = window.XLS.read(data, {
            type: 'binary',
          });
          const result = [];
          for (let i = 0; i < zzexcel.SheetNames.length; i++) {
            const newData = window.XLS.utils.sheet_to_json(
              zzexcel.Sheets[zzexcel.SheetNames[i]]
            );
            result.push(...newData);
          }
          const result_title = [];
          for (let key in result[0]) {
            result_title.push(key);
          }
          let table = document.querySelector('.table');
          let title_tr = document.createElement('tr');
          // 表头处理
          result_title.forEach((item, index) => {
            let title_th = document.createElement('th');
            title_th.innerHTML = `${item}`;
            title_tr.appendChild(title_th);
          });
          table.append(title_tr);
          // 内容处理
          result.forEach((item, index) => {
            let content_tr = document.createElement('tr');
            for (let key in item) {
              let content_td = document.createElement('td');
              content_td.innerHTML = `${item[key]}`;
              content_tr.appendChild(content_td);
            }
            table.append(content_tr);
          });
        };
      });
      //导出操作
      document.querySelector('.export').addEventListener('click', () => {
        var table = document.querySelector('.table');
        var sheet = XLSX.utils.table_to_sheet(table); //将一个table对象转换成一个sheet对象
        openDownloadDialog(sheet2blob(sheet), '下载.xlsx');
      });
    </script>
  </body>
</html>

wingchiehpih

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
JS实现前端本地Excel表格上传到网页显示并实现反向导出（解决乱码问题）

演示效果使用到的第三方库：导入：xlsx.full.min.js导出：export.js<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxim
复制链接

扫一扫