导入导出文档介绍

Magicodes.IE

介绍

导入导出通用库，支持Dto导入导出、模板导出、花式导出以及动态导出，支持Excel、Csv、Word、Pdf和Html。

Github：https://github.com/dotnetcore/Magicodes.IE/blob/master/README.zh-CN.md
码云：https://gitee.com/magicodes/Magicodes.IE

教程

组件介绍

后端

导入导出功能我们是基于Magicodes.IE做了二次封装。

导入：ImportManager

导出：ExportManager

前端

前端封装了“app-excel-import”组件，该组件主要功能有：封装了nz-upload上传组件，统一的模板错误展示，统一的行数据错误展示，下载错误标注功能等。

Demo

一下demo功能在用户管理界面。

导出Excel

1、定义导出的Dto

    public class UserExportDto : EntityDto<long>, IPassivable
    {
        [ExporterHeader(DisplayName = "姓名")]

        public string UserName { get; set; }

        public string EmailAddress { get; set; }

        public string PhoneNumber { get; set; }

        /// <summary>
        /// 头像Id
        /// </summary>
        public Guid? ProfilePictureId { get; set; }

        public bool IsEmailConfirmed { get; set; }

        [ExporterHeader(DisplayName = "LastLoginTime")]
        public string LastLoginTime { get; set; }
        [ExporterHeader(DisplayName = "CreationTime")]
        public string CreationTime { get; set; }

        public bool IsActive { get; set; }
    }

2、编写导出接口

        /// <summary>
        /// 获取用户导出信息Excel
        /// </summary>
        /// <returns> </returns>
        public async Task<FileDto> GetUsersToExcelUser()
        {
            var users = await UserManager.Users.ToListAsync();

            var data = ObjectMapper.Map<List<UserExportDto>>(users);

            var result = await _exporterManager.ExportExcel("User.xlsx", data);

            return result;
        }

3、前端请求

  exportToExcel(): void {
    this._userService.getUsersToExcelUser().subscribe(result => {
      this._fileDownloadService.downloadTempFile(result);
    });
  }

导入Excel

1、编写导入Dto

    [ExcelImporter(IsLabelingError = true)]
    public class UserImportDto : IPassivable
    {
        /// <summary>
        ///     根据id是否有值来判断是创建还是添加
        /// </summary>
        public long? Id { get; set; }

        [Required]
        [MaxLength(AbpUserBase.MaxUserNameLength, ErrorMessage = "用户名字数超过最大限制，请修改！")]
        [ImporterHeader(Name = "用户名")]
        public string UserName { get; set; }

        [Required]
        [EmailAddress]
        [MaxLength(AbpUserBase.MaxEmailAddressLength)]
        [ImporterHeader(Name = "邮箱")]
        public string EmailAddress { get; set; }

        [MaxLength(UserConsts.MaxPhoneNumberLength)]
        [ImporterHeader(Name = "电话")]
        public string PhoneNumber { get; set; }

        [MaxLength(AbpUserBase.MaxPlainPasswordLength)]
        [DisableAuditing]
        [ImporterHeader(Name = "密码")]
        public string Password { get; set; }

        [ImporterHeader(Name = "是否锁定用户")] 
        public virtual bool IsLockoutEnabled { get; set; }

        /// <summary>
        /// 需要修改密码
        /// </summary>
        [ImporterHeader(Name = "需要修改密码")]
        public bool NeedToChangeThePassword { get; set; }

        /// <summary>
        ///     头像Id
        /// </summary>
        [ImporterHeader(Name = "头像")]
        [ImportImageField(ImportImageTo =  ImportImageTo.Base64)]
        public virtual string ProfilePicture { get; set; }

        [ImporterHeader(Name = "是否激活")] 
        public bool IsActive { get; set; }
    }

2、编写导入接口

        public async Task<ExcelImpDto<UserImportDto>> ImportUser(string fileToken)
        {
             var ret = await  _importManager.ImportExcel(fileToken);

             // ret.Data 拿到所有的导入数据，进行业务校验并编写存库代码
             return ret;
        }

