文档章节

打印你的 WEB 页面,渲染成 PDF 格式

Sub
 Sub
发布于 2015/12/04 10:33
字数 619
阅读 190
收藏 10
<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
		<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
		<meta HTTP-EQUIV="Expires" CONTENT="0">
		<title></title>
	</head>

	<body>
		<style>
			body {
				background-color: #ABABAB;
			}
			.pdfbox {
				width: 1002px;
				margin: 0 auto;
				padding-top: 10px;
			}
			.specification {
				border: 1px solid #555;
				width: 1000px;
				float: left;
				height: 1000px;
				margin-bottom: 10px;
				background: #fff url("logo.jpg") no-repeat center 670px;
			}
			.specification_explain{
				font-size: 42px;
				width: 720px;
				color: #1f83d5;
				text-align: center;
				font-weight: bold;
				margin: 300px auto 0;
			  	padding-bottom: 20px;
			  	border-bottom: 3px solid #e5f3fc;
			}
			.finaledit {
				margin-top: 375px;
				width: 1000px;
				font-size: 20px;
				text-align: center;
				color: #ccc;
				padding-bottom: 540px;
			}
			.sepci {
				border: 1px solid #555;
				float: left;
				width: 720px;
				height: 1295px;
				padding: 0px 140px 0px 140px;
				margin-bottom: 10px;
				background-color: #fff;
				position: relative;
			}
			.headerpart {
				float: left;
				width: 720px;
				height: 94px;
				border-bottom: 2px solid #ccc;
				background: #fff url("min-logo.jpg") no-repeat 560px 40px;
			}
			h1 {
				width: 720px;
				height: 52px;
				line-height: 52px;
				font-size: 26px;
				font-weight: bold;
				vertical-align: middle;
				text-align: left;
				float: left;
				margin-bottom: 0px;
			}
			h2 {
				width: 720px;
				height: 40px;
				margin: 0px;
				padding: 0px;
				line-height: 40px;
				font-size: 18px;
				font-weight: bold;
				vertical-align: middle;
				text-align: left;
				float: left;
				text-indent: 10px;
			}
			h3 {
				width: 720px;
				height: 30px;
				margin: 0px;
				padding: 0px;
				line-height: 30px;
				font-size: 16px;
				font-weight: bold;
				vertical-align: middle;
				text-align: left;
				float: left;
				text-indent: 20px;
			}
			.ul-word {
				display: block;
				float: left;
				margin: 0px;
				width: 720px;
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			.ul-word li {
				margin: 0px;
				padding: 0px;
				width: 720px;
				float: left;
				font-size: 14px;
				line-height: 28px;
				vertical-align: middle;
				text-indent: 28px;
			}
			.footerpart {
				display: block;
				margin: 0px;
				padding: 0px;
				position: absolute;
				z-index: 2;
				left: 140px;
				bottom: 0px;
				width: 720px;
				height: 90px;
				list-style: none;
			}
			.footerpart li {
				width: 720px;
				float: left;
				color: #808080;
			}
			.footerpart-li01 {
				text-align: center;
				font-size: 14px;
				line-height: 20px;
				vertical-align: middle;
				text-align: right;
			}
			.footerpart-li02 {
				text-align: left;
				font-size: 12px;
			}
		</style>
		<div class="pdfbox">
			<div class="specification">
				<div class="specification_explain">产品说明书</div>
				<p class="finaledit">最后更新时间:2015年11月30日</p>
			</div>

			<!-- page 1 -->
			<div class="sepci">
				<div class="headerpart"></div>
				<!-- headerpart -->
				<h1>一、	产品说明书</h1>
				<ul class="ul-word">
					<li>产品说明书主要指关于那些日常生产、生活产品的说明书。它主要是对某一产品的所有情况的介绍,诸如其组成材料、性能、存贮方式、注意事项、主要用途等的介绍。这类说明书可以是生产消费品的,如电视机;也可以是生活消费品的,如食品、药品等。</li>
				</ul>
				<h1>二、	使用说明书</h1>
				<ul class="ul-word">
					<li>使用说明书是向人们介绍具体的关于某产品的使用方法和步骤的说明书。参看范文《剃须刀说明书》。</li>
				</ul>

				<ul class="footerpart">
					<li class="footerpart-li01">1</li>
					<li class="footerpart-li02">XXX有限公司</li>
				</ul>
			</div>
			<!-- sepci -->

			<!-- page 2 -->
			<div class="sepci">
				<div class="headerpart"></div>
				<!-- headerpart -->

				<h1>二、	作用</h1>
				<ul class="ul-word">
					<li><strong>作用:</strong></li>
					<li>1)解释说明的作用。</li>
					<li>2)广告宣传的作用。</li>
					<li>3)传播知识的作用。</li>
				</ul>

				<ul class="footerpart">
					<li class="footerpart-li01">2</li>
					<li class="footerpart-li02">XXX有限公司</li>
				</ul>
			</div>
			<!--sepci  -->

		</div>
		<!-- pdfbox -->
	</body>

