面试需要简历,于是我做了一个在线简历编辑器

前因后果

在今年八月中旬的时候,我准备找工作,而找工作需要一份简历,于是我打开了一些能够创建简历的网站。在使用这些网站的过程中,我发现它们提供的功能其实并不复杂,而在使用它们的时候却又有很多让我感觉麻烦的地方:

  1. 它们需要我登陆,最起码它们就需要我用微信扫一扫才能够开始使用
  2. 当我想要将我创建好的简历下载下来的时候,它们要我充值会员(:

就这样,我感觉它们实在是太麻烦了,我决定自己做一个这样的网站。

成果

在线浏览器的地址:在线简历编辑器 (mr-ljq.github.io)

开源项目地址:create-vitae: 在线简历生成网站的源码 (gitee.com)

github 提供的静态网站每月访问的流量限额是100G,如果网站打不开,有可能是访问的人太多了 : )

打开可能需要几秒,这一点以后会进行优化,因为有很多可以按需加载的代码我还没有时间进行处理

虽然在开发的过程中,我尽量为以后的移动端与平板兼容进行了处理,但就目前而言,该网站还是一个PC端网站,在移动端与平板端还不做任何保证。

请尽可能的使用现代浏览器(浏览器版本越新越好),该项目不对任何老版浏览器进行兼容性处理(例如:IE)

预览

下面是我填充一些数据之后,生成的一份简历PDF文件的截图

注意

填写的简历数据会保存在本地,如果你浏览器环境是非私密的,你可能需要通过"无痕"模式打开网站。

功能

在设计上,网站所有的功能都是简单易懂且易于上手的,因此你可以跳过该部分对功能的介绍,这完全不会对你使用该网站有任何影响。

网站可以简单的分为三个部分:

  • 顶部的菜单栏
  • 中间的简历预览
  • 底部的编辑区域

菜单栏

  • 设置间距
    • 文本行间距:用于简历内文本间的间距
    • 模块上下间距:用于调整简历内不同部分间的间距
    • 简历模版边距:用于调整简历的左右边距
  • 字体
    • 字体:设置简历内文字的字体
    • 字体大小:设置简历内文字的字体大小
  • 主题设置
    • 主题颜色:设置简历模版的主题颜色
  • 文件管理
    • 下载为PDF:将编辑好的简历下载为PDF(免费不收钱的,笑)
    • 下载为JSON:将简历的数据以.json的格式下载
    • 加载本地JSON数据:将简历数据(.json)加载到网页进行展示
  • 个人
    • 其它简历(该功能暂未实现)
    • 清除此简历数据(该功能暂实现)

简历预览

用于使用户看到它的简历长什么样子(标准A4),如果用户的简历内容丰富,则有可能出现多页简历,此时会出现分页行。

分页行是用于提示用户简历分页的,分页行不应该覆盖任何简历内容,且其上下最好留出一定的空间,以使最终生成的简历不至于在分页的地方显得逼仄。

分页行的最右边存在一个调整页数的按钮,该按钮的功能是智能的调整间距,以减少简历的页数为环保与省钱做出贡献。(该功能暂未实现,但开发该功能会在我近期的安排中)

编辑区

编辑区是简单易懂且易于上手的,编辑区可以分别编辑简历的不同部分,预设的模块基本涵盖了一份简历所需的所有部分。

一份简历并不一定需要编辑区中所预设的所有部分,因此除了"基本信息"外,其余的所有的模块都是可以通过开关按钮进行开启与关闭的。

同时,用户可能对于我预设的模块名称不满意,那也可以对其进行修改。

该编辑区的模块间的排序会同步到预览简历上,如果想要调整它们的顺序,可以通过拖拽调整它们之间的顺序。

为了给用户更大的自主性,编辑区大部分模块都有富文本编辑器,可以通过其来达到更好的自定义效果。(暂未为富文本编辑器增加 代码块 功能,该功能在开发计划中,但还没有时间去实现)

未来计划

当前该网站只提供了一种简历模版,这无疑是单调的,因此未来的开发计划很大一部分就是提供更多的简历模版以供用户选择,这需要时间,敬请期待。

该网站暂时并没有预先填充任何的简历数据,因此你打开网站的时候,看到的简历预览什么都没有。

在未来,我预期向用户提供一些职业模版,以使的用户能够选择一些优秀的职业模版调整后生成自己的简历。

我只具备前端相关的知识,因此我最多只能够创建一些前端相关的职业模板,这显然是不够的,我的预期是该网站能够提供足够多的各行各业的职业模板,为各业求职人员创建简历时花费更少的时间与精力。

