关于帮老婆在前端导数据这件小事

一个普通的晚上，普通的我听着普通disco回到普通的家，不普通的老婆让我做一件普通的事情：导数据

因为种种原因，只能在前端通过控制台脚本导数据，而且有这几种类型的数据：

1. 查询列表接口，并导出一个 Excel 表格；

2. 查询列表接口，分别将每一行数据导出一个文本文件；

3. 查询列表接口，基于每一行数据的 ID 查询详情接口，再将详情数据导出为文本文件。

为了晚上不用睡地板，我赶紧抄起键盘一顿操作

 

 

一、接口请求

由于是通过控制台脚本请求，所以只能用原生 JavaScript 编写，也没办法引入 npm 库

好在不用担心兼容性问题，于是 fetch 成为发起请求的首选方案

首先是 GET 请求，比较简单，简单配一下请求头就行：

function GET(url) {
  return fetch(url, {
    method: "GET",
    headers: new Headers({
      'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/x-www-form-urlencoded',
    }),
    credentials: 'include',
  })
    .then(response => response.json())
    .then(json => new Promise((res) => {
      res(json.data)
    })
  )
}

 

POST 请求会稍微复杂一点，需要根据 Content-Type 调整请求体 body

如果 Content-Type 接受 application/json 就还好，直接通过 JSON.stringify 处理即可

而对于 application/x-www-form-urlencoded 类型，通常是通过 qs.stringify  处理

但由于不能使用 npm 仓库，只好手写一个 stringify  函数

function POST(url, data) {
  return fetch(url, {
    method: 'POST',
    headers: new Headers({
      Accept: 'application/json, text/plain, */*',
      'Content-Type': 'application/x-www-form-urlencoded',
    }),
    credentials: 'include',
    body: stringify(data),
  })
    .then((response) => response.json())
    .then(
      (json) =>
        new Promise((res) => {
          res(json.data);
        }),
    );
}

function stringify(data) {
  return Object.keys(data)
    .map((k) => `${k}=${data[k]}`)
    .join('&');
}

 

二、文件导出

和服务端不同，前端应用本身不具备读写文件系统的能力，只能通过特定的页面元素调用浏览器 API 实现

比如读取文件只能通过主动触发 <input type="file"> 实现，写入文件只能通过 <a  href="" download="" /> 触发下载功能

// 通过 <a/> 下载文件，content 可能是一段富文本
function writeFile(fileName, content) {
  const a = document.createElement('a');
  const div = document.createElement('div');
  div.innerHTML = content;
  // 通过 innerText 过滤掉富文本中的 html 标签，得到纯文本
  const text = div.innerText || '';
  const blob = new Blob([text], { type: 'text/plain' });
  a.download = fileName;
  a.href = URL.createObjectURL(blob);
  a.click();
}

在这次的导出需求中，会同时创建多个下载任务。首次触发时，谷歌浏览器会提示“是否允许下载多个文件”，选择“允许”就好

然而即便允许多文件下载，浏览器最多同时创建 10 个下载任务，这个问题可以通过异步创建下载任务的方式解决

// 就是有点费回车键

 

 

三、导出表格

准备就绪，首先处理第一种需求：查询列表接口，并导出一个 Excel 表格

在正常的工作环境下，可以使用 js-xlsx 生成 .xlsx文件。现在一切从简，可以用一个替代方案：制表符 tab

如果我们复制下图这样的表格

然后粘贴到记事本或者任何文本编辑器，会得到这样的结果

反过来，如果我们生成这样的文本，再复制粘贴到 Excel 中，也能得到对应的表格

于是就有了这样的代码：

function exportTable() {
  const HEADER = ['序号', '名称', '描述', '备注'];
  fetchList().then(({ list }) => {
    const temp = [renderRow(HEADER)];
    list.forEach((x) => {
      const row = renderRow([x.key1, x.key2, x.key3, x.key4]);
      temp.push(row);
    });
    writeFile('表格', temp.join('\n'));
  });
}

function fetchList() {
  return get('/api/list');
}

function renderTxt(v) {
  return v || '-';
}

function renderRow(arr) {
  return arr.map((x) => renderTxt(x)).join('    ');
}

四、导出详情

除了导出表格以外，还有两种情况：

1. 查询列表接口，分别将每一行数据导出一个文本文件；

2. 查询列表接口，基于每一行数据的 ID 查询详情接口，再将详情数据导出为文本文件。

这两个情况的处理思路很类似，只是第二种情况需要再请求一次接口

但有个细节需要注意：列表的数据很多，会同时创建多个下载任务，需要通过延时的方式绕开浏览器的下载任务上限

function exportDetail() {
  fetchList().then(({ list }) => {
    list.forEach((item, index) => {
      fetchDetail(item.id).then((detail) => {
        setTimeout(() => {
          // 通过 setTimeout 异步创建下载任务，绕过浏览器的下载上限
          writeFile(item.title, renderContent(detail))
        }, index * 500);
      });
    });
  });
}

function fetchList() {
  return get('/api/list');
}

function fetchDetail(id) {
  return get(`/api/detail/${id}`);
}

// 排版
function renderContent(detail) {
  const { title, desc, content } = detail || {};
  return `<h1>${title}\n</h1><div>${desc}\n</div>${content}`;
}

---

终于避免睡地板的惨剧，收工~