因为项目需要，需要做个打印产品发货明细。
之所以找到这个是因为看了好多大佬的推荐，这个插件不错
以下是官网：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>
以上就是打印的前端页面的代码，非常赞，感谢大佬的分享，让我少走了很多弯路