html 不规则表格A4纸、html A4纸样式、毫米像素相互转换

已于 2024-01-31 16:08:30 修改
阅读量2.5k 收藏 7
点赞数 1
分类专栏： 插件和其他 Html+Css+Js 文章标签： A4纸
于 2019-09-18 14:24:50 首次发布
原文链接：https://www.jianshu.com/p/ae843652a021
版权

https://www.jianshu.com/p/ae843652a021

H5 table表格案例、边距 解析（表格带有滚动条）_h5 table-layout-CSDN博客

html表格解析_iview table 如何解些html代码-CSDN博客

A4打印时宽高mm对应像素px

A4纸大小：210mm*297mm

对应的像素：794px*1123px

所以 1mm = 3.78px

1、A4纸的尺寸是210mm×297mm， 当你设定的分辨率是72像素/英寸时，A4纸的尺寸的图像的像素是595×842， 当你设定的分辨率是150像素/英寸时，A4纸的尺寸的图像的像素是1240×1754， 当你设定的分辨率是300像素/英寸时，A4纸的尺寸的图像的像素是2479×3508， 你选择不同的分辨率，图像像素大小也随之变化。

2、别忘了1英寸=25.4毫米。

html A4纸样式

代码如下↓ 

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
			body {
				margin: 0;
				padding: 0;
				background-color: #FAFAFA;
				font: 12pt "Tahoma";
			}

			* {
				box-sizing: border-box;
				-moz-box-sizing: border-box;
			}

			.page {
				width: 21cm;
				min-height: 29.7cm;
				padding: 0.5cm;
				margin: 1cm auto;
				border: 1px #D3D3D3 solid;
				border-radius: 5px;
				background: white;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			}

			.subpage {
				/*padding: 1cm;*/
				/*border: 5px red solid;*/
				height: 256mm;
				/*outline: 2cm #FFEAEA solid;*/
			}

			.p1 {
				font-size: 20px;

			}

			@page {
				size: A4;
				margin: 0;
			}

			@media print {
				.page {
					margin: 0;
					border: initial;
					border-radius: initial;
					width: initial;
					min-height: initial;
					box-shadow: initial;
					background: initial;
					page-break-after: always;
				}
			}
		</style>
	</head>
	<body>
		<div class="page">
				<div class="subpage">
					<h1 style="text-align:center">这是一张A4纸在网页上的体现</h1>
					</br>
					内容放这里就好!!!
				</div>
			</div>
	</body>
</html>

unitChange.js     px <-> mm  单位互相转换 

const a4nummm = 210; //一张a4 279mm

let a4numpx = Math.ceil(unitChange.mm2px(a4nummm)); //mm转px

//  px <-> mm  单位互相转换

/**
 * 获取DPI 每英寸像素点
 * @returns {Array}
 */
let conversion_getDPI = function() {
    var DPI = 0;
    if (window.screen.deviceXDPI) {
      DPI = window.screen.deviceXDPI;
    } else {
      var tmpNode = document.createElement("DIV");
      tmpNode.style.cssText =
        "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
      document.body.appendChild(tmpNode);
      DPI = parseInt(tmpNode.offsetWidth); 
      tmpNode.parentNode.removeChild(tmpNode);
    } 
    return DPI;
  };
  
  // 1 英寸=25.4 毫米
  
  /**
   * px转换为mm
   * @param value
   * @returns {number}
   */
  let px2mm = function(value) {
    var inch = value / conversion_getDPI();
    var c_value = inch * 25.4;
    //      console.log(c_value);
    return c_value;
  };
  
  /**
   * mm转换为px
   * @param value
   * @returns {number}
   */
  let mm2px = function(value) {
    var inch = value / 25.4;
    var c_value = inch * conversion_getDPI();
    //      console.log(c_value);
    return c_value;
  };
  export default {
      mm2px,
      px2mm
  };

 

<table  style="border-collapse: collapse; width: 900px; height: 56px;position: relative;" >  其他的

表格标题：caption

　　跨列：colspan，当某个格跨n列时，colspan ="n"

       跨行：rowspan，当某个格跨n行时，rowspan ="n+1"

      colspan是横向合并(可以理解为宽)；rowspan是纵向合并(可以理解为高)。

