• 前端导出excel表格方法


    在日常业务中,有一些没有规律的表格需要导出是,在后端处理会非常麻烦,我们可以把数据提取到html table标签中,然后进行导出

    代码如下:

    //前端导出excel表格
    function ExcelConvertor(data, FileName) {
        if (FileName == null) {
            FileName = "下载文件";
        }
        var excelFile = "<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'>";
        excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
        excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
        excelFile += '; charset=UTF-8">';
        excelFile += "<head>";
        excelFile += "<!--[if gte mso 9]>";
        excelFile += "<xml>";
        excelFile += "<x:ExcelWorkbook>";
        excelFile += "<x:ExcelWorksheets>";
        excelFile += "<x:ExcelWorksheet>";
        excelFile += "<x:Name>";
        excelFile += "worksheet1";
        excelFile += "</x:Name>";
        excelFile += "<x:WorksheetOptions>";
        excelFile += "<x:DisplayGridlines/>";
        excelFile += "</x:WorksheetOptions>";
        excelFile += "</x:ExcelWorksheet>";
        excelFile += "</x:ExcelWorksheets>";
        excelFile += "</x:ExcelWorkbook>";
        excelFile += "</xml>";
        excelFile += "<![endif]-->";
        excelFile += "</head>";
        excelFile += "<body>";
        excelFile += data;
        excelFile += "</body>";
        excelFile += "</html>";
    
        var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
    
        var link = document.createElement("a");
        link.href = uri;
    
        link.style = "visibility:hidden";
        link.download = FileName + ".xls";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    使用场景:

    <div id="show-selected" style="display: none;">
                    <h3 style="float:right;">单位:元</h3>
                    <cs-table :tablekey="tablekey" :tabledata="tabledata"></cs-table>
     </div>
    
    function Export() {
                var data = $("#show-selected").html();
                ExcelConvertor(data, "文件名");
            }
  • 相关阅读:
    vue开发常用技巧总结(一)
    js时间戳转固定日期格式输出处理
    vue恢复初始数据
    Feature Police导致iframe页面无法使用粘贴功能
    页面异步请求canceled 或 network中接口请求成功但无法查看返回值
    我在阿里云做云开发平台
    Python项目中的requirements文件
    Json常用格式
    浅谈开机启动_windows
    mmdetection 报错: AttributeError: ‘ConfigDict‘ object has no attribute ‘pipeline‘
  • 原文地址:https://www.cnblogs.com/haixiaocan/p/11943545.html
Copyright © 2020-2023  润新知