C# 前端无插件打印导出实现方式详解

@model list<界面的数据模型类>
@using wingsoft;
@using newtonsoft.json;
<style type="text/css">
    .modal-content {
        width: 800px;
    }
    .modal-body {
        height: 400px;
    }
</style>
<script type="text/javascript">
    $(function () {
        if (@viewbag.pe== 0) {//打印
            let content = ''
            for (var i = 0; i < $(".boxdiv").length; i++) {
                content += $(".boxdiv").eq(i).html() + '<div style="page-break-after: always;"></div>'
            }
            printfunc(content);
        } else {//导出（将所有数据导出到一个excel，多个工作表的形式）
            let contentarray = [];
            for (var i = 0; i < $(".boxdiv").length; i++) {
                contentarray.push({
                    html: $(".boxdiv").eq(i).html(),
                    name: "xx记录表" + (i + 1)
                });
            }
            exporttoexcelbatch('xx记录表',contentarray)
        }
    });
</script>
<div class="modal fade" id="modal" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <img src="~/images/icon_closed.png" />
                </button>
            </div>
            <div class="modal-body">
                @for (var i = 0; i < model.count; i++)
                {
                        <div class="boxdiv">
                            <style>
                                .boxdiv table {
                                    width: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                }
                                .printtable {
                                    width: 100%;
                                    font-family: "宋体";
                                    border: 0px;
                                    color: #333;
                                    font-size: 12px;
                                }
                                    .printtable th {
                                        font-weight: 600;
                                        font-size: 14px;
                                    }
                                    .printtable td, .printtable th {
                                        text-align: center;
                                        padding: 3px 3px;
                                    }
                                .content td {
                                    border: 1px solid #4a4a4a;
                                }
                                .tabletitle1 {
                                    font-size: 20px;
                                    font-weight: bold;
                                }
                                .tabletitle2 {
                                    font-size: 18px;
                                    font-weight: bold;
                                    position: relative;
                                }
                                .contenleft {
                                    text-align: left !important;
                                }
                                .contenright {
                                    text-align: right !important;
                                }
                                .boxcontent {
                                    height: 30px;
                                    font-size: 14px;
                                }
                                .footertext {
                                    font-size: 14px;
                                }
                                .printtable td, .printtable th {
                                    border: 1px solid #e5e5e5;
                                    padding:3px;
                                    font-size:14px;
                                }
                                .printtable thead th{
                                    text-align:center;
                                }
                            </style>
                            <div class="modal-title" style="font-size:18px;text-align:center;">@model[i].schoolname 经营成本</div>
                            <div style="margin:10px 0">
                                <span>食堂名称：@model[i].canteenname</span>
                                <span style="margin-left:30%">登记时间：@model[i].fordate</span>
                            </div>
                            <table class="printtable" border=0 cellspacing=0 cellpadding=0 style="border-collapse:collapse;width:100%;">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>成本名称</th>
                                        <th>成本金额（元）</th>
                                        <th>备注</th>
                                    </tr>
                                </thead>
                                <tbody style="width:100%;">
                                    @{
                                        int index = 1;
                                    }
                                    @foreach (var item in model[i].costitemlist)
                                    {
                                        <tr>
                                            <td>@(index++)</td>
                                            <td>@item.name</td>
                                            <td>@item.totalmoney</td>
                                            <td>@item.remark</td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn2 btn_90_28" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

// 打印
function printfunc(data) {
    loadstart();
    var iframehtml = document.createelement("iframe");
    iframehtml.id = "iframeprintbox";
    iframehtml.style.width = "0";
    iframehtml.style.height = "0";
    document.body.appendchild(iframehtml);
    iframehtml.srcdoc = '<!doctype html>' + data + "<script type='text\/javascript'>window.onload = function(){window.print();window.onafterprint = ()=>{window.parent.close();}}<\/script>";
    loadend()
}

//多sheet导出
function exporttoexcelbatch(sheetname, exportarr) {
    var filename_g, sheetsname_g, mainhtml_g, sheethtml_g
    // 导出函数
    sheetsname_g = getsheetsname()  //获取到每个sheet的名称集合
    filename_g = sheetname + '.xlsx'  //外部导出名称
    sheethtml_g = getsheetxml()     //得到每一个sheet的xml片段
    mainhtml_g = getmainxml()       //导出的主体xml片段
    let xlsdata = 'data:application/vnd.ms-excelbase64,' + window.btoa(window.unescape(encodeuricomponent(mainhtml_g)))
    // 下载
    download(xlsdata)
    // 下载
    function download(base64data) {
        let blob
        if (window.navigator.mssaveblob) {
            blob = base64toblob(base64data)
            window.navigator.mssaveblob(blob, sheetname + '.xlsx')
            return false
        }
        let a = document.createelement("a")
        if (window.url.createobjecturl) {
            blob = base64toblob(base64data)
            a.href = window.url.createobjecturl(blob)
            a.download = filename_g
            a.click()
            return
        }
        a.href = base64data
        a.download = filename_g
        a.click()
    }
    // 获取sheet名称
    function getsheetsname() {
        let sheetsname = []
        exportarr.foreach((item) => {
            sheetsname.push(item.name)
        })
        return sheetsname
    }
// 创建文件流
function base64toblob(base64data) {
    let arr = base64data.split(',')
    let mime = arr[0].match(/:(.*?)/)[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new uint8clampedarray(n)
    while (n--) {
        u8arr[n] = bstr.charcodeat(n)
    }
    return new blob([u8arr], { type: mime })
}
    /**
 * 文件下载
 * @param {any} url 文件路径
 * @param {any} filename 文件名称
 */
    function downloadfile(url, filename) {
        if (!url || !filename) return false;
        let aurl = url;
        const x = new xmlhttprequest();
        x.open('get', aurl, true);
        x.responsetype = 'blob';
        x.onload = function (e) {
            const url = window.url.createobjecturl(x.response);
            const elink = document.createelement('a');
            elink.href = url;
            elink.target = '_self'; // 当前页 target打开新页面
            elink.download = `${filename}`;
            elink.style.display = 'none';
            document.body.appendchild(elink);
            elink.click();
            document.body.removechild(elink);
        };
        x.send();
    }
    // 获取所有xml代码
    function getmainxml() {
        let mainhtml = ''
        let sheets = ''
        if (sheetsname_g.length > 0) {
            for (let i = 0; i < sheetsname_g.length; i++) {
                let name = sheetsname_g[i]
                let sheetitem = `
    <x:excelworksheet>
     <x:name>${name}</x:name>
     <x:worksheetsource href=3d"export/sheet${name}.xml"/>
    </x:excelworksheet>`
                sheets += sheetitem
            }
        }
        mainhtml = `mime-version: 1.0
x-document-type: workbook
content-type: multipart/related; boundary="----memo----"
------memo----
content-location: file:///c:/0e8d990c/export.xml
content-transfer-encoding: quoted-printable
content-type: text/html; charset="us-ascii"
<html xmlns:o=3d"urn:schemas-microsoft-com:office:office"
xmlns:x=3d"urn:schemas-microsoft-com:office:excel"
xmlns=3d"http://www.w3.org/tr/rec-html40">
<head>
<xml>
 <o:documentproperties>
  <o:author>ijovo</o:author>
  <o:lastauthor>ijovo</o:lastauthor>
  <o:company>ijovo</o:company>
  <o:version>1.0</o:version>
 </o:documentproperties>
</xml>
<!--[if gte mso 9]>
<xml>
 <x:excelworkbook>
  <x:excelworksheets>${sheets}
  </x:excelworksheets>
 </x:excelworkbook>
</xml>
<![endif]-->
</head>
</html>` + sheethtml_g + `
------memo------`
        return mainhtml
    }
    // 获取每个sheet的xml代码}
    function getsheetxml() {
        let sheethtml = ''
        let sheets = ''
        for (let i = 0; i < exportarr.length; i++) {
            let name = exportarr[i].name
            // mime要求格式必须顶格……所以这里排版比较乱……
            let sheetitem = `
------memo----
content-location: file:///c:/0e8d990c/export/sheet${name}.xml
content-transfer-encoding: quoted-printable
content-type: text/html; charset="us-ascii"
<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>
    <xml>
      <x:worksheetoptions>
        <x:protectcontents>false</x:protectcontents>
        <x:protectobjects>false</x:protectobjects>
        <x:protectscenarios>false</x:protectscenarios>
      </x:worksheetoptions>
    </xml>
    <style>
      <!-- @page
        {mso-footer-data:"&c\\7b2c &p \\9875\\ff0c\\5171 &n \\9875";
        margin:0.748in 0.195in 0.748in 0.195in;
        mso-header-margin:0.51in;
        mso-footer-margin:0.51in;}
      -->
    </style>
  </head>
  <body>`
            let table = `<table border=0 cellspacing=0 cellpadding=0 width="100%" bordercolor="#000000" style="border-collapse:collapse">${exportarr[i].html}</table>`
            sheetitem += table + `
  </body>
</html>`
            sheets += sheetitem
        }
        sheethtml = sheets
        return sheethtml
    }
}

// 导出表格
function exporttoexcel(sheetname, html) {
    var uri = 'data:application/vnd.ms-excel;base64,';
    var 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><!--[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]-->' +
        ' <style type="text/css">' +
        'table td {' +
        'border: 0.5px solid #000000;' +
        'width: auto;' +
        'height: 25px;' +
        'text-align: center;' +
        'mso-number-format:\@;' +
        'vnd.ms-excel.numberformat:\@;' +
        /* 'background-color: #4f891e;' +*/
        /* 'color: #ffffff;' +*/
        ' }' +
        'table th {' +
        'border: 0.5px solid #000000;' +
        /* 'width: auto;' +*/
        'height: 35px;' +
        'text-align: center;' +
        'font-size:20px' +
        'mso-number-format:\@;' +
        'vnd.ms-excel.numberformat:\@;' +
        ' }' +
        '</style>' +
        '</head><body ><table>{table}</table></body></html>';
    //if (!tableid.nodetype) tableid = document.getelementbyid(tableid);
    //var ctx = { worksheet: sheetname || 'worksheet', table: tableid.innerhtml };
    var ctx = { worksheet: sheetname || 'worksheet', table: html };
    var a = document.createelement("a");
    a.download = sheetname + ".xls";
    a.href = uri + this.excelbase64(this.excelformat(template, ctx));
    document.body.appendchild(a);
    a.click();
    document.body.removechild(a);
}
// excel格式
function excelformat(s, c) {
    return s.replace(/{(\w+)}/g,
        function (m, p) {
            return c[p];
        });
}
// 纯js导出excel
function excelbase64(excelfile) {
    return window.btoa(unescape(encodeuricomponent(excelfile)));
}