将CSS样式的HTML导出为PDF

时间：2018-01-02 12:16:28

标签： javascript jquery html css pdf

我正在申请工作，需要一份简历。因为我真的很讨厌使用Word而且它让我疯狂地使用它来实现这个目的我只是用HTML和CSS做到了，认为以后将它导出到pdf会相当容易。

但是，事实证明它比预期更难。我已经尝试过使用jsPDF和几乎所有关于这个主题的stackoverflow帖子中描述的方法，但它总是被扭曲或根本不起作用。 要么没有css，要么pdf中只有我的简历的一部分。

我已附加文件，需要将.page导出为pdf，格式应为A4。

有没有办法用JavaScript / jQuery实现我需要的东西？ 在最糟糕的情况下，我也可以使用php，但这会让事情变得更复杂。

我知道在Word中或者类似的时间消耗可能最简单。但仅仅从个人兴趣来看，我该如何做呢？

非常感谢你们提前

＆＃13;
＆＃13; 
*{
	margin: 0;
	padding: 0;
	font-family: 'Open Sans';
}

body {
	background:#aaa;
}

.dash {
	content: '';
	width: 100%;
	height: 1px;
	background: #676767;
	display: block;
	clear:both;
}

.page {
	width: 1000px;
	height: 1414.2135px;
	background: white;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
}

.page .overlay #left_rect {
	width: 200%;
	height: 500px;
	background: #676767;
	position: absolute;
    z-index: 1;
    transform: rotate(-45deg);
    left: -100%;
	top: -50px;
}

.page .overlay #right_rect {
	width: 200%;
	height: 500px;
	background: #26556d;
	position: absolute;
    transform: rotate(16.18deg);
    z-index: 2;
    left: -100px;
    top: -249px;
}

.page .left,
.page .right {
	float: left;
}
.page .left {
	width: calc(38.1966% - 50px);
	height: 100%;
	background: #eee;
	padding: 565px 25px 0;
}

.page .left img {
	width: 250px;
    position: absolute;
    left: 60px;
    top: 190px;
    z-index: 2;
}

.page .left .section {
	margin-bottom: 25px;
}

.page .left .section.contact {
	position: absolute;
	left: 25px;
	bottom: 0;
}

.page .right {
	width: calc( 61.8034% - 50px);
	height: 100%;
	margin-top: 200px;
	padding: 25px;
}

.page .right .top h1 {
	color: #255571;
	font-size: 35px;
	float:left;
}

.page .right .top h2 {
	color: #666;
	font-size: 20px;
	float: left;
	margin-top: 15px;
	margin-left: 10px;
	font-weight: 400;
}

.page .right .top:after {
	content:'';
	display: block;
	clear: both;
	height: 25px;
}

.page .right .section:after {
	content:'';
	display: block;
	clear: both;
	height: 25px;
}


.page .section h1 {
	color: #26556d;
	font-size: 25px;
	text-transform: uppercase;
}

.page .right .section .sub {
	padding: 5px 0 10px;
}

.page .right .section .sub.half {
	width: 50%;
	float: left;
}

.page .right .section .sub h2 {
	color: #676767;
	font-size: 18px;
}

.page .right .section .sub h3 {
	color: #676767;
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 5px;
}

.page .right .section .sub h4,
.page .left .section p {
	color: #777;
	font-size: 17px;
	font-weight: 400;
}

