diff --git a/package-lock.json b/package-lock.json
index 72530d5..ecb9d4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1272,8 +1272,7 @@
     "abab": {
       "version": "2.0.0",
       "resolved": "http://r.cnpmjs.org/abab/download/abab-2.0.0.tgz",
-      "integrity": "sha1-q6CrTF7uLUx500h9hUUPsjduuw8=",
-      "dev": true
+      "integrity": "sha1-q6CrTF7uLUx500h9hUUPsjduuw8="
     },
     "abbrev": {
       "version": "1.1.1",
@@ -1325,7 +1324,6 @@
       "version": "5.5.2",
       "resolved": "http://r.cnpmjs.org/ajv/download/ajv-5.5.2.tgz",
       "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
-      "dev": true,
       "requires": {
         "co": "^4.6.0",
         "fast-deep-equal": "^1.0.0",
@@ -1755,8 +1753,7 @@
     "array-equal": {
       "version": "1.0.0",
       "resolved": "http://r.cnpmjs.org/array-equal/download/array-equal-1.0.0.tgz",
-      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
-      "dev": true
+      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM="
     },
     "array-filter": {
       "version": "0.0.1",
@@ -1819,7 +1816,6 @@
       "version": "0.2.4",
       "resolved": "http://r.cnpmjs.org/asn1/download/asn1-0.2.4.tgz",
       "integrity": "sha1-jSR136tVO7M+d7VOWeiAu4ziMTY=",
-      "dev": true,
       "requires": {
         "safer-buffer": "~2.1.0"
       }
@@ -1864,8 +1860,7 @@
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "http://r.cnpmjs.org/assert-plus/download/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
     },
     "assign-symbols": {
       "version": "1.0.0",
@@ -1909,8 +1904,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "http://r.cnpmjs.org/asynckit/download/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "atob": {
       "version": "2.1.2",
@@ -1954,14 +1948,12 @@
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "http://r.cnpmjs.org/aws-sign2/download/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
       "version": "1.8.0",
       "resolved": "http://r.cnpmjs.org/aws4/download/aws4-1.8.0.tgz",
-      "integrity": "sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8=",
-      "dev": true
+      "integrity": "sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8="
     },
     "babel-code-frame": {
       "version": "6.26.0",
@@ -2415,6 +2407,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "http://r.cnpmjs.org/base64-arraybuffer/download/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "http://r.cnpmjs.org/base64-js/download/base64-js-1.3.0.tgz",
@@ -2431,7 +2428,6 @@
       "version": "1.0.2",
       "resolved": "http://r.cnpmjs.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "dev": true,
       "optional": true,
       "requires": {
         "tweetnacl": "^0.14.3"
@@ -2895,6 +2891,98 @@
       "integrity": "sha1-6Inp+OflDnafKkljTJMriu5iKYQ=",
       "dev": true
     },
+    "canvg": {
+      "version": "1.5.3",
+      "resolved": "http://r.cnpmjs.org/canvg/download/canvg-1.5.3.tgz",
+      "integrity": "sha1-qtF5FfMzaL+OuAsl0SnjrpIt3F8=",
+      "requires": {
+        "jsdom": "^8.1.0",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^1.4.1",
+        "xmldom": "^0.1.22"
+      },
+      "dependencies": {
+        "abab": {
+          "version": "1.0.4",
+          "resolved": "http://r.cnpmjs.org/abab/download/abab-1.0.4.tgz",
+          "integrity": "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4="
+        },
+        "acorn": {
+          "version": "2.7.0",
+          "resolved": "http://r.cnpmjs.org/acorn/download/acorn-2.7.0.tgz",
+          "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc="
+        },
+        "acorn-globals": {
+          "version": "1.0.9",
+          "resolved": "http://r.cnpmjs.org/acorn-globals/download/acorn-globals-1.0.9.tgz",
+          "integrity": "sha1-VbtemGkVB7dFedBRNBMhfDgMVM8=",
+          "requires": {
+            "acorn": "^2.1.0"
+          }
+        },
+        "cssstyle": {
+          "version": "0.2.37",
+          "resolved": "http://r.cnpmjs.org/cssstyle/download/cssstyle-0.2.37.tgz",
+          "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=",
+          "requires": {
+            "cssom": "0.3.x"
+          }
+        },
+        "jsdom": {
+          "version": "8.5.0",
+          "resolved": "http://r.cnpmjs.org/jsdom/download/jsdom-8.5.0.tgz",
+          "integrity": "sha1-1Nj12/J2hjW2KmKCO5R89wcevJg=",
+          "requires": {
+            "abab": "^1.0.0",
+            "acorn": "^2.4.0",
+            "acorn-globals": "^1.0.4",
+            "array-equal": "^1.0.0",
+            "cssom": ">= 0.3.0 < 0.4.0",
+            "cssstyle": ">= 0.2.34 < 0.3.0",
+            "escodegen": "^1.6.1",
+            "iconv-lite": "^0.4.13",
+            "nwmatcher": ">= 1.3.7 < 2.0.0",
+            "parse5": "^1.5.1",
+            "request": "^2.55.0",
+            "sax": "^1.1.4",
+            "symbol-tree": ">= 3.1.0 < 4.0.0",
+            "tough-cookie": "^2.2.0",
+            "webidl-conversions": "^3.0.1",
+            "whatwg-url": "^2.0.1",
+            "xml-name-validator": ">= 2.0.1 < 3.0.0"
+          }
+        },
+        "parse5": {
+          "version": "1.5.1",
+          "resolved": "http://r.cnpmjs.org/parse5/download/parse5-1.5.1.tgz",
+          "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ="
+        },
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "http://r.cnpmjs.org/tr46/download/tr46-0.0.3.tgz",
+          "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "http://r.cnpmjs.org/webidl-conversions/download/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+        },
+        "whatwg-url": {
+          "version": "2.0.1",
+          "resolved": "http://r.cnpmjs.org/whatwg-url/download/whatwg-url-2.0.1.tgz",
+          "integrity": "sha1-U5ayBD8CDub3BNnEXqhRnnJN5lk=",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        },
+        "xml-name-validator": {
+          "version": "2.0.1",
+          "resolved": "http://r.cnpmjs.org/xml-name-validator/download/xml-name-validator-2.0.1.tgz",
+          "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU="
+        }
+      }
+    },
     "capture-exit": {
       "version": "1.2.0",
       "resolved": "http://r.cnpmjs.org/capture-exit/download/capture-exit-1.2.0.tgz",
@@ -2913,8 +3001,12 @@
     "caseless": {
       "version": "0.12.0",
       "resolved": "http://r.cnpmjs.org/caseless/download/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
+    },
+    "cf-blob.js": {
+      "version": "0.0.1",
+      "resolved": "http://r.cnpmjs.org/cf-blob.js/download/cf-blob.js-0.0.1.tgz",
+      "integrity": "sha1-9at+EueYyvCMz4KMaaug8GPYP5k="
     },
     "chalk": {
       "version": "2.4.1",
@@ -3237,8 +3329,7 @@
     "co": {
       "version": "4.6.0",
       "resolved": "http://r.cnpmjs.org/co/download/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
     },
     "coa": {
       "version": "2.0.1",
@@ -3310,7 +3401,6 @@
       "version": "1.0.6",
       "resolved": "http://r.cnpmjs.org/combined-stream/download/combined-stream-1.0.6.tgz",
       "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -3569,8 +3659,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "http://r.cnpmjs.org/core-util-is/download/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.0.6",
@@ -3719,6 +3808,14 @@
         }
       }
     },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "http://r.cnpmjs.org/css-line-break/download/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "requires": {
+        "base64-arraybuffer": "^0.1.5"
+      }
+    },
     "css-loader": {
       "version": "1.0.0",
       "resolved": "http://r.cnpmjs.org/css-loader/download/css-loader-1.0.0.tgz",
@@ -4019,8 +4116,7 @@
     "cssom": {
       "version": "0.3.4",
       "resolved": "http://r.cnpmjs.org/cssom/download/cssom-0.3.4.tgz",
-      "integrity": "sha1-jNUuijrP1o067TjuCmQBd9L515c=",
-      "dev": true
+      "integrity": "sha1-jNUuijrP1o067TjuCmQBd9L515c="
     },
     "cssstyle": {
       "version": "1.1.1",
@@ -4050,7 +4146,6 @@
       "version": "1.14.1",
       "resolved": "http://r.cnpmjs.org/dashdash/download/dashdash-1.14.1.tgz",
       "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -4121,8 +4216,7 @@
     "deep-is": {
       "version": "0.1.3",
       "resolved": "http://r.cnpmjs.org/deep-is/download/deep-is-0.1.3.tgz",
-      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
-      "dev": true
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
     "deepmerge": {
       "version": "1.5.2",
@@ -4260,8 +4354,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "http://r.cnpmjs.org/delayed-stream/download/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
     "delegates": {
       "version": "1.0.0",
@@ -4476,7 +4569,6 @@
       "version": "0.1.2",
       "resolved": "http://r.cnpmjs.org/ecc-jsbn/download/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "dev": true,
       "optional": true,
       "requires": {
         "jsbn": "~0.1.0",
@@ -4635,7 +4727,6 @@
       "version": "1.11.0",
       "resolved": "http://r.cnpmjs.org/escodegen/download/escodegen-1.11.0.tgz",
       "integrity": "sha1-snqTiUgdW/1b7Hb3ux6z+PRVZYk=",
-      "dev": true,
       "requires": {
         "esprima": "^3.1.3",
         "estraverse": "^4.2.0",
@@ -4647,14 +4738,12 @@
         "esprima": {
           "version": "3.1.3",
           "resolved": "http://r.cnpmjs.org/esprima/download/esprima-3.1.3.tgz",
-          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
-          "dev": true
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
         },
         "source-map": {
           "version": "0.6.1",
           "resolved": "http://r.cnpmjs.org/source-map/download/source-map-0.6.1.tgz",
           "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
-          "dev": true,
           "optional": true
         }
       }
@@ -4687,14 +4776,12 @@
     "estraverse": {
       "version": "4.2.0",
       "resolved": "http://r.cnpmjs.org/estraverse/download/estraverse-4.2.0.tgz",
-      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
-      "dev": true
+      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM="
     },
     "esutils": {
       "version": "2.0.2",
       "resolved": "http://r.cnpmjs.org/esutils/download/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
-      "dev": true
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
     },
     "etag": {
       "version": "1.8.1",
@@ -4871,8 +4958,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "http://r.cnpmjs.org/extend/download/extend-3.0.2.tgz",
-      "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo=",
-      "dev": true
+      "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo="
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -4916,14 +5002,12 @@
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "http://r.cnpmjs.org/extsprintf/download/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
     "fast-deep-equal": {
       "version": "1.1.0",
       "resolved": "http://r.cnpmjs.org/fast-deep-equal/download/fast-deep-equal-1.1.0.tgz",
-      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
-      "dev": true
+      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
     },
     "fast-glob": {
       "version": "2.2.2",
@@ -5269,14 +5353,12 @@
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "http://r.cnpmjs.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-      "dev": true
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "http://r.cnpmjs.org/fast-levenshtein/download/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
-      "dev": true
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
     "fastparse": {
       "version": "1.1.1",
@@ -5318,6 +5400,11 @@
         "schema-utils": "^0.4.5"
       }
     },
+    "file-saver": {
+      "version": "1.3.8",
+      "resolved": "http://r.cnpmjs.org/file-saver/download/file-saver-1.3.8.tgz",
+      "integrity": "sha1-5oowx8sETi+zYrQoRp/rKRwuCdg="
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "http://r.cnpmjs.org/filename-regex/download/filename-regex-2.0.1.tgz",
@@ -5458,8 +5545,7 @@
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "http://r.cnpmjs.org/forever-agent/download/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "0.4.9",
@@ -5483,7 +5569,6 @@
       "version": "2.3.2",
       "resolved": "http://r.cnpmjs.org/form-data/download/form-data-2.3.2.tgz",
       "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=",
-      "dev": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "1.0.6",
@@ -5664,8 +5749,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -5675,8 +5759,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5793,8 +5876,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5806,7 +5888,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5932,8 +6013,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6066,7 +6146,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6246,7 +6325,6 @@
       "version": "0.1.7",
       "resolved": "http://r.cnpmjs.org/getpass/download/getpass-0.1.7.tgz",
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -6373,14 +6451,12 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "http://r.cnpmjs.org/har-schema/download/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
     },
     "har-validator": {
       "version": "5.1.0",
       "resolved": "http://r.cnpmjs.org/har-validator/download/har-validator-5.1.0.tgz",
       "integrity": "sha1-RGV/VoiiLP1LckhugbOj+xF0LCk=",
-      "dev": true,
       "requires": {
         "ajv": "^5.3.0",
         "har-schema": "^2.0.0"
@@ -6658,6 +6734,14 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-alpha.12",
+      "resolved": "http://r.cnpmjs.org/html2canvas/download/html2canvas-1.0.0-alpha.12.tgz",
+      "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.3.0",
       "resolved": "http://r.cnpmjs.org/htmlparser2/download/htmlparser2-3.3.0.tgz",
@@ -7062,7 +7146,6 @@
       "version": "1.2.0",
       "resolved": "http://r.cnpmjs.org/http-signature/download/http-signature-1.2.0.tgz",
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -7079,7 +7162,6 @@
       "version": "0.4.23",
       "resolved": "http://r.cnpmjs.org/iconv-lite/download/iconv-lite-0.4.23.tgz",
       "integrity": "sha1-KXhx9jvlB63Pv8pxXQzQ7thOmmM=",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -7540,8 +7622,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "http://r.cnpmjs.org/is-typedarray/download/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
     "is-utf8": {
       "version": "0.2.1",
@@ -7600,8 +7681,7 @@
     "isstream": {
       "version": "0.1.2",
       "resolved": "http://r.cnpmjs.org/isstream/download/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
     "istanbul-api": {
       "version": "1.3.7",
@@ -8297,7 +8377,6 @@
       "version": "0.1.1",
       "resolved": "http://r.cnpmjs.org/jsbn/download/jsbn-0.1.1.tgz",
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true,
       "optional": true
     },
     "jsdom": {
@@ -8349,20 +8428,17 @@
     "json-schema": {
       "version": "0.2.3",
       "resolved": "http://r.cnpmjs.org/json-schema/download/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
     },
     "json-schema-traverse": {
       "version": "0.3.1",
       "resolved": "http://r.cnpmjs.org/json-schema-traverse/download/json-schema-traverse-0.3.1.tgz",
-      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
-      "dev": true
+      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "http://r.cnpmjs.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
     "json3": {
       "version": "3.3.2",
@@ -8391,11 +8467,22 @@
       "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
       "dev": true
     },
+    "jspdf": {
+      "version": "1.4.1",
+      "resolved": "http://r.cnpmjs.org/jspdf/download/jspdf-1.4.1.tgz",
+      "integrity": "sha1-jb1DeYY0bWXv4g7eU2GSdma45Mo=",
+      "requires": {
+        "canvg": "^1.0",
+        "cf-blob.js": "0.0.1",
+        "file-saver": "1.3.8",
+        "omggif": "1.0.7",
+        "stackblur": "^1.0.0"
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "http://r.cnpmjs.org/jsprim/download/jsprim-1.4.1.tgz",
       "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -8468,7 +8555,6 @@
       "version": "0.3.0",
       "resolved": "http://r.cnpmjs.org/levn/download/levn-0.3.0.tgz",
       "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
-      "dev": true,
       "requires": {
         "prelude-ls": "~1.1.2",
         "type-check": "~0.3.2"
@@ -8891,14 +8977,12 @@
     "mime-db": {
       "version": "1.36.0",
       "resolved": "http://r.cnpmjs.org/mime-db/download/mime-db-1.36.0.tgz",
-      "integrity": "sha1-UCBHjbPH/pOq17vMTc+GnEM2M5c=",
-      "dev": true
+      "integrity": "sha1-UCBHjbPH/pOq17vMTc+GnEM2M5c="
     },
     "mime-types": {
       "version": "2.1.20",
       "resolved": "http://r.cnpmjs.org/mime-types/download/mime-types-2.1.20.tgz",
       "integrity": "sha1-kwy3GdVx6QNzhSD4RwkRVIyizBk=",
-      "dev": true,
       "requires": {
         "mime-db": "~1.36.0"
       }
@@ -9525,6 +9609,11 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
       "dev": true
     },
+    "nwmatcher": {
+      "version": "1.4.4",
+      "resolved": "http://r.cnpmjs.org/nwmatcher/download/nwmatcher-1.4.4.tgz",
+      "integrity": "sha1-IoVjHzSpXw0Dlc2QDJbtObWPNG4="
+    },
     "nwsapi": {
       "version": "2.0.9",
       "resolved": "http://r.cnpmjs.org/nwsapi/download/nwsapi-2.0.9.tgz",
@@ -9534,8 +9623,7 @@
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "http://r.cnpmjs.org/oauth-sign/download/oauth-sign-0.9.0.tgz",
-      "integrity": "sha1-R6ewFrqmi1+g7PPe4IqFxnmsZFU=",
-      "dev": true
+      "integrity": "sha1-R6ewFrqmi1+g7PPe4IqFxnmsZFU="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -9655,6 +9743,11 @@
       "integrity": "sha1-Cb6jND1BhZ69RGKS0RydTbYZCE4=",
       "dev": true
     },
+    "omggif": {
+      "version": "1.0.7",
+      "resolved": "http://r.cnpmjs.org/omggif/download/omggif-1.0.7.tgz",
+      "integrity": "sha1-WdLuywJj3oRjWz/riHwMmXPx5J0="
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "http://r.cnpmjs.org/on-finished/download/on-finished-2.3.0.tgz",
@@ -9717,7 +9810,6 @@
       "version": "0.8.2",
       "resolved": "http://r.cnpmjs.org/optionator/download/optionator-0.8.2.tgz",
       "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
-      "dev": true,
       "requires": {
         "deep-is": "~0.1.3",
         "fast-levenshtein": "~2.0.4",
@@ -9730,8 +9822,7 @@
         "wordwrap": {
           "version": "1.0.0",
           "resolved": "http://r.cnpmjs.org/wordwrap/download/wordwrap-1.0.0.tgz",
-          "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
-          "dev": true
+          "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
         }
       }
     },
@@ -10024,8 +10115,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "http://r.cnpmjs.org/performance-now/download/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "pify": {
       "version": "3.0.0",
@@ -11190,8 +11280,7 @@
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "http://r.cnpmjs.org/prelude-ls/download/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-      "dev": true
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
     },
     "preserve": {
       "version": "0.2.0",
@@ -11312,8 +11401,7 @@
     "psl": {
       "version": "1.1.29",
       "resolved": "http://r.cnpmjs.org/psl/download/psl-1.1.29.tgz",
-      "integrity": "sha1-YPWA02AXC7cip5fMcEQR5tqFDGc=",
-      "dev": true
+      "integrity": "sha1-YPWA02AXC7cip5fMcEQR5tqFDGc="
     },
     "public-encrypt": {
       "version": "4.0.2",
@@ -11364,8 +11452,7 @@
     "qs": {
       "version": "6.5.2",
       "resolved": "http://r.cnpmjs.org/qs/download/qs-6.5.2.tgz",
-      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
-      "dev": true
+      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY="
     },
     "querystring": {
       "version": "0.2.0",
@@ -11778,7 +11865,6 @@
       "version": "2.88.0",
       "resolved": "http://r.cnpmjs.org/request/download/request-2.88.0.tgz",
       "integrity": "sha1-nC/KT301tZLv5Xx/ClXoEFIST+8=",
-      "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -11904,6 +11990,11 @@
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "http://r.cnpmjs.org/rgbcolor/download/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0="
+    },
     "rimraf": {
       "version": "2.6.2",
       "resolved": "http://r.cnpmjs.org/rimraf/download/rimraf-2.6.2.tgz",
@@ -11941,8 +12032,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "http://r.cnpmjs.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
-      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
-      "dev": true
+      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -11956,8 +12046,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "http://r.cnpmjs.org/safer-buffer/download/safer-buffer-2.1.2.tgz",
-      "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
-      "dev": true
+      "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo="
     },
     "sane": {
       "version": "2.5.2",
@@ -12401,8 +12490,7 @@
     "sax": {
       "version": "1.2.4",
       "resolved": "http://r.cnpmjs.org/sax/download/sax-1.2.4.tgz",
-      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk=",
-      "dev": true
+      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk="
     },
     "schema-utils": {
       "version": "0.4.7",
@@ -13053,7 +13141,6 @@
       "version": "1.14.2",
       "resolved": "http://r.cnpmjs.org/sshpk/download/sshpk-1.14.2.tgz",
       "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
-      "dev": true,
       "requires": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -13087,6 +13174,16 @@
       "integrity": "sha1-1PM6tU6OOHeLDKXP07OvsS22hiA=",
       "dev": true
     },
+    "stackblur": {
+      "version": "1.0.0",
+      "resolved": "http://r.cnpmjs.org/stackblur/download/stackblur-1.0.0.tgz",
+      "integrity": "sha1-tAen4FyTsI1miDu4CNfLo6UD8S8="
+    },
+    "stackblur-canvas": {
+      "version": "1.4.1",
+      "resolved": "http://r.cnpmjs.org/stackblur-canvas/download/stackblur-canvas-1.4.1.tgz",
+      "integrity": "sha1-hJqm+UsnL/JvZHH6QTDtH35HlVs="
+    },
     "stackframe": {
       "version": "1.0.4",
       "resolved": "http://r.cnpmjs.org/stackframe/download/stackframe-1.0.4.tgz",
@@ -13359,8 +13456,7 @@
     "symbol-tree": {
       "version": "3.2.2",
       "resolved": "http://r.cnpmjs.org/symbol-tree/download/symbol-tree-3.2.2.tgz",
-      "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=",
-      "dev": true
+      "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY="
     },
     "tapable": {
       "version": "1.0.0",
@@ -13519,7 +13615,6 @@
       "version": "2.4.3",
       "resolved": "http://r.cnpmjs.org/tough-cookie/download/tough-cookie-2.4.3.tgz",
       "integrity": "sha1-U/Nto/R3g7CSWvoG/587FlKA94E=",
-      "dev": true,
       "requires": {
         "psl": "^1.1.24",
         "punycode": "^1.4.1"
@@ -13528,8 +13623,7 @@
         "punycode": {
           "version": "1.4.1",
           "resolved": "http://r.cnpmjs.org/punycode/download/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
         }
       }
     },
@@ -13950,7 +14044,6 @@
       "version": "0.6.0",
       "resolved": "http://r.cnpmjs.org/tunnel-agent/download/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -13959,14 +14052,12 @@
       "version": "0.14.5",
       "resolved": "http://r.cnpmjs.org/tweetnacl/download/tweetnacl-0.14.5.tgz",
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true,
       "optional": true
     },
     "type-check": {
       "version": "0.3.2",
       "resolved": "http://r.cnpmjs.org/type-check/download/type-check-0.3.2.tgz",
       "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
-      "dev": true,
       "requires": {
         "prelude-ls": "~1.1.2"
       }
@@ -14369,8 +14460,7 @@
     "uuid": {
       "version": "3.3.2",
       "resolved": "http://r.cnpmjs.org/uuid/download/uuid-3.3.2.tgz",
-      "integrity": "sha1-G0r0lV6zB3xQHCOHL8ZROBFYcTE=",
-      "dev": true
+      "integrity": "sha1-G0r0lV6zB3xQHCOHL8ZROBFYcTE="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -14398,7 +14488,6 @@
       "version": "1.10.0",
       "resolved": "http://r.cnpmjs.org/verror/download/verror-1.10.0.tgz",
       "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -15397,6 +15486,11 @@
       "integrity": "sha1-auc+Bt5NjG5H+fsYH3jWSK1FfGo=",
       "dev": true
     },
+    "xmldom": {
+      "version": "0.1.27",
+      "resolved": "http://r.cnpmjs.org/xmldom/download/xmldom-0.1.27.tgz",
+      "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk="
+    },
     "xregexp": {
       "version": "4.0.0",
       "resolved": "http://r.cnpmjs.org/xregexp/download/xregexp-4.0.0.tgz",
diff --git a/package.json b/package.json
index 08167d1..db571e3 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "abab": "^2.0.0",
+    "html2canvas": "^1.0.0-alpha.12",
+    "jspdf": "^1.4.1",
     "vue": "^2.5.17",
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^7.0.0",
diff --git a/src/App.vue b/src/App.vue
index e0a2b28..e195f9b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,11 +2,17 @@
   <div id="app">
 
     <router-view/>
+    <Pdf></Pdf>
   </div>
 </template>
 <script lang="ts">
 import Vue from 'vue';
-export default Vue.extend({});
+import Pdf from './components/pdf.vue';
+export default Vue.extend({
+  components: {
+    Pdf,
+  },
+});
 </script>
 
 
diff --git a/src/components/boardOrderDetails.vue b/src/components/boardOrderDetails.vue
index 65bea1f..10e4777 100644
--- a/src/components/boardOrderDetails.vue
+++ b/src/components/boardOrderDetails.vue
@@ -1,15 +1,18 @@
 <template>
 
-  <div class='order-details'>
-    <div class='main_title '>
+  <div id='order-details'>
+
+    <!--
+      <div class='main_title '>
       <h1>板材明细单</h1>
     </div>
     <div class='sub-title'>
       <div class='header-detail' v-for="(info,index) in orderInfos " :key="index">
         <b>{{info}}:</b>{{orderDetails[Object.keys(orderDetails)[index]]}}</div>
     </div>
+    -->
     <template v-for="(board,index) in orderDetails.boards">
-      <Table :board="board" :key='index'></Table>
+      <Table :board="board" :key='index' :ifRenderIndex="index"></Table>
     </template>
 
   </div>
@@ -60,9 +63,8 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-.order-details {
-  width: 80%;
-  background-color: lightgray;
+#order-details {
+  width: 100%;
   margin: 0 auto;
   .main_title {
     text-align: center;
@@ -80,4 +82,7 @@ export default Vue.extend({
 .total_summary {
   text-align: right;
 }
+table {
+  width: 100%;
+}
 </style>
diff --git a/src/components/pdf.vue b/src/components/pdf.vue
new file mode 100644
index 0000000..64ae06a
--- /dev/null
+++ b/src/components/pdf.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class='pdf'>
+        <button @click="createPdf">print PDF</button>
+        <button @click="createExcel">print EXCEL</button>
+    </div>
+
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+export default Vue.extend({
+  data() {
+    return {
+      canvasUrl: '',
+    };
+  },
+  methods: {
+    createPdf() {
+      html2canvas(document.getElementById('order-details')).then(
+        (canvas: any) => {
+          canvas.setAttribute('id', 'canvas');
+          document.body.appendChild(canvas);
+          const canvasElement: any = document.getElementById('canvas');
+          this.canvasUrl = canvasElement.toDataURL();
+          const doc = new jsPDF({
+            unit: 'cm',
+          });
+          const height = canvasElement.height / window.outerHeight;
+          doc.addImage(this.canvasUrl, 0.5, 0.5, 20, 29 * height);
+          doc.save('test' + '.pdf');
+        },
+      );
+    },
+    createExcel() {
+      const tabs = document.getElementsByTagName('table');
+      let allElementText: any;
+      for (const tab of tabs) {
+        let tabText: string = '<table border="2px"><tr>';
+
+        for (const row of tab.rows) {
+          tabText += row.innerHTML + '</tr>';
+        }
+
+        allElementText += tabText + '</table>';
+      }
+
+      window.open(
+        'data:application/vnd.ms-excel,' + encodeURIComponent(allElementText),
+      );
+    },
+  },
+});
+</script>
+
diff --git a/src/components/table.vue b/src/components/table.vue
index f3ba918..951b454 100644
--- a/src/components/table.vue
+++ b/src/components/table.vue
@@ -2,19 +2,55 @@
   <div>
 
     <div class='board-title'>
-      <span>
-        <b>材料:{{board.matierial}}</b>
-      </span>
-      <span>
-        <b>颜色:{{board.color}}</b>
-      </span>
-      <span>
-        <b>共{{board.boardInfos.length}}条记录</b>
-      </span>
+
       <table>
-        <thead>
-          <th v-for="(header,index) in tableTitle" :key="index">{{header}}</th>
-        </thead>
+        <tr class='table-header' v-if="ifRenderIndex==0">
+          <td colspan="14" style='text-align: center;'>
+            <h1>板材明细单</h1>
+          </td>
+        </tr>
+        <tr class='table-header' v-if="ifRenderIndex==0">
+          <td>
+            <b>订单号:</b>
+          </td>
+          <td colspan="2">{{orderDetails.orderNo}}</td>
+          <td>
+            <b>客户名:</b>
+          </td>
+          <td colspan="4">{{orderDetails.clientName}}</td>
+          <td colspan="2">
+            <b>销售日期:</b>
+          </td>
+          <td colspan="4">{{orderDetails.soldData}}</td>
+        </tr>
+        <tr class='table-header' v-if="ifRenderIndex==0">
+          <td>
+            <b>联系人:</b>
+          </td>
+          <td colspan="2">{{orderDetails.contactName}}</td>
+          <td>
+            <b>联系电话:</b>
+          </td>
+          <td colspan="4">{{orderDetails.contactNo}}</td>
+          <td colspan="2">
+            <b>送货地址:</b>
+          </td>
+          <td colspan="4">{{orderDetails.deliveryAddress}}</td>
+        </tr>
+        <tr class='table-header' v-if="ifRenderIndex==0">
+          <td>
+            <b>备注:</b>
+          </td>
+          <td colspan="2">{{orderDetails.addOn}}</td>
+        </tr>
+
+        <tr class='table-header-one'>
+          <th colspan="3">材料:{{board.matierial}}</th>
+          <th colspan="7">颜色:{{board.color}}</th>
+          <th colspan="4">共{{board.boardInfos.length}}条记录</th>
+        </tr>
+        <th v-for="(header,index) in tableTitle" :key="index">{{header}}</th>
+
         <tbody>
           <tr v-for="(info,index) in board.boardInfos" :key="index">
             <td v-for="(each,index) in info " :key="index">{{each}}</td>
@@ -32,7 +68,7 @@
             <td colspan="4"></td>
           </tr>
         </tbody>
-        <tr v-show="isShow">
+        <tr v-if="ifRenderIndex==1">
           <td colspan="7" class='summary'>
             <b>总计:</b>
           </td>
@@ -57,7 +93,7 @@ const Data = infos.default;
 */
 
 export default Vue.extend({
-  props: { board: Object },
+  props: { board: Object, ifRenderIndex: Number },
   data() {
     return {
       orderDetails: Data,
@@ -121,21 +157,24 @@ export default Vue.extend({
       }
       return parseFloat(toatalAreas.toFixed(3));
     },
-    isShow(): boolean {
-      return this.board.id === Data.boards[Data.boards.length - 1].id;
-    },
   },
 });
 </script>
 <style lang="scss" scoped>
+td,
+th {
+  border: 1px solid black;
+}
 table {
   width: 100%;
   border-collapse: collapse;
 }
-table,
-td,
-th {
-  border: 1px solid black;
+
+.table-header-one {
+  text-align: left;
+  th {
+    border: 0px;
+  }
 }
 .board-title {
   display: flex;
@@ -147,6 +186,11 @@ th {
 .summary {
   text-align: right;
 }
+.table-header {
+  td {
+    border: 0px;
+  }
+}
 </style>