LODOP 打印图片和表格

因为项目需要，需要做个打印产品发货明细。
之所以找到这个是因为看了好多大佬的推荐，这个插件不错
以下是官网：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>

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

LODOP 打印图片和表格相关推荐

Lodop打印图片（工作记录）
实现效果:Lodop打印图片,并在图片上添加文字. 工具包:LodopFuncs.js(度娘下载获取) 直接上代码: <!DOCTYPE html> <html><hea ...
vue下使用lodop打印图片
最近项目需要使用web打印机,寻找了一下,发现好多人都在使用lodop这个插件,于是,决定使用这个插件进行图片打印. 1.百度lodop,可以轻松找到这个插件的官网,可以看到许多完整的资料,比如,在线 ...
如何取消浏览器护眼色 Lodop打印图片有窗口颜色的边框
Lodop打印图片出现了边框,然而通常情况下是没有边框的,由于Lodop是基于本机的ie进行解析的,和IE的设置有关. 用户的电脑和习惯千差万别,有人喜欢给浏览器加上护眼色,而这一个行为可能导致Lod ...
ssm lodop打印图片不显示
在打印预览的时候图片就是不显示最终解决方案就是修改过滤器转载于:https://www.cnblogs.com/NCL--/p/11051687.html
使用lodop打印el-table表格无法显示内容，只显示表头的问题
今天使用lodop打印el-table表格,发现只显示表头,而且显示的还不规范,于是一直在测试,最后想到把要打印元素转化为图片就不会造成无法正确显示内容了 1,引入插件 npm install htm ...
LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认 ...
Lodop打印较大的超出纸张的图片
ADD_PRINT_IMAGE打印图片时,如果一个图片过大,超出纸张,默认超出部分是不显示的,也不会分页. 最近遇到有人利用ADD_PRINT_URL打印图片,说图片自动分了多页,因为这个方法一般是用 ...
lodop打印html包含图片,使用lodop.js打印控件打印table并分页等
使用lodop.js打印控件打印table并分页等 import {getLodop} from '@/utils/LodopFuncs.js' //打印表格 export default{ // n ...
html图片打印不出来 lodop_记录Canvas用于LODOP打印的解决过程
工作中遇到用canvas绘制了图片,需要打印出来的需求.由于设备限制遇到了不少奇葩问题.在解决过程中学会了不少知识,在此记录下,希望能对同样遇到此类问题的朋友有所帮助. 将 Canvas 转为 png ...
Lodop打印设计（PRINT_DESIGN）介绍
打印设计(PRINT_DESIGN)界面上方有两栏菜单栏,举例说明(文本框,条码,图形等). (1)第一排最左侧第一个功能,位置移动:控制里面元素微上下左右移动,每次移动一个px. (用于微调,普通调 ...

LODOP 打印图片和表格

LODOP 打印图片和表格相关推荐

最新文章

热门文章