html简历如何转换成pdf,将拉勾的HTML简历转成PDF

拉勾网页版的简历在我看来还是不错的。

但是pdf和word版本下载到本地，着实丑了些，段落之间过于紧凑，字体也小，密密麻麻的。

自行下载HTML版本的简历通过浏览器转换为PDF

下载HTML版本的简历

先"预览建立"，再下载。

转换为pdf时图标不见

默认手机和邮箱前的图标实现为:

image.png

image.png

只需要i标签改成img标签即可

手机

style="vertical-align: middle;"

src="https://www.lgstatic.com/common/image/pc/icon_phone.png"

alt=""

/>

邮箱

图标放大后有些失真

style="vertical-align: middle;"

src="https://www.lgstatic.com/common/image/pc/icon_mail.png"

alt=""

/>

修改空白行间距过大的问题

源代码中

需加上

window.onload = function () {

[

...document.querySelectorAll('.exp-list_content p'),

...document.querySelectorAll('.exp-project_des p'),

].forEach((item) => {

if (

item.children.length === 1 &&

item.children[0].tagName === 'BR'

) {

item.style.height = '5px';

}

});

};

找到只有一个br的p元素，改变它的高度。

通过edge浏览器转换为pdf,建议仔细预览，避免样式有出入

它可以使"社交主页"的超链可点击

image.png

edge不支持拖拽网页文件，不支持Ctrl+o打开...,难道我用的是盗版！

image.png

可以控制页眉页脚的生成。

如果发现样式有错乱，可尝试调节边距。

边距是普通时，发生如下问题，调窄后便恢复了

image.png

给拉勾反馈建议，增强用户体验，我辈义不容辞!

随着拉钩网站的改版以及edge浏览器的迭代，可能会有出入。

本文将持续更新