angular9 导出Excel文件

最新推荐文章于 2023-10-26 09:00:00 发布

折桂怀橘

最新推荐文章于 2023-10-26 09:00:00 发布

阅读量315

点赞数

分类专栏：前端相关知识文章标签： angular.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_42910765/article/details/120971709

版权

前端相关知识专栏收录该内容

81 篇文章 8 订阅

订阅专栏

1、安装file-saver、@types/file-saver和xlsx

npm install file-saver --save
npm install @types/file-saver --save-dev
npm install xlsx --save

import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

......
 tableData= [
    {
      date:'202022',
      name: '11111',
      address: '8888'
    }
  ]
exportTable() {
    const exportItem = this.tableData; //是一个数组，包含需要导出的内容
  
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(exportItem);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    this.saveAsExcelFile(excelBuffer, 'report');
}

private saveAsExcelFile(buffer: any, fileName: string) {
  const data: Blob = new Blob([buffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
  });
  FileSaver.saveAs(data, fileName + '.xlsx');
}

.......

附a标签点击下载

createA(url) {
        const eleLink = document.createElement('a')
        eleLink.download = 'download'
        eleLink.style.display = 'none'
        eleLink.href = url
        // 触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
    }