table数据转为excel文件下载

最新推荐文章于 2024-05-16 18:15:52 发布
最新推荐文章于 2024-05-16 18:15:52 发布
阅读量1k 收藏 1
点赞数
分类专栏： web前端 javaScript 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013217071/article/details/127015955
版权

功能说明

本文讲解如何将table数据转为excel文件下载。亲测，当table有合并行/列时，下载的excel也会对应合并。

核心思想：

获取到table元素，根据其html组装为下载excel的文件地址，再下载

核心代码：

handleDownload() {
    // 获取table元素
    const tableElem = ReactHTMLTableToExcel.getTableElem(this.props.table);
    console.log('tableElem', tableElem)
    if(!tableElem) return;

    // 获取excel下载的url和文件名称
    const filename = `${String(this.props.filename)}.xls`;
    const tableHtml = tableElem.outerHTML;
    const url = ReactHTMLTableToExcel.getExcelUri(tableHtml, this.props.sheet);

    // 下载excel文件
    ReactHTMLTableToExcel.downloadExcel(tableHtml, filename, url);
  }

获取table元素

其中，getTableElem函数中的tableElemId参数 可以为 table元素的id ，也可以是 其父元素或其祖父元素的id，便于兼容不方便给table增加id属性时的情况。

static getTableElem(tableElemId){ // table元素的id 或者 其祖父元素的id
    if (!document || !tableElemId) {
      return null;
    }

    let tableElem = document.getElementById(tableElemId);
    
    if(tableElem){ 
      if(tableElem.nodeType !== 1 || tableElem.nodeName !== 'TABLE'){ // 不是元素类型，或者不是table
        tableElem = tableElem.getElementsByTagName('table')[0] || null; //尝试寻找内部table元素
      }
    }
    if(!tableElem){
      tableElem = document.getElementsByTagName('table')[0];
      if(!tableElem){
        console.log('未找到table元素！')
        return null;
      }
    }
    return tableElem;
  }

生成excel文件地址：

static base64(s) {
  return window.btoa(unescape(encodeURIComponent(s)));
}

static format(s, c) {
  return s.replace(/{(\w+)}/g, (m, p) => c[p]);
}

static getExcelUri(table, sheetname){
    const uri = 'data:application/vnd.ms-excel;base64,';
    const template =
      '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-mic' +
      'rosoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta cha' +
      'rset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:Exce' +
      'lWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' +
      '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></' +
      'xml><![endif]--></head><body>{table}</body></html>';

    const context = {
      worksheet: String(sheetname) || 'Worksheet',
      table,
    };
    const url = uri +
      ReactHTMLTableToExcel.base64(
        ReactHTMLTableToExcel.format(template, context),
      );
    return url;
  }

下载excel文件

static downloadExcel(tableHtml, filename, url){
    // If IE11
    if (window.navigator.msSaveOrOpenBlob) {
      const fileData = [
        `${'<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-mic' + 'rosoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta cha' + 'rset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:Exce' + 'lWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' + '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></' + 'xml><![endif]--></head><body>'}${tableHtml}</body></html>`,
      ];
      const blobObject = new Blob(fileData);
      document.getElementById('react-html-table-to-excel').click()(() => {
        window.navigator.msSaveOrOpenBlob(blobObject, filename);
      });
      return true;
    }

    // 下载excel文件
    const element = window.document.createElement('a');
    element.href = url;
    element.download = filename;
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  }

附赠完整代码：

/* global window, document, Blob */
import React, { Component } from 'react';
import PropTypes from 'prop-types';

const propTypes = {
  table: PropTypes.string.isRequired,
  filename: PropTypes.string.isRequired,
  sheet: PropTypes.string.isRequired,
  id: PropTypes.string,
  className: PropTypes.string,
  buttonText: PropTypes.string,
};

const defaultProps = {
  id: 'button-download-as-xls',
  className: 'button-download',
  buttonText: 'Download',
};

class ReactHTMLTableToExcel extends Component {
  constructor(props) {
    super(props);
    this.handleDownload = this.handleDownload.bind(this);
  }

  static base64(s) {
    return window.btoa(unescape(encodeURIComponent(s)));
  }

  static format(s, c) {
    return s.replace(/{(\w+)}/g, (m, p) => c[p]);
  }
  
  static getTableElem(tableElemId){ // table元素的id 或者 其祖父元素的id
    if (!document || !tableElemId) {
      return null;
    }

    let tableElem = document.getElementById(tableElemId);
    
    if(tableElem){ 
      if(tableElem.nodeType !== 1 || tableElem.nodeName !== 'TABLE'){ // 不是元素类型，或者不是table
        tableElem = tableElem.getElementsByTagName('table')[0] || null; //尝试寻找内部table元素
      }
    }
    if(!tableElem){
      tableElem = document.getElementsByTagName('table')[0];
      if(!tableElem){
        console.log('未找到table元素！')
        return null;
      }
    }
    return tableElem;
  }