因此,我在此请求,如果您认为你的简历写法在行业内具备普适性,请你向我提供一份简历模版数据。我已经为此提供了尽可能便利的接口,您只需:

  1. 在该网站上直接编辑你认为具有普适性的职业模版
  2. 通过菜单栏的"文件管理" 中的 "下载为JSON",将该份职业模版下载下来
  3. 将该文件发送至我的邮箱:"1029520042@qq.com"

我会在审阅之后,确认合适时,将其作为一份职业模板提供给以后创建简历的用户进行使用。

职业模板相关的功能尚未开发,但其已经在我的开发计划之中,此处是为了提前收集相关的职业模板数据。

手机与平板端的支持在我的预期计划之中,但这可能是一件较为麻烦的事情,我还需要更多测试才能够决定应该如何对其进行支持,这需要时间。

如果有多页简历的话,用户可能想要为它的简历添加一个封面,这也是我预期开发的功能,但目前为止其对其安排较后。

用户可能还希望附带一封介绍信,而最好这封介绍信能够通过编辑的相关简历数据去一键生成。这需要利用到AI,而这我只能够说是我还需要研究,该功能的提供可能需要很久,甚至最后可能无法提供。

技术总结

另存为PDF

由 HTML 生成 PDF 是具有难度的,我先后尝试了:直接使用 jspdf.js 与 用html2canvas 生成图片后通过 jspdf.js 生成PDF的方法,但是其效果都不能够达到理想的状态。

jspdf.js 对于中文的支持并不友好,且生成的PDF文件亦存在一些问题。

而通过 html2canvas 生成图片后通过 jspdf.js 生成PDF的方法,所生成的PDF文件本质上是一张图片,其上的文本无法选中,其中的链接无法点击,这显然不是一种好的方法。

最终我发现浏览器本身提供了将HTML另存为PDF的方法,也即是 window.print()。其有一个缺点是,我无法通过js去操纵浏览器的打印功能,因此在用户想要将预览的简历完美的通过浏览器的打印功能另存为PDF时,需要进行一些额外的设置。这些设置我通过一个弹窗为用户提供了相关教程。

这是一种不得不做的妥协,虽然使用了浏览器的打印功能实现了保存为PDF的功能,且为我省略了很多的代码量,并且降低了网站的大小。

但这并非没有代价的,因为这是浏览器提供的功能,而我并不能够控制用户使用什么浏览器,因此可能会导致一些兼容性的问题(我已经在chrome、Edge、firefox进行了测试,它们都能够达到预期效果。)

在手机端的某款浏览器中,其提供的打印功能就存在兼容性问题,它并不能够生成符合预期的PDF文件。

这些问题暂时不会去解决,我所想到的解决方案是在以后通过 WASM 引入相关PDF处理库来解决该问题,但这需要时间(:

尾声

因为没有相关UI设计图,因此只能够慢慢调,如果你觉得现在的页面UI难看,且有更好看的,欢迎为我设计一份,并发给我(:

我原本预期开发这个网站应该不会太难,但实际上真的开发的时候需要考虑非常多的问题,如果你现在用起来感觉到很丝滑、很自然,那我想我应该有很大一部分功劳(笑)。

每一个想着很简单的功能的开发,实际上都并没有我自己想得那么简单,这需要花费我大量的时间,因此更多功能的开发我只能够说是敬请期待(:

实际上这是一个开源项目,你也可以贡献一些代码(星星眼)。

给我点个赞吧,来个收藏吧,说句评论吧,去仓库给我来颗星星吧,没点激励的话开发新功能我都显得无精打采了。

使用的过程中有任何问题,都可以去代码仓库给我提,我会视情况尽可能快的解决。

ps:目前失业中,人在广州,有没有哪家附近的公司招人的啊?考虑考虑我呗!

相关推荐
2401_88272757几秒前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder3 分钟前
CSS系列(36)-- Containment详解
前端·css
anyup_前端梦工厂14 分钟前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js
5hand19 分钟前
Element-ui的使用教程 基于HBuilder X
前端·javascript·vue.js·elementui
GDAL36 分钟前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿36 分钟前
react防止页面崩溃
前端·react.js·前端框架
z千鑫1 小时前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js
m0_748256142 小时前
前端 MYTED单篇TED词汇学习功能优化
前端·学习
小白学前端6663 小时前
React Router 深入指南:从入门到进阶
前端·react.js·react
web130933203983 小时前
前端下载后端文件流,文件可以下载,但是打不开,显示“文件已损坏”的问题分析与解决方案
前端