vue中,将html的table内容导出为Excel

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hsl_1990_08_15/article/details/94600521

页面中显示的table表格,经常会要求实现导出Excel的需求,今天公司的同事遇到了这个问题,特此我把过程记录下

1.这里主要需要两个依赖:xlsxfile-saver

 npm i xlsx --save
 npm i file-saver --save

2.组件中引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3.组件中导出Excel的方法

//导出Excel
exportToExcel () {
    let et = XLSX.utils.table_to_book(document.getElementById('table-content')); //此处传入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;
}

 

4.导出按钮执行exportToExcel方法即可

<el-button @click="exportToExcel">导出</el-button>

 

5.打印页面部分内容的实现方法

//打印页面内容
printContent(){
    let wpt = document.getElementById('table-content');
    let newContent = wpt.innerHTML;
    let oldContent = document.body.innerHTML;
    
    document.body.innerHTML = newContent;
    window.print(); //打印方法
    window.localtion.reload();
    document.body.innerHTML = oldContent;
}

以上的方法导出的excel没有任何样式,看着很不美观,如果想要和html一样的效果,请参照  这里

 

展开阅读全文

没有更多推荐了,返回首页