js 表格、json导出excel，导入excel

haogemr

已于 2022-09-16 10:24:46 修改

阅读量1.5k

点赞数

分类专栏：前端转载文章标签： javascript json safari

于 2019-05-23 19:59:54 首次发布

原文链接：https://blog.csdn.net/qq_31634167/article/details/83056744

版权

前端同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

转载

19 篇文章 0 订阅

订阅专栏

表格导出excel

如果在主流浏览器上，不考虑ie，可以这么写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <table border="1" cellspacing=" 0" id="tableExcel" width="100%" class="table table-hover">
        <tr>
            <td colspan="5" align="center">html 表格导出Excel</td>
        </tr>
        <tr>
            <td>列标题1</td>
            <td>列标题2</td>
            <td>类标题3</td>
            <td>列标题4</td>
            <td>列标题5</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td>ddd</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
            <td>DDD</td>
            <td>EEE</td>
        </tr>
        <tr>
            <td>FFF</td>
            <td>GGG</td>
            <td>HHH</td>
            <td>III</td>
            <td>JJJ</td>
        </tr>
    </table>
    <a id="dlink" style="display:none;"></a>
    <input type="text" name="" value="请输入文件名" class="center-block form-control"
        style="margin-bottom: 20px; text-align: center" id="submit" onclick="submt()">
    <input type="button" class="btn btn-primary center-block"
        onclick="tableToExcel('tablename', 'name', 'zhangsan.xls')" value="导出">
</body>
<script>
    function submt() {
        document.getElementById('submit').value = "";
    }

    var tableToExcel = (function () {
        var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
        return function (table, name) {
            if (!table.nodeType) table = document.getElementById("tableExcel")
            var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
            document.getElementById("dlink").href = uri + base64(format(template, ctx));
            document.getElementById("dlink").download = document.getElementById('submit').value + '.xls';
            document.getElementById("dlink").click();
        }
    })();
</script>

</html>

如果要兼容ie浏览器

var idTmr;
function getExplorer() {
    var explorer = window.navigator.userAgent;
    //ie
    if (explorer.indexOf("MSIE") >= 0) {
        return 'ie';
    }
    //firefox
    else if (explorer.indexOf("Firefox") >= 0) {
        return 'Firefox';
    }
    //Chrome
    else if (explorer.indexOf("Chrome") >= 0) {
        return 'Chrome';
    }
    //Opera
    else if (explorer.indexOf("Opera") >= 0) {
        return 'Opera';
    }
    //Safari
    else if (explorer.indexOf("Safari") >= 0) {
        return 'Safari';
    }
}
function method5(tableid) {
    if (getExplorer() == 'ie') {
        var curTbl = document.getElementById(tableid);
        var oXL = new ActiveXObject("Excel.Application");
        var oWB = oXL.Workbooks.Add();
        var xlsheet = oWB.Worksheets(1);
        var sel = document.body.createTextRange();
        sel.moveToElementText(curTbl);
        sel.select();
        sel.execCommand("Copy");
        xlsheet.Paste();
        oXL.Visible = true;

        try {
            var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
        } catch (e) {
            print("Nested catch caught " + e);
        } finally {
            oWB.SaveAs(fname);
            oWB.Close(savechanges = false);
            oXL.Quit();
            oXL = null;
            idTmr = window.setInterval("Cleanup();", 1);
        }

    }
    else {
        tableToExcel(tableid)
    }
}
function Cleanup() {
    window.clearInterval(idTmr);
    CollectGarbage();
}
var tableToExcel = (function () {
    var uri = 'data:application/vnd.ms-excel;base64,',
        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>' ,
        base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
        format = function (s, c) {
            return s.replace(/{(\w+)}/g,
                function (m, p) { return c[p]; })
        }
    return function (table, name) {
        if (!table.nodeType) table = document.getElementById(table);
        var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML };
        window.location.href = uri + base64(format(template, ctx));
    }
})();
method5(table);  //table是表格的id

json数据导出excel

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
</body>
<script>
    function tableToExcel() {
        //要导出的json数据
        const jsonData = [
            {
                name: '张先生',
                phone: '123456789',
                email: '000@123456.com'
            },
            {
                name: '王先生',
                phone: '123456789',
                email: '000@123456.com'
            },
            {
                name: '李先生',
                phone: '123456789',
                email: '000@123456.com'
            },
            {
                name: '赵先生',
                phone: '123456789',
                email: '000@123456.com'
            },
        ]
        //列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let str = `姓名,电话,邮箱\n`;
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (let i = 0; i < jsonData.length; i++) {
            for (let item in jsonData[i]) {
                str += `${jsonData[i][item] + '\t'},`;
            }
            str += '\n';
        }
        //encodeURIComponent解决中文乱码
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        let link = document.createElement("a");
        link.href = uri;
        link.innerHTML = 'json数据表.csv下载';
        //对下载的文件命名
        link.download = "json数据表.csv";
        document.body.appendChild(link);
    }
    tableToExcel();
