vue + elementUI 实现表格的打印和下载-蒲公英云

vue + elementUI 实现表格的打印和下载

这篇文章主要介绍前端根据 table 表格里面已有的数据实现的下载功能，不需要调用接口，只是纯前端的一个功能实现；顺便介绍一下打印功能。

1、打印

获取表格数据，调用 window 的 print 方法；打印结束之后刷新页面重新给表格赋值。

<template>
    <div>
        <el-button @click="printTable">打印表格</el-button>
        <el-table id="myTable" :data="tableData">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
</template>
export default { 
    data(){ 
        return { 
            tableData:[{ date:'xxxx',name:'aaaa',address:'ssss'}]
        }
    },
    methods:{ 
        //打印页面内容
        printTable(){ 
          let wpt = document.querySelector('#myTable');
          let newContent = wpt.innerHTML;
          let oldContent = document.body.innerHTML;
          document.body.innerHTML = newContent;
          window.print(); //打印方法
          // window.localtion.reload();
          history.go(0)
          document.body.innerHTML = oldContent;
        }
    }
}

在这里插入图片描述

2、下载

需要借助插件 xlsx 和 file-saver ；
安装插件：

//各种电子表格格式的解析器和编写器
npm install xlsx
npm install file-saver --save

实现方法：

<template>
    <div>
        <el-button @click="downloadExcel">下载表格</el-button>
        <el-table id="myTable" :data="tableData">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
</template>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default { 
    data(){ 
        return { 
            tableData:[{ date:'xxxx',name:'aaaa',address:'ssss'}]
        }
    },
    methods:{ 
        //导出Excel
        exportToExcel () { 
          //获取 table 表格数据
          let et = XLSX.utils.table_to_book(document.querySelector('#myTable')); //此处传入table的DOM节点
          let etout = XLSX.write(et, { 
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
          });
          try { 
              FileSaver.saveAs(new Blob([etout], { 
                  type: 'application/octet-stream'
              }), 'trade-publish.xlsx');   //trade-publish.xlsx 为导出的文件名
          } catch (e) { 
              console.log(e, etout) ;
          }
          return etout;
        }
    }
}