文档章节

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

Sub
 Sub
发布于 2015/12/04 10:33
字数 619
阅读 187
收藏 10
点赞 1
评论 0
<!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 ⋅ 0

Drupal下如何把包含Highcharts的页面输出到PDF

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

黄冠能 ⋅ 2013/04/18 ⋅ 0

DevExpress v15.1:Document Server控件升级

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

Miss_Hello_World ⋅ 2015/09/07 ⋅ 0

HTML 格式转换工具--HTMLDOC

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

叶秀兰 ⋅ 2014/01/07 ⋅ 0

Ghostscript

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

匿名 ⋅ 2009/07/01 ⋅ 1

Aspose.Cells for Java 8.1.0 发布

Aspose.Cells for Java 8.1.0 发布,此版本更新内容如下: 允许 Java 开发者在渲染电子表格的时候限制 API,只能使用一个字体位置 当保存一个工作表为 HTML 时支持导出或者禁止导出隐藏的工作...

oschina ⋅ 2014/06/15 ⋅ 0

几种web报表打印方案的比较

web报表打印通常是系统的辅助部分,但是又必须解决,否则项目完成不了。下面来分析分析目前的几种常见的web报表打印方案。 一、 浏览器的菜单打印功能 这是最简单的,只需点击页面上的打印菜...

长平狐 ⋅ 2012/10/11 ⋅ 0

Ghostscript 9.0 发布

Ghostscript可以查看及打印PS、EPS、PDF文件,支持PS的绘图程序一般都很大,如:Illustrator、CorelDraw。一般 人不可能为了打开或打印PS文件而去购买那昂贵的绘图软件,也因此Ghostscript就...

红薯 ⋅ 2010/09/18 ⋅ 0

CSS3输出PDF打印的小技巧

前文再续,书接上一回,自从《PHP输出PDF打印HTML5+CSS3打印格式控制》之后,实现了用HTML5+CSS3直接输出成PDF文件,以满足各种奇葩的打印格式需求。这个的确给调试打印打来了各种便利,不过...

曾建凯 ⋅ 2016/12/13 ⋅ 8

如何生成美观的 Notebook PDF 报告

文 = Yokis 引言 随着深度学习的兴起,Python 语言的热度也不断上升,成为研究和生产的「首选语言」。Jupyter Notebook (原 IPython Notebook) 也成为编程利器。这一软件使用网页生成其界面,...

7okis ⋅ 2017/12/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 48分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部