2021-05-08

调用浏览器打印

开发工具与关键技术： MVC
作者：罗培发 
撰写时间：2021.5.8
1、在页面写出浏览器调用的链接
（给它一个按钮）
function Print() {
            //获取下拉框的值
            //var searchText = $("#searchText").val();
            $.ajax({
                //Action(String, String) 使用指定的操作名称和控制器名称生成操作方法的完全限定 URL
                url: '@Url.Action("SupplierPrint", "Supplier")',
                data: null,
                success: function (data) {
                    var popUpWindow = window.open();
                    if (popUpWindow) {
                        //把内容添加到打开窗口中
                        $(popUpWindow.document.body).html(data);
                    } else {
                        layer.alert("浏览器禁用弹出窗口了，请允许弹出窗口");
                    }
                }
            });
        }
注：一定要允许浏览器弹出窗口，不然怎么弄都不会弹出来
2、在控制器查询那个表的数据，


public ActionResult SupplierPrint()
        {
            var list = (from tabSupplier in myModel.S_Supplier
                        join tabSupplierTypeID in myModel.S__SupplierType
                          on tabSupplier.supplierTypeID equals  tabSupplierTypeID.supplierTypeID
join tabSettlementMethodID in myModel.S_SettlementMethod
                          on tabSupplier.settlementMethodID equals tabSettlementMethodID.settlementMethodID
    select new SupplierVo
                        {

supplierID = tabSupplier.supplierID,
supplierName = tabSupplier.supplierName,
supplierTypeID = tabSupplier.supplierTypeID,
supplierTypeName = tabSupplierTypeID.supplierTypeName,
settlementMethodID = tabSupplier.settlementMethodID,
settlementMethodName = tabSettlementMethodID.settlementMethodName,
contactPerson = tabSupplier.contactPerson,
contactNumber = tabSupplier.contactNumber,
initialPayable = tabSupplier.initialPayable,
contactAddress = tabSupplier.contactAddress,
areaName = tabSupplier.areaName,
disabledNo = tabSupplier.disabledNo,
defaultNo = tabSupplier.defaultNo,
remark = tabSupplier.remark
                        });
            注：条件筛选可给可不给，这个没多大的光系
            2、条件筛选
            商品信息（供货商名称、联系人、联系电话、联系地址、供货商类型）
            //if (!string.IsNullOrEmpty(strConditions))
            //{
            //    strConditions = strConditions.Trim();
            //    list = list.Where(o => o.supplierName.Contains(strConditions) ||
            //                      o.contactPerson.Contains(strConditions) || o.contactNumber.Contains(strConditions) || o.contactAddress.Contains(strConditions)||
            //                      o.supplierTypeName.Contains(strConditions));
            //}

            //查询数据
            List<SupplierVo> listSupplier = list.ToList();
            return PartialView(listSupplier);

        }





3、给它写一张表格
@*操作实体*@
@model IEnumerable<SalesManagement.EntityClass.SupplierVo>

第一部分用Css写的样式
<style type="text/css">
    .c {
        width: 100%;
        border: 1px solid green;
        border-collapse: collapse;
    }

        .c th, .c td {
            border-color: #99bce8;
            color: black;
            line-height: 1.8em;
            border: 1px solid #99bce8;
        }

        .c td {
            padding: 2px;
        }

        .c th {
            background: url(../images/skins/default/bg.gif) repeat-x #f4f4f4;
        }

    button {
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }
</style>
<style>
    /* 打印的时候让打印按钮隐藏 */
    @@media only print {
        button {
            display: none;
        }
    }
</style>

第二部分设置她每个格的宽度
<button href="#" onclick="window.print();return false;">打印表格</button>
<table class="c">
    <thead>
        <tr>
            <th width="5%">是否默认</th>
            <th width="5%">是否禁用</th>
            <th width="10%">供应商名称</th>
            <th width="10%">供应商类型</th>
            <th width="5%">联系人</th>
            <th width="10%">联系电话</th>
            <th width="10%">期初付款</th>
            <th width="8%">结算方式</th>
            <th width="17%">所属地区</th>
            <th width="10%">联系地址</th>
            <th width="20%">备注</th>
        </tr>
    </thead>
<tbody>

第三部分查询表的数据
        @foreach (var SupplierVo in Model)
        {
            <tr>
                <td>@(SupplierVo.disabledNo == true ? "是" : "否")</td>
                <td>@(SupplierVo.defaultNo == true ? "是" : "否")</td>
                <td>@SupplierVo.supplierName</td>
                <td>@SupplierVo.supplierTypeName</td>
                <td>@SupplierVo.contactPerson</td>
                <td>@SupplierVo.contactNumber</td>
                <td>@SupplierVo.initialPayable</td>
                <td>@SupplierVo.settlementMethodName</td>
                <td>@SupplierVo.areaName</td>
                <td>@SupplierVo.contactAddress</td>
                <td>@SupplierVo.remark</td>
            </tr>
        }
    </tbody>
</table>

4、最后成果
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021050808041316.png)

 
5、总结

整来说浏览器的打印，不是很难，都是正常的操作，给它写个表就基本完成了，剩下的就是查询数据什么的，调用浏览器的打印比那个水晶报表方便多的多，而且大多时候都会直接调用浏览器打印就可以了，除非是老师要求或者是项目需要，还有就是公司的要求，好了！今天就总结到这里了！下次咋们讲讲水晶报表怎么写，虽然不怎么用的到。