增加导出 pdf 功能

package.json

@@ -5,7 +5,9 @@
   "main": "./src/app.js",
   "dependencies": {
     "classnames": "^2.2.5",
+    "html2canvas": "^0.5.0-beta4",
     "isomorphic-fetch": "^2.2.1",
+    "jspdf": "^1.3.5",
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
     "react-addons-css-transition-group": "^15.5.2",

src/components/content.js

@@ -18,9 +18,11 @@ class Content extends React.Component {
         .then(response => response.json())
         .then(data => {
             console.log(data)
-            this.setState({
-                publications: data.filter(n => !n.fork).sort((a, b) => a.stargazers_count < b.stargazers_count).slice(0, 6),
-            })
+            if (!data.message) {
+                this.setState({
+                    publications: data.filter(n => !n.fork).sort((a, b) => a.stargazers_count < b.stargazers_count).slice(0, 6),
+                })
+            }
         })
     }
 

src/components/footer.js

@@ -8,7 +8,7 @@ class Footer extends React.Component {
     render () {
         return (
             <section className="col-md-12 card-wrapper">
-                <div className="footer">简历模板由 skyvow 设计开发，最后更新于<span className="date">2017-08-08</span></div>
+                <div className="footer">简历模板由 skyvow 设计开发，最后更新于<span className="date">2017-09-26</span></div>
             </section>
         )
     }

src/components/navbar.js

@@ -47,6 +47,9 @@ class Navbar extends React.Component {
                     <i className="icon-bars"></i>
                     <span className="close-icon">×</span>
                 </a>
+                <a className={btncls} href="javascript:;" onClick={this.props.renderHTMLtoPDF} style={{ bottom: '80px' }}>
+                    <i className="glyphicon glyphicon-download-alt" style={{ lineHeight: '50px' }}></i>
+                </a>
                 <nav className={navcls}>
                     <ul className="list-unstyled">
                         <li><a href="javascript:;" onClick={() => this.scrollToAnchor('about')}><i className="mr-10 icon-board"></i>自我描述</a></li>

src/components/siderbar.js

@@ -19,6 +19,7 @@ class SiderBar extends React.Component {
                     </div>
                     <div className="name-and-profession text-center">
                         <h3><b>{basics.name}</b></h3>
+                        <h4><b>{basics.position}</b></h4>
                         <h5 className="text-muted">{basics.label}</h5>
                     </div>
                     </span>

src/containers/main.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import html2canvas from 'html2canvas'
+import jsPDF from 'jspdf'
 import SiderBar from '../components/siderbar'
 import Footer from '../components/footer'
 import Content from '../components/content'
@@ -11,11 +13,56 @@ class Main extends React.Component {
         loading.style.display = 'none'
     }
 
+    renderHTMLtoPDF = () => {
+        html2canvas(document.body, {
+            onrendered: (canvas) => {
+                const contentWidth = canvas.width
+                const contentHeight = canvas.height
+
+                //一页pdf显示html页面生成的canvas高度
+                let pageHeight = contentWidth / 592.28 * 841.89
+
+                //未生成pdf的html页面高度
+                let leftHeight = contentHeight
+
+                //页面偏移
+                let position = 0
+
+                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+                const imgWidth = 595.28
+                const imgHeight = 592.28 / contentWidth * contentHeight
+
+                const pageData = canvas.toDataURL('image/jpeg', 1.0)
+
+                const pdf = new jsPDF('', 'pt', 'a4')
+
+                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+                //当内容未超过pdf一页显示的范围，无需分页
+                if (leftHeight < pageHeight) {
+                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+                } else {
+                    while (leftHeight > 0) {
+                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+                        leftHeight -= pageHeight
+                        position -= 841.89
+
+                        //避免添加空白页
+                        if (leftHeight > 0) {
+                            pdf.addPage()
+                        }
+                    }
+                }
+
+                pdf.save('郭海龙-web前端.pdf')
+            }
+        })
+    }
+
     render () {
         return (
             <div className="container-fluid" >
                 <div className="row main clearfix">
-                    <Navbar />
+                    <Navbar renderHTMLtoPDF={this.renderHTMLtoPDF} />
                     <SiderBar {...resume} />
                     <Content {...resume} />
                     <Footer />

src/utils/resume.js

@@ -1,5 +1,6 @@
 export default {
     'basics': {
+        'position': 'web前端工程师',
         'name': '郭海龙',
         'gender': '男',
         'age': '25',

webpack.config.babel.js

@@ -103,6 +103,7 @@ const config = {
                 loader: 'url-loader?limit=8192&name=assets/fonts/[hash].[ext]',
             },
         ],
+        noParse: [/html2canvas/, /jspdf/],
     },
     postcss: webpack => {
         const dependent = {

webpack.dll.config.babel.js

@@ -25,4 +25,7 @@ export default {
             context: __dirname,
         }),
     ],
+    module: {
+        noParse: [/html2canvas/, /jspdf/],
+    },
 }

yarn.lock

@@ -31,6 +31,10 @@ acorn@^5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
 
+adler32cs@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/adler32cs/-/adler32cs-0.0.1.tgz#9e29cd8087564d7055209ced1206a58d22e778eb"
+
 ajv-keywords@^1.0.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
@@ -1072,6 +1076,10 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
+cf-blob.js@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/cf-blob.js/-/cf-blob.js-0.0.1.tgz#f5ab7e12e798caf08ccf828c69aba0f063d83f99"
+
 chain-function@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
@@ -2161,6 +2169,10 @@ file-loader@^0.8.5:
   dependencies:
     loader-utils "~0.2.5"
 
+file-saver@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.3.tgz#cdd4c44d3aa264eac2f68ec165bc791c34af1232"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -2593,6 +2605,10 @@ html-webpack-plugin@^2.28.0:
     pretty-error "^2.0.2"
     toposort "^1.0.0"
 
+html2canvas@^0.5.0-beta4:
+  version "0.5.0-beta4"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-0.5.0-beta4.tgz#8282c62ac5fd78168f5702b5e4877157ca93f39e"
+
 htmlparser2@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
@@ -3025,6 +3041,14 @@ jsonpointer@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
 
+jspdf@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/jspdf/-/jspdf-1.3.5.tgz#e8c9d96fe1c1f152fce430f41d5ec66f17e10f19"
+  dependencies:
+    adler32cs "0.0.1"
+    cf-blob.js "0.0.1"
+    file-saver "1.3.3"
+
 jspm-github@^0.14.11:
   version "0.14.13"
   resolved "https://registry.yarnpkg.com/jspm-github/-/jspm-github-0.14.13.tgz#326e5217d3639b21609293b01e7e18775dd3dcc7"