Skip to content

Commit 29216b7

Browse files
blikblumblikblum
committed
Fix and cleanup webpack example
1 parent e9c7d9e commit 29216b7

File tree

5 files changed

+87
-1871
lines changed

5 files changed

+87
-1871
lines changed

‎examples/webpack/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ Simple example of using PdfKit with webpack
99
- Register AFM fonts provided by pdfkit
1010
- Shows how to load and register files lazily
1111

12-
### Caveats
12+
### Remarks
1313

14-
Production build does not work. Probably how pdf document is created (inside a `new Function` call)
14+
Refer to webpack.config.js to details about configuration

‎examples/webpack/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"dependencies": {
44
"brace": "^0.11.1",
55
"buffer": "^6.0.3",
6-
"pdfkit": "file:./../..",
6+
"pdfkit": "^0.12.3",
77
"process": "^0.11.10",
88
"readable-stream": "^3.6.0"
99
},

‎examples/webpack/src/index.js

+82-92
Original file line numberDiff line numberDiff line change
@@ -21,114 +21,104 @@ fetchFile(testImageURL)
2121
console.error(error);
2222
});
2323

24-
function makePDF(PDFDocument, lorem, waitForData, iframe) {
25-
// create a document
26-
var doc = new PDFDocument();
27-
28-
doc.registerFont('Roboto', 'fonts/Roboto-Regular.ttf');
29-
30-
// draw some text
31-
doc.fontSize(25).text('Here is some vector graphics...', 100, 80);
32-
33-
// some vector graphics
34-
doc
35-
.save()
36-
.moveTo(100, 150)
37-
.lineTo(100, 250)
38-
.lineTo(200, 250)
39-
.fill('#FF3300');
40-
41-
doc.circle(280, 200, 50).fill('#6600FF');
42-
43-
// an SVG path
44-
doc
45-
.scale(0.6)
46-
.translate(470, 130)
47-
.path('M 250,75 L 323,301 131,161 369,161 177,301 z')
48-
.fill('red', 'even-odd')
49-
.restore();
50-
51-
// and some justified text wrapped into columns
52-
doc
53-
.font('Roboto')
54-
.text('And here is some wrapped text...', 100, 300)
55-
.fontSize(13)
56-
.moveDown()
57-
.text(lorem, {
58-
width: 412,
59-
align: 'justify',
60-
indent: 30,
61-
columns: 2,
62-
height: 300,
63-
ellipsis: true
64-
});
65-
66-
doc.addPage();
67-
68-
doc
69-
.fontSize(25)
70-
.font('Courier')
71-
.text('And an image...')
72-
.image('images/bee.png');
73-
74-
doc.font('Courier-Bold').text('Finish...');
75-
76-
doc.addPage();
77-
78-
doc
79-
.font('Roboto')
80-
.fontSize(18)
81-
.text('Not yet. Lets try to show an image lazy loaded');
24+
var initialFnCode = `// create a document
25+
var doc = new PDFDocument();
26+
27+
doc.registerFont('Roboto', 'fonts/Roboto-Regular.ttf');
28+
29+
// draw some text
30+
doc.fontSize(25).text('Here is some vector graphics...', 100, 80);
31+
32+
// some vector graphics
33+
doc
34+
.save()
35+
.moveTo(100, 150)
36+
.lineTo(100, 250)
37+
.lineTo(200, 250)
38+
.fill('#FF3300');
39+
40+
doc.circle(280, 200, 50).fill('#6600FF');
41+
42+
// an SVG path
43+
doc
44+
.scale(0.6)
45+
.translate(470, 130)
46+
.path('M 250,75 L 323,301 131,161 369,161 177,301 z')
47+
.fill('red', 'even-odd')
48+
.restore();
49+
50+
// and some justified text wrapped into columns
51+
doc
52+
.font('Roboto')
53+
.text('And here is some wrapped text...', 100, 300)
54+
.fontSize(13)
55+
.moveDown()
56+
.text(lorem, {
57+
width: 412,
58+
align: 'justify',
59+
indent: 30,
60+
columns: 2,
61+
height: 300,
62+
ellipsis: true
63+
});
8264
83-
try {
84-
doc.image('images/test.jpg');
85-
} catch (error) {
86-
doc.moveDown().text(`${error}`);
87-
doc.text('Image not loaded. Try again later.');
88-
}
65+
doc.addPage();
66+
67+
doc
68+
.fontSize(25)
69+
.font('Courier')
70+
.text('And an image...')
71+
.image('images/bee.png');
8972
90-
// waitForData must be called before call to doc.end()
91-
waitForData(doc)
92-
.then(dataUrl => {
93-
// display the document in the iframe to the right
94-
iframe.src = dataUrl;
95-
})
96-
.catch(error => {
97-
console.log(error);
98-
});
99-
100-
doc.end();
73+
doc.font('Courier-Bold').text('Finish...');
74+
75+
doc.addPage();
76+
77+
doc
78+
.font('Roboto')
79+
.fontSize(18)
80+
.text('Not yet. Lets try to show an image lazy loaded');
81+
82+
try {
83+
doc.image('images/test.jpg');
84+
} catch (error) {
85+
doc.moveDown().text(\`\${error}\`);
86+
doc.text('Image not loaded. Try again later.');
87+
}
88+
89+
// waitForData must be called before call to doc.end()
90+
waitForData(doc)
91+
.then(dataUrl => {
92+
// display the document in the iframe to the right
93+
iframe.src = dataUrl;
94+
})
95+
.catch(error => {
96+
console.log(error);
97+
});
98+
99+
doc.end();`;
100+
101+
function executeFn(code, PDFDocument, lorem, waitForData, iframe) {
102+
var fn = new Function('PDFDocument', 'lorem', 'waitForData', 'iframe', code);
103+
fn(PDFDocument, lorem, waitForData, iframe);
101104
}
102105

103106
var editor = ace.edit('editor');
104107
editor.setTheme('ace/theme/monokai');
105108
editor.getSession().setMode('ace/mode/javascript');
106-
editor.setValue(
107-
makePDF
108-
.toString()
109-
.split('\n')
110-
.slice(1, -1)
111-
.join('\n')
112-
.replace(/^ /gm, '')
113-
);
109+
editor.setValue(initialFnCode);
114110
editor
115111
.getSession()
116112
.getSelection()
117113
.clearSelection();
118114

119115
var iframe = document.querySelector('iframe');
120-
makePDF(PDFDocument, lorem, waitForData, iframe);
116+
117+
executeFn(initialFnCode, PDFDocument, lorem, waitForData, iframe);
121118

122119
editor.getSession().on('change', function() {
123120
try {
124-
var fn = new Function(
125-
'PDFDocument',
126-
'lorem',
127-
'waitForData',
128-
'iframe',
129-
editor.getValue()
130-
);
131-
fn(PDFDocument, lorem, waitForData, iframe);
121+
executeFn(editor.getValue(), PDFDocument, lorem, waitForData, iframe);
132122
} catch (e) {
133123
console.error(e);
134124
}

‎examples/webpack/webpack.config.js

+2-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
const path = require('path');
22
const webpack = require('webpack');
33
const HtmlWebpackPlugin = require('html-webpack-plugin');
4-
const TerserPlugin = require('terser-webpack-plugin');
54

65
module.exports = {
76
plugins: [
@@ -17,7 +16,7 @@ module.exports = {
1716
alias: {
1817
// maps fs to a virtual one allowing to register file content dynamically
1918
fs: 'pdfkit/js/virtual-fs.js',
20-
// iconv-lite is used to load cid less fonts (uncommon)
19+
// iconv-lite is used to load cid less fonts (not spec compliant)
2120
'iconv-lite': false
2221
},
2322
fallback: {
@@ -48,6 +47,7 @@ module.exports = {
4847
test: /src[/\\]lazy-assets/,
4948
type: 'asset/resource'
5049
},
50+
// convert to base64 and include inline file system binary files used by fontkit and linebreak
5151
{
5252
enforce: 'post',
5353
test: /fontkit[/\\]index.js$/,
@@ -56,14 +56,6 @@ module.exports = {
5656
brfs: {}
5757
}
5858
},
59-
{
60-
enforce: 'post',
61-
test: /unicode-properties[/\\]index.js$/,
62-
loader: 'transform-loader',
63-
options: {
64-
brfs: {}
65-
}
66-
},
6759
{
6860
enforce: 'post',
6961
test: /linebreak[/\\]src[/\\]linebreaker.js/,
@@ -73,12 +65,5 @@ module.exports = {
7365
}
7466
}
7567
]
76-
},
77-
optimization: {
78-
minimizer: [
79-
new TerserPlugin({
80-
exclude: /src[/\\]index\.js$/ // not working. Probably related to dynamic function creation
81-
})
82-
]
8368
}
8469
};

0 commit comments

Comments
 (0)