简历生成平台项目开发-STEP4第二次项目例会讨论

时间：2016.7.15周五7点半

地点：图书馆

讨论主题：交流各自手头项目进展，确定下一步任务

内容：按照之前的讨论的任务大家各自汇报进度。

汇报人：谭卓、尹忠诚

　　内容：1.基于富文本编辑器的模板，用户直接编辑。

　　　　　　~浏览器端生成（貌似不可行）

　　　　　 ~直接打印页面（调研如何隐藏页眉页脚，貌似不可行） 见 http://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page/2780518

　　　　　　富文本编辑器：

　　　　　　以 ckeditor 为例，编辑器可以输出 html 代码，输出的 html 代码可以用来重现编辑器的内容。

　　　　　　有些编辑器编辑效果很好，感觉体验超越了 word。

　　　　　　初步选定 ckeditor，需要阅读其文档：http://docs.ckeditor.com/#!/guide

　　　　　　富文本编辑器实现原理：https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

　　　　　　关键字：designMode, contentEditable

　　　　　　2.拿到编辑器输出的 html，有两种方法输出 pdf

　　　　　　服务端PDF生成两个东西：wkhtmltopdf、PhantomJS。

　　　　　　这两个都是基于 webkit 的，能渲染 html，顺便输出 pdf，类似浏览器。

　　　　　　网页端发来编辑器生成的 html，服务端在同样的环境运行页面，把收到的数据（html）填进去，重现出简历页面，输出 pdf。

　　　　　　实验结果显示，PhantomJS 渲染结果更接近真实浏览器，就用它来输出 pdf。

　　　　　　3.如何实现控制A4纸输出

　　　　　　a.HTML/CSS

　　　　　

@page {
    size: A4;
    margin: 0;
}

@media print {
    html {
        width: 210mm;
        /* 高度比A4小1mm，因为页面可能稍微溢出一点，变成两页纸 */
        height: calc(297mm - 1mm);
        margin: 0;
    }
}

/* html 设成A4大小 */
html {
    width: 210mm;
    height: calc(297mm - 1mm);
    margin: 0;
}

/* 下面两个用于调试 */

/* 黑色框框是A4纸的边界 */
html {
    border: 1px solid black;
}

/* 红色框框是简历内容，即A4纸去掉页边距 */
body {
    border: 1px solid red;
}

body {
    /* 简历页边距在这里设置 */
    /* margin: 0cm 1cm 2cm 1cm; */
}

/* the padding and border of that element no longer increase its width */
/* ref http://learnlayout.com/box-sizing.html */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

　　　　　　简历页面里，CSS 不能用 px 单位，px 是像素，要用 cm、em、% 等能决定实际大小的单位。

　　　　　　引入第三方 CSS 时要注意。

　　　　　　b.PhantomJS

　　　　　　见代码 web2pdf.js

　　　　　　

　　　　　　c.wkhtmltopdf　　　　

Windows:

wkhtmltopdf -L 0 -R 0 -T 0 -B 0 --page-size A4 --print-media-type --disable-smart-shrinking resume.html out.pdf

Linux:

wkhtmltopdf -L 0 -R 0 -T 0 -B 0 --page-size A4 --zoom 0.78125 --print-media-type --disable-smart-shrinking resume.html out.pdf

　　汇报人：朱策

　　根据之前的功能需求，暂时设计网站界面样式如 http://114.214.166.183/index.html 所示。

接下来任务：1.继续深入完成富文本编辑器与网站的融合，初步实现基本功能

　　　　　　2.调研pdf生成对中文字体的支持

　　　　　　3.浏览器端保存简历

　　　　　　4.简历模板库调研

　　　　　　5.技术文档的完善