LODOP 打印图片和表格

最新推荐文章于 2024-06-06 16:23:45 发布

原子一式

最新推荐文章于 2024-06-06 16:23:45 发布

阅读量3.7k

点赞数

文章标签： html5 jquery

本文链接：https://blog.csdn.net/u014177484/article/details/109115022

版权

因为项目需要，需要做个打印产品发货明细。
之所以找到这个是因为看了好多大佬的推荐，这个插件不错
以下是官网：http://www.c-lodop.com/LodopDemo.html
一开始在官网找了好久，发现没有图片和表格一起打印的，就自己去试试
领导给我的是一个excel，里面放了大概是这样的
在这里插入图片描述

当然图片不是这个，为了隐私问题，特意找了自己的账号截图
思路：
1.我没有去找相关找打印excel的是因为我要往表格动态填数据非常麻烦【其实也不是很麻烦】，我就想到，把这个excel的模板弄成网页，用table展示就行了
2.对比打印的属性[https://www.cnblogs.com/huaxie/p/10212656.html]
ADD_PRINT_TABLE 特点：不切行，只能输出一个table，嵌套复杂等表格不行。
当某一行高超过打印项高度时，不会按照打印项高度分页，不切行，而是输出整个行，行跨页隐藏后面的内容，不会分到下一页。
如图-----达到了纸张的最下方，下面既没有表格线，后面的内容也没有分到下一页，该超大行后面的内容相当于不打印隐藏了。

ADD_PRINT_HTM特点：切行没切字，补充了表格线，该超大行分页后成了多行。
如图-----基本按照打印设计打印项高度分页，只是打印设计里高度在最后一句，打印设计设计的高度是稍稍小于该文字的，但是ADD_PRINT_HTM没有切字，而是把最后一行字显示全了，并且该大行分页后补全了表格线，本来是两行三列的表格，补完横线后，看起来是两行变成了四行，切行的都补了线。

ADD_PRINT_HTML特点：切行切字，不补表格线，类似截图，把内容当图截了。

我自己也去对比测试了，我最后选用了ADD_PRINT_HTM

遇到的坑：
1.因为我公司的打印机有两个几盒，对应的纸盒纸张不一样，一开始打印的时候，老是不对劲，因为默认选择纸盒1，纸盒1的纸张不是A4。
调整 LODOP.PRINT_DEFAULTSOURCE = 7;7表示自动选择
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, “A4”); //1竖版 2横版 A4纸是横版还是竖版打印
2.调整纸张位置
LODOP.ADD_PRINT_HTM(0, 0, ‘100%’, ‘100%’, document.getElementById(“tableJY”).innerHTML);

<!DOCTYPE html>
<html lang="zh-cn"">

<head>
  <meta charset=" UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>寄样清单</title>
<style>
  .table-box {
    display: inline-block;
  }

  .table-body table {
    width: 100%;
  }

  td {
    max-width: 300px;
    text-align: center;
  }
</style>
</head>

<body>
  <div class="table-box">
    <div class="table-header">
      <img src="./img/img_header.png">
    </div>
    <div class="table-body">
      <h2 style="text-align: center; border-top: 2px solid black;padding-top: 10px;">寄样清单</h2>
      <table cellspacing="15">
        <tr>
          <th>客户名称：</th>
          <td>庄严贸易有限公司</td>
          <th>联系人：</th>
          <td>牛女士</td>
          <th>寄样日期：</th>
          <td>2020/9/13</td>
        </tr>
        <tr>
          <th>客户地址：</th>
          <td>广东省广州市白云区YH城</td>
          <th>联系电话：</th>
          <td>18326913045</td>
          <th>是否收费：</th>
          <td>否</td>
        </tr>
      </table>
      <table border="1" cellspacing="0">
        <tr>
          <th>序号</th>
          <th>系列名称</th>
          <th>属性</th>
          <th>规格</th>
          <th>配方编码</th>
          <th>数量</th>
          <th>功效简介</th>
        </tr>
        <tr>
          <td>1</td>
          <td>微雕紧塑逆龄方案</td>
          <td>冻干类</td>
          <td>40mg×10/板</td>
          <td>VS-07</td>
          <td>1</td>
          <td>7天明显见效！全方位淡纹、紧致、实现逆龄养护！
            紧致嫩肤效果明显！</td>
        </tr>
        <tr>
          <td>2</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <table cellspacing="15">
        <tr>
          <td style="text-align: left;">总办：</td>
          <td style="text-align: left;">财务：</td>
          <td style="text-align: left;">业务：</td>
        </tr>
      </table>
    </div>
  </div>

</body>
 <script>

              var LODOP; //声明为全局变量 

            function prn2_preview() {
                LODOP = getLodop();
                LODOP.PRINT_INIT("");

                LODOP.PRINT_DEFAULTSOURCE = 7;//选择打印机的纸盒
                LODOP.PRINT_INITA(0, 0, '100%', '100%', "");
                LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); //A4纸 1竖版 2横版 
                LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', document.getElementById("tableJY").innerHTML);
                LODOP.PRINT_DESIGN();
                // LODOP.PRINTA();
                //LODOP.PREVIEW();    
            };
            
        </script> 
</html>

以上就是打印的前端页面的代码，非常赞，感谢大佬的分享，让我少走了很多弯路

原子一式

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
LODOP 打印图片和表格

因为项目需要，需要做个打印产品发货明细。之所以找到这个是因为看了好多大佬的推荐，这个插件不错以下是官网：http://www.c-lodop.com/LodopDemo.html一开始在官网找了好久，发现没有图片和表格一起打印的，就自己去试试领导给我的是一个excel，里面放了大概是这样的当然图片不是这个，为了隐私问题，特意找了自己的账号截图思路：1.我没有去找相关找打印excel的是因为我要往表格动态填数据非常麻烦【其实也不是很麻烦】，我就想到，把这个excel的模板弄成网页，用table
复制链接

扫一扫