</script>

</html>

json导出excel，excel导入成json （使用插件XLSX）（终极版本）（兼容ie）

首先下载 xlsx， npm install xlsx -S
在 vue中可以 import * as XLSX from "xlsx"
以下代码用原生js演示
参考文章：如何使用JavaScript实现纯前端读取和导出excel文件
 xlsx.js 表格的导出与导入
 Element-UI配合xlsx提取Excel中的数据
官方文档：https://docs.sheetjs.com/docs/api/parse-options

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>导入导出excel</title>
</head>

<body>
  <button id="downFile">导出excel</button>
  <label>
    <button id="importFile">导入excel</button>
    <input id="input" type="file" accept=".xls,.xlsx,.csv" style="display: none">
  </label>
</body>
<script src="../xlsx.js"></script>
<script>
  const importFile = document.getElementById('importFile');
  const input = document.getElementById('input');
  const downFile = document.getElementById('downFile');
  //由于label标签不生效，点击导入按钮代码触发上传文件
  importFile.onclick = function () {
    input.click();
  };
  //导入
  input.onchange = function (e) {
    let file = e.target.files[0];
    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file, 'utf-8');
    fileReader.onload = function (event) {
      //导入成功把上传文件的缓存清除，防止同名文件不能再次上传
      e.target.value = '';

      let data = event.target.result;
      //把数据转成csv
      let workbook = XLSX.read(data, { type: 'buffer' });
      let wsname = workbook.SheetNames[0];
      let ws = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]);
      console.log(ws);
      //把数据转成json
      // { raw: true } 纯文本解析不会解析值，防止（0丢失，时间格式被转换）
      workbook = XLSX.read(ws, { type: "binary", raw: true });
      wsname = workbook.SheetNames[0];
      //defval 使用指定值代替null或undefined
      /*header 传入数组代表使用指定字段名代替表头名，传入空代表去掉标题一行，
        传入数字1代表转出数组，传入字符串A代表key从A开始依次往后排*/
      ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname], {
        defval: "----",
        // header: ['name', 'date', 'sex', 'code'],
      });
      console.log(ws);
    }
  }

  //导出
  downFile.onclick = function () {
    //数据里数字要写成字符串形式，如果是数字类型，前边的0会在转成excel被丢失
    const data = [{
      '姓名': '张三',
      '编号': '00000300000',
      '性别': '男',
      '生日': '2022-02-02 12:12:12'
    }, {
      '姓名': '李四',
      '编号': '020',
      '性别': '男',
      '生日': '2011-01-01 11:11:11'
    }, {
      '姓名': '王五',
      '编号': '0101010',
      '性别': '女',
      '生日': '2022-09-14 10:10:10'
    }];
    //自定义导出顺序，默认是对象里的顺序
    let header = ['姓名', '生日', '性别', '编号'];
    // 新建空workbook，然后加入worksheet
    const ws = XLSX.utils.json_to_sheet(data, { header: header });
    console.log(ws);
    // 设置每列的列宽，10代表10个字符，注意中文占2个字符
    ws['!cols'] = [
      { wch: 10 },
      { wch: 30 },
      { wch: 8 },
      { wch: 20 }
    ];
    // 设置A1-B1的单元格合并
    // ws['!merges'] = [
    //   {
    //     s: { //开始
    //       r: 0, //开始行
    //       c: 0, //开始列
    //     },
    //     e: { //结束
    //       r: 0, //结束行
    //       c: 1, //结束列
    //     }
    //   }
    // ];
    // 新建book
    const wb = XLSX.utils.book_new();
    // 生成xlsx文件(book,sheet数据,sheet命名)
    XLSX.utils.book_append_sheet(wb, ws, '数据详情');
    // 写文件(book,xlsx文件名称)
    XLSX.writeFile(wb, '列表详情.xlsx');
  };

</script>

</html>

haogemr

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 表格、json导出excel，导入excel

表格导出excelJSON数据导出excel表格导出excel如果在主流浏览器上，不考虑ie，可以这么写var tableToExcel = (function () { var uri = 'data:application/vnd.ms-excel;base64,', template = '<html><head><meta ch...
复制链接

扫一扫