  static getExcelUri(table, sheetname){
    const uri = 'data:application/vnd.ms-excel;base64,';
    const template =
      '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-mic' +
      'rosoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta cha' +
      'rset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:Exce' +
      'lWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' +
      '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></' +
      'xml><![endif]--></head><body>{table}</body></html>';

    const context = {
      worksheet: String(sheetname) || 'Worksheet',
      table,
    };
    const url = uri +
    ReactHTMLTableToExcel.base64(
      ReactHTMLTableToExcel.format(template, context),
    );
    return url;
  }

  static downloadExcel(tableHtml, filename, url){
    // If IE11
    if (window.navigator.msSaveOrOpenBlob) {
      const fileData = [
        `${'<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-mic' + 'rosoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta cha' + 'rset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:Exce' + 'lWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' + '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></' + 'xml><![endif]--></head><body>'}${tableHtml}</body></html>`,
      ];
      const blobObject = new Blob(fileData);
      document.getElementById('react-html-table-to-excel').click()(() => {
        window.navigator.msSaveOrOpenBlob(blobObject, filename);
      });
      return true;
    }

    // 下载excel文件
    const element = window.document.createElement('a');
    element.href = url;
    element.download = filename;
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  }

  handleDownload() {
    // 获取table元素
    const tableElem = ReactHTMLTableToExcel.getTableElem(this.props.table);
    console.log('tableElem', tableElem)
    if(!tableElem) return;

    // 获取excel下载的url和文件名称
    const filename = `${String(this.props.filename)}.xls`;
    const tableHtml = tableElem.outerHTML;
    const url = ReactHTMLTableToExcel.getExcelUri(tableHtml, this.props.sheet);

    // 下载excel文件
    ReactHTMLTableToExcel.downloadExcel(tableHtml, filename, url);
  }

  render() {
    return (
      <button
        id={this.props.id}
        className={this.props.className}
        type="button"
        onClick={this.handleDownload}
      >
        {this.props.buttonText}
      </button>
    );
  }
}

ReactHTMLTableToExcel.propTypes = propTypes;
ReactHTMLTableToExcel.defaultProps = defaultProps;

export default ReactHTMLTableToExcel;

使用：

兼容不方便给table增加id属性时的情况：

<div id="table-to-xls">
      <ReactHTMLTableToExcel
          id="test-table-xls-button"
          className="download-table-xls-button"
          table="table-to-xls"
          filename="tablexls"
          sheet="tablexls"
          buttonText="Download as XLS"/>
      <Mytable>//封装好的table，table上没有透传id</Mytable>
  </div>

直接在table上增加id的情况：

<div>
                <ReactHTMLTableToExcel
                    id="test-table-xls-button"
                    className="download-table-xls-button"
                    table="table-to-xls"
                    filename="tablexls"
                    sheet="tablexls"
                    buttonText="Download as XLS"/>
                <table id="table-to-xls">
                    <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Age</th>
                    </tr>
                    <tr>
                        <td>Jill</td>
                        <td>Smith</td>
                        <td>50</td>
                    </tr>
                    <tr>
                        <td>Eve</td>
                        <td>Jackson</td>
                        <td>94</td>
                    </tr>
                </table>
            </div>

参考代码

ReactHTMLTableToExcel：https://www.npmjs.com/package/react-html-table-to-excel

本文在这个基础上，进行了代码抽离和获取table元素功能增强（兼容不方便给table增加id属性时的情况）。目的不是重复造轮子，是能够满足尽量多的业务场景。