3、前端引入导入功能组件

     <app-excel-import #excelImportModel (fileUploadedSuccessEvent)="uploadPictureChange($event)"> </app-excel-import>

  /**
   * 选择Excel上传事件
   * @param info 反馈信息
   */
  uploadPictureChange(info: string) {

    this._userService.importUser(info).subscribe(item => {
      // this.notify.success(this.l('上传文件成功！'));
      this.excelImportModel.initImportReturn(item);
    });
    this.refreshGoFirstPage();
  }

导出PDF

1、编写模板文件，这里我用的是HTML文件做为模板文件

注意：模板文件我们统一放在如下图目录中

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        body { font-family: SimSun !important; }

        p { margin: 0px; }

        footer {
            color: #333;
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            margin-right: 5%;
            margin-top: 1.2rem;
            text-align: right;
        }

        table,
        td {
            border: 1px solid #444;
            border-collapse: collapse;
            height: 2rem;
            padding: 5px;
        }

        .evenNum {
            margin-bottom: 8%;
            padding-top: 10%;
        }
    </style>
</head>

<body>
@for (var i = 0; i < Model.Data.UserExportPdfDtos.Count; i++)
{
    <div style="height: 41%; width: 100%;" class="@(i % 2 == 0 ? "" : "evenNum")">
        <p style="color: #333; font-size: 1.2rem; margin-left: 5%; margin-top: 1%;">
            <text>NO：@Model.Data.UserExportPdfDtos[i].Id</text>
            <text style="padding-left: 52%; text-align: right;">创建时间：@Model.Data.UserExportPdfDtos[i].CreationTime.ToString("yyyy-MM-dd HH:mm:ss")</text>
        </p>

        <table width="90%" style="margin-left: 5%; margin-top: 1%;">
            <tr style="font-size: 1rem;">
                <td style="text-align: center; width: 11%;">姓名</td>
                <td colspan="2">@Model.Data.UserExportPdfDtos[i].UserName</td>
                <td style="text-align: center; width: 13%;">邮箱地址</td>
                <td colspan="3">@Model.Data.UserExportPdfDtos[i].EmailAddress</td>
            </tr>
            <tr style="font-size: 1rem;">
                <td style="text-align: center">电话号码</td>
                <td colspan="6">
                    <span>@Model.Data.UserExportPdfDtos[i].PhoneNumber</span>
                </td>
            </tr>
        </table>

        <img src="@Model.Data.SealUrl" style="float: right; height: auto; margin-right: 6%; margin-top: -8rem; opacity: 0.5; width: 9rem;">
    </div>
}
</body>
</html>

2、定义导出的Dto

    /// <summary>
    ///     批量
    /// </summary>
    [Exporter]
    public class UserExportPdfInput
    {
        /// <summary>
        ///     标题
        /// </summary>
        public string Title { get; set; }

        /// <summary>
        ///     印章地址
        /// </summary>
        public string SealUrl { get; set; }

        /// <summary>
        ///     电子收据输入参数
        /// </summary>
        public List<UserExportPdfDto> UserExportPdfDtos { get; set; }
    }

    [Exporter]
    public class UserExportPdfDto
    {
        public long Id { get; set; }
        /// <summary>
        ///     创建时间
        /// </summary>
        public DateTime CreationTime { get; set; }

        /// <summary>s
        ///     姓名
        /// </summary>
        public string UserName { get; set; }

        /// <summary>
        ///     邮箱
        /// </summary>
        public string EmailAddress { get; set; }

        /// <summary>
        ///     电话号码
        /// </summary>
        public decimal PhoneNumber { get; set; }

        /// <summary>
        ///     头像
        /// </summary>
        public string ProfilePictureId { get; set; }
    }

3、编写导出接口

        /// <summary>
        /// 获取用户导出信息Pdf
        /// </summary>
        /// <returns></returns>
        public async Task<FileDto> ExportUserPdf()
        {
            var input = new UserExportPdfInput
            {  
                UserExportPdfDtos = new List<UserExportPdfDto>()
            };

            var users = await UserManager.Users.ToListAsync();
            var data = ObjectMapper.Map<List<UserExportPdfDto>>(users);

            input.UserExportPdfDtos = data;

            return await _exportPdfManager.ExportPDF("UserList.pdf", input, "batchReceipt.cshtml");
        }