Remove of pdf-image to use puppeteer & better (print and not print) styles

package.json

@@ -14,14 +14,12 @@
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
     "pdf": "node scripts/export.js",
-    "preview": "node scripts/preview.js",
     "test:deleteFiles": "node test/scripts/deleteFiles.js",
     "test:cafe": "testcafe chromium test/",
     "test:e2e": "concurrently \"npm run dev\" \"npm run test:cafe\" --success first --kill-others --raw",
     "test:export": "SCRIPT=export npm run test:deleteFiles && npm run export && mocha test/scripts/export.js",
-    "test:preview": "SCRIPT=preview npm run test:deleteFiles && npm run preview && mocha test/scripts/preview.js",
     "test:docs": "npm run docs && concurrently \"npm run docs:serve\" \"npm run test:cafe\" --success first --kill-others --raw",
-    "test": "npm run test:export && npm run test:preview && npm run test:docs && npm run test:e2e",
+    "test": "npm run test:export && npm run test:docs && npm run test:e2e",
     "export": "concurrently \"npm run dev\" \"npm run pdf\" --success first --kill-others --raw",
     "lint": "eslint --ext .js,.vue src scripts",
     "lint:fix": "eslint --ext .js,.vue src scripts --fix"
@@ -82,7 +80,6 @@
     "opn": "5.4.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "ora": "3.0.0",
-    "pdf-image": "2.0.0",
     "postcss": "7.0.4",
     "postcss-cssnext": "3.1.0",
     "puppeteer": "1.8.0",

scripts/export.js

@@ -53,6 +53,8 @@ const convert = async () => {
     console.log('Exporting ...');
     try {
         const fullDirectoryPath = path.join(__dirname, '../pdf/');
+        const previewOutPath = path.join(__dirname, '../src/assets/preview/resume-');
+        const printCSSPath = path.join(__dirname, '../src/assets/css/');
         const directories = getResumesFromDirectories();
         directories.forEach(async (dir) => {
             const browser = await puppeteer.launch({
@@ -68,10 +70,18 @@ const convert = async () => {
             ) {
                 fs.mkdirSync(fullDirectoryPath);
             }
+            await page.addStyleTag({path: printCSSPath + 'print.css'});
+            await page.emulateMedia('print');
+            await page.screenshot({
+                path: previewOutPath + dir.name + '.png',
+                fullPage: true,
+                omitBackground: false
+            });
             await page.pdf({
                 path: fullDirectoryPath + dir.name + '.pdf',
                 format: 'A4'
             });
+            await page.close();
             await browser.close();
         });
     } catch (err) {

src/App.vue

@@ -24,6 +24,6 @@ body {
   padding: 0;
   margin: 0;
   overflow-x: hidden;
-  background: #CCCCCC;
+  background: #f2f2f2;
 }
 </style>

src/assets/css/print.css

@@ -0,0 +1,20 @@
+  @page {
+    size:A4;
+    margin:0;
+  }
+  html,body{
+    width: 210mm;
+    height: 297mm;
+    font-size: 11px;
+    background: #FFF;
+    overflow:visible;
+  }
+  body {
+    display: table;
+    table-layout: fixed;
+  }
+  html,body,.page-wrapper,.page{padding:0;margin:0;page-break-after:always}
+  .page{width:210mm}
+  .page,.page-wrapper,.page-inner{height:297mm}
+  .section-content{padding-left:0!important}
+  body,.page-wrapper{padding:0!important}

src/pages/resume.vue

@@ -23,7 +23,7 @@ export default Vue.component('resume', {
 }
 .page-wrapper {
   overflow-x: hidden;
-  background: #CCCCCC;
+  background: transparent;
   margin: 0;
   padding: 0;
   -webkit-print-color-adjust: exact;
@@ -45,3 +45,19 @@ export default Vue.component('resume', {
   overflow: hidden;
 }
 </style>
+<style>
+@media not print {
+  .page {
+    max-width: 1000px;
+    width:90%;
+    height:auto;
+    margin:30px auto;
+    position: relative;
+    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.1);
+    -moz-box-shadow: 0 2px 4px rgba(0,0,0,.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,.1);
+  }
+  .content__left,.content__right{height:auto!important}
+  body{padding:30px!important}
+}
+</style>