利用jquery.print.js实现html打印

最新推荐文章于 2025-05-22 14:08:03 发布
转载 最新推荐文章于 2025-05-22 14:08:03 发布 · 724 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/matt0614/blog/865088
文章标签：

#javascript #c# #python #ViewUI

本文分享了一个使用纯手工编写的HTML表格案例，该表格用于种子扦样单，详细展示了如何设置表格样式、列宽以及如何确保表格内容在A4纸上的适配性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

table表格是纯手工编写，当然也可以用其他工具把word文件转换问html标签，不过自己感觉还是自己动手写表格样式比较稳点，就是很费时间。

关于表格各列的宽度，应该已最大列数宽度来控制Ａ４纸张大小，不然很容易出现超出打印范围。

不说了，贴代码．．．．

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扦样单</title>
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jQuery.print/1.5.1/jQuery.print.js"></script>
    <style>
        table {
            text-align: center;
            border-collapse: collapse; /* 边框合并属性  */
            table-layout: fixed;
            margin: 0px;
            padding: 0px;
            /*word-wrap:break-word;*/
            /*word-break:break-all;*/
            /*padding: 0px 0px;*/
            /*margin: 0px 0px;*/
        }

        th {
            border: 1px solid #666666;
        }

        td {
            border: 1px solid #666666;
            padding: 0px;
            margin: 0px;
            word-wrap: break-word;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#print").click(function(){
                $(".page").print({
                    append: $('.page2').html()
                });
            })
        });
    </script>