cellspacing设置为“0”，显示的结果就是第一个表格的每个单元格之间的距离为0。若将表格边框设为“0”，则单元格 的距离就是0了。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<style>
.page {
	width: 21cm;
	min-height: 29.7cm;
	padding: 2cm;
	margin: 1cm auto;
	border: 1px #D3D3D3 solid;
	border-radius: 5px;
	background: white;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	position: relative;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
	.page {
	    margin: 0;
	    border: initial;
	    border-radius: initial;
	    width: initial;
	    min-height: initial;
	    box-shadow: initial;
	    background: initial;
	    page-break-after: always;
	}
}
table{
    border-collapse: collapse; /*去掉双重的border*/
    width: 21cm;
    height: 29.7cm;
    font-size: 14px;
    text-align: center;
}
table tr:nth-child(1) td{
    width: auto;
    /*width: 25%;*/
}
table tr td{
	padding: 10px 0;
}
table tr td input{
	border: 0;
	outline: none;
	text-align: center;
}
table tr td textarea{
	border: 0;
	outline: none;
	text-align: center;
	padding-top: 10px;
	display: block;
	width: 100%;
}
/*
	A4的大小：21cm*29.7cm（width:794px;）。
	单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px
*/
</style>
<body>
	<div class="page">
		<table border="2" cellspacing="0" align="center" id="table">  
