window.print()打印生成页面 chrome浏览器调用本地打印机,打印出来的效果很差

对比图 右边是word文档打印出来的效果,比左边打印出来的好,怎么解决这种问题?有什么方案吗? 是哪方面出现的问题
图片说明

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

    <head>
        <th:block th:include="include :: header('修改零件编程')" />
        <style type="text/css">
            #printJS-form{
             width:100%;
             }
            .print{
                position: absolute;
                top: 40px;
                left: 40px;
                width: 20%;
            }
            .tab{
                width: 100%;
                border: 2px solid #000;
                margin-bottom: 20px;
                font-size: 14px;
                word-break: break-all;
            }
            .surface input {
                padding-left: 10px;
                width: 80px;
            }
            .orderList .delect{
                font-size: 12px;
                padding:  2px 5px;
                margin: 0;
            }
             .stuff{
                width: 120%;
                margin-left: 0;
                /* padding-left: 4%; */
                font-size: 20px;
            } 
            .stuff .form-group{
                float: left;
                width: 50%;
            }
            .stuffq .form-group{
                float: left;
                width: 100%;
            }
            .stuffq{
                /* padding-left: 4%; */
                margin-left: 0;
                width: 110%;
                font-size: 20px;
            }
            .stuff .form-group input{
                padding-right: 2px;
                padding-left: 5px;
                font-size: 13px;
                width: 90%;
            }
            /* .selectBox{width: 90%;} */
            .surface_Date,.orderList{text-align: center;}
            .orderList{margin-bottom:0;border: none !important;}
            /* .orderList tbody select,.orderList tbody p{width: 75px;height: 27px;line-height: 27px;padding: 0 7px;}
            .orderList tbody input,.orderList tbody .input {
                padding: 0 7px;
                width: 60px;
                height: 27px;
                line-height: 27px;
            } */
            .form-control{height: 30px;line-height: 30px;padding: 0px 7px;margin:0;border: none;font-size: 20px;}
            form .title{
                text-align: center;
                line-height: 45px;
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 20px;
            }
            .control-label{
                height: 30px;
                line-height: 30px;
                padding:0px 0 0 7px !important;
                float:left;
                font-size: 20px;
            }
            .col-sm-3{
                width: 40%;
                text-align: right;
            }
            .col-sm-7{
                float:left;
                width: 60%;
            }
            .col-sm-5{
                float: left;
            }
            .tab>tbody>tr>td,.tab>thead>tr>td{
                padding: 8px;
            }
            .tab>tbody>.gongmian>td{ 
                padding: 4px 6px;
            }
            .tab>tbody>tr>td,.tab>thead>tr>td{ 
                border: 2px solid #000 !important;
            }
            .table{
                border: 1px solid #000;
            }
            .tab >tr >td{
                border: 2px solid #000;
            }
            .orderList>tbody>tr:nth-child(1)>td,.orderList>thead>tr:nth-child(1)>td{
                border-top: none !important;
            }
            .orderList>tbody>tr>td:nth-last-child(1),.orderList>thead>tr>td:nth-last-child(1){
                border-right: none !important;
            }
            .orderList>tbody>tr>td:nth-child(1),.orderList>thead>tr>td:nth-child(1){
                border-left: none !important;
            }
        </style>
    </head>

    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" th:object="${map}" id="printJS-form" >
                <div class="title">
                    <p>CNC加工程式单</p>
                </div>
                <div class="stuffq row">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <span class="control-label">编程员:</span>
                            <!-- <input id="" name="" class="form-control" type="text" disabled style="display:inline-block;"> -->
                            <span class="form-control" th:text="*{programerManName}">dfsdf</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <span class="control-label" style="padding-right:0;" >工程单号:</span>
                            <!-- <input id="" name="" class="form-control" type="text"  disabled style="display:inline-block;"> -->
                            <span class="form-control" th:text="*{orderNo}" ></span>
                        </div>
                    </div>                      
                    <div class="form-group">
                        <div class="col-sm-12">
                            <span class="control-label" style="padding-right:0;">零件编号:</span>
                            <!-- <input  disabled class="form-control" type="text"> -->
                            <span class="form-control" th:text="${componentsNo}"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                                <span class=" control-label" style="padding-right:0;">材料类型:</span>
                            <!-- <input id="" name="" class="form-control" type="text"  disabled style="display:inline-block;"> -->
                            <span class="form-control" th:text="*{material}"></span>
                        </div>
                    </div>
                    <div class="form-group" style="width: 100%;text-align: center;">
                        <div class="col-sm-12">
                            <span class="control-label" style="padding-right:0;">交货日期:</span>
                            <!-- <input type="text" class="form-control" id="time"  disabled placeholder="yyyy-MM-dd HH:mm:ss"> -->
                            <span class="form-control" th:text="*{getoutDay}"></span>
                        </div>
                    </div>
                </div>

                <div class="stuff row">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <label class="control-label" style="padding-right:0;">数量:</label>
                            <span class="form-control" th:text="*{quantity}"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12" style="padding-left:0;">
                            <label class="control-label" style="padding-right:0;">长:</label>
                            <span id="Clength" class="form-control" style="padding-left:5px;"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12" style="padding-left:0;">
                            <label class="control-label" style="padding-right:0;">宽:</label>
                            <span id="width" class="form-control" style="padding-left:5px;"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-8" style="padding-left:0;">
                            <label class="control-label" style="padding-right:0;">高:</label>
                            <span id="height" class="form-control" style="padding-left:5px;"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <!-- <label class="col-sm-0 "></label> -->
                    <div class="col-sm-12">

                        <div id="surface" >


                        </div>

                    </div>
                </div>

                <div class="form-group print">
                    <div class="col-sm-11" onclick="doPrint()" style="text-align:center;">
                        <a class="btn btn-success">打印程式单</a>
                    </div>
                </div>
                <!-- <button type="button" onclick="printJS('printJS-form', 'html')">
                    Print Form
                 </button> -->
            </form>
        </div>


        <div th:include="include::footer"></div>
        <th:block th:include="include :: layout-latest-js" />
        <script src="/bole-erp/src/main/resources/static/js/print.min.js"></script>
        <script th:inline="javascript">
            var editFlag = [[${@permission.hasPermi('bole:componentsProgramerinfo:edit')}]];
            var removeFlag = [[${@permission.hasPermi('bole:componentsProgramerinfo:remove')}]];
            var prefix = ctx + "bole/componentsProgramerinfo";
            var ListData = [];
            var componentsId = [[${componentsId}]];
            var componentsNo = [[${componentsNo}]];

            $(document).ready(function(){
                 getData();
            })

            var jiagongmianNum = 0;
            function getData(){
                $.ajax({
                    url: prefix + "/getData",
                    type:"POST",
                    dataType:"JSON",
                    data:{
                        'componentsId':componentsId
                    },
                    success:function(res){
                        var data = JSON.parse(res.data.data);
                        console.log("res",data);
                        var htmldata = "";
                        $("#Clength").text(res.otherData.componentsLong);
                        $("#height").text(res.otherData.componentsHigh);
                        $("#width").text(res.otherData.componentsWidth);
                        $("#fileName").val(res.otherData.fileName);
                            jiagongmianNum = data.length; 
                            var sort = 1;
                            for(var i = 0;i<data.length;i++){
                                //z值
                                var num = data[i].number;
                                var html = "";
                                //var num=0;
                                //每一个面的刀次
                                if(data[i].list != null && data[i].list != undefined){
                                    var sort2 = sort;
                                    for(var j=0;j<data[i].list.length;j++){
                                        var knife = data[i].list[j].knife;
                                        var blade = data[i].list[j].blade;
                                        var clip = data[i].list[j].clip;
                                        //num++;
                                        if(j == data[i].list.length -1){
                                            sort = sort + data[i].list.length;
                                        }

                                        html+=`<tr>
                                            <td>${componentsNo+sort2}</td>
                                            <td>
                                                ${data[i].list[j].specs}
                                            </td>
                                            <td>
                                                ${data[i].list[j].material}
                                            </td>
                                            <td>
                                                ${data[i].list[j].type}
                                            </td>
                                            <td>
                                                ${data[i].list[j].knife}
                                            </td>
                                            <td>
                                                ${data[i].list[j].blade}
                                            </td>
                                            <td>
                                                ${data[i].list[j].avoid}
                                            </td>
                                            <td>
                                                ${data[i].list[j].clip}
                                            </td>
                                            <td style="width:150px;">
                                                ${data[i].list[j].remark}
                                            </td>
                                        </tr>`;
                                        sort2 +=1;
                                    }
                                    //console.log("num:"+num)
                                    htmldata += `<table class="tab surface surface_Date">
                                        <tr class="surface_list gongmian">
                                            <td rowspan="3" style="font-weight: bold;font-size: 20px;">${i+1}</td>
                                            <td rowspan="3" style="text-align: center;">
                                                加工面
                                            </td>
                                            <td rowspan="3">工件原点</td>
                                            <td>X:</td>
                                            <td>
                                                ${data[i].Xselect}
                                            </td>
                                        </tr>
                                        <tr class="gongmian">
                                            <td>Y:</td>
                                            <td>
                                                ${data[i].Yselect}
                                            </td>
                                        </tr>
                                        <tr class="gongmian">
                                            <td>Z:</td>
                                            <td>
                                                ${data[i].Zvalue}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" style="text-align: left;padding:0;border: none !important;">
                                                <div class="addOrderList">
                                                    <table class="tab surface orderList" >
                                                        <thead><tr>
                                                            <td>刀号</td>
                                                            <td>刀具规格</td>
                                                            <td>材質</td>
                                                            <td>類型</td>
                                                            <td>刀补</td>
                                                            <td>刃長</td>
                                                            <td>避空</td>
                                                            <td>夾长</td>
                                                            <td>备      注</td>
                                                        </tr></thead>
                                                        <tbody>${html}</tbody>
                                                    </table>
                                                </div>                              
                                            </td>
                                        </tr>
                                    </table>`
                                    $("#surface").html(htmldata);

                                }
                            }
                        }

                });
            }



            function submitHandler() {

                // if ($.validate.form()) {
                //  // $.operate.save(prefix + "/edit", $('#form-componentsProgramerinfo-edit').serialize());
                // }
                console.log("ListData",ListData);
                var config = {
                    url: prefix + "/saveData",
                    type: "post",
                    dataType: "json",
                    data: {
                        "componentsId": componentsId,
                        "ListData": JSON.stringify(ListData)
                    },
                    beforeSend: function () {
                        $.modal.loading("正在处理中,请稍后...");
                        $.modal.disable();
                    },
                    success: function(result) {
                        console.log('result',result);
                        if(result != null && result != undefined){
                            for(var i=0;i<result.length;i++){
                                console.log(result[i]);
                                console.log(result[i].list[1]);
                            }
                        }
                        if (typeof callback == "function") {
                            callback(result);   
                        }
                        $.operate.successCallback(result);
                    }
                };
                $.ajax(config);
            }


            function doPrint() {
                bdhtml=window.document.body.innerHTML;
                $(".print").css({"display":"none"})
                // document.getElementsByTagName('body')[0].style.width="100%";
                // document.getElementsByTagName('body')[0].style.zoom=0.4;
                window.print();
                $(".print").css({"display":"block"});
                // document.getElementsByTagName('body')[0].style.zoom=1;
                // document.getElementsByTagName('body')[0].style.width="90%";
            }


        </script>
    </body>