</head>
<body>
<div><button id="print">打印</button></div>
<div class="page" style="width: 210mm;height: 297mm;margin: 0 auto;">
    <div style="width: 200mm;height: 100%;margin: 0 auto;float: left;">
        <form>
        <h1 style="text-align: center;">扦样单</h1>
        <p style="text-align: right;margin-right: 200px;margin-bottom: 1px;width: 90%;">
            编号:兴-1
        </p>
        <table>
            <tr>
                <!--style="width: 198.5px;"-->
                <!--style="width: 198.5px;"-->
                <!--style="width: 198.5px;"-->
                <td colspan="2">任务来源</td>
                <td colspan="2"></td>
                <td colspan="2">任务类别</td>
                <td>

                </td>
            </tr>
            <tr>
                <td rowspan="8" style="width: 73px;margin: 0px auto;">
                    <div style="width: 10px;margin: 0 auto;">被抽查单位</div>
                </td>
                <td>名称</td>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td>通讯地址</td>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td>注册地址</td>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td>法定代表人</td>
                <td colspan="2"></td>
                <td colspan="2">邮政编码</td>
                <td>2</td>
            </tr>
            <tr>
                <td rowspan="2">联系人</td>
                <td rowspan="2" colspan="2"></td>
                <td rowspan="2">联系电话</td>
                <td>固定</td>
                <td>139*******</td>
            </tr>
            <tr>
                <td>移动</td>
                <td>188*******</td>
            </tr>
            <tr>
                <td>统一社会信用代码</td>
                <td colspan="2"></td>
                <td>传真/E-mail</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td style="width: 153px;">生产经营许可证编号(备案流水号)</td>
                <td style="width: 122px;">1</td>
                <td style="width: 80px;">发证单位</td>
                <td style="width: 108px;"></td>
                <td style="width: 82px;">经营类型</td>
                <td style="width: 113px;"></td>
            </tr>
            <tr>
                <td rowspan="5">种子经营生产者(进口商或分装单位)信息</td>
                <td>名称</td>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td>通讯地址</td>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td>传真/E-mail</td>
                <td colspan="2"></td>
                <td colspan="2">邮政编码</td>
                <td>2</td>
            </tr>
            <tr>
                <td>注册地址</td>
                <td colspan="2"></td>
                <td rowspan="2">联系电话</td>
                <td>固定</td>
                <td></td>
            </tr>
            <tr>
                <td>生产经营许可证编号</td>
                <td colspan="2"></td>
                <td>移动</td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="13">受检产品信息</td>
                <td>作物种类</td>
                <td colspan="2"></td>
                <td colspan="2">种子类别</td>
                <td></td>
            </tr>
            <tr>
                <td>品种名称及组合</td>
                <td colspan="2"></td>
                <td colspan="2">种子批号</td>
                <td></td>
            </tr>
            <tr>
                <td>包装类型及净含量</td>
                <td colspan="2"></td>
                <td colspan="2">单元识别码</td>
                <td></td>
            </tr>
            <tr>
                <td>包装物密封状态</td>
                <td colspan="2"></td>
                <td colspan="2">商标</td>
                <td></td>
            </tr>
            <tr>
                <td>扦样数量（g）</td>
                <td colspan="2"></td>
                <td colspan="2">种子批重（kg）</td>
                <td></td>
            </tr>
            <tr>
                <td>扦样地点</td>
                <td colspan="2"></td>
                <td colspan="2">扦样方式</td>
                <td></td>
            </tr>
            <tr>
                <td>品种审定编号</td>
                <td colspan="2"></td>
                <td colspan="2">检疫证明编号</td>
                <td></td>
            </tr>
            <tr>
                <td>检测日期</td>
                <td colspan="2"></td>
                <td colspan="2">质量保证期</td>
                <td></td>
            </tr>
            <tr>
                <td>进口种子审批文号</td>
                <td colspan="2"></td>
                <td colspan="2">引种备案公告文号</td>
                <td></td>
            </tr>
            <tr>
                <td>种子批化学处理</td>
                <td colspan="2"></td>
                <td colspan="2">警示标志</td>
                <td>有( )无( )</td>
            </tr>
            <tr>
                <td colspan="6">质量指标标注值</td>
            </tr>
            <tr>
                <td>净度（%）</td>
                <td colspan="2">发芽率（%）</td>
                <td colspan="2">纯度（%）</td>
                <td>水分（%）</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">是否标注转基因标识</td>
                <td colspan="2">是（ ） 否（ ）</td>
                <td colspan="2">安全证书编号</td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="4">扦样单位</td>
                <td>名称</td>
                <td colspan="5">美国加利福尼亚</td>
            </tr>
            <tr>
                <td>地址</td>
                <td colspan="5">美国加利福尼亚220号</td>
            </tr>
            <tr>
                <td>联系人</td>
                <td colspan="2"></td>
                <td colspan="2">联系电话</td>
                <td>010-50*****</td>
            </tr>
            <tr>
                <td>邮政编码</td>
                <td colspan="2">65****4</td>
                <td colspan="2">传真/E-mail</td>
                <td>022-56****5</td>
            </tr>
            <tr>
                <td rowspan="2">检测项目依据</td>
                <td colspan="6">净度___发芽率___纯度___水分___其它___</td>
            </tr>
            <tr>
                <td colspan="6">检验依据：GB/T 3543.1～7-1995等 判定依据：GB 20464-2006等</td>
            </tr>
            <tr>
                <td colspan="7" style="text-align: left;text-indent: 1.5em;">备注（需要说明的其他问题）:</td>
            </tr>
            <tr>
                <td colspan="4" style="height: 100%;text-align: left;padding-left: 10px;">
                    <p>本次扦样始终在本人陪同下完成，上述记录核对无误。</p>
                    <p><span>经手人：</span> <span style="margin-left: 240px;">职务</span></p>
                    <p>年 月 日 （盖章）</p>
                </td>
                <td colspan="3" style="text-align: left;padding-left: 10px;">
                    <p>扦样人（签名）：</p>
                    <p>扦样单位（公章）</p>
                    <p>扦样日期 年 月 日</p>
                </td>
            </tr>

        </table>
        </form>
        <p style="text-align: center;">扦样单一式三份，承检机构和被抽查单位各存留一份，报下达任务的农业政主管部门一份。</p>
    </div>
    <div style="width: 4mm;height:167mm;float: left;padding-top: 130mm;text-align: right;">
        第一联<div style="width: 5mm;height:5mm;"></div>种子管理站
    </div>
</div>

