浏览器端js主导的导出动态数据

/**
 * 下载大文件
 * 文档： https://github.com/jimmywarting/StreamSaver.js
 * */
import streamSaver from 'streamsaver'

const encode = TextEncoder.prototype.encode.bind(new TextEncoder())

/**
 * 注意，该方法可能会延迟七八秒后才调起浏览器的下载弹窗，所以用的时候记得做些loading提示
 *
 * @param fileName
 * @param getData 该函数返回字符串，则会在之前返回的字符串最后加上这字符串。支持 \n 换行符。返回null或抛出错误时，才会完成下载。
 * @param opt
 * @param opt.onComplete 当下载完成后会执行，如果 getData 抛出错误，会把错误从这里返回。如果是用户手动取消， error === 'USER_CANCEL'。如果是下载成功，error===undefined
 * @return 返回的对象里有些功能，有用的是 .abort() 函数，可以主动取消下载，用户下到一半的文件直接没了
 * */
export default (
  fileName: string,
  getData: () => Promise<string | null>,
  opt?: {
    onComplete?: (error?: any | 'USER_CANCEL') => void
    addBOM?: boolean
  },
) => {
  const fileStream = streamSaver.createWriteStream(fileName)
  const writer = fileStream.getWriter()
  if (opt?.addBOM !== false) {
    // 文本文件如果没有 BOM 头，用微软的软件打开有时候会乱码，通常这个方法是用来下载csv的，所以加上比较好
    writer.write(encode('\uFEFF')).then()
  }
  go(writer, getData, opt?.onComplete).then()
  return writer
}

async function go(
  writer: WritableStreamDefaultWriter,
  getData: () => Promise<string | null>,
  onComplete?: (error?: any | 'USER_CANCEL') => void
) {
  let data = null
  let getError

  try {
    data = await getData()
  } catch (e) {
    getError = e
    console.error('[downloadLargeFile error]', e)
  }

  if (data === null) {
    await writer.close()
    onComplete?.(getError)
    return
  }

  let hadResolve = false

  if (onComplete) {
    // 延时检查能否写入成功，不知道延时够不够
    setTimeout(() => {
      if (!hadResolve) {
        writer.abort().then()
        onComplete?.('USER_CANCEL')
      }
    }, 2000)
  }

  await writer.write(encode(data))
  // 如果用户取消下载，上一行不会 resolve，所以下面就不会执行了

  hadResolve = true
  go(writer, getData, onComplete).then()
}

const wait = (msec: number) => new Promise((resolve) => setTimeout(resolve, msec))

let i = 0
downloadLargeFile(
  `下载测试.txt`,
  async () => {
    // 这个函数内部可以做任何异步操作
    if (i >= 20) {
      return null
    }
    i += 1
    await wait(1000)
    console.log(111, i)
    return `${i.toString()}\n`
  },
  {
    onComplete: (error) => {
      console.log('完成', error)
    },
  },
)