javascript - 将 CSS 样式的 HTML 导出为 PDF-6ren

javascript - 将 CSS 样式的 HTML 导出为 PDF

转载作者：可可西里更新时间：2023-11-01 12:57:15

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

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

我已附上文件，需要将.page导出为pdf，格式应该已经是A4了。

有没有一种方法可以使用 JavaScript/jQuery 实现我所需要的？在最坏的情况下，我也可以使用 php，但这会使事情变得更加复杂。

我知道在 Word 或类似的软件中完成它可能是最简单的，因为它会消耗时间。但仅出于个人兴趣，我将如何去做？

先谢谢大家

*{
	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;
}

<!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>

最佳答案

一切都按预期进行。

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

因此，当尝试直接从您在问题中放置的 SO 片段打印 (Ctrl + P) 简历时，默认情况下，Chrome 会忽略背景图形。在我打开高级设置并选中“背景图形”后，它看起来就像你想要的那样:

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

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

关于javascript - 将 CSS 样式的 HTML 导出为 PDF，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48060843/

文章推荐： javascript - 无法获取 HTML ANCHOR + 如何覆盖 anchor 的 .onclick

文章推荐： php - 下载文件时 index.php 未打开和运行

css - 更改 Bookdown 的 TOC 样式，Gitbook 样式
我喜欢调整目录的样式(例如背景颜色、字体)预订 , Gitbook 风格 HTML 文档。这可能吗？如果是这样，有人可以善意地指出我可以开始这样做的地方吗？谢谢你。最佳答案两个步骤: 1)
selector - CSS 选择器，用于在父级有一个子级时创建 CSS 样式，并为两个子级创建不同的 CSS 样式
是否可以使用纯 CSS 选择器根据子节点的兄弟节点数量为节点子节点(在我的例子中为 UL)提供不同的属性，特别是高度？例如，如果一个节点有 1 个子节点，则 UL 的高度是自动的，但是如果该节点有
dependencies - 是否可以在 cmake 中包含生成的 make 样式(不是 cmake 样式)依赖项文件？
我正在与 Vala 一起工作，它首先编译为 C，然后正常从 C 编译。 valac 的一项功能(Vala 编译器)是为 .vala 生成“fast-vapi”文件。 fast-vapi 本质上是为 .
html - 在类(class)内部设置类(class)样式，但不要在同一个类(class)的外部设置类(class)样式
我有两个具有 .body 类的 div，但是，一个位于另一个具有 .box 类的 div 中 - 如下所示: 我只想为 .box 内部的 .body 设置样式...但我在下面所
css - 如何在 html5 或 <iframe> 标签中使用内联 css 样式(样式 ="vertical-alignment:middle;")
**注意所有 <> 标签已被删除以允许代码显示**我已经玩了好几个小时了，如果不在设计结束时使用解决方法(即 Corel 绘图)，我就无法真正让它工作 *在我继续之前，首先，网站 URL 是 Adv
java - 在 Java/Clojure 中将 UTF-32 编码的字符串(C 样式)转换为 UTF-16(JSON 样式)编码的字符串
我从一个服务中接收到一个字符串，该字符串显然使用 UTF-32 编码对其 unicode 字符进行编码，例如:\U0001B000(C 风格的 unicode 编码)。但是，为了在 JSON 中序列化
应用程序资源中的 WPF 样式
我在应用程序资源中有一种样式，我想将其应用于许多不同的饼图。样式如下所示: 为了简单起见，我排除了更多的属性。这一切都很好。现在，我的一些馅饼需要有一个不同的“模型
wpf datagridcheckboxcolumn 样式
想象一下，我有一个名为“MyCheckBoxStyle”的 CheckBox 自定义样式。如何制作基于 MyCheckBoxStyle 嵌入自定义 DataGridCheckBoxColumn 样式
缩放后执行翻译的 WPF 样式
我有一个 Button我在 WPF 中开发的样式，如 this question 中所述.我想用这种风格做的另一件事是拥有 Button缩小一点点，使其看起来像被点击一样被点击。现在，转换代码如下所示
WPF 样式 DataGridHyperlinkColumn
我为超链接控件创建了一个样式:
自动完成缺少 css 样式
不知道为什么，但我的 typeahead.js 远程自动完成停止工作。我没有更改任何关于 typeahead.js 的代码，但既然它坏了，我一定是错的。你能看看我的site here吗？ ?我会创建
基于当前的 WPF 样式
有没有办法创建扩展当前样式的样式，即不是特定样式？我有一个 WPF 应用程序，我在其中创建样式来设置一些属性，例如边框或验证。现在我想尝试一些主题，看看哪
javascript - CSS 样式
我正在为一个网站提出问题，并希望 var reltext 中的正确/再试消息具有不同的颜色，即绿色表示正确，红色表示错误，并且每个旁边可能有一个小 png。有什么想法吗？ A local co
JavaScript DOM 样式
我想到达列表的父节点(使用 id 选择器)并使用纯 JavaScript 添加背景颜色来设置其样式。这是我的代码，但不起作用。 var listParentNode; listPare
javascript - 使用循环更改组件特征(样式)
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 4 年前。 Improve th
Javascript 样式(如果特定内容存在或悬停)
过去几天我一直在与这段代码作斗争，我真的不知道该如何处理它。基本上，当用户将鼠标滚动到主导航菜单中的某个 LI 元素上时，就会运行一个 Javascript 函数，并根据触发该函数的元素将链接放入下
CSS 样式——如何显示一个人的姓名首字母或一个人的图像
使用这个可爱的 html 和 css 作为指南，我能够在我的照片上显示我的姓名首字母。这很好，但是，如果图像不存在，我只想显示首字母；如果图像存在，则不应渲染 peron 首字母。换句话说，当该图
CSS 样式——如何显示一个人的姓名首字母或一个人的图像
使用这个可爱的 html 和 css 作为指南，我能够在我的照片上显示我的姓名首字母。这很好，但是，如果图像不存在，我只想显示首字母；如果图像存在，则不应渲染 peron 首字母。换句话说，当该图
Java JButton 样式
是否有人尝试过将 JButton 设计为看起来像 NetBeans 工具栏按钮？这将只显示一张图片，当您将鼠标悬停在它上面时，会显示 1px 圆形角灰色边框，并且按钮顶部和底部的背景不同......似
graph - 如何在图表中设置默认系列/样式？
在 Ax2012 中使用图表，它们工作正常。但我想更改它在启动时显示的图表类型，例如“样条”图表，而不是默认的“柱状图”图表。这是我现在拥有的: http://i.stack.imgur.com/R

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 将 CSS 样式的 HTML 导出为 PDF