打印你的 WEB 页面,渲染成 PDF 格式
博客专区 > Sub 的博客 > 博客详情
打印你的 WEB 页面,渲染成 PDF 格式
Sub 发表于2年前
打印你的 WEB 页面,渲染成 PDF 格式
  • 发表于 2年前
  • 阅读 178
  • 收藏 10
  • 点赞 1
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

<!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
粉丝 120
博文 94
码字总数 22632
作品 5
×
Sub
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: