Resume generation Platform Project Development-STEP4 Second project meeting discussion

Time: 2016.7.15 Friday 7:30

Location: library

Discussion topic: Communicate the progress of each project in hand and determine the next task

Content: Follow the previous discussion of the task of everyone to report their progress.

Report Person: Tanzhuo, Yingzhong

Content: 1. A template based on a rich text editor, directly edited by the user.

~ Browser-side generation (seemingly non-line)

~ Direct Print page (research how to hide header footer, seemingly not line) see http://stackoverflow.com/questions/1960939/ disabling-browser-print-options-headers-footers-margins-from-page/2780518

Rich Text Editor:

In CKEditor, for example, an editor can output HTML code that can be used to reproduce the contents of an editor.

Some editor edits work well and feel like the experience is beyond word.

Initially selected CKEditor, need to read its documentation: Http://docs.ckeditor.com/#!/guide

Rich Text Editor Implementation principle: Https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

Keywords: designMode, contenteditable

2. There are two ways to export the HTML to the editor output PDF

Server-side PDF generates two things: Wkhtmltopdf, Phantomjs.

Both are based on WebKit and can render HTML, and in the same way output PDFs, like browsers.

Web page sent to the editor generated HTML, the server in the same environment to run the page, the received data (HTML) to fill in, reproduce the Resume page, output PDF.

　　　　　　Experimental results show that the PHANTOMJS rendering results are closer to the real browser, which is used to output PDFs.

3. How to achieve control A4 paper output

A.html/css

　　　　　

@page {Size:a4;Margin0;}@mediaPrint {HTML {Width210mm/* height is 1mm smaller than A4, because the page may overflow a little bit and become two pages */Height:calc (297MM-1MM);Margin0; }}/* HTML set to A4 size */HTML {Width210mmHeight:calc (297MM-1MM);Margin0;}/* Below two for commissioning *//* Black box is the border of A4 paper */HTML {Border1px solid black;} /* red box is the resume content, that is, A4 paper to remove the margin */body { border: 1px solid red;} body {/* CV page margin set here *//* margin:0cm 1cm 2cm 1cm; */}/* the padding and border of that element No. longer increase its width *//* ref Http://learn layout.com/box-sizing.html */* {-webkit-box-sizing: Border-box; -moz-box-sizing:border-box; box-sizing:border-box;} 
 
                 /span>       

Resume page, CSS can not use PX units, px is pixels, to use cm, em,%, etc. can determine the actual size of units.

Be careful when introducing third-party CSS.

B.phantomjs

See Code 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

Report Person: Zhu Ze

According to the previous functional requirements, the temporary design of the site interface style as shown in http://114.214.166.183/index.html.

Next task: 1. Continue to deepen the integration of rich Text editor and Web site, the initial implementation of basic functions

2. Research PDF to generate support for Chinese fonts

3. Save your CV on the browser side

4. CV Template Library Research

5. Improvement of technical documentation

Resume generation Platform Project Development-STEP4 Second project meeting discussion