<!-- 自定义按钮请使用插槽,甚至公共搜索也可以使用具名插槽渲染,参见文档 -->
<TableHeader
:buttons="['refresh', 'add', 'edit', 'delete', 'unfold', 'comSearch', 'quickSearch', 'columnDisplay']"
:quick-search-placeholder="t('Quick search placeholder', { fields: t('treetable.quick Search Fields') })"
>
<!-- 导出按钮 -->
<el-button v-blur class="table-header-operate" type="success" style="margin-left: 12px" @click="derive">
<Icon color="#ffffff" name="el-icon-Download" />
<span class="table-header-operate-text">{{ t('treetable.export') }}</span>
</TableHeader>
?绑定点击事件
/**
* 导出点击方法
*/
const derive = () => {
createAxios<any, AxiosPromise>(
{
url: '/admin/Treetable/export',
method: 'get',
responseType: 'blob',
},
{ reductDataFormat: false }
).then((response) => {
const disposition = response.headers['content-disposition']
const arr = disposition.split('filename=')
const fileName = decodeURI(arr[1])
fileDownload(response.data, fileName)
})
}
参数说明:
xhr.response的数据类型 responseType值 xhr.response 数据类型 说明 "" String
字符串默认值(在不设置 responseType
时)"text" String
字符串"document" Document
对象希望返回 XML 格式数据时使用 "json" javascript
对象存在兼容性问题,IE10/IE11不支持 "blob" Blob
对象"arrayBuffer" ArrayBuffer
对象
?编写控制器中导出方法
/**
* 导出
* @return void
* @throws Throwable
*/
public function export(): void
{
$list = $this->model->select()->toArray();
$spreadsheet = new Spreadsheet();
$sheet = $spreadsheet->getActiveSheet();
$sheet->setCellValue([1, 1], '名称');
$sheet->setCellValue([2, 1], 'ID');
$sheet->setCellValue([3, 1], '创建时间');
$h = 2;
foreach ($list as $v) {
$sheet->setCellValue([1, $h], $v['name']);
$sheet->setCellValue([2, $h], $v['id']);
$sheet->setCellValue([3, $h], date('Y-m-d H:i:s', $v['create_time']));
$h++;
}
$writer = new Xlsx($spreadsheet);
$file = time() . '.xlsx';
ob_end_clean();
header('Content-Type: application/vnd.ms-excel');
header('Access-Control-Expose-Headers:Content-Disposition');
header('Content-Disposition: attachment;filename=' . $file);
header('Cache-Control: max-age=0');
$writer->save('php://output');
$spreadsheet->disconnectWorksheets();
}