</html>

4个回答

我用的是lodop 打印 参考 http://www.lodop.net/demolist/PrintSampIndex.html

qq_36442647
qq_36442647 回复啊良梓是我: 打印内容可以随意控制,先设置好内容长度,再打印
大约一年之前 回复
weixin_40100266
啊良梓是我 这个lodop真的好好用哦 ,我有一个问题,他打印出来的不会自动根据内容长度进行裁剪的,这个怎么搞,然后我采纳这个答案了,谢谢啊
大约一年之前 回复

Chrome的打印确实太不好用的。我是问题是,打印一个比A4纸小的pdf文件时,打出来总在左上角,无法居中。。。最后还是文件下载下来用WPS打印才弄好的。。。这点不如IE。
试试加一个这个代码
html {
display: flex;
justify-content: center;
width:100%;
}

效果很差的原因是,你以图像的方式在输出文字,而小票打印机的分辨率比较差,就会出现文字比较虚。需要用activex的方式调用本地代码,用esc/pos指令输出,调用打印机的硬字库。这样才能得到比较好的效果。

weixin_40100266
啊良梓是我 有详细一点的介绍吗?或者链接 我看一下
大约一年之前 回复

题主可以看下 css

@media print

@page

的样式规则

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}
uk_51
风不二 回复啊良梓是我: 都可以设置 @page 里面也可以设置宽度 高度 ,我以前也做过打印的需求,你把这块了解清楚,后面类似的问题都很好解决了
大约一年之前 回复
weixin_40100266
啊良梓是我 这个应该不行,因为我的纸张就是宽80mm的,不过谢谢啊
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