Angular中在表格页面添加下载模板的功能

      刚进公司,上司给了一个任务是对部门做的系统里的一张表格进行数据管理,实现增删改查等功能.我从服务接口获取数据并将其展示在表格中,并且能够实现添加,修改,删除,搜索,导入,导出的功能,并对某些字段项进行了唯一性验证.

上司过来检查每个功能的完成情况,添加删除,编辑导出,搜索都可以,就是在导入数据的时候,用excel建表填数据发现不行,转换成csv格式也不行,于是让我修改一下,在页面添加一个按钮,目的是进行模板的下载.由于太菜,简单的事情在我这也变得很复杂,折腾了一番得出下面的方法.

第一步:在.html 文件中添上这个按钮


<a title="{{'BasicCoding.download'|translate}}"  href=" "  type="button">

<i class="icon-download" ></i><span>{{'BasicCoding.download'|translate}}</span>

</a>


       因为做的系统有汉语,英语,葡语三种版本,所以标题那里进行了国际化,还有模板下载的地址现在还没确定,就先没有写,之后会加上.

第二步:建模板

相应的建立三个语言版本的模板( config_zh_CN.csv  ,  config_en_US.csv  ,  config_pt_PT.csv),在项目目录asset下加上一个文件夹:template,并将这三个模板都放进去.

第三步:在.angular-cli.json中添加template

第四步:在.ts文件中监听当前的语言版本,从而下载对应的数据模板,例如:

a) import{SessionStorageService,SessionEnum} from...

b)在构造函数中添加private session:sessionStorageService

c)this.lang=this.session.read(SessionEnum.lang)

第五步:声明一个templateURL,拼接要下载的路径地址

a)templateUrl='./template/';

b)this.templateUrl=this.templateUrl + 'config_' +this.lang +'.csv';

c)href="{{templateUrl}}"

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,491评论 19 139
  • 《望月》 秋情的夜晚 拽着难忘的思念 踩着纯洁的心弦 漫步湖边 秋月做伴 过往烟云已散 一路风雨恋恋 月亏月圆 装...
    常乐人生阅读 2,515评论 1 1
  • 马小淘天生驼背,像个又干又瘦的小老头,又像个发育不良的小猴子。他走起路来身体喜欢习惯性地左摇右晃,两只脚板倒是很大...
    小五生阅读 3,325评论 12 10
  • 现在的无论是框架还是项目中,越来越多的使用block代码块。个人觉得:第一可以使代码看起来更简单明了,第二可以取代...
    Ray_win阅读 3,541评论 0 1
  • 1.cell改变选中颜色背景图片分割线的颜色 2.collection的cell重排编组
    SadMine阅读 4,642评论 0 0