abp-vnext-pro 實戰（七，導出excel）

HttpApi項目，vben28\nswag\refresh.bat 更新前端接口

        [HttpPost("export")]
        [SwaggerOperation(summary: "導出客戶列表", Tags = new[] { "Customers" })]
        [ProducesResponseType(typeof(FileContentResult), (int)HttpStatusCode.OK)]
        public Task<ActionResult> ExportAsync(PageCustomerInput input)
        {
            return _customerAppService.ExportAsync(input);
        }

application.Contract 項目

public interface ICustomerAppService : IApplicationService
{
。。。
  Task<ActionResult> ExportAsync(PageCustomerInput input);
}

   public class ExportCustomerOutput
    {
        [ExporterHeader(DisplayName = "客戶編號")]
        public string Code { get; set; }

        [ExporterHeader(DisplayName = "客戶名稱")]
        public string Name { get; set; }
   }

 

 

 

application 項目

    /// <summary>
    /// 導出列表
    /// </summary>
    [Authorize(BasicManagementPermissions.SystemManagement.UserExport)]
    public async Task<ActionResult> ExportAsync(PageCustomerInput input)
    {
 
        var list = await _customerManager.GetListAsync(input.PageSize, input.SkipCount, input.Filter);
        var result = ObjectMapper.Map<List<CustomerDto>, List<ExportCustomerOutput>>(list);
        var bytes = await _excelExporter.ExportAsByteArray<ExportCustomerOutput>(result);
        return new XlsxFileResult(bytes: bytes, fileDownloadName: $"導出列表{Clock.Now:yyyyMMdd}");
    }

        public ERPApplicationAutoMapperProfile()
        {
            CreateMap<CustomerDto, ExportCustomerOutput>();

        }

 

前端頁面 index.ts

const [openFullLoading, closeFullLoading] = useLoading({
tip: 'Loading...',
});

export function exportAsync({ request }) {
  openFullLoading();
  const customerServiceProxy = new CustomersServiceProxy();
  customerServiceProxy.export(request).then((res) => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(res.data);
    a.download = '用戶列表導出.xlsx';
    a.click();
    closeFullLoading();
  });
}

index.vue

<script lang="ts">
...
  import { tableColumns, searchFormSchema, pageAsync, deleteAsync,exportAsync } from './Index';

      const handleExport = () => {
        const { getFieldsValue } = getForm();
        let request = getFieldsValue();
        exportAsync({ request });
      };