<div class="page2" style="width: 210mm;height: 297mm;margin: 0 auto;">
    <div style="width: 200mm;height: 100%;margin: 0 auto;float: left;">
        <form>
            <h1 style="text-align: center;">扦样单</h1>
            <p style="text-align: right;margin-right: 200px;margin-bottom: 1px;width: 90%;">
                编号:兴-1
            </p>
            <table>
                <tr>
                    <!--style="width: 198.5px;"-->
                    <!--style="width: 198.5px;"-->
                    <!--style="width: 198.5px;"-->
                    <td colspan="2">任务来源</td>
                    <td colspan="2"></td>
                    <td colspan="2">任务类别</td>
                    <td>

                    </td>
                </tr>
                <tr>
                    <td rowspan="8" style="width: 73px;margin: 0px auto;">
                        <div style="width: 10px;margin: 0 auto;">被抽查单位</div>
                    </td>
                    <td>名称</td>
                    <td colspan="5"></td>
                </tr>
                <tr>
                    <td>通讯地址</td>
                    <td colspan="5"></td>
                </tr>
                <tr>
                    <td>注册地址</td>
                    <td colspan="5"></td>
                </tr>
                <tr>
                    <td>法定代表人</td>
                    <td colspan="2"></td>
                    <td colspan="2">邮政编码</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td rowspan="2">联系人</td>
                    <td rowspan="2" colspan="2"></td>
                    <td rowspan="2">联系电话</td>
                    <td>固定</td>
                    <td>139*******</td>
                </tr>
                <tr>
                    <td>移动</td>
                    <td>188*******</td>
                </tr>
                <tr>
                    <td>统一社会信用代码</td>
                    <td colspan="2"></td>
                    <td>传真/E-mail</td>
                    <td colspan="2"></td>
                </tr>
                <tr>
                    <td style="width: 153px;">生产经营许可证编号(备案流水号)</td>
                    <td style="width: 122px;">1</td>
                    <td style="width: 80px;">发证单位</td>
                    <td style="width: 108px;"></td>
                    <td style="width: 82px;">经营类型</td>
                    <td style="width: 113px;"></td>
                </tr>
                <tr>
                    <td rowspan="5">种子经营生产者(进口商或分装单位)信息</td>
                    <td>名称</td>
                    <td colspan="5"></td>
                </tr>
                <tr>
                    <td>通讯地址</td>
                    <td colspan="5"></td>
                </tr>
                <tr>
                    <td>传真/E-mail</td>
                    <td colspan="2"></td>
                    <td colspan="2">邮政编码</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>注册地址</td>
                    <td colspan="2"></td>
                    <td rowspan="2">联系电话</td>
                    <td>固定</td>
                    <td></td>
                </tr>
                <tr>
                    <td>生产经营许可证编号</td>
                    <td colspan="2"></td>
                    <td>移动</td>
                    <td></td>
                </tr>
                <tr>
                    <td rowspan="13">受检产品信息</td>
                    <td>作物种类</td>
                    <td colspan="2"></td>
                    <td colspan="2">种子类别</td>
                    <td></td>
                </tr>
                <tr>
                    <td>品种名称及组合</td>
                    <td colspan="2"></td>
                    <td colspan="2">种子批号</td>
                    <td></td>
                </tr>
                <tr>
                    <td>包装类型及净含量</td>
                    <td colspan="2"></td>
                    <td colspan="2">单元识别码</td>
                    <td></td>
                </tr>
                <tr>
                    <td>包装物密封状态</td>
                    <td colspan="2"></td>
                    <td colspan="2">商标</td>
                    <td></td>
                </tr>
                <tr>
                    <td>扦样数量（g）</td>
                    <td colspan="2"></td>
                    <td colspan="2">种子批重（kg）</td>
                    <td></td>
                </tr>
                <tr>
                    <td>扦样地点</td>
                    <td colspan="2"></td>
                    <td colspan="2">扦样方式</td>
                    <td></td>
                </tr>
                <tr>
                    <td>品种审定编号</td>
                    <td colspan="2"></td>
                    <td colspan="2">检疫证明编号</td>
                    <td></td>
                </tr>
                <tr>
                    <td>检测日期</td>
                    <td colspan="2"></td>
                    <td colspan="2">质量保证期</td>
                    <td></td>
                </tr>
                <tr>
                    <td>进口种子审批文号</td>
                    <td colspan="2"></td>
                    <td colspan="2">引种备案公告文号</td>
                    <td></td>
                </tr>
                <tr>
                    <td>种子批化学处理</td>
                    <td colspan="2"></td>
                    <td colspan="2">警示标志</td>
                    <td>有( )无( )</td>
                </tr>
                <tr>
                    <td colspan="6">质量指标标注值</td>
                </tr>
                <tr>
                    <td>净度（%）</td>
                    <td colspan="2">发芽率（%）</td>
                    <td colspan="2">纯度（%）</td>
                    <td>水分（%）</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td colspan="2"></td>
                    <td colspan="2"></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="2">是否标注转基因标识</td>
                    <td colspan="2">是（ ） 否（ ）</td>
                    <td colspan="2">安全证书编号</td>
                    <td></td>
                </tr>
                <tr>
                    <td rowspan="4">扦样单位</td>
                    <td>名称</td>
                    <td colspan="5">美国加利福尼亚</td>
                </tr>
                <tr>
                    <td>地址</td>
                    <td colspan="5">美国加利福尼亚220号</td>
                </tr>
                <tr>
                    <td>联系人</td>
                    <td colspan="2"></td>
                    <td colspan="2">联系电话</td>
                    <td>010-50*****</td>
                </tr>
                <tr>
                    <td>邮政编码</td>
                    <td colspan="2">65****4</td>
                    <td colspan="2">传真/E-mail</td>
                    <td>022-56****5</td>
                </tr>
                <tr>
                    <td rowspan="2">检测项目依据</td>
                    <td colspan="6">净度___发芽率___纯度___水分___其它___</td>
                </tr>
                <tr>
                    <td colspan="6">检验依据：GB/T 3543.1～7-1995等 判定依据：GB 20464-2006等</td>
                </tr>
                <tr>
                    <td colspan="7" style="text-align: left;text-indent: 1.5em;">备注（需要说明的其他问题）:</td>
                </tr>
                <tr>
                    <td colspan="4" style="height: 100%;text-align: left;padding-left: 10px;">
                        <p>本次扦样始终在本人陪同下完成，上述记录核对无误。</p>
                        <p><span>经手人：</span> <span style="margin-left: 240px;">职务</span></p>
                        <p>年 月 日 （盖章）</p>
                    </td>
                    <td colspan="3" style="text-align: left;padding-left: 10px;">
                        <p>扦样人（签名）：</p>
                        <p>扦样单位（公章）</p>
                        <p>扦样日期 年 月 日</p>
                    </td>
                </tr>

            </table>
        </form>
        <p style="text-align: center;">扦样单一式三份，承检机构和被抽查单位各存留一份，报下达任务的农业政主管部门一份。</p>
    </div>
    <div style="width: 4mm;height:167mm;float: left;padding-top: 130mm;text-align: right;">
        第二联<div style="width: 5mm;height:5mm;"></div>客户
    </div>
