前端table表格导出excel

最新推荐文章于 2024-07-30 09:30:00 发布

萧紫陌

最新推荐文章于 2024-07-30 09:30:00 发布

阅读量598

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/zhangxxxq/article/details/120549784

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

纯前端将表格数据导出excel

导出xlsx格式的excel文件
- 方法封装
- 方法调用
导出csv格式的excel表格
- 方法封装
- 方法调用

导出xlsx格式的excel文件

方法封装

对表头及表格数据分别进行循环获取

/**
 *
 * @param jsonData 接口返回数据
 * @param nameList 标题表头数据 （非必填）
 * @param keyList 与表头相对应取值参数名 （非必填）
 */
export function downloadExcel(jsonData,nameList,keyList) {
    let nameStr = '' //表头字段
    if (nameList && nameList > 0) { //如果传了表头数据进来，代表不是所有的接口数据都倒出
        nameList.forEach(name => {
            nameStr += `<td>${name + '\t'}</td>`;
        })
    } else { //接口返回的所有字段都导出到excel内
        Object.keys(jsonData).forEach(name => {
            nameStr += `<td>${name + '\t'}</td>`;
        })
    }
    let str = '<tr>'+nameStr+'</tr>';
    //循环遍历，每行加入tr标签，每个单元格加td标签
    for (let i = 0; i < jsonData.length; i++) {
        str += '<tr>';
        if (keyList && keyList.length > 0) { //与表头相对应，里面的值为相对应的参数
            keyList.forEach(key=> {
                str += `<td>${jsonData[i][key] + '\t'}</td>`;
            })
        } else {
            jsonData[i].forEach(key => {
                //增加\t为了不让表格显示科学计数法或者其他格式
                str += `<td>${jsonData[i][key] + '\t'}</td>`;
            })
        }
        str += '</tr>';
    }
    //Worksheet名
    let worksheet = 'Sheet1'
    //导出格式为xlsx
    let uri = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,';

    //下载的表格模板数据
    let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
      xmlns:x="urn:schemas-microsoft-com:office:excel" 
      xmlns="http://www.w3.org/TR/REC-html40">
      <head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
    //下载模板
    window.location.href = uri + base64(template)
}

方法调用

let nameList = ['名称','年龄','地址'];
let keyList = ['name', 'age', 'address'];
downloadExcel(this.listOfAllData,nameList,keyList);

导出csv格式的excel表格

方法封装

导出csv格式的数据后，文件修改后保存时会出现编码问题提示。

/**
 * 列表数据导出
 * @param dataStr 接口数据
 * @param nameStr 表头用','隔开（非必填）
 * @param keyList 与表头相对应，参数值（非必填）
 */
export function exportExcel(dataStr, nameStr,keyList) {
    let listParamsClone = {};
    let exportStr = '';
    //列标题，逗号隔开，每一个逗号就是隔开一个单元格
    exportStr = `${nameStr}`;
    //增加\t为了不让表格显示科学计数法或者其他格式
    for (let i = 0; i < dataStr.length; i++) {
        if (keyList && keyList.length > 0) {
        // 如果传入了表头，则需要根据传入的参数列表对应
            keyList.forEach(element => {
                exportStr += `${dataStr[i][element] + '\t'},`
            });
        } else {
            for (let key in dataStr[i]) {
                exportStr += `${dataStr[i][key] + '\t'},`
            }
        }
        exportStr += '\n';
    }
    //encodeURIComponent解决中文乱码
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(exportStr);
    //通过创建a标签实现
    var link = document.createElement("a");
    link.href = uri;
    link.download = `下载.csv`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

}

方法调用

let nameStr = '名称,年龄，地址\n';
let keyList = ['name', 'age', 'address'];
exportExcel(this.listOfAllData,nameStr,keyList);

萧紫陌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录