.page .right .section .sub ul {
	margin-left: 30px;
	color: #777;
	font-size: 17px;
	font-weight: 400;
}
＆＃13; 
<!DOCTYPE HTML>
<html>
<head>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
</head>
<body>
	<section class="page">
		<div class="overlay">
			<div id="left_rect"></div>
			<div id="right_rect"></div>
		</div>
		<div class="left">
			<img src="https://cdn.pixabay.com/photo/2015/12/22/04/00/photo-1103597_1280.png">
			<div class="section about">
				<h1>About Me</h1>
				<p>
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
				</p>
			</div>
			<div class="section contact">
				<h1>Contact</h1>
				<p>
					John Doe<br>
					Some Street 123<br>
					1234 City<br><br>
					<b>T:</b> 01234 5678910<br>
					<b>M:</b> john.doe@mail.com
				</p>
			</div>
		</div>
		<div class="right">
			<div class="top">
				<h1>John Doe</h1>
				<h2>01.01.1990</h2>
			</div>
			<div class="section">
				<h1>Lorem Ipsum</h1>
				<div class="sub half">
					<h2>School (2,0)</h2>
					<h3>Sep 2000 - Aug 2015</h3>
					<h4>Some School</h4>
				</div>
				<div class="sub half">
					<h2>B.Sc. Business</h2>
					<h3>Sep 2016 - Mar 2019</h3>
					<h4>Some University</h4>
				</div>
			</div>
			<div class="section">
				<h1>Lorem Ipsum</h1>
				<div class="sub">
					<h2>Softwaredeveloper at some company</h2>
					<h3>Aug 2015 - Mar 2016</h3>
					<ul>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
					</ul>
				</div>
				<span class="dash"></span>
				<div class="sub">
					<h2>Softwaredeveloper at some company</h2>
					<h3>Apr 2016 - Feb 2017</h3>
					<ul>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
					</ul>
				</div>
				<span class="dash"></span>
				<div class="sub">
					<h2>Softwaredeveloper at some company</h2>
					<h3>Mar 2017 - Mar 2018</h3>
					<ul>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
					</ul>
				</div>
			</div>
			<div class="section">
				<h1>Lorem Ipsum</h1>
				<div class="sub half">
					<h2>IT-Knowledge</h2>
					<ul>
						<li>PHP, Java, JavaScript</li>
						<li>HTML, CSS, jQuery, MySQL</li>
						<li>Operating Systems: Windows, MacOS</li>
					</ul>
				</div>
				<div class="sub half">
					<h2>Languages</h2>
					<ul>
						<li>German</li>
						<li>English</li>
						<li>French</li>
						<li>Spanish</li>
					</ul>
				</div>
				<span class="dash"></span>
				<div class="sub">
					<h2>Interests</h2>
					<ul>
						<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr:</li>
						<ul>
							<li>Sed diam nonumy eirmod tempor invidunt</li>
							<li>Sed diam nonumy eirmod tempor invidunt</li>
							<li>Sed diam nonumy eirmod tempor invidunt</li>
						</ul>
						<li>
							Sed diam nonumy eirmod tempor invidunt
						</li>
					</ul>
				</div>
			</div>
		</div>
	</section>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

一切都按预期工作。

对于 redability ，html到pdf会忽略背景图像，并将文本颜色默认为系统颜色（通常为黑色）。 为什么？因为在大多数情况下它确实比伤害更好。 Web图形可以使用各种图形技术，并不是所有图形技术都与打印兼容（从某种意义上说，它可能看起来很糟糕，难以阅读，而且墨盒上也可能更重）。大多数打印网页的人都对文本及其可读性感兴趣，而不是花哨的图形。

因此，当您尝试直接从您提出的SO片段中打印（ Ctrl + P ）您的简历时，默认情况下，Chrome会忽略背景图形。打开高级设置并检查“背景图形”后，它看起来像你想要的那样：

enter image description here

我不知道如何在您尝试使用的任何库中启用背景图形，但我可以向您保证，大多数（如果不是全部）都设置了默认关闭的设置。

您需要做的就是在图书馆的文档中找到该设置并将其打开。

答案 1 :(得分：1)

据我所知，你正在寻找一个带CSS的pdf文件。我们可以使用xeponlineformatter

来做到这一点

请参阅以下链接。

http://www.cloudformatter.com/CSS2Pdf

在这里你可以看到一个下载按钮，在这个按钮下你可以将页面保存为pdf。 它将使用适当的CSS保存您的页面。

希望这对你有用。

答案 2 :(得分：0)

我不知道如何使用JavaScript / jQuery执行此操作，但您可以尝试使用像doPDF这样安装虚拟打印机驱动程序的软件，然后按照您的方式进行打印。普通打印机，结果将是一个PDF文件。

如果你选择PHP方式，我建议你Dompdf

相关问题
最新问题