js 导入导出Excel

小鱼儿_44937771

已于 2022-07-18 10:19:16 修改

阅读量2.8k

点赞数 1

文章标签：前端 javascript

于 2022-07-18 09:39:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44937771/article/details/125840912

版权

这篇博客介绍了如何使用JavaScript库XLSX进行Excel文件的读取和导出。通过readWorkbookFromLocalFile函数，可以读取本地Excel文件并转换为JSON数据。另一方面，exportExcel函数则将JSON数据转换回Excel格式并提供下载。整个过程涉及到Blob对象的创建和下载对话框的触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导入Excel

function readWorkbookFromLocalFile(file) {
	var reader = new FileReader();
	reader.readAsBinaryString(file);
	reader.onload = function (e) {
		var data = e.target.result;
		var workbook = XLSX.read(data, { type: 'binary' });
		
        // 获取工作表名称集合
		var sheetName = workook.SheetNames[0];
		var worksheet = workook.Sheets[sheetName];
		var csv = XLSX.utils.sheet_to_json(worksheet);
        console.taole(csv)
	};
}

导出为Excel
//需引入文件 xlsx.full.min.js xlsx.core.min.js

//点击导出按钮导出数据

  $('#export').on('click', function(){

    var sheet = XLSX.utils.json_to_sheet(data); // data为需要导出的表格数据

    exportExcel(sheet);

  });

function exportExcel(sheet) {

    var blob = sheet2blob(sheet);

    openDownloadDialog(blob, '表格名称.xlsx');

  }

将一个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;

  }

 /**

   * 通用的打开下载对话框方法，没有测试过具体兼容性

   * @param url 下载地址，也可以是一个blob对象，必选

   * @param saveName 保存文件名，可选

   */

  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);

  }