</div>
</body>
</html>

 

转载于:https://my.oschina.net/matt0614/blog/865088

jquery.print.js
09-18
这个插件是基于jquery-print.js进行了我自己的改造，用来打印canvas中的内容。
JavaScript 打印控件
weixin_30596023的博客
11-24 108
JavaScript 打印控件 github地址 https://github.com/DoersGuild/jQuery.print 使用前需要引入jQuery $("#mapDiv").print({ globalStyles:true,//是否包含父文档的样式，默认为true mediaPrint:false,//是否包含media='print'...
使用print-js打印，字体大小font-size不生效问题
最新发布
qq_43493845的博客
05-22 186
大部分情况打印字体都是不等大的吧，这个print.js纯纯牛马。它把font-size写死了，注掉font-size就可以。找到node_mouders目录下print-js的源码。print.js 206行代码。
vue 使用print-js 打印html页面
热门推荐
weixin_36965072的博客
07-24 1万+
Print.js 官网 官网 优点：可以打印多种格式的内容（pdf、json、html等） 打印json时可以添加表头。打印html页时可以继承原有页面的样式，局部打印，过滤掉要打印的元素，及其方便。 一、vue安装命令： npm install print-js --save 二、引入 这个引入不需要在main.js中，直接在使用的.vue中引入即可 这里颜色虽然是灰色，但是也要添加，否则会报错。 三、编码 我这里要打印 html 中的div ，调用函数找到 div 的 id。 ![.](https:
Vue 使用print-js 打印html页面
一路向东的博客
09-16 4477
Vue 使用print-js 打印html页面 Print.js 官网 官网 优点：可以打印多种格式的内容（pdf、json、html等） 打印json时可以添加表头。打印html页时可以继承原有页面的样式，局部打印，过滤掉要打印的元素，及其方便 一、vue安装命令： npm install print-js --save 二、引入 vue 页面引用 这个引入不需要在main.js中，直接在使用的.vue中引入即可 用法 全局引用 import 'print-js' 页面直接使用,如果开了eslin
简单易用的JQuery网页内容打印插件——jQuery.print.js
zgphacker2010的专栏
08-19 2321
1.官方网址 下载jQuery.print.js、配置参数介绍、官方Demo 2. 简介： jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件。该网页打印插件可以打印指定区域的网页元素，可以指定跳过不打印某些元素，还可以打印整个页面内容。并且提供了丰富的打印参数设置。 3. 浏览器兼容性： Google Chrome - v 20, 26, 48, 55 ...
jQuery.print实现jqprint打印程序
02-13
本文将深入探讨如何利用HTML5、CSS3、JavaScript以及jQuery实现`jqprint`打印程序。 首先，我们需要理解HTML5和CSS3在打印中的作用。HTML5是现代网页的基础，提供了更丰富的标签和API，使得开发者可以创建更具交互...
jQuery.print实现打印（导出）Html页面
11-16
- 如果需要服务器端控制打印，可以利用PHP、Node.js等后端技术配合前端实现。 综上所述，jQuery.print是一个实用的工具，可以帮助开发者简化网页内容的打印和导出过程。通过合理的HTML结构、CSS样式和JavaScript...
利用jQuery.print插件轻松实现HTML页面打印功能
### 知识点：jQuery.print 实现打印（导出）Html页面 #### jQuery.print插件简介 jQuery.print是一个非常实用的jQuery插件，它能够帮助用户轻松实现HTML页面内容的打印功能。通过该插件，可以将网页中的特定元素...
jquery.PrintArea.js实现打印发货单功能
02-21
本文将详细介绍如何利用jQuery插件`jquery.PrintArea.js`实现这样的功能，以及涉及到的相关技术点。 首先，`jquery.PrintArea.js`是一个jQuery插件，它允许用户选择页面上的特定区域进行打印，避免了整个网页内容被...
jquery.jqprint-0.3.js
08-21
《jQuery的jqPrint插件详解及其在网页打印中的应用》 在Web开发中，实现页面内容的打印功能是一项...在实际项目中，结合合理的HTML结构、CSS样式以及JavaScript逻辑，我们可以利用`jqPrint`实现高效、美观的打印效果。
jQuery打印插件----jQuery.print.js
11-14
jQuery打印插件----jQuery.print.js实现网页的打印功能，亲测有效
jQueryPrint.js打印网页
05-22
jQueryPrint.js打印网页JS，很好用，可以指定打印网页上特定的资源！
jquery.print.js打印
nicexibeidage的博客
12-12 994
&lt;script src="${basePath!}/js/jQuery.print.js"&gt;&lt;/script&gt; 思想就是：先转成图片，在打印，省得会有页面乱掉的问题， function toImg(fn){ var copyDom = $("#first");// 这个dom元素是要导出pdf的div容器 var width = copyDom.widt...
使用jQuery.print.js打印
chaolyu的博客
10-12 1万+
需要的类：jquery，jquery.print.js html> head> print test head> body> input id="print_text_input" type="text"> input type="button" value="打印" onclick="print()"> sc
JS 打印指定html内容（带样式,不弹框）
CoolDog_1的博客
07-04 1241
【代码】JS 打印指定html内容（带样式,不弹框）
vue 打印某个区域的HTML【print-js】
社会底层无业大学生
10-20 1534
我要打印一个表格出来，样子如下，点击打印就把这个表格打印出来。
Jquery插件jqprint-0.3.js实现打印
bai0101的专栏
03-30 651
1、首先引用Jquery和jqprint-0.3.js(依赖于Jquery的） <script language="javascript" src="jquery-1.4.4.min.js"> </script> <script language="javascript" src="jquery.jqprint-0.3.js"><...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值