Add webpack example

foliojs · Jul 12, 2021 · 6567035 · 6567035
1 parent f7947c8
commit 6567035
Show file tree

Hide file tree

Showing 16 changed files with 2,132 additions and 0 deletions.
diff --git a/examples/webpack/.gitignore b/examples/webpack/.gitignore
@@ -0,0 +1,7 @@
+# Include your project-specific ignores in this file
+# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
+
+dist
+node_modules
+npm-debug.log
+/yarn-error.log
diff --git a/examples/webpack/README.md b/examples/webpack/README.md
@@ -0,0 +1,14 @@
+# pdfkit-webpack-example
+
+Simple example of using PdfKit with webpack
+
+### Features
+
+- Minimal webpack 5 setup
+- Automatically register binary files added to static-assets folder
+- Register AFM fonts provided by pdfkit
+- Shows how to load and register files lazily
+
+### Caveats
+
+Production build does not work. Probably how pdf document is created (inside a `new Function` call)
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -0,0 +1,21 @@
+{
+  "license": "MIT",
+  "dependencies": {
+    "brace": "^0.11.1",
+    "buffer": "^6.0.3",
+    "pdfkit": "file:./../..",
+    "process": "^0.11.10",
+    "readable-stream": "^3.6.0"
+  },
+  "devDependencies": {
+    "brfs": "^2.0.2",
+    "html-webpack-plugin": "^5.3.2",
+    "transform-loader": "^0.2.4",
+    "webpack": "^5.44.0",
+    "webpack-cli": "^4.7.2"
+  },
+  "scripts": {
+    "dev": "webpack --mode development",
+    "prod": "webpack --mode production"
+  }
+}
diff --git a/examples/webpack/src/httpHelpers.js b/examples/webpack/src/httpHelpers.js
@@ -0,0 +1,25 @@
+function createFetchError(fileURL, error) {
+  const result = new Error(`Fetching "${fileURL}" failed: ${error}`);
+  result.name = 'FetchError';
+  return result;
+}
+
+export function fetchFile(fileURL, { type = 'arraybuffer' } = {}) {
+  return new Promise((resolve, reject) => {
+    const request = new XMLHttpRequest();
+    request.open('GET', fileURL, true);
+    request.responseType = type;
+
+    request.onload = function(e) {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(createFetchError(fileURL, request.statusText));
+      }
+    };
+
+    request.onerror = error => reject(createFetchError(fileURL, error));
+
+    request.send();
+  });
+}
diff --git a/examples/webpack/src/index.html b/examples/webpack/src/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      width: 1230px;
+      margin: 20px auto;
+      font-family: Georgia;
+    }
+
+    h1 {
+      margin: 0;
+    }
+
+    a {
+      color: blue;
+    }
+
+    #editor {
+      width: 600px;
+      height: 775px;
+      margin-right: 20px;
+      display: inline-block;
+    }
+
+    iframe {
+      border: 1px solid black;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>PDFKit Browser Demo</h1>
+  <p>Bundled with Webpack</p>
+  <p><a href="http://pdfkit.org/">Website</a> | <a href="http://github.com/foliojs/pdfkit">Github</a></p>
+  <div id="editor"></div>
+  <iframe width="600" height="775"></iframe>
+</body>
+
+</html>
diff --git a/examples/webpack/src/index.js b/examples/webpack/src/index.js
@@ -0,0 +1,135 @@
+import fs from 'fs';
+import PDFDocument from 'pdfkit';
+import ace from 'brace';
+import 'brace/mode/javascript';
+import 'brace/theme/monokai';
+import { waitForData } from './pdfkitHelpers.js';
+import { fetchFile } from './httpHelpers.js';
+// testImage is an URL
+import testImageURL from './lazy-assets/test.jpeg';
+// bundle font and image files and register them in the virtual fs
+import './registerStaticFiles.js';
+
+var lorem =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in suscipit purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec hendrerit felis. Morbi aliquam facilisis risus eu lacinia. Sed eu leo in turpis fringilla hendrerit. Ut nec accumsan nisl. Suspendisse rhoncus nisl posuere tortor tempus et dapibus elit porta. Cras leo neque, elementum a rhoncus ut, vestibulum non nibh. Phasellus pretium justo turpis. Etiam vulputate, odio vitae tincidunt ultricies, eros odio dapibus nisi, ut tincidunt lacus arcu eu elit. Aenean velit erat, vehicula eget lacinia ut, dignissim non tellus. Aliquam nec lacus mi, sed vestibulum nunc. Suspendisse potenti. Curabitur vitae sem turpis. Vestibulum sed neque eget dolor dapibus porttitor at sit amet sem. Fusce a turpis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\nMauris at ante tellus. Vestibulum a metus lectus. Praesent tempor purus a lacus blandit eget gravida ante hendrerit. Cras et eros metus. Sed commodo malesuada eros, vitae interdum augue semper quis. Fusce id magna nunc. Curabitur sollicitudin placerat semper. Cras et mi neque, a dignissim risus. Nulla venenatis porta lacus, vel rhoncus lectus tempor vitae. Duis sagittis venenatis rutrum. Curabitur tempor massa tortor.';
+
+fetchFile(testImageURL)
+  .then(testImageData => {
+    fs.writeFileSync('images/test.jpg', testImageData);
+  })
+  .catch(error => {
+    console.error(error);
+  });
+
+function makePDF(PDFDocument, lorem, waitForData, iframe) {
+  // create a document
+  var doc = new PDFDocument();
+
+  doc.registerFont('Roboto', 'fonts/Roboto-Regular.ttf');
+
+  // draw some text
+  doc.fontSize(25).text('Here is some vector graphics...', 100, 80);
+
+  // some vector graphics
+  doc
+    .save()
+    .moveTo(100, 150)
+    .lineTo(100, 250)
+    .lineTo(200, 250)
+    .fill('#FF3300');
+
+  doc.circle(280, 200, 50).fill('#6600FF');
+
+  // an SVG path
+  doc
+    .scale(0.6)
+    .translate(470, 130)
+    .path('M 250,75 L 323,301 131,161 369,161 177,301 z')
+    .fill('red', 'even-odd')
+    .restore();
+
+  // and some justified text wrapped into columns
+  doc
+    .font('Roboto')
+    .text('And here is some wrapped text...', 100, 300)
+    .fontSize(13)
+    .moveDown()
+    .text(lorem, {
+      width: 412,
+      align: 'justify',
+      indent: 30,
+      columns: 2,
+      height: 300,
+      ellipsis: true
+    });
+
+  doc.addPage();
+
+  doc
+    .fontSize(25)
+    .font('Courier')
+    .text('And an image...')
+    .image('images/bee.png');
+
+  doc.font('Courier-Bold').text('Finish...');
+
+  doc.addPage();
+
+  doc
+    .font('Roboto')
+    .fontSize(18)
+    .text('Not yet. Lets try to show an image lazy loaded');
+
+  try {
+    doc.image('images/test.jpg');
+  } catch (error) {
+    doc.moveDown().text(`${error}`);
+    doc.text('Image not loaded. Try again later.');
+  }
+
+  // waitForData must be called before call to doc.end()
+  waitForData(doc)
+    .then(dataUrl => {
+      // display the document in the iframe to the right
+      iframe.src = dataUrl;
+    })
+    .catch(error => {
+      console.log(error);
+    });
+
+  doc.end();
+}
+
+var editor = ace.edit('editor');
+editor.setTheme('ace/theme/monokai');
+editor.getSession().setMode('ace/mode/javascript');
+editor.setValue(
+  makePDF
+    .toString()
+    .split('\n')
+    .slice(1, -1)
+    .join('\n')
+    .replace(/^  /gm, '')
+);
+editor
+  .getSession()
+  .getSelection()
+  .clearSelection();
+
+var iframe = document.querySelector('iframe');
+makePDF(PDFDocument, lorem, waitForData, iframe);
+
+editor.getSession().on('change', function() {
+  try {
+    var fn = new Function(
+      'PDFDocument',
+      'lorem',
+      'waitForData',
+      'iframe',
+      editor.getValue()
+    );
+    fn(PDFDocument, lorem, waitForData, iframe);
+  } catch (e) {
+    console.error(e);
+  }
+});
diff --git a/examples/webpack/src/lazy-assets/test.jpeg b/examples/webpack/src/lazy-assets/test.jpeg
diff --git a/examples/webpack/src/pdfkitHelpers.js b/examples/webpack/src/pdfkitHelpers.js
@@ -0,0 +1,12 @@
+export const waitForData = async doc => {
+  return new Promise((resolve, reject) => {
+    const buffers = [];
+    doc.on('data', buffers.push.bind(buffers));
+    doc.on('end', async () => {
+      const pdfBuffer = Buffer.concat(buffers);
+      const pdfBase64 = pdfBuffer.toString('base64');
+      resolve(`data:application/pdf;base64,${pdfBase64}`);
+    });
+    doc.on('error', reject);
+  });
+};
diff --git a/examples/webpack/src/registerStaticFiles.js b/examples/webpack/src/registerStaticFiles.js
@@ -0,0 +1,33 @@
+// the fs here is not node fs but the provided virtual one
+import fs from 'fs';
+// the content file is returned as is (webpack is configured to load *.afm files as asset/source)
+import Courier from 'pdfkit/js/data/Courier.afm';
+import CourierBold from 'pdfkit/js/data/Courier-Bold.afm';
+
+function registerBinaryFiles(ctx) {
+  ctx.keys().forEach(key => {
+    // extracts "./" from beginning of the key
+    fs.writeFileSync(key.substring(2), ctx(key));
+  });
+}
+
+function registerAFMFonts(ctx) {
+  ctx.keys().forEach(key => {
+    const match = key.match(/([^/]*\.afm$)/);
+    if (match) {
+      // afm files must be stored on data path
+      fs.writeFileSync(`data/${match[0]}`, ctx(key));
+    }
+  });
+}
+
+// register all files found in assets folder (relative to src)
+registerBinaryFiles(require.context('./static-assets', true));
+
+// register AFM fonts distributed with pdfkit
+// is good practice to register only required fonts to avoid the bundle size increase too much
+registerAFMFonts(require.context('pdfkit/js/data', false, /Helvetica.*\.afm$/));
+
+// register files imported directly
+fs.writeFileSync('data/Courier.afm', Courier);
+fs.writeFileSync('data/Courier-Bold.afm', CourierBold);
diff --git a/examples/webpack/src/static-assets/fonts/Roboto-Italic.ttf b/examples/webpack/src/static-assets/fonts/Roboto-Italic.ttf
diff --git a/examples/webpack/src/static-assets/fonts/Roboto-Medium.ttf b/examples/webpack/src/static-assets/fonts/Roboto-Medium.ttf
diff --git a/examples/webpack/src/static-assets/fonts/Roboto-MediumItalic.ttf b/examples/webpack/src/static-assets/fonts/Roboto-MediumItalic.ttf
diff --git a/examples/webpack/src/static-assets/fonts/Roboto-Regular.ttf b/examples/webpack/src/static-assets/fonts/Roboto-Regular.ttf
diff --git a/examples/webpack/src/static-assets/images/bee.png b/examples/webpack/src/static-assets/images/bee.png
diff --git a/examples/webpack/webpack.config.js b/examples/webpack/webpack.config.js
@@ -0,0 +1,84 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'src/index.html')
+    }),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+      process: 'process/browser'
+    })
+  ],
+  resolve: {
+    alias: {
+      // maps fs to a virtual one allowing to register file content dynamically
+      fs: 'pdfkit/js/virtual-fs.js',
+      // iconv-lite is used to load cid less fonts (uncommon)
+      'iconv-lite': false
+    },
+    fallback: {
+      // crypto module is not necessary at browser
+      crypto: false,
+      // fallbacks for native node libraries
+      buffer: require.resolve('buffer/'),
+      stream: require.resolve('readable-stream'),
+      zlib: require.resolve('browserify-zlib')
+    }
+  },
+  module: {
+    rules: [
+      // bundle and load afm files verbatim
+      { test: /\.afm$/, type: 'asset/source' },
+      // bundle and load binary files inside static-assets folder as base64
+      {
+        test: /src[/\\]static-assets/,
+        type: 'asset/inline',
+        generator: {
+          dataUrl: content => {
+            return content.toString('base64');
+          }
+        }
+      },
+      // load binary files inside lazy-assets folder as an URL
+      {
+        test: /src[/\\]lazy-assets/,
+        type: 'asset/resource'
+      },
+      {
+        enforce: 'post',
+        test: /fontkit[/\\]index.js$/,
+        loader: 'transform-loader',
+        options: {
+          brfs: {}
+        }
+      },
+      {
+        enforce: 'post',
+        test: /unicode-properties[/\\]index.js$/,
+        loader: 'transform-loader',
+        options: {
+          brfs: {}
+        }
+      },
+      {
+        enforce: 'post',
+        test: /linebreak[/\\]src[/\\]linebreaker.js/,
+        loader: 'transform-loader',
+        options: {
+          brfs: {}
+        }
+      }
+    ]
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        exclude: /src[/\\]index\.js$/ // not working. Probably related to dynamic function creation
+      })
+    ]
+  }
+};