后台项目中的导出表格

简单记录下，方便下次cv。

制作好后台页面，然后右上角有一个导出的功能，对照了接口文档去做了一个方法，调了接口了，结果并没有什么效果出现。然后我就问我二哥了，他就拿回去操作了。之后我知道了导出的意思就是，页面的内容以图表excel的格式输出文件。

一开始的时候，导出一直成功的，接口文档内部只有一个参数，state在正常的调数据之后页面无显示，下一步就是寻找原因不过最后页面中的导出其实没有变化，还是这样的。


// 導出
  const exportExcel = useCallback(() => {
    toExport(state)
  }, [form])

此为修改之后页面内的那个调数据方法，长这样

export const toExport = async (state: number) => {
  const { data } = await Http.file(
    stringifyUrl({
      url: apis.notice.toExport,
      query: { state }
    })
  )
  exportFile(data, '公告发布记录')
}

数据交互文件里面的toExport更改为这样

扫描二维码关注公众号，回复： 14818571 查看本文章

这里有一个exportFile的函数
其地址是在config里面的工具util.ts里面

文件具体如下

import dayjs from 'dayjs'

// 导出文件（默认excel）
export const exportFile = (
  data: any,
  fileName = '',
  type = 'application/vnd.ms-excel',
  suffix = 'xlsx'
) => {
  const blob: any = new Blob([data], {
    type
  })
  const fileLink = document.createElement('a')
  fileLink.href = URL.createObjectURL(blob)
  fileLink.download = `${fileName}_${dayjs().format('YYYY年MM月DD日HH时mm分ss秒')}.${suffix}`
  fileLink.click()
  URL.revokeObjectURL(blob)
}

在查阅网上资料得知
本项目的这种方法其实是分为5步执行的

1.从后台API获取二进制流文件地址，进行处理；

2.配置前端请求方式，以 blob的方式请求获取文件流；

3.通过 URL.createObjectURL() 静态方法创建一个 DOMString ；

4.动态创建用于文件下载的 a 标签，并赋值 herf 和 download 属性，并触发该标签的点击事件；

5.通过 URL.revokeObjectURL() 静态方法来释放之前通过 URL.createObjectURL() 创建的 URL 对象。

大概如下，以后有机会再继续研究下

后台项目中的导出表格

猜你喜欢