SoFunction
Updated on 2025-03-03

Detailed explanation of the implementation method of front-end plug-in without plug-in printing and export

Print

Print export distribution page

@model List<Data model class for interface>
@using WingSoft;
@using ;
<style type="text/css">
    .modal-content {
        width: 800px;
    }
    .modal-body {
        height: 400px;
    }
</style>
<script type="text/javascript">
    $(function () {
        if (@== 0) {//Print            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 {//Export (export all data to one excel, in the form of multiple worksheets)            let contentArray = [];
            for (var i = 0; i < $(".boxDiv").length; i++) {
                ({
                    html: $(".boxDiv").eq(i).html(),
                    name: "xx record table" + (i + 1)
                });
            }
            exportToExcelBatch('xx record table',contentArray)
        }
    });
</script>
<div class="modal fade"  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 < ; i++)
                {
                        <div class="boxDiv">
                            <style>
                                .boxDiv table {
                                    width: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                }
                                .printTable {
                                    width: 100%;
                                    font-family: "Songyi";
                                    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 Operating Cost</div>
                            <div style="margin:10px 0">
                                <span>Canteen Name:@Model[i].CanteenName</span>
                                <span style="margin-left:30%">Registration time:@Model[i].ForDate</span>
                            </div>
                            <table class="printTable" border=0 cellspacing=0 cellpadding=0 style="border-collapse:collapse;width:100%;">
                                <thead>
                                    <tr>
                                        <th>Serial number</th>
                                        <th>Cost Name</th>
                                        <th>Cost amount(Yuan)</th>
                                        <th>Remark</th>
                                    </tr>
                                </thead>
                                <tbody style="width:100%;">
                                    @{
                                        int index = 1;
                                    }
                                    @foreach (var item in Model[i].CostItemList)
                                    {
                                        <tr>
                                            <td>@(index++)</td>
                                            <td>@</td>
                                            <td>@</td>
                                            <td>@</td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn2 btn_90_28" data-dismiss="modal">closure</button>
            </div>
        </div>
    </div>
</div>

Print js

// Printfunction printFunc(data) {
    loadStart();
    var iframeHtml = ("iframe");
     = "iframePrintBox";
     = "0";
     = "0";
    (iframeHtml);
     = '<!DOCTYPE html>' + data + "<script type='text\/javascript'> = function(){(); = ()=>{();}}<\/script>";
    loadEnd()
}

Export

// Multisheet exportfunction exportToExcelBatch(sheetName, exportArr) {
    var fileName_g, sheetsName_g, mainHtml_g, sheetHtml_g
    // Export function    sheetsName_g = getSheetsName()  //Get the name collection of each sheet    fileName_g = sheetName + '.xlsx'  //External export name    sheetHtml_g = getSheetXml()     //Get xml fragment of each sheet    mainHtml_g = getMainXml()       //Exported body xml fragment    let XLSData = 'data:application/-excelbase64,' + ((encodeURIComponent(mainHtml_g)))
    // download    download(XLSData)
    // download    function download(base64data) {
        let blob
        if () {
            blob = base64ToBlob(base64data)
            (blob, sheetName + '.xlsx')
            return false
        }
        let a = ("a")
        if () {
            blob = base64ToBlob(base64data)
             = (blob)
             = fileName_g
            ()
            return
        }
         = base64data
         = fileName_g
        ()
    }
    // Get the sheet name    function getSheetsName() {
        let sheetsName = []
        ((item) => {
            ()
        })
        return sheetsName
    }
// Create a file streamfunction base64ToBlob(base64Data) {
    let arr = (',')
    let mime = arr[0].match(/:(.*?)/)[1]
    let bstr = atob(arr[1])
    let n = 
    let u8arr = new Uint8ClampedArray(n)
    while (n--) {
        u8arr[n] = (n)
    }
    return new Blob([u8arr], { type: mime })
}
    /**
  * File download
  * @param {any} url file path
  * @param {any} fileName file name
  */
    function downloadFile(url, fileName) {
        if (!url || !fileName) return false;
        let aUrl = url;
        const x = new XMLHttpRequest();
        ('GET', aUrl, true);
         = 'blob';
         = function (e) {
            const url = ();
            const elink = ('a');
             = url;
             = '_self'; // The current page target opens a new page             = `${fileName}`;
             = 'none';
            (elink);
            ();
            (elink);
        };
        ();
    }
    // Get all xml code    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/
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:///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
    }
    // Get the xml code for each sheet}    function getSheetXml() {
        let sheetHtml = ''
        let sheets = ''
        for (let i = 0; i < ; i++) {
            let name = exportArr[i].name
            // MIME requires that the format must be top-notch... So the layout here is quite messy...            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:///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
    }
}

Single table export

// Export tablefunction exportToExcel(sheetName, html) {
    var uri = 'data:application/-excel;base64,';
    var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
        'xmlns="http:///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:\@;' +
        ':\@;' +
        /* '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:\@;' +
        ':\@;' +
        ' }' +
        '</style>' +
        '</head><body ><table>{table}</table></body></html>';
    //if (!) tableid = (tableid);
    //var ctx = { worksheet: sheetName || 'Worksheet', table:  };
    var ctx = { worksheet: sheetName || 'Worksheet', table: html };
    var a = ("a");
     = sheetName + ".xls";
     = uri + this.excelBase64((template, ctx));
    (a);
    ();
    (a);
}
// Excel formatfunction excelFormat(s, c) {
    return (/{(\w+)}/g,
        function (m, p) {
            return c[p];
        });
}
// Pure js export Excelfunction excelBase64(excelFile) {
    return (unescape(encodeURIComponent(excelFile)));
}

This is the article about the implementation of C# front-end plug-in-free printing and export. For more related C# plug-in-free printing and export content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!