简单记录下,方便下次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更改为这样
这里有一个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 对象。
大概如下,以后有机会再继续研究下