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

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

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

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

题主可以看下 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 里面也可以设置宽度 高度 ,我以前也做过打印的需求,你把这块了解清楚,后面类似的问题都很好解决了
4 个月之前 回复
weixin_40100266
啊良梓是我 这个应该不行,因为我的纸张就是宽80mm的,不过谢谢啊
4 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
window.print打印指定div获取不到内容
-
获取window.print()打印设置中的打印份数
-
使用jquery.qrcode 生成的二维码,使用window.print(); 无法实现打印
-
循环调用window.print打印,想只在第一次显示弹窗,后面的弹窗均不显示
-
window.close()方法在chrome浏览器为何有时有效,有时无效?求具体解法
-
window.open调用没有在浏览器后台显示请求信息
-
通过window.opener给父页面的全局变量赋值无效
-
关于window.open访问chrome://flags
-
chrome 浏览器 window.close没用(求一种能关闭当前网页的方法)
-
最新版的Google浏览器取消了window.showModalDialog方法
-
在浏览器当前页面右键点击“打印”,预览不全。
-
js打印fusioncharts图表
-
ie10下使用window.print()方法打印失败preview.js报错
-
使用window.showModalDialog()在谷歌浏览器中打不开子窗口
-
google浏览器window.onbeforeunload方法兼容问题
-
window.print 在ie7文档模式解析有空白页产生,打印内容多时还会假死?
-
怎么用window.onbeforeunload区分是页面关闭还是刷新,IE和FireFox环境下,跪求大神们
-
在Selenium IED里面导出的.py文件在pycharm运行浏览器调取不了
-
ios 唤醒 app 后自动跳转app store
-
记一道字节跳动的算法面试题
点击蓝色“五分钟学算法”关注我哟加个“星标”,天天中午 12:15,一起学算法作者 | 帅地来源公众号 | 苦逼的码农前几天有个朋友去面试字节跳动,面试官问了他一道链表相...
程序员真是太太太太太有趣了!!!
网络上虽然已经有了很多关于程序员的话题,但大部分人对这个群体还是很陌生。我们在谈论程序员的时候,究竟该聊些什么呢?各位程序员大佬们,请让我听到你们的声音!不管你是前端开发...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
吃人的那些 Java 名词:对象、引用、堆、栈
作为一个有着 8 年 Java 编程经验的 IT 老兵,说起来很惭愧,我被 Java 当中的四五个名词一直困扰着:**对象、引用、堆、栈、堆栈**(栈可同堆栈,因此是四个名词,也是五个名词)。每次我看到这几个名词,都隐隐约约觉得自己在被一只无形的大口慢慢地吞噬,只剩下满地的衣服碎屑(为什么不是骨头,因为骨头也好吃)。
LeetCode解题汇总目录
此篇为LeetCode刷题的汇总目录,方便大家查找,一起刷题,一起PK交流! 已解题目 考点 LeetCode 1. 两数之和(哈希) LeetCode 2. 两数相加(单链表反转) LeetCode 9. 回文数 LeetCode 11. 盛最多水的容器(双指针) LeetCode 15. 三数之和 LeetCode 17. 电话号码的字母组合(回溯...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
不识 Pandas,纵是老手也枉然?
作者 |周志鹏 责编 | 郭 芮 这段时间和一些做数据分析的同学闲聊,我发现数据分析技能入门阶段存在一个普遍性的问题,很多凭着兴趣入坑的同学,都能够很快熟悉Python基础语法,然后不约而同的一头扎进《利用Python进行数据分析》这本经典之中,硬着头皮啃完之后,好像自己什么都会了一点,然而实际操作起来既不知从何操起,又漏洞百出。 至于原因嘛,理解不够,实践不够是两条老牌的拦路...
接班马云的为何是张勇?
上海人、职业经理人、CFO 背景,集齐马云三大不喜欢的张勇怎么就成了阿里接班人? 作者|王琳 本文经授权转载自燃财经(ID:rancaijing) 9月10日,张勇转正了,他由阿里巴巴董事局候任主席正式成为阿里巴巴董事局主席,这也意味着阿里巴巴将正式开启“逍遥子时代”。 从2015年接任CEO开始,张勇已经将阿里巴巴股价拉升了超过200%。但和马云强大的个人光环比,张勇显得尤其...
14 个实用的数据库设计技巧
点击上方“后端技术精选”,选择“置顶公众号”技术文章第一时间送达!作者:echozhjuejin.im/post/5d5b4c6951882569eb570958原始单据...
我在快手认识了 4 位工程师,看到了快速发展的公司和员工如何彼此成就!
作者 | 胡巍巍 出品 | CSDN(ID:CSDNnews) 从西二旗地铁站B口出来,步行700多米可以看到一个工业建筑风格的院子。这个独立的院子和后厂村各大互联网公司的高楼林立有些不同。 院子里有7栋6层高的楼,几栋楼之间打通,可以从A栋自由穿行到F栋。这里就是快手总部。这个园区可以容纳6000多名员工,目前40%以上是研发人员。 这些研发人员维护着快手这款日活超过2亿的ap...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
用Python分析2000款避孕套,得出这些有趣的结论
到现在为止,我们的淘宝教程已经写到了第四篇,前三篇分别是: 第一篇:Python模拟登录淘宝,详细讲解如何使用requests库登录淘宝pc端。 第二篇:淘宝自动登录2.0,新增Cookies序列化,教大家如何将cookies保存起来。 第三篇:Python爬取淘宝商品避孕套,教大家如何爬取淘宝pc端商品信息。 今天,我们来看看淘宝系列的第四篇 我们在上一篇的时候已经将淘宝数据爬取下来了,...
Spring高级技术梳理
Spring高级技术梳理 序言正文SpringDate部分Spring全家桶之SpringData——预科阶段Spring全家桶之SpringData——Spring 整合Hibernate与Hibernate JpaSpring全家桶之SpringData——Spring Data JPASpring全家桶之SpringData——SpringData RedisSpringBoot部分Sp...
如何在Windows中开启"上帝模式"
原文链接 : https://mp.weixin.qq.com/s?__biz=MzIwMjE1MjMyMw==&amp;mid=2650202982&amp;idx=1&amp;sn=2c6c609ce06db1cee81abf2ba797be1b&amp;chksm=8ee1438ab996ca9c2d0cd0f76426e92faa835beef20ae21b537c0867ec2773be...
Docker 零基础从入门到使用
诺!这只可爱的小鲸鱼就是docker了! Docker 是什么? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux 或 Windows 机器上( 摘自百度 )。 Docker 能干什么? 在讲 Docker 能干什么之前,我们不妨先看看没有 Docker 和有Docker分别是个什么样子的? 场景一 某公司需要开发...
再见 Docker,是时候拥抱下一代容器工具了
什么是 Linux 容器?Linux 容器是由 Linux 内核所提供的具有特定隔离功能的进程,Linux 容器技术能够让你对应用及其整个运行时环境(包括全部所需文件)一...
不足20行 python 代码,高效实现 k-means 均值聚类算法
关于 k-means 均值聚类算法的原理介绍、实现代码,网上有很多,但运行效率似乎都有点问题。今天稍微有点空闲,写了一个不足20行的 k-means 均值聚类算法,1万个样本平均耗时20毫秒(10次均值)。同样的数据样本,网上流行的算法平均耗时3000毫秒(10次均值)。差距竟然达百倍以上,令我深感意外,不由得再次向 numpy 献上膝盖!
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
北漂程序员,扬帆起航的地方
随着耳畔传来“你看这碗又大又圆、你看这面又长又宽......碗大宽无影、像儿时的回忆......”听着挺带劲,于是看了一下手机,原来是吴亦凡的作品《大碗宽面》,随着入耳的旋律,脑子也不由自主的想起 10 年前,在平西府吃 5 块钱一大碗牛肉板面的情景。 平西府最有名的就是这个牌坊啦。记得每当有同事问起住哪里?都会自豪的说住在王府里;隔三差五也会邀请朋友去府上坐坐。其实打内心里讲,平西府是一个...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
多线程编程是后台开发人员的基本功
这里先给大家分享一个小故事:在我刚开始参加工作的那年,公司安排我开发一款即时通讯软件(IM,类似于 QQ 聊天软件),在这之前我心里也知道如果多线程操作一个整型值是要加锁...
相关热词 c# 中文ascii c#电话客服 c#开发管理系统实例 c#三个条件判断 c# mvc过滤器 c# 鼠标缩放图像 c# 空间后方交会 c#串口测试应用程序 c# 匹配 正则表达式 c#防止窗体重绘