Export table in background project

Simply record it for the convenience of the next cv.

After making the background page, there is an export function in the upper right corner. I made a method according to the interface document and adjusted the interface, but there was no effect. Then I asked my second brother, and he took it back and operated it. Later, I learned that the meaning of export is to output the content of the page in the format of chart excel.

At the beginning, the export has been successful. There is only one parameter in the interface document. After the state is adjusted normally, the page is not displayed. The next step is to find the reason. However, the export in the final page has not changed, and it is still the same.


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

This is the data adjustment method in the page after modification, it looks like this

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

The toExport in the data interaction file is changed to this

Here is a function of exportFile
whose address is in the tool util.ts in config

The documents are as follows

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)
}

After consulting online information, I learned that
this method of this project is actually divided into 5 steps.

1. Obtain the address of the binary stream file from the background API and process it;

2. Configure the front-end request method, and request to obtain the file stream in the form of blob;

3. Create a DOMString through URL.createObjectURL() static method;

4. Dynamically create a tag for file download, assign herf and download attributes, and trigger the click event of the tag;

5. Use the URL.revokeObjectURL() static method to release the URL object created by URL.createObjectURL() before.

It is roughly as follows, and I will continue to study it when I have the opportunity

Export table in background project

Guess you like