偶然间发现一个不错的纯JS打印模块的WEB在线设计模板,立刻download下来

最新推荐文章于 2025-04-27 15:18:41 发布

kky_112

最新推荐文章于 2025-04-27 15:18:41 发布

阅读量5.2k

点赞数 1

分类专栏： js lodop 文章标签： WEB在线设计打印模板 lodop在线设计模块纯JS无插件

本文链接：https://blog.csdn.net/kky_112/article/details/100555280

版权

首先上界面:

左侧是编辑界面,右侧是选项内容

点保存模板时会将模板信息json话,并发送给服务器.

非常的方便.

使用的时候也很好处理,(以lodop打印插件为例)

1.序列化json字符串.

2.生成打印内容,主要是用json生成主体内容.格式如下,方法自己写

//头部内容
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

//主体内容

"<div class="finalTableBlock" style="width: 734px; height: 96px; left: 0px; top: 99px; position: absolute; z-index: 0; font-size: 10px; font-family: SimHie; font-weight: 700;;height:auto;"><table class="final-table fhddivid556929167905843309986116289table" cellpadding="0" cellspacing="1" style="line-height:18px;background-color: #000;text-align: center;border-spacing: 1px;border-collapse: separate;width: 100%;"><tr><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:28px;">序</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:49px;">图片</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:260px;">商品名称</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:109px;">商品属性</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:119px;">商家编码</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:43px;">重量</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:48px;">单价</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:39px;">小计</th><th style="text-align: center;background-color: #fff;height: 30px;line-height: 30px;width:29px;">数量</th></tr><tr style="background-color:#fff;"><td style="background-color:#fff;height: 26px;word-wrap:break-word;word-break:break-all;">1</td><td style="background-color:#fff;word-wrap:

最低0.47元/天解锁文章