uniapp导出表格

你们用uniapp需要前端导出表格都是直接买插件吗,简单的就想把我得到的数组数据导出来而已

在Uniapp中,如果你需要导出表格,可以使用类似于html-table-to-excel、xlsx-populate等第三方库来实现。这些库都是免费的,而且使用起来非常简单。下面以 html-table-to-excel 为例,介绍如何将数据数组导出为excel表格:

  1. 安装 html-table-to-excel 库
    npm install --save html-table-to-excel
    
  2. 在代码中导入并使用库
import HtmlTableToExcel from 'html-table-to-excel';

// 定义一个用于导出表格的方法
export function exportExcel(data, fileName) {
  const table = document.createElement('table');
  // 创建表格头部
  const thead = table.createTHead();
  const trHead = thead.insertRow(0);
  for (const key in data[0]) {
    const th = document.createElement('th');
    const text = document.createTextNode(key);
    th.appendChild(text);
    trHead.appendChild(th);
  }
  // 创建表格主体内容
  const tbody = table.createTBody();
  data.forEach((item) => {
    const tr = tbody.insertRow(0);
    for (const key in item) {
      const td = tr.insertCell(0);
      const text = document.createTextNode(item[key]);
      td.appendChild(text);
    }
  });
  // 导出表格到excel文件
  HtmlTableToExcel(table.outerHTML, fileName);
}


  1. 调用 exportExcel 方法
exportExcel([
  {name: '张三', age: 20, sex: '男'},
  {name: '李四', age: 22, sex: '女'},
], '学生信息.xlsx');


以上就是一个简单的将数据数组导出为excel表格的示例代码。需要注意的是,HtmlTableToExcel 方法会将传入的 table 标签的 outerHTML 属性作为参数,并通过浏览器下载文件的方式进行文件导出。因此,在使用该方法时需要确保已经在浏览器环境中运行,而不是在Node.js环境中。