博客

ng-alain图表样式问题：

安装完g2组件之后，

需要在根目录下的styles.less 文件中import 要使用的less文件（@import ‘~@delon/chart/index’;），在此注意，需要人工手动导入

ng-alain的样式是在根目录下的styles.less文件中管理的，需要用到的样式文件需要手动导入到该文件中

ng-alain下载文件:

一、http请求axios.post。需要获取token，token需要放入http请求的header里

二、ajax请求，该请求会返回流，但是不会弹框，需要自己组装a标签，模拟a标签点击下载文件，在此需要在 JS 里创建一个

Blob

（Blob 对象就是包含有只读原始数据的类文件对象）并将数据存入，然后让用户保存它。

对 IE 有一个奇奇怪怪的


navigator.msSaveBlob()


，而对大多数现代浏览器来说，可以用


URL.createObjectURL()


来生成一个以

blob:

开头的地址来指向 Blob。目前的主流浏览器都是支持的（不过很可惜，Opera (Presto) 终于

在它的最后一个大版本 12 版本实现了 blob

，但

没有实现 Blob URLs

），然而不同浏览器对 Blob 的数据大小是有限制的。这里有份

FileSaver.js

的统计数据。

download() {
  //http://localhost:8080
  axios.post(this.service.web + '/api/es/orderbatch/downloadErrorDetail',
  qs.stringify({
    path: this.service.path
  }),
  {
    headers: {
    'Authorization': 'Bearer ' + this.tokenService.get(JWTTokenModel).token
  },
  responseType: 'arraybuffer'
  }).then(function(response) {
      // console.log(response);
      const blob = new Blob([response.data]);
      const downloadElement = document.createElement('a');
      const href = window.URL.createObjectURL(blob); //创建下载的链接
      downloadElement.href = href;
      const fileName = response.headers["content-disposition"];
      downloadElement.download = fileName; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放掉blob对象
  }).catch(function(error) {
        console.log(error);
  });
}