文档章节

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

Sub
 Sub
发布于 2015/12/04 10:33
字数 619
阅读 196
收藏 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

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

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

晨曦之光
2012/03/09
337
0
生成PDF和Word文档及下载功能

我们一个项目需要在里面增加一个生成文档(PDF和WORD格式),并自动下载,现在所有的数据都在一张数据表中,一部分人员数据可以通过接口获取。需要如下: 1、可根据用户选择生成word或者PDF...

jinseyulin
2016/07/27
205
4
如何将在线电子书保存为pdf格式

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

开发之路
2018/08/09
0
0
Ghostscript

Ghostscript是一套基于Adobe、PostScript及可移植文档格式(PDF)的页面描述语言等而编译成的免费软件。 Ghostscript 可以查看及打印 PS、EPS、PDF 文件,支持 PS 的绘图程序一般都很大,如:...

匿名
2009/07/01
2.8K
1
HTML 格式转换工具--HTMLDOC

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

叶秀兰
2014/01/07
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
7分钟前
0
0
如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
2
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
4
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
4
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部