秋天1014童话
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前台js将table转为Excel表格下载
06-06
资源内有js,将它引用到项目中,在用资源内的方法,将固定格式的table表格转为Excel下载
前台js将table转为Excel表格下载.rar
02-18
综上所述，"前台js将table转为Excel表格下载.rar"中的实现涉及到前端JavaScript技术，包括DOM操作、CSV格式转换、Blob对象以及创建下载链接等步骤，这些知识点对于开发具有数据导出功能的Web应用至关重要。
将页面任意table内容导出为Excel
YY222222ZZ的博客
04-27 912
主要思路是获取table中行与列封装为二维数组,传入后端解析后保存为Excel。后端就比较简单了,根据前端传来的数组,一行一行的创建单元格。下面是工具类,内容主要都在循环中。
Web前端最全html table 如何导出为excel表格案例分享_html table导出为excel，面试加分项 徐强百度云
最新发布
2401_84435739的博客
05-16 909
1）页面添加一个动作按钮。">导出});//导出html表格为 excel 文件### js基础1)对js的理解？2)请说出以下代码输出的值？3)把以下代码，改写成依次输出0-94)如何区分数组对象，普通对象，函数对象5)面向对象、面向过程6)面向对象的三大基本特性7)XML和JSON的区别？8)Web Worker 和webSocket？9)Javascript垃圾回收方法？10)new操作符具体干了什么呢？11)js延迟加载的方式有哪些？
html中的table元素数据下载导出成表格，使用jquery插件 jquery.table2excel.js
shrimper
07-19 1476
需要把网页上类似如下的数据导出到本地。 jquery.table2excel.js （我真搞不懂像这种开源的东西还有人放在CSDN上当作资源让人用积分/C币去下载） 点进src文件下载里面的文件到本地即可，也可以去看看demo里的语法案例，看看怎么使用。 可以看这个 实际解决： table标签 js文件(对了，导入一下jquery.js) 点击导出表格按钮，成功下载到了文件 这种方法很奇怪，比如导出的表格用excel打开会提示表格损坏扩展名不一致之类的。 目前知识还比较薄弱。先解决问题。或者有大佬有更好方
html table 如何导出为excel表格案例分享
跟着飞哥学编程（全栈联盟）
09-08 5889
html table 如何导出为excel表格案例分享
jquery把页面＜table＞里的内容导出为后缀名为.xlsx的excel
weixin_42032770的博客
11-18 3017
无论是sheetJS还是tableExport.js，导出成.xlsx后缀的excel文件都是不支持带边框线的，这个我查了文档没有找到相应的导出xlsx带边框线的demo，并且网上搜出来的凡是导出可以带边框线的excel都是导出为.xls后缀名的。这个如果有谁知道如何在前端把html导出成.xlsx后缀名的excel且可以设置边框线的，希望能够也告诉我一下。.csv、.xls、.xlsx的区别这三种后缀名是目前网页端导出excel的主流后缀名。
Blob()对象的使用--下载跨域图片与导出excel表格
【有梦想的菜】的博客
07-01 3021
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。
Python导入数值型Excel数据并生成矩阵操作
09-16
在Python编程中，经常需要处理各种数据，其中Excel文件是一种常见的数据存储格式。特别是对于数值型数据，Python提供了多种库来方便我们导入和操作。在本文中，我们将深入探讨如何使用Python导入数值型Excel数据并...
jQuery表格导出转为excel表格插件.zip
11-06
总的来说，这个"jQuery表格导出转为excel表格插件.zip"资源提供了将基于jQuery的表格数据转换成Excel文件的功能，这在数据处理场景中具有很高的实用价值。开发者通过学习和应用这个插件，可以提升网页应用的数据导出...
纯前端下载table为excel至本地
sakura的博客
12-30 1686
纯前端下载table为excel至本地
table转Excel，可导出图片，亲测有效
12-17
javascript代码可以将HTML的table表格转换成excel表格。var table = document.getElementById("table")[removed]; export2Excel(table, '导出.xls');
js前端导出table到excel
03-07
这是一个前端通过js导出页面的table生成并下载excel的demo
xlsx.js 实现前端 table 数据导出并下载为 excel
热门推荐
一条菜鸟鱼的博客
04-13 1万+
xlsx.js 实现前端 table 数据导出并下载为 excel
web应用将＜table＞标签的内容导出成excel
11-03 883
web应用将<table>标签的内容导出成excel 前言 我们做web应用软件时，时常有导出excel表格的需求，多数情况下，用后台Java或者C#去导出会比较麻烦，今天教大家一个相对比较简单的方法，利用前端JS的几句简单的代码即可导出，前提是你要导出的内容必须是<table>标签里的。 案例 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
c html table转Excel,将html table 转成 excel
weixin_35825868的博客
06-11 155
package com.sun.office.excel;/*** 跨行元素元数据**/public class CrossRangeCellMeta {public CrossRangeCellMeta(int firstRowIndex, int firstColIndex, int rowSpan, int colSpan) {super();this.firstRowIndex = fir...
table表格转Excel
weixin_50655808的博客
06-21 386
我定义的js文件为table.js 下面的html中引入 $(document).ready(function () { var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }; var format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }); };
excel转html table 处理方法
peade的博客
09-16 4407
最近在写页面，文档里给的是excel表格的数据，要将excel表格里的数据放到页面里。 这里涉及到了一个excel转table的处理问题。 我首先想到的是去npm库里找一下有没有相应的库，搜了一圈，没搜到相关的，搜到的东西，都是table转excel的库。 由于时间有限，没有时间自己去搞一个npm包来解决。 于是，我用了下面这个方法： 1、将excel文件，另存为html文件 2、在浏...
python如何将.blf文件转为excel
09-03
最后，使用pandas库中的to_excel函数将处理后的数据保存为Excel文件。 示例代码如下： # 将数据保存为Excel文件 data.to_excel('output.xlsx', index=False) 这样就可以将.blf文件转换为Excel文件了。请注意，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值