<caption style="padding:10px 0">企业注册登记表</caption> 
   <tr>   
    	<td>
    		企业名称
    	</td>
    	<td colspan="2">
    		<input type="text" style="width:300px" value="中联建设集团股份有限公司">
    	</td>
    	<td>
    		注册时间
    	</td>
    	<td>
    		<input type="text" style="width:100px" value="2005-12-09">
    	</td>
   </tr>  
    <tr>   
    	<td>
    		注册类型
    	</td>
    	<td colspan="2">
    		<input type="text" style="width:300px" value="股份有限公司(非上市、自然人投资或控股)">
    	</td>
    	<td>
    		外来源地
    	</td>
    	<td>
    		<input type="text" value="无">
    	</td>
   </tr> 
      <tr>   
    	<td>
    		注册资金
    	</td>
    	<td colspan="2">
    		<input type="text" value="30100.0万人民币">
    	</td>
    	<td>
    		所属行业
    	</td>
    	<td>
    		<input type="text" value="建筑业">
    	</td>
   </tr>
      <tr>   
    	<td>
    		企业规模
    	</td>
    	<td colspan="2">
    		<input type="text" value="4亿元以上">
    	</td>
    	<td>
    		统一社会信用代码
    	</td>
    	<td>
    		<input type="text" value="913600007814892664">
    	</td>
   </tr>
      <tr>   
    	<td>
    		行政区域
    	</td>
    	<td colspan="2">
    		<input type="text" value="省和自治区/江西省/南昌市">
    	</td>
    	<td>
    		邮政编码
    	</td>
    	<td>
    		<input type="text" value="330200">
    	</td>
   </tr>
      <tr>   
    	<td>
    		企业所得税征收方式
    	</td>
    	<td colspan="2">
    		<input type="text" value="查账征收">
    	</td>
    	<td colspan="2">  <!--跨2列-->
    		
    	</td>
   </tr>
   <tr>   
    	<td>
    		通信地址
    	</td>
    	<td colspan="4">
    		<input style="min-width:280px" type="text" value="江西省南昌市南昌县抚生路6666号">
    	</td>
   </tr>
  	<tbody>
  		<tr>
  			<td rowspan="4">
  				企业法定代表人
  			</td>
  		</tr>
  		<tr>
  			<td>
  				姓名
  			</td>
  			<td>
  				<input type="text" value="李海文">
  			</td>
  			<td>
  				手机
  			</td>
  			<td>
  				<input type="text" value="13913661618">
  			</td>
  		</tr>
  		<tr>
  			<td>
  				电话
  			</td>
  			<td>
  				<input type="text" value="0791-88618999">
  			</td>
  			<td>
  				传真
  			</td>
  			<td>
  				<input type="text" value="0791-86492253">
  			</td>
  		</tr>
  		<tr>
  			<td>
  				E-mail
  			</td>
  			<td>
  				<input type="text" value="1291700660@qq.com">
  			</td>
  			<td colspan="2">
  				<input type="text" value="">
  			</td>
  			
  		</tr>
  		<tr>
  			<td rowspan="4">
  				联系人
  			</td>
  		</tr>
  		<tr>
  			<td>
  				姓名
  			</td>
  			<td>
  				<input type="text" value="李海文">
  			</td>
  			<td>
  				手机
  			</td>
  			<td>
  				<input type="text" value="13913661618">
  			</td>
  		</tr>
  		<tr>
  			<td>
  				电话
  			</td>
  			<td>
  				<input type="text" value="0791-88618999">
  			</td>
  			<td>
  				传真
  			</td>
  			<td>
  				<input type="text" value="0791-86492253">
  			</td>
  		</tr>
  		<tr>
  			<td>
  				E-mail
  			</td>
  			<td>
  				<input type="text" value="1291700660@qq.com">
  			</td>
  			<td colspan="2">
  				<input type="text" value="">
  			</td>
  			
  		</tr>
  	</tbody>
  	 <tr>   
    	<td colspan="2">
    		企业是否上市
    	</td>
    	<td>
    		<input type="text" value="否">
    	</td>
    	<td>
    		上市时间
    	</td>
    	<td>
    		<input type="text" value="">
    	</td>
   </tr>  
    <tr>   
    	<td colspan="2">
    		股票代码
    	</td>
    	<td>
    		<input type="text" value="">
    	</td>
    	<td>
    		上市类型
    	</td>
    	<td>
    		<input type="text" value="">
    	</td>
   </tr>  
    <tr>   
    	<td colspan="2">
    		是否属于国家级高新区内企业
    	</td>
    	<td>
    		<input type="text" value="否">
    	</td>
    	<td>
    		高兴区名称
    	</td>
    	<td>
    		<input type="text" value="" style="min-width:200px">
    	</td>
   </tr>  
    <tr>   
    	<td colspan="2">
    		技术领域
    	</td>
    	<td colspan="3">
    		<input type="text" value="新能源与节能/高效节能技术/建筑节能技术" style="width:500px">
    	</td>
   </tr>  
   <tbody>
  		<tr>
  			<td rowspan="3">
  				风险投资
  			</td>
  		</tr>
  		<tr>
  			<td>
  				法人类型
  			</td>
  			<td>
  				名称
  			</td>
  			<td>
  				组织机构代码或统一社会信用代码
  			</td>
  			<td>
  				投资额(万元)
  			</td>
  		</tr>
  		<tr>
  			<td>
  				<input type="text" value="">
  			</td>
  			<td>
  				<input type="text" value="">
  			</td>
  			<td>
  				<input type="text" value="">
  			</td>
  			<td>
  				<input type="text" value="">
  			</td>
  		</tr>
  		<tr>
  			<td rowspan="7">
  				股权结构
  			</td>
  		</tr>
  		<tr>
  			<td>
  				公民类型
  			</td>
  			<td>
  				名称
  			</td>
  			<td>
  				身份证(护照号)
  			</td>
  			<td>
  				投资额(万元)
  			</td>
  		</tr>
  		<tr>
  			<td rowspan="3"> <!--rowspan ="n+1"-->
  				中国公民
  			</td>
  		</tr>
  		<tr id="chinesepeople">
  			<td>
  				<input type="text" value="李海文">
  			</td>
  			<td>
  				<input type="text" value="36012119681007691X">
  			</td>
  			<td>
  				<input type="text" value="30000.00">
  			</td>
  		</tr>
  		<tr id="chinesepeople">
  			<td>
  				<input type="text" value="雷先凤">
  			</td>
  			<td>
  				<input type="text" value="36012119681007691X">
  			</td>
  			<td>
  				<input type="text" value="30000.00">
  			</td>
  		</tr>
  		<tr>
  			<td>
  				法人类型
  			</td>
  			<td>
  				名称
  			</td>
  			<td>
  				组织机构代码或统一社会信用代码
  			</td>
  			<td>
  				投资额(万元)
  			</td>
  		</tr>
  		<tr>
  			<td>
  				<input type="text" value="">
  			</td>
  			<td>
  				<input type="text" value="">
  			</td>
  			<td>
  				<input type="text" value="">
  			</td>
  			<td>
  				<input type="text" value="">
  			</td>
  		</tr>
  		<tr>
  			<td>经营范围</td>
  			<td colspan="4">
  				<textarea name="" rows="8" id="tabtextarea"></textarea>
  			</td>
  		</tr>
  	</tbody>
  </table>
	</div>
  <script type="text/javascript">
  	var tabtextarea = document.querySelector('#tabtextarea')
  		tabtextarea.value = '房屋建设工程、承包境外工程与民用建筑工程及境内国际招标工程，水利水电工程、市政公用工程\
  			房屋建设工程、承包境外工程与民用建筑工程及境内国际招标工程，水利水电工程、市政公用工程\
  			房屋建设工程、承包境外工程与民用建筑工程及境内国际招标工程，水利水电工程、市政公用工程\
  			房屋建设工程、承包境外工程与民用建筑工程及境内国际招标工程，水利水电工程、市政公用工程\
  			房屋建设工程、承包境外工程与民用建筑工程及境内国际招标工程，水利水电工程、市政公用工程\
  			房屋建设工程、承包境外工程与民用建筑工程及境内国际招标工程，水利水电工程、市政公用工程\ '
  	//克隆节点
  	
  </script>
