Add Paged.js to support paged media

Paged.js will transform an HTML5 page into a set of printable pages. Margin, footer and header can be configured on each pages.
ggrossetie · Nov 26, 2018 · 8e840ac · 8e840ac
1 parent 2ad15be
commit 8e840ac
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 4 deletions.
diff --git a/examples/document/document.css b/examples/document/document.css
@@ -3,23 +3,75 @@
 
 @page {
   margin: 0.5in 0.67in 0.67in 0.67in;
+  size: A4;
+}
+
+@page :left {
+  @bottom-right {
+    content: counter(page);
+    font-size: 0.8rem;
+    padding: 10pt 0 0 0;
+    margin: 10pt 10pt 30pt 10pt;
+    border-top: .1pt solid #d2d2d2;
+  }
+  @bottom-left {
+    margin: 10pt 0 30pt 0;
+    border-top: .1pt solid #d2d2d2;
+  }
+}
+
+@page :right {
+  @bottom-right {
+    margin: 10pt 0 30pt 0;
+    border-top: .1pt solid #d2d2d2;
+  }
+  @bottom-left {
+    content: counter(page);
+    font-size: 0.8rem;
+    padding: 10pt 0 0 0;
+    margin: 10pt 10pt 30pt 10pt;
+    border-top: .1pt solid #d2d2d2;
+  }
+}
+
+@page :first {
+  @bottom-right {
+    margin: 0;
+    padding: 0;
+    border: none;
+    content: normal;
+  }
+  @bottom-left {
+    margin: 0;
+    padding: 0;
+    border: none;
+    content: normal;
+  }
 }
 
 html {
   font: 10.5pt/1.15 'Noto Serif', serif;
   text-align: justify;
 }
 
+p[data-split-to], li[data-split-to], figcaption[data-split-to], blockquote[data-split-to],
+.sectionbody, [data-split-original] {
+  text-align-last: left !important;
+}
+
 #cover {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  width: 100vw;
   height: 100vh;
   page-break-after: always;
   align-items: flex-end;
 }
 
+.pagedjs_page.pagedjs_first_page {
+  counter-increment: page 0;
+}
+
 #cover h1 {
   color: #999;
   font-weight: 200;
@@ -90,3 +142,15 @@ table.grid-all > * > tr > .tableblock:last-child, table.grid-cols > * > tr > .ta
 table.grid-all > tbody > tr:last-child > .tableblock, table.grid-all > thead:last-child > tr > .tableblock, table.grid-rows > tbody > tr:last-child > .tableblock, table.grid-rows > thead:last-child > tr > .tableblock {
   border-bottom-width: 1px;
 }
+
+table {
+  page-break-inside: avoid;
+}
+
+tr {
+  page-break-inside: avoid;
+}
+
+.listingblock {
+  page-break-inside: avoid;
+}
diff --git a/examples/document/document.pdf b/examples/document/document.pdf
diff --git a/examples/document/templates/document.js b/examples/document/templates/document.js
@@ -4,6 +4,8 @@ module.exports = (node) => `<!DOCTYPE html>
 <meta charset="UTF-8">
 <link href="./asciidoctor.css" rel="stylesheet">
 <link href="./document.css" rel="stylesheet">
+<script src="../../node_modules/pagedjs/dist/paged.polyfill.js"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body class="article">
 <div id="cover">

diff --git a/lib/converter.js b/lib/converter.js
@@ -59,13 +59,19 @@ async function convert(inputFile, options, timings) {
   }
   const browser = await puppeteer.launch(puppeteerConfig);
   const page = await browser.newPage()
+
   page.on('pageerror', function (err) {
     console.log('Page error: ' + err.toString())
   }).on('error', function (err) {
     console.log('Error: ' + err.toString())
   })
   await writeFile(tempFile, html)
-  await page.goto('file://' + tempFile, {waitUntil: 'networkidle2'})
+  //await page.goto('file://' + tempFile, {waitUntil: 'networkidle2'})
+  const baseAbsolutePath = process.cwd();
+  const relativeFilePath = path.relative(baseAbsolutePath, tempFile);
+  const url = 'http://localhost:5000/' + relativeFilePath;
+  console.log(`goto ${url}`)
+  await page.goto(url, {waitUntil: 'networkidle2'})
   const pdfOptions = {
     path: outputFile,
     printBackground: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
   "homepage": "https://github.com/Mogztter/asciidoctor-pdf.js#readme",
   "dependencies": {
     "asciidoctor.js": "1.5.7",
+    "pagedjs": "^0.1.22",
     "puppeteer": "^1.3.0",
     "yargs": "^11.0.0"
   },