</html>

© 著作权归作者所有

共有 人打赏支持
Sub

Sub

粉丝 121
博文 94
码字总数 22632
作品 5
浦东
架构师
WEB 打印的相关技术分析

文/谢康 做Web开发的人员一定都会面临一个共同的难题,那就是打印。的确,相对于Windows桌面应用程序来讲,Web应用程序的打印有种种限制,技术人员在项目开发过程中经常会遇到用户这样或那样...

晨曦之光
2012/03/09
314
0
如何将在线电子书保存为pdf格式

  网上有很多免费的在线电子书籍,没有pdf格式,不方便离线阅读,也不方便做记录,所以找了几个将在线内容制作成pdf文件的方法。 一、如果网站上的书籍内容没有分页,所有内容都直接显示出...

开发之路
08/09
0
0
Drupal下如何把包含Highcharts的页面输出到PDF

本文PDF版下载:Drupal下如何把包含Highcharts的页面输出到PDF 摘 要 Highcharts是一种通过JavaScript在浏览器客户端生成图的库,由于缺乏生成把HTML转换成PDF的Javascript库,生成PDF的工作...

黄冠能
2013/04/18
2.9K
0
DevExpress v15.1:Document Server控件升级

<下载最新版DevExpress Document Server v15.1.5> PDF文档处理器 渲染API 在新的版本中,您可以使用下列元素在PDF页面上添加自己的图形: 图像 字符串 图形(线,Bezier曲线,多边形,椭圆和...

Miss_Hello_World
2015/09/07
50
0
HTML 格式转换工具--HTMLDOC

HTMLDOC 可以把 HTML 文件和 Web 页面 转换成索引 HTML,附录和 PDF 文件,方便在线查看和打印。它可以作为一个独立的GUI应用程序中,在一个批处理文件处理环境中,基于web的报告生成应用程序,...

叶秀兰
2014/01/07
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

新工作与老项目

新的工作不知不觉的干了一个多月了。怎么说呢,跟想象中的差别不少,本来想的能进来跟大公司的同事能有很多交流,能在团队中跟大牛学习更快。结果公司的这个项目上只有两个程序员,项目是十年...

zypy333
13分钟前
0
0
mysql 在windows的安装

mysql 在windows的安装。 mysql64位的server的下载地址是: https://dev.mysql.com/downloads/mysql/ 使用的是5.7版本。 下载安装包,解压至D:\mysql\mysql-5.7.23-winx64\ 在D:\mysql\mysq...

lxzh504
26分钟前
1
0
云技术、大数据(hadoop)入门常见问题回答

当我们学习一门新技术的时候,我们总是产生各种各样的问题,这些问题整理出来,包括该 1.如何学习hadoop? 2.hadoop常见问题? 3.还有hbase、hive安装使用等? 你知道搭建hadoop平台需要些什...

董黎明
26分钟前
1
0
小程序自定义底部tab

场景 1.tabBar是在内页而非首页,这时就不得不自定义一个tabBar了 2.自定义风格 3.子页数量超过5个,得到更多了tab 4.改变点击tab默认事件,比如出登录界面,或者弹出上拉子菜单等 步骤 1.照...

萤火的萤火
31分钟前
1
0
shell炫技

1.为脚本添加“--help” #!/bin/shif [ ${#@} -ne 0 ] && [ "${@#"--help"}" = "" ]; then printf -- '...help...\n'; exit 0;fi; 2.输出字体添加颜色 https://misc.flogisoft.com......

HJCui
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部