</body>
</html>

林中明月间。
关注
专栏目录
方便快捷A4纸大小棋盘格标定纸
12-02
A4纸大小的棋盘格标定纸是计算机视觉领域中用于相机标定的一种重要工具。在介绍这一主题之前，我们先来梳理一下几个核心概念：相机标定、棋盘格、A4纸尺寸以及计算机视觉。 相机标定是计算机视觉中的一个基本步骤，...
A4纸网页打印 html网页页面的宽度设置成多少
Angel__Boys的博客
02-01 2570
html网页设置A4纸宽度
a4在html中的尺寸,网页设立A4大小
weixin_35802571的博客
06-15 5771
在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。经过我仔细的测试，发现了网页打印中，默认采用的是96dpi，并非传闻的72dpi在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。经过我仔细的测试，发现了网页打印中，默认采用的是96dpi，并非传闻的72dpiA4纸张的尺寸是210×297mm，按1英寸=25.41mm...
HTML表格、表单、标签、CSS、选择器
最新发布
2301_80034711的博客
08-11 1403
时，会自动聚焦到其绑定的标签。内联样式微辣用户名辣
HTML实现A4模板
Freya的blog
09-23 1万+
前言 需要使用html实现打印前预览的界面，要求预览结果与打印效果相同 使用环境： bootstrap, vue 文章目录前言一、A4模板效果二、制作A4模板1.思考界面结构（以所附demo分析）2. 限制页面大小总结实现步骤: 一、A4模板效果 附实现效果(demo) 应用流程为点击界面的预览按钮，弹出窗口为制作的A4界面。 二、制作A4模板 1.思考界面结构（以所附demo分析） 模板分为头部，中间内容，底部footer三块内容（除去大标题），使用flex布局实现整个界面，因为中间的内容是不固
html a4页面样式_html设计菜鸟官网
weixin_39555415的博客
11-19 606
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" ...
html打印A4长宽设置
热门推荐
Peak Xin's Blog
05-15 3万+
测试使用chrome浏览器 1、边距为无 <style> /* 布局纵向 */ .a4-endwise{ width: 1150px; height: 1627px; border: 1px #000 solid; } /* 布局横向 */ .a4-broadwise{ width: 1627px; height: 1149px; border: 1px #0
html预览页面做成a4纸,html页面，A4纸竖向打印，网页页面的宽度应该设置成多少？...
weixin_30714077的博客
05-30 1884
A4的纸张是210*297mm。您就把页面宽度设置为210mm。单位一定要选择“mm”。不过给您个建议，如果您需要打印的话，建议您用弹出窗口，这样更容易控制打印的位置和大小。在Web中打印是比较难控制的，选择弹出窗口是比较合理的。弹出窗口您可以使用js实现。具体代码如下。functionshowModelDialog(page,width,height){varre=window.showModa...
Default style sheet for HTML 4
10-31
### 默认样式表在HTML 4中的应用 #### 概述 HTML 4 是Web开发历史上一个重要的里程碑，它定义了一套标准的标记语言用于构建网页。然而，仅凭HTML标记并不能完全控制页面的表现形式，因此引入了CSS（层叠样式表）来...
20以内加减法口算题A4纸每页100道.doc
10-10
文档“20以内加减法口算题A4纸每页100道.doc”是一个教育工具，专门设计用于帮助孩子们练习20以内的加法和减法。这些口算题目是数学学习的基础，旨在提升儿童的心算能力，增强他们对基本算术运算的理解和速度。以下...
一年级汉语拼音卡片打印版(A4纸拼音卡片).pdf
11-01
本文件《一年级汉语拼音卡片打印版(A4纸拼音卡片).pdf》的详细知识点主要围绕汉语拼音系统展开。汉语拼音是中华人民共和国官方制定的汉字标准注音方式，用于指导普通话的正确发音。以下是该文件可能涉及的主要知识点...
html 表格比较宽溢出的解决方法
09-28
这种方法直接在HTML标签内定义了样式规则，其中`width:85%`表示表格宽度是其父元素的85%。这种方式简单直接，但不推荐在实际开发中使用，因为最佳实践是将CSS样式与HTML内容分离，即在单独的CSS文件或`<style>`标签...
a4纸在html的像素,打印常识：A4纸张在显示器上应该要多少像素?
weixin_33722375的博客
06-05 3588
A4纸的尺寸是210mm*297mm，也就是21.0cm*29.7cm，而1英寸=2.54cm，如果屏幕DPI分辨率为72像素/英寸，换算一下：相当于1cm可呈现 (72px/2.54cm) = 28.34px下面是一些常用分辨率下A4纸在屏幕上的像素尺寸：分辨率是72像素/英寸时，A4纸的尺寸的图像的像素是595×842；分辨率是96像素/英寸时，A4纸的尺寸的图像的像素是794×1123；(默...
CSS常用样式
weixin_34233618的博客
10-24 146
1、CSS 层叠样式表，用于对页面进行美化。 在HTML中的方式有三种：元素内联、页面嵌入、外部引入。 (1)、元素内联：对其特定标签的样式进行设置； (2)、页面嵌入：在其<style>...</style>中写入样式，对其整个页面内的标签均可设置； (3)、外部引入：就是写到了一个文件中(.css)，对需要这种样式时引入文件即可。2、常见...
html页面打印成a4的尺寸,我如何将我的html div调整为A4打印页面中的整页？
weixin_39967598的博客
06-03 2262
我需要打印具有A4尺寸的特定div。但是，当我打印时，在打印屏幕上我的div不适合A4页面。我的div大小为568px和842px(A4页面大小)。如何调整div大小以将页面打印为A4？我要打印的html内容如下：我的打印方法如下：printComponent(cmpName) {let printContents = document.getElementById(cmpName).innerH...
html页面打印a4尺寸,html网页打印A4样式
weixin_34209060的博客
06-03 2600
参考地址原始样式如下网页打印A3、A4文档大小body{text-align:center;}div{margin:0 auto;overflow:hidden;font-size:12px;display:block;}p{margin:15px 30px;position:relative;overflow:hidden;padding:0;}这是你要的打印内容打印页边距设定为 5mm 时，网...
HTML 头部
qq_32447881的博客
09-04 166
HTML 查看在线实例 - 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 - 定义了所有链接的URL 使用 定义页面中所有链接默认的链接目标地址。 - 提供了HTML文档的meta标记 使用 元素来描述HTML文档的描述，关键词，作者，字符集等。 HTML 元素 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为: , HTML 元素 标签定义了不同
html a4纸张大小像素,CSS设置A4纸张大小
weixin_42507981的博客
06-04 3550
CSS设置A4纸张大小我需要在网页中模拟一张A4纸，并允许打印此页面，因为它是在浏览器(特别是Chrome)上显示的。 我将元素大小设置为21厘米x 29.7厘米，但是当我发送打印(或打印预览)它剪辑我的页面。看到这个现场的例子 ！HTML Page 1/2 Page 2/2 CSSbody { margin: 0; padding: 0; background-color: #FAFAF...
html 打印 a4 像素,精确打印A4纸张排版HTML
weixin_35019679的博客
06-04 1804
发表于 2020-03-03 09:59:26 by 月小升HTML可以精确的设置A4纸body{margin: 0;padding: 0;background-color: #FAFAFA;font: 12pt "Tahoma";}*{box-sizing: border-box;-moz-box-sizing: border-box;}.page{width: 21cm;min-height...
html设置成a4纸页面
01-07
要将HTML页面设置成A4纸大小，可以通过CSS样式表来实现。 首先，在HTML的<head>标签中添加以下代码，以引入CSS样式表： ```html <link rel="stylesheet" type="text/css" href="style.css"> ``` 然后，在同一目录下创建一个名为style.css的文件，并在文件中添加以下CSS样式： ```css @media print { @page { size: A4; /* 设置页面大小为A4 */ margin: 0; /* 设置页面边距为0 */ } body { margin: 1.27cm; /* 设置页面边距为1.27cm，以保证内容不会被打印边距遮挡 */ } } ``` 以上代码使用@media print媒体查询，表示只在打印时生效。@page规则用于设置页面属性，其中size属性设置页面大小为A4，margin属性设置页面边距为0。body样式用于设置内容边距，以保证内容不会被打印边距遮挡。 保存并运行HTML页面时，页面将会按照A4纸大小进行打印。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值