前端导出table表格为CSV

最新推荐文章于 2023-02-09 10:17:22 发布

wang_zhiwei0728

最新推荐文章于 2023-02-09 10:17:22 发布

阅读量399

点赞数

文章标签：前端

原文链接：https://blog.csdn.net/zhangxxxq/article/details/120549784?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-120549784.pc_agg_new_rank&utm_term=%E5%89%8D%E7%AB%AFtable%E8%A1%A8%E6%A0%BC%E5%AF%B

版权

纯前端将表格数据导出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);

wang_zhiwei0728

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端导出table表格为CSV

纯前端将表格数据导出excel导出xlsx格式的excel文件方法封装方法调用导出csv格式的excel表格方法封装方法调用导出xlsx格式的excel文件方法封装对表头及表格数据分别进行循环获取/** * * @param jsonData 接口返回数据 * @param nameList 标题表头数据（非必填） * @param keyList 与表头相对应取值参数名（非必填） */export function downl
复制链接

扫一扫