Antd Pro 数据导出 Excel

按钮放在哪里

如 Antd Pro 示例中，放在过滤设置区域还挺合适的。因为导出 Excel 需要遵循过滤条件，如时间段，类型等。

https://procomponents.ant.design/components/table#%E8%A1%A8%E5%8D%95%E6%93%8D%E4%BD%9C%E8%87%AA%E5%AE%9A%E4%B9%89

button or link

link 容易实现吧，target 设置一下，在新 tab 页中下载。

可以确认一下，Ant Design 有没有体验更好的组件。之前用过 Ant Design 的上传组件不错。

Ant Design 中 Button 有下载的图标，而且支持 href 属性。

https://ant.design/components/button-cn/#components-button-demo-icon

如何获取当前过滤参数

将 form Props 的属性 key 打印出来，猜测哪个是当前参数：

search={{
  labelWidth: 120,
  optionRender: (searchConfig, formProps, dom) => [
	...dom.reverse(),
	<Button icon={<DownloadOutlined />}
	  href={"/api/exportOxygenTimeExcel?id=" + formProps.DeviceId} >
	  导出 Excel { JSON.stringify(Object.keys(formProps.form)) }
	  导出 Excel { JSON.stringify(formProps.form.getFieldsValue()) }
	</Button>
  ],
}}

js post 的方式下载文件

但是用这种 url 的方式下载，有两个缺陷

• url get 链接会被国产浏览器收集，并私下发起请求
• 无法设置访问权限，如果用的是 jwt token 这种验证机制

所以还是用 post 请求更合理一些，参考：

https://www.pianshen.com/article/4210572427/

https://segmentfault.com/a/1190000021118085

下载函数的封装

https://www.delftstack.com/howto/javascript/javascript-download/

function download(blobData: Blob, forDownLoadFileName: string | null): any {
	const aLink = document.createElement('a');
	document.body.appendChild(aLink);
	aLink.style.display = 'none';
	aLink.href = window.URL.createObjectURL(blobData);
	aLink.setAttribute('download', forDownLoadFileName);
	aLink.click();
	document.body.removeChild(aLink);
}

umi request 下载文件的参数设置

https://www.cnblogs.com/wattmelon/p/14281599.html

import request from 'umi-request';

function download() {
	request('http://localhost:2000/download', {
	method: 'GET',
	responseType: 'blob',
}).then(res => {
	console.log(res)
	const blob = new Blob([res]);
	const objectURL = URL.createObjectURL(blob);
	let btn = document.createElement('a');
	btn.download = '文件名.pdf';
	btn.href = objectURL;
	btn.click();
	URL.revokeObjectURL(objectURL);
	btn = null;
});

golang gin 返回 excel blob

excelize "github.com/xuri/excelize/v2"

https://github.com/qax-os/excelize

gin 返回 Blob 的方式：

https://github.com/gin-gonic/gin/blob/1c2aa59b20c8cff5b3c601708afe22100eac25e6/context.go#L976

// Data writes some data into the body stream and updates the HTTP code.
func (c *Context) Data(code int, contentType string, data []byte) {
	c.Render(code, render.Data{
		ContentType: contentType,
		Data:        data,
	})
}

// DataFromReader writes the specified reader into the body stream and updates the HTTP code.
func (c *Context) DataFromReader(code int, contentLength int64, contentType string, reader io.Reader, extraHeaders map[string]string) {
	c.Render(code, render.Reader{
		Headers:       extraHeaders,
		ContentType:   contentType,
		ContentLength: contentLength,
		Reader:        reader,
	})
}

tags: Ant Design Pro

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式