45 | Page1: {{myText}}
46 |
47 |
48 |
49 | Page2: Goodbye world!
50 |
51 |
52 |
53 | `;
54 |
55 | r.render({
56 | templateSource: htmlString,
57 | contentSource: {
58 | myText: "Hello world!"
59 | },
60 | outputName: 'example'
61 | });
62 |
63 | // Pdf will be rendered at ./outputs/example.pdf !
64 | ```
65 |
66 | See more examples [here](examples/).
67 |
68 | ## Documentation
69 | - [Creating pages + Dynamic page numbers](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/creating-pages.md)
70 | - [API](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/api.md)
71 | - [Rendering remote pages](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/remote-api.md)
72 | - [Headers and footers](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/headers-footers.md)
73 | - [Reusable Chunks](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/chunks.md)
74 | - [Lists](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/lists.md)
75 | - [Real time PDF building](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/real-time.md)
76 | - [Styling with CSS & SASS](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/api.md#styles)
77 | - [Assets](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/assets.md)
78 | - [Dynamic content](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/content.md)
79 |
80 | ## Real time PDF Building
81 | With a few changes to your options you can enable real time PDF building!
82 | See [the docs](https://github.com/PDFTron/web-to-pdf/blob/master/documentation/real-time.md) for more info.
83 |
84 | ## Development
85 | ```
86 | git clone https://github.com/PDFTron/web-to-pdf.git
87 | cd web-to-pdf
88 | npm i
89 | ```
90 |
91 | There are examples you can test on in the `examples` folder. These examples are run via scripts in `package.json`
92 |
93 | ## Contributing
94 | Before created a PR, please make sure tests pass:
95 |
96 | `npm run test`
97 |
98 | If you would like to contribute but aren't sure how, please open a ticket saying you would like to contribute.
99 |
100 | Feel free to add tests you feel needed.
101 |
102 | ## Caveats
103 | - Creation of PDF input fields is not supported (not supported by chromium).
104 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "presets": ["@babel/preset-react"],
3 | "plugins": [
4 | "@babel/plugin-proposal-function-sent",
5 | "@babel/plugin-proposal-export-namespace-from",
6 | "@babel/plugin-proposal-numeric-separator",
7 | "@babel/plugin-proposal-throw-expressions",
8 | "@babel/plugin-proposal-class-properties",
9 | "@babel/plugin-transform-dotall-regex",
10 | "@babel/plugin-proposal-object-rest-spread"
11 | ]
12 | }
--------------------------------------------------------------------------------
/documentation/api.md:
--------------------------------------------------------------------------------
1 | # API
2 |
3 | ## new Renderer(options)
4 |
5 | ```js
6 | const Renderer = require('@pdftron/web-to-pdf');
7 | const renderer = new Renderer(options);
8 | ```
9 | **options**
10 |
11 | - [dirname](#dirname-required) (required)
12 | - [width](#width)
13 | - [height](#height)
14 | - [margin](#margin)
15 | - [keepAlive](#keepAlive)
16 | - [debug](#debug)
17 | - [port](#port)
18 | - [host](#host)
19 | - [autoOpen](#autoopen)
20 | - [args](#args)
21 |
22 | ### dirname (required)
23 | Directory of the file you are working in. Please pass `__dirname` for this option.
24 |
25 | ```js
26 | const renderer = new Renderer({ dirname: __dirname });
27 | ```
28 |
29 | ### width
30 | Width of each page in pixels. Must be an interger
31 |
32 | **default**: 612
33 |
34 | ### height
35 | Height of each page in pixels. Must be an interger value **or** set to 'auto' to match the height of the page.
36 |
37 | **default**: 792
38 |
39 | ### margin
40 | Object specifying page margins. `top`, `bottom`, `left` and `right` are accepted object values. Uses normal CSS values.
41 |
42 | ```js
43 | const Renderer = require('@pdftron/web-to-pdf');
44 | const r = new Renderer({
45 | margin: {
46 | top: '20px',
47 | left: '1in',
48 | right: '20px',
49 | bottom: '20px',
50 | }
51 | })
52 | ```
53 |
54 | ### keepAlive
55 | Set to true to keep the instance in memory when it's done rendering. Useful for using the tool as a service.
56 |
57 | **default**: false
58 |
59 | ### debug
60 | Set to true to enable some debugging logs. Setting this to true will also leave all the source files in your output directory (these are normally deleted after the PDF is generated.)
61 |
62 | **default**: false
63 |
64 | ### port
65 | Port to run the local server on.
66 |
67 | **default**: 8080
68 |
69 | ### host
70 | Host to run the local server on.
71 |
72 | **default**: 127.0.0.1
73 |
74 | ### autoOpen
75 | Set to true to auto open the PDF once its done rendering. Ignored if you are in real time mode.
76 |
77 | **default**: false
78 |
79 | ### args
80 | An array of arguments to pass to the puppeteer `launch` function. Possible values can be found [here](https://peter.sh/experiments/chromium-command-line-switches/)
81 |
82 | ## .render(renderOptions)
83 |
84 | ```js
85 | const Renderer = require('@pdftron/web-to-pdf');
86 | const renderer = new Renderer(options);
87 |
88 | const result = await renderer.render(renderOptions); // see below for renderOptions
89 | ```
90 |
91 | **NOTE** For `realTime` mode, you must pass a path to an options file instead of an options object. See [this](./real-time.md) for more details.
92 |
93 | **NOTE** If you want to render a remote URL, also see [this guide](./remote-api.md)
94 |
95 | #### Returns:
96 |
97 | Returns a promise that resolves with the following object:
98 |
99 | ```
100 | {
101 | sourceMap: {
102 | ...list of read/writes that were made. Used mostly for debugging.
103 | },
104 | output: 'path to where the PDF was written, relative to CWD',
105 | metadata: {
106 | numberOfPages: 'how many pages the PDF is'
107 | }
108 | }
109 | ```
110 |
111 |
112 | **Render options:**
113 | - [templateSource](#templatesource-required) (required)
114 | - [react component](#react-component)
115 | - [html string](#html-string)
116 | - [html file](#html-file)
117 | - [function](#function)
118 | - [url](#url)
119 | - [contentSource](#contentsource)
120 | - [pageClass](#pageClass)
121 | - [chunks](#chunks)
122 | - [outputFolder](#outputfolder)
123 | - [outputName](#outputname)
124 | - [styles](#styles)
125 | - [ignoreWatch](#ignorewatch)
126 | - [middleware](#middleware)
127 |
128 |
129 | ### templateSource (required)
130 | The source for your PDF structure. Can be one of the following:
131 |
132 | #### react component
133 | If you pass a React component, it will be rendered to HTML via React.renderToString(). **Keep in mind that this is a server render**, so you dont have access to browser APIs, and you won't get all the lifecycle functions.
134 |
135 |
136 | ```js
137 | class Component extends React.Component {
138 | render() {
139 | return (
140 |
141 |
143 | )
144 | }
145 | }
146 |
147 | const renderer = new Renderer({ dirname: __dirname });
148 | renderer.render({
149 | templateSource: Component
150 | });
151 | ```
152 |
153 | #### html (string)
154 | If you pass a valid html string, it will be used directly to render the PDF.
155 |
156 | ```js
157 | const renderer = new Renderer({ dirname: __dirname });
158 | renderer.render({
159 | templateSource: `
160 |
161 |
162 | My content here!
142 |
163 | My content goes here!
164 |
165 |
166 |
167 | `
168 | });
169 | ```
170 |
171 | #### html (file)
172 | If you pass a path to a html file, it will be used directly to render the PDF.
173 |
174 | ```js
175 | const renderer = new Renderer({ dirname: __dirname });
176 | renderer.render({
177 | templateSource: 'index.html'
178 | });
179 | ```
180 |
181 | #### function
182 | If you pass a function, it will be called and the result will be used to render the PDF. This means the function should return valid HTML, **or a promise that resolves with valid HTML**.
183 |
184 | The function is passed the content that is passed via the [contentSource](#contentSource) option. This makes dynamic HTML structures possible.
185 |
186 | ```js
187 | const renderer = new Renderer({ dirname: __dirname });
188 | renderer.render({
189 | templateSource: (content) => {
190 | return `
191 |
192 |
193 |
194 | ${
195 | content.list.map((item) => {
196 | return `
200 |
201 |
202 | `
203 | }
204 | });
205 | ```
206 |
207 | #### url
208 | If you pass a URL, the remote page will be rendered.
209 |
210 | Url must start with `http` or `https`.
211 |
212 | Also see [this guide](./remote-api.md)
213 |
214 | ```js
215 | const renderer = new Renderer({ dirname: __dirname });
216 | renderer.render({
217 | templateSource: 'https://google.com'
218 | });
219 | ```
220 |
221 | ### contentSource
222 | Either a JS object or a path to a JSON file containing your content. This content will be used to replace your [mustaches](content.md), and is also passed into the [templateSource function method.](#function). The content is also available at `window.content` if you are using some client side rendering. If not supplied, no content will be replaced.
223 |
224 | **NOTE:** content replacement will only work if you pass in raw HTML, or pass a [react component](#react-component) to templateSource. If you are using Javascript to generate the DOM on the client, content replacement will not work. In this case you can access your data at `window.content`.
225 |
226 | default: `null`
227 |
228 | #### json (file)
229 |
230 | ```js
231 |
232 | const html = `
233 |
234 |
235 | ${item}
` 197 | }) 198 | } 199 |
236 | {{myString}}
237 |
238 |
239 |
240 | `
241 |
242 | const renderer = new Renderer({ dirname: __dirname });
243 | renderer.render({
244 | templateSource: html,
245 | contentSource: 'content.html'
246 | });
247 | ```
248 |
249 | #### json (object)
250 |
251 | ```js
252 | const renderer = new Renderer({ dirname: __dirname });
253 |
254 | const html = `
255 |
256 |
257 |
258 | {{myString}}
259 |
260 |
261 |
262 | `
263 |
264 | renderer.render({
265 | templateSource: html,
266 | contentSource: {
267 | "myString": "Hello world!"
268 | }
269 | });
270 | ```
271 |
272 |
273 | ### pageClass
274 | Use your own custom class to seperate pages.
275 |
276 | By default, each div with a `Page` class will be its own page. You can change this by setting this property.
277 |
278 | ```js
279 | const html = `
280 |
281 |
282 |
283 | {{header}}
284 | Hi!
285 |
286 | {{copy}}
287 |
288 |
289 |
290 | `
291 |
292 | renderer.render({
293 | templateSource: html,
294 | pageClass: 'CustomPage'
295 | });
296 | ```
297 |
298 |
299 | ### chunks
300 | A map of HTML snippets to reuse throughout your template.
301 |
302 | Accepts any of the types that [templateSource](#templatesource) accepts (except a remote url). Whatever is passed will replace any {{chunkName}} mustaches.
303 |
304 | See [here](./content.md) for more info on mustache syntax.
305 | See [here](./chunks.md) for more info and examples on chunks.
306 |
307 | ```js
308 | const renderer = new Renderer({ dirname: __dirname });
309 |
310 | const html = `
311 |
312 |
313 |
314 | {{header}}
315 | Hi!
316 |
317 | {{copy}}
318 |
319 |
320 |
321 | `
322 |
323 | const header = `
324 |
325 | My Header here
326 |
327 | `
328 |
329 | const mainCopy = `
330 |
331 | My main copy
332 |
333 | `
334 |
335 | renderer.render({
336 | templateSource: html,
337 | contentSource: {
338 | "myString": "Hello world!"
339 | },
340 | chunks: {
341 | header: header,
342 | copy: mainCopy
343 | }
344 | });
345 | ```
346 |
347 | ### outputFolder
348 | A string containing the name of the desired output folder. Will be created relative to the CWD.
349 |
350 | default: `outputs`
351 |
352 | ```js
353 | const renderer = new Renderer({ dirname: __dirname });
354 | renderer.render({
355 | templateSource: 'template.html',
356 | outputFolder: 'pdf-outputs'
357 | });
358 | ```
359 |
360 | Will create `./pdf-outputs/index.pdf`
361 |
362 | ### outputName
363 | Name of the PDF file that is generated.
364 |
365 | default `index`
366 |
367 | ```js
368 | const renderer = new Renderer({ dirname: __dirname });
369 | renderer.render({
370 | templateSource: 'template.html',
371 | outputFolder: 'pdf-outputs',
372 | outputName: 'report-card'
373 | });
374 | ```
375 |
376 | Will create `./pdf-outputs/report-card.pdf`
377 |
378 | ### styles
379 |
380 | **IMPORTANT: If your css/scss is referenced (via link tags) in your html, then you don't need to do this. [See the examples to learn more](../examples)**
381 |
382 | An array of string representing paths to css files or actual css or scss you want to use to style your PDF. If you provide a `.scss` file, it (and any linked files) will be automatically compiled to css. These styles will be automatically injected into the HTML generated by your [templateSource](#templateSource). **This is only useful if you cant link the css in your HTML for some reason.**
383 |
384 |
385 | default: `[]`
386 |
387 | ```js
388 | const renderer = new Renderer({ dirname: __dirname });
389 | renderer.render({
390 | templateSource: 'template.html',
391 | styles: [
392 | 'style.css', // paths to css
393 | 'customStyle.scss', // paths to scss
394 | `
395 | #test {
396 | color: red /
397 | }
398 | ` // or actual css or scss
399 | ],
400 | });
401 | ```
402 |
403 | ### ignoreWatch
404 | Sometimes you will have your own file watcher and you won't have to reply on our on change function for certain files.
405 |
406 | Accepts an [anymatch](https://www.npmjs.com/package/anymatch) array or glob of files to ignore.
407 |
408 | default: null
409 |
410 | ```js
411 | const renderer = new Renderer({ dirname: __dirname });
412 | renderer.render({
413 | templateSource: 'template.html',
414 | ignoreWatch: "**/bundle.js" // ignore bundle.js
415 | });
416 | ```
417 |
418 | ### middleware
419 | An array of functions used to transform HTML. Each function will be called one after the other. Each function recieves HTML as a parameter and should return the transformed HTML string.
420 |
421 | Middleware functions can be asyncronous. The next middleware in the chain won't get called until the previous one is finished
422 |
423 | ```js
424 | const renderer = new Renderer({ dirname: __dirname });
425 | renderer.render({
426 | templateSource: 'template.html',
427 | middleware: [
428 | (html) => {
429 | html = html.replace(/p/g, "h5");
430 | return html;
431 | }
432 | ]
433 | });
434 | ```
435 |
436 | ## .on(key, callback)
437 | Subscribe to event throughout the render process. Possible keys are
438 |
439 | `change` - called when a file used to render changes, useful for [real time pdf building](./real-time.md).
440 |
441 |
442 | `html` - called when the final HTML is determined (useful for debugging). Callback is passed an html string. Not called when using a remote URL.
443 |
444 | ## .stop()
445 | Closes down all services.
446 |
447 |
448 |
449 |
--------------------------------------------------------------------------------
/documentation/assets.md:
--------------------------------------------------------------------------------
1 | # Assets
2 |
3 | Assets referenced in your html will be automatically served and watched (if in real time mode). Please reference them relatively to your html file:
4 |
5 | File system
6 | ```
7 | myProject/
8 | - index.html
9 | assets/
10 | - image.png
11 | ```
12 |
13 | HTML
14 | ```html
15 |
16 | 
17 |
18 | ```
19 |
--------------------------------------------------------------------------------
/documentation/chunks.md:
--------------------------------------------------------------------------------
1 | # Chunks
2 |
3 | Chunks are reusable snippets of HTML. They are referenced with mustache syntax, the same as [dynamic content](./content.md);
4 |
5 | These are useful for any reusuable chunks of code.
6 |
7 | Chunks can be any format that [templateSource](./api.md#templatesource-required) can be (html string, html file, react component, function, etc)
8 |
9 | To set the chunk content, use the [chunks](./api.md#chunks) render options.
10 |
11 | Chunks can be used to automatially append html to the top and bottom of every page - aka **headers and footers**. See [this guide](./headers-footers.md) for details
12 |
13 | ## Example
14 |
15 | ```js
16 | const renderer = new Renderer({ dirname: __dirname });
17 |
18 | // main template
19 | const templateSource = `
20 |
17 |
21 | {{chunkOne}}
22 | My page 1 content here
23 |
24 |
25 |
26 | {{chunkTwo}}
27 | My page 2 content here
28 |
29 |
30 |
31 | {{chunkOne}}
32 | My page 3 content here
33 | {{chunkTwo}}
34 |
35 | `
36 |
37 | // Headers
38 | const chunkOne = `
39 |
40 | PDFTron.com
41 |
42 | `
43 |
44 | // Footers
45 | const chunkTwo = `
46 |
47 | Page {{pageNumber}}
48 |
49 | `
50 |
51 | renderer.render({
52 | templateSource: html,
53 | chunks: {
54 | chunkOne,
55 | chunkTwo
56 | }
57 | });
58 | ```
59 |
60 | HTML output:
61 | ```html
62 |
63 |
68 |
69 |
64 | PDFTron.com
65 |
66 | My page 1 content here
67 |
70 |
75 |
76 |
71 | Page 2
72 |
73 | My page 2 content here
74 |
77 |
85 | ```
86 |
87 |
--------------------------------------------------------------------------------
/documentation/content.md:
--------------------------------------------------------------------------------
1 | # Dynamic Content
2 |
3 | We use mustache syntax to do content replacements. You may use mustache syntax in any html [templateSource](api.md#templateSource). The replacement happens AFTER the html is generated on the server.
4 |
5 | Your content can be loaded by the [contentSource](api.md#contentSource) option.
6 |
7 | If you are using client side JS (like React) to generate your DOM, mustaches will not be replaced. In this case, the content will be available at `window.content` for you to use dynamically.
8 |
9 | Content can be nested (see examples below)
10 |
11 | ## Examples:
12 |
13 | - [In HTML](#in-html-file)
14 | - [In templateSource function](#in-templatesource-function)
15 | - [In react component](#in-react-component)
16 |
17 | ## In HTML file
18 |
19 | index.js
20 | ```js
21 | const renderer = new Renderer({ dirname: __dirname });
22 | renderer.render({
23 | contentSource: 'content.json',
24 | templateSource: 'index.html',
25 | });
26 | ```
27 |
28 | index.html
29 | ```html
30 |
31 |
32 |
78 | PDFTron.com
79 |
80 | My page 3 content here
81 |
82 | Page 3
83 |
84 | {{ myData }}
33 |{{ my.nested.data }}
34 | 35 | 36 | ``` 37 | 38 | content.json 39 | ```json 40 | { 41 | "myData": "Hello world!", 42 | "my": { 43 | "nested": { 44 | "data": "Goodbye world!" 45 | } 46 | } 47 | } 48 | ``` 49 | 50 | output: 51 | ```html 52 | 53 | 54 |Hello world!
55 |Goodbye world!
56 | 57 | 58 | ``` 59 | 60 | ## In templateSource function 61 | 62 | index.js 63 | ```js 64 | const renderer = new Renderer({ dirname: __dirname }); 65 | renderer.render({ 66 | contentSource: 'content.json', 67 | templateSource: (content) => { 68 | return ` 69 | 70 | 71 |${content.myData}
72 | 73 | ${ 74 | content.my.nested.data.map(item => { 75 | return `${item}
` 76 | }) 77 | } 78 | 79 | 80 | ` 81 | } 82 | }); 83 | ``` 84 | 85 | content.json 86 | ```json 87 | { 88 | "myData": "Hello world!", 89 | "my": { 90 | "nested": { 91 | "data": ["hey", "how", "are", "you"] 92 | } 93 | } 94 | } 95 | ``` 96 | 97 | output: 98 | ```html 99 | 100 | 101 |Hello world!
102 |hey
103 |how
104 |are
105 |you
106 | 107 | 108 | ``` 109 | 110 | ## In react component (server side) 111 | Content is passed as a prop to the React component, but you can even use the mustache in your react component if you want. 112 | 113 | index.js 114 | ```js 115 | class Comp extends React.Component { 116 | render() { 117 | const { content } = this.props; 118 | return ( 119 |
120 |
123 | )
124 | }
125 | }
126 |
127 | const renderer = new Renderer({ dirname: __dirname });
128 | renderer.render({
129 | contentSource: 'content.json',
130 | templateSource: Comp, // passing this directly does a server render
131 | });
132 | ```
133 |
134 | content.json
135 | ```json
136 | {
137 | "myData": "Hello world!"
138 | }
139 | ```
140 |
141 | output
142 | ```html
143 |
144 |
145 | {`{{ myData }}`}
121 |{content.myData}
122 |
146 |
149 |
150 |
151 | ```
152 |
153 |
--------------------------------------------------------------------------------
/documentation/creating-pages.md:
--------------------------------------------------------------------------------
1 | # Creating Pages
2 | Creating pages is easy! All you need to do is apply the class `.Page` to a wrapper div. From this point, anything in that container will be part of the page.
3 |
4 | You can also use your own identifier to split pages. Pass in your custom value to the [pageClass](./api.md#pageClass) and it will be used to split pages.
5 |
6 | To create multiple pages, simply include mulitple page divs.
7 |
8 | **If you do not include a page div, all your content will be wrapped in a page.**
9 |
10 | [Click here](./api.md) for the full Renderer API
11 |
12 | ## Page numbers
13 | Page numbers can be inserted by using `{{pageNumber}}` The mustache will be automatially replaced with the proper page number.
14 |
15 | ## Examples
16 |
17 | ### HTML
18 |
19 | ```js
20 |
21 | const html = `
22 |
23 |
24 | Hello world!
147 |Hello world!
148 |
25 | page {{pageNumber}}
26 |
27 |
28 |
29 | page {{pageNumber}}
30 |
31 |
32 |
33 | page {{pageNumber}}
34 |
35 |
36 |
37 | `
38 |
39 | const renderer = new Renderer({ dirname: __dirname });
40 | renderer.render({
41 | templateSource: html,
42 | });
43 |
44 | // NOTE: You do not have to include the or tags if you have no header items. So this would be okay as well:
45 | /*
46 | const html = `
47 |
48 | page {{pageNumber}}
49 |
50 |
51 |
52 | page {{pageNumber}}
53 |
54 |
55 |
56 | page {{pageNumber}}
57 |
58 | `
59 | */
60 |
61 | ```
62 |
63 | ### React
64 |
65 | ```js
66 | const React = require('react');
67 | const Renderer = require('@pdftron/web-to-pdf');
68 |
69 | class Component extends React.Component {
70 | render() {
71 | return (
72 |
74 | Page {`{{pageNumber}}`}
75 |
76 |
77 |
78 | Page {`{{pageNumber}}`}
79 |
80 |
81 |
82 | Page {`{{pageNumber}}`}
83 |
84 |
15 | My page 1 content here
16 |
17 |
18 |
19 | My page 2 content here
20 |
21 | `
22 |
23 | // Headers
24 | const header = `
25 |
26 | PDFTron.com
27 |
28 | `
29 |
30 | // Footers
31 | const footer = `
32 |
35 | `
36 |
37 | renderer.render({
38 | templateSource: html,
39 | chunks: {
40 | header,
41 | footer
42 | }
43 | });
44 | ```
45 |
46 | Output
47 |
48 | ```html
49 |
50 |
58 |
59 |
51 | PDFTron.com
52 |
53 | My page 1 content here
54 |
57 |
60 |
68 | ```
--------------------------------------------------------------------------------
/documentation/lists.md:
--------------------------------------------------------------------------------
1 | # Lists
2 |
3 | When rendering lists of data, its possible that the contents of the list will overflow off the page. We solve this problem by dynamically altering your lists to fit to individual pages.
4 |
5 | To use this feature, simply wrap your list contents in a `.List` class. We will take any overflow content and insert it into a new page!
6 |
7 | ```js
8 |
61 | PDFTron.com
62 |
63 | My page 2 content here
64 |
67 |
9 |
17 |
18 | ```
--------------------------------------------------------------------------------
/documentation/real-time.md:
--------------------------------------------------------------------------------
1 | # Real time PDF Building
2 |
3 | Real time mode allows you to view your PDF in the browser as you build it! Any change to a file will rebuild the PDF and hot reload it in the browser.
4 |
5 | **To enable real time mode, please follow these two (three if you're using react) steps:**
6 |
7 | ## 1) Export renderOptions from a different file.
8 | In order for us to get your new render params when they change, we need to be able to dynamically require them. In order to do this, your render params must be exported from another file, and you must pass us a path to this file. This file must export (default) a function that returns your params. This function may be asyncronous if you need to do some network fetching here.
9 |
10 | See [here](./api.md#renderrenderoptions) for possible renderOptions
11 |
12 | Example of real time building [here](./../examples/real-time)
13 |
14 | **index.js**
15 | ```js
16 | const renderer = new Renderer({ dirname: __dirname });
17 |
18 | const render = () => {
19 | renderer.render('options.js');
20 | }
21 |
22 | renderer.on('change', render);
23 | render();
24 | ```
25 |
26 | **options.js**
27 | ```js
28 |
29 | module.exports = () => {
30 | return {
31 | templateSource: "
10 | {
11 | myItems.map(item => {
12 | return
16 | {item}
13 | }) 14 | } 15 |Hey!!!
",
32 | // ...other renderOptions
33 | }
34 | }
35 |
36 | ```
37 |
38 | ## 2) Add a change listener
39 |
40 | To trigger re-renders, you need to hook into the `onchange` event. Follow this pattern to do so:
41 |
42 | ```js
43 | const renderer = new Renderer({ dirname: __dirname });
44 |
45 | const render = () => {
46 | renderer.render('options.js');
47 | }
48 |
49 | renderer.on('change', render);
50 | render();
51 | ```
52 |
53 | Web-to-pdf will trigger your render function any time a file changes.
54 |
55 | ## 3) React components (server rendered)
56 |
57 | If you are using a React component as a source and you want hot reloading, you need to use our special `pathTo` function to require it.
58 |
59 | In the function exported from your [options file](#1-export-renderoptions-from-a-different-file), use the first parameter to reference your react component.
60 |
61 | Example:
62 |
63 | **options.js**
64 | ```js
65 | module.exports = async (pathTo) => {
66 |
67 | return {
68 | templateSource: pathTo('./root'), // ./root exports the root react component
69 | }
70 |
71 | }
72 | ```
73 |
74 | [Here is an example](../examples/complex-2) of this method in use.
75 |
76 |
--------------------------------------------------------------------------------
/documentation/remote-api.md:
--------------------------------------------------------------------------------
1 | # Remote API
2 |
3 | Passing a URL to templateSource allows you to render a remote page. The API is the same as rendering a local PDF, but here are some ways you can edit the remote PDF.
4 |
5 | ## new Renderer(options)
6 | See [renderer api](./api.md#new-rendereroptions) for constructor options
7 |
8 | ```js
9 | const Renderer = require('@pdftron/web-to-pdf');
10 | const renderer = new Renderer(options);
11 | ```
12 |
13 | ## .render(renderOptions)
14 | - [templateSource](#templateSource) (required)
15 | - [styles](#styles),
16 | - [scripts](#scripts),
17 | - [outputFolder](#outputfolder)
18 | - [outputName](#outputname)
19 | - [ignoreWatch](#ignorewatch)
20 |
21 | **NOTE** For `realTime` mode, you must pass a path to an options file instead of an options object. See [this](./real-time.md) for more details.
22 |
23 | **NOTE** If you want to render a local html file, please see [this guide](./api.md)
24 |
25 | ### templateSource
26 | The URL of the page to render.
27 |
28 | ```js
29 | const renderer = new Renderer(options);
30 |
31 | renderer.renderRemote({
32 | templateSource: 'http://google.com'
33 | });
34 | ```
35 |
36 | ### styles
37 | An array of paths to `css` or `scss` files to inject into the page. Useful for removing unwanted elements from the page.
38 |
39 | Paths are relative to the current file.
40 |
41 | ```js
42 | const renderer = new Renderer(options);
43 |
44 | renderer.renderRemote({
45 | templateSource: 'http://google.com',
46 | styles: [
47 | 'style.css',
48 | 'style.scss',
49 | ]
50 | });
51 | ```
52 |
53 | ### scripts
54 | An array of paths to javscript files to inject into the page. Useful for running custom scripts before the PDF is generated.
55 |
56 | Scripts are injected into the top of the page.
57 |
58 | Paths are relative to the current file.
59 |
60 | ```js
61 | const renderer = new Renderer(options);
62 |
63 | renderer.renderRemote({
64 | templateSource: 'http://google.com',
65 | scripts: [
66 | 'myScript.js',
67 | ]
68 | });
69 | ```
70 |
71 | ### outputFolder
72 | A string containing the name of the desired output folder. Will be created relative to the CWD.
73 |
74 | default: `outputs`
75 |
76 | ```js
77 | const renderer = new Renderer({ dirname: __dirname });
78 | renderer.renderRemote({
79 | templateSource: 'http://google.com',
80 | outputFolder: 'pdf-outputs'
81 | });
82 | ```
83 |
84 | Will create `./pdf-outputs/index.pdf`
85 |
86 | ### outputName
87 | Name of the PDF file that is generated.
88 |
89 | default `index`
90 |
91 | ```js
92 | const renderer = new Renderer({ dirname: __dirname });
93 | renderer.renderRemote({
94 | templateSource: 'http://google.com',
95 | outputFolder: 'pdf-outputs',
96 | outputName: 'report-card'
97 | });
98 | ```
99 |
100 | Will create `./pdf-outputs/report-card.pdf`
101 |
102 | ### ignoreWatch
103 | Sometimes you will have your own file watcher and you won't have to reply on our on change function for certain files.
104 |
105 | Accepts an [anymatch](https://www.npmjs.com/package/anymatch) array or glob of files to ignore.
106 |
107 | default: null
108 |
109 | ```js
110 | const renderer = new Renderer({ dirname: __dirname });
111 | renderer.renderRemote({
112 | templateSource: 'http://google.com',
113 | ignoreWatch: "**/style.scss" // ignore style.scss
114 | });
115 | ```
116 |
117 |
118 |
119 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # Examples
2 | This directory contains a bunch of examples.
3 |
4 | Here is a categorized list of examples:
5 |
6 | ### The basics
7 | - [HTML to PDF](./html-to-pdf-basic)
8 | - [React to PDF](./react-to-pdf)
9 | - [Function to PDF](./function-to-pdf)
10 | - [Local files to PDF](./files-as-source)
11 |
12 | ### Content
13 | - [Dynamic content/copy](./dynamic-content)
14 | - [Reusuable HTML chunks](./chunks)
15 | - [Page numbers](./page-numbers)
16 |
17 | ### Structure
18 | - [Headers and footers](./headers-footers)
19 |
20 | ### Real Time
21 | - [Real time PDF building](./real-time)
22 |
23 | ### Cool stuff
24 | - 💥[**Using third party JS libraries to render stuff**](./javascript)💥
25 | - 💥[**Running as a service**](./as-a-service)💥
--------------------------------------------------------------------------------
/examples/as-a-service/client.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
23 |
24 |
--------------------------------------------------------------------------------
/examples/as-a-service/readme.md:
--------------------------------------------------------------------------------
1 | # As a service.
2 |
3 | You can use web-to-pdf as an online service to render PDFs!
4 |
5 | This example uses a node + express server to provide a PDF rendering API.
6 |
7 | When the client presses the submit button, it sends a request to the API that tells it to render whatever remote page the user enters. When its done rendering, it returns the remote location of the generated PDF, and the client navigates there.
8 |
9 | **This is a very basic example - more precautions should be taken in a real life scenerio**.
10 |
11 | ### Running
12 |
13 | If you dont have the repo installed, do so by running:
14 | ```
15 | git clone https://github.com/PDFTron/web-to-pdf.git
16 | cd web-to-pdf
17 | npm i
18 | ```
19 |
20 | Run the example:
21 | ```
22 | npx babel-node examples/as-a-service/server.js
23 | ```
24 |
25 | ### Try the sample:
26 | Navigate to http://localhost:8080 and enter a website to render as a PDF. A new tab will open displaying the PDF.
--------------------------------------------------------------------------------
/examples/as-a-service/server.js:
--------------------------------------------------------------------------------
1 | const Renderer = require('../../src');
2 | const express = require('express');
3 | const app = express();
4 | const Path = require('path');
5 | const port = 8080;
6 |
7 | const r = new Renderer({ dirname: __dirname, keepAlive: true, height: 'auto' });
8 |
9 | // use express to serve static assets at /outputs
10 | app.use('/outputs', express.static(Path.resolve(__dirname, './outputs')));
11 |
12 | // serve the client app
13 | app.get('/', (req, res) => {
14 | res.sendFile(Path.join(__dirname + '/client.html'));
15 | })
16 |
17 | // convert api
18 | app.get('/convert', async (req, res) => {
19 | const path = req.query.url;
20 | const u = new URL(path);
21 |
22 | await r.render({
23 | templateSource: path,
24 | outputFolder: Path.resolve(__dirname, './outputs'), // render stuff (relative to this file)
25 | outputName: u.hostname
26 | });
27 |
28 | // returns the remote location of the file
29 | res.send(`http://localhost:${port}/outputs/${u.hostname}.pdf`);
30 | });
31 |
32 | app.listen(port, () => { console.log(`Listening on port ${port}. Navigate to http://localhost:8080 to test the app!`) });
33 |
--------------------------------------------------------------------------------
/examples/assets/README.md:
--------------------------------------------------------------------------------
1 | # NAME
2 | DESCRIPTION
3 |
4 | ### Running
5 |
6 | If you dont have the repo installed, do so by running:
7 | ```
8 | git clone https://github.com/XodoDocs/web-to-pdf.git
9 | cd web-to-pdf
10 | npm i
11 | ```
12 |
13 | Run the example:
14 | ```
15 | npx babel-node examples/assets/index.js
16 | ```
17 |
18 | ### APIs and Techniques Used
19 | - [HTML String as template source](../../documentation/api.md#html-string)
20 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/assets/img/pdftron.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ApryseSDK/web-to-pdf/651ebc4ee85e53b7bb161f6b0443d9b08c9be283/examples/assets/img/pdftron.png
--------------------------------------------------------------------------------
/examples/assets/img/pdftron2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ApryseSDK/web-to-pdf/651ebc4ee85e53b7bb161f6b0443d9b08c9be283/examples/assets/img/pdftron2.png
--------------------------------------------------------------------------------
/examples/assets/index.js:
--------------------------------------------------------------------------------
1 | const WebToPDF = require('../../src/index');
2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
3 |
4 | (async () => {
5 | const renderer = new WebToPDF({ dirname: __dirname, debug: true });
6 |
7 | const html = `
8 |
9 |
19 | `;
20 |
21 | const style = `
22 | .bg {
23 | background-image: url('./img/pdftron2.png');
24 | }
25 | `
26 |
27 | renderer.render({
28 | templateSource: html,
29 | styles: [style],
30 | outputName: 'assetsBasic'
31 | })
32 |
33 | })()
34 |
--------------------------------------------------------------------------------
/examples/chunks/README.md:
--------------------------------------------------------------------------------
1 | # Chunks example
2 | This example shows how to use the chunks api to insert chunks of html throughout your template.
3 |
4 | ### Running
5 |
6 | If you dont have the repo installed, do so by running:
7 | ```
8 | git clone https://github.com/PDFTron/web-to-pdf.git
9 | cd web-to-pdf
10 | npm i
11 | ```
12 |
13 | Run the example:
14 | ```
15 | npx babel-node examples/chunks
16 | ```
17 |
18 | ### APIs and Techniques Used
19 | - [Chunks](../../documentation/chunks.md)
20 | - [HTML String as template source](../../documentation/api.md#html-string)
21 | - [HTML File as chunk source](../../documentation/api.md#html-file)
22 | - [React component as chunk source](../../documentation/api.md#react-component)
23 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/chunks/index.js:
--------------------------------------------------------------------------------
1 | const WebToPDF = require('../../src/index');
2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
3 |
4 | const React = require('react');
5 |
6 | class ReactChunk extends React.Component {
7 | render() {
8 | return (
9 |
10 | 
13 |
14 |
18 | Web to PDF
11 |Basic assets example
12 |
13 |
14 |
15 | This should have a background image
16 |
17 |
10 | Cool! Rendered via React.
11 |
12 | )
13 | }
14 | }
15 |
16 | (async () => {
17 | const renderer = new WebToPDF({ dirname: __dirname });
18 |
19 | await renderer.render({
20 | templateSource: './src/index.html',
21 | chunks: {
22 | fileChunk: './src/myChunk.html',
23 | reactChunk: ReactChunk,
24 | htmlChunk: `
25 |
26 |
28 | `
29 | },
30 | outputName: "chunks"
31 | })
32 |
33 | })()
34 |
--------------------------------------------------------------------------------
/examples/chunks/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | I will be dynamically inserted!
27 |
8 | Chunks can be any input that templateSource accepts
12 | {{reactChunk}}
13 |
14 |
17 |
18 |
--------------------------------------------------------------------------------
/examples/chunks/src/index.scss:
--------------------------------------------------------------------------------
1 | .Page {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | flex-direction: column;
6 | }
--------------------------------------------------------------------------------
/examples/chunks/src/myChunk.html:
--------------------------------------------------------------------------------
1 | Insert chunks of content using mustache syntax and the chunks api
9 | {{fileChunk}} 10 | 11 |Chunks can be any input that templateSource accepts
(html string, React component, html file, function)
12 | {{reactChunk}}
13 |
14 | No need to duplicate your html!
15 | {{htmlChunk}} 16 |
2 | This is a chunk of content!
3 |
--------------------------------------------------------------------------------
/examples/dynamic-content/README.md:
--------------------------------------------------------------------------------
1 | # Dynamic Content Example
2 | This is an example of using dynamic content in your PDFs.
3 |
4 | This is useful for writing a script to generate a PDF invoice, report, report card, etc. You can use your own service to fetch the content and dynamically insert it into your template.
5 |
6 | ### Running
7 |
8 | If you dont have the repo installed, do so by running:
9 | ```
10 | git clone https://github.com/PDFTron/web-to-pdf.git
11 | cd web-to-pdf
12 | npm i
13 | ```
14 |
15 | Run the example:
16 | ```
17 | npx babel-node examples/dynamic-content
18 | ```
19 |
20 | ### APIs and Techniques Used
21 | - [HTML File as template source](../../documentation/api.md#html-file)
22 | - [Dynamic content](../../documentation/content.md)
23 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/dynamic-content/index.js:
--------------------------------------------------------------------------------
1 | const WebToPDF = require('../../src/index');
2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
3 |
4 | (async () => {
5 | const renderer = new WebToPDF({ dirname: __dirname });
6 |
7 | // You could load this JSON object from your own service
8 | // This is useful for generating reports, invoices, etc
9 | const myContent = {
10 | pageTitle: "Using dynamic content in your PDFs",
11 | subtitle: "This example shows how you can use JSON data to render dynamic content in your PDF",
12 | content: {
13 | body: "You can even use nested data!"
14 | }
15 | }
16 |
17 | await renderer.render({
18 | templateSource: './src/index.html',
19 | contentSource: myContent,
20 | outputName: "dynamic-content"
21 | })
22 |
23 | })()
24 |
--------------------------------------------------------------------------------
/examples/dynamic-content/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {{pageTitle}}
7 |{{subtitle}}
8 |{{content.body}}
9 | 10 | -------------------------------------------------------------------------------- /examples/dynamic-content/src/style.scss: -------------------------------------------------------------------------------- 1 | .Page { 2 | display: flex; 3 | flex-direction: column; 4 | height: 100%; 5 | justify-content: center; 6 | align-items: center; 7 | } -------------------------------------------------------------------------------- /examples/files-as-source/README.md: -------------------------------------------------------------------------------- 1 | # Local files as a source 2 | This example shows how you can use `html`, `scss` and `css` files as sources. 3 | 4 | This example also shows how you can use Google Fonts to style your text. 5 | 6 | ### Running 7 | 8 | If you dont have the repo installed, do so by running: 9 | ``` 10 | git clone https://github.com/PDFTron/web-to-pdf.git 11 | cd web-to-pdf 12 | npm i 13 | ``` 14 | 15 | Run the example: 16 | ``` 17 | npx babel-node examples/files-as-source/index.js 18 | ``` 19 | 20 | ### APIs and Techniques Used 21 | - [HTML File as template source](../../documentation/api.md#html-file) 22 | - [Output name](../../documentation/api.md#outputname) -------------------------------------------------------------------------------- /examples/files-as-source/index.js: -------------------------------------------------------------------------------- 1 | const WebToPDF = require('../../src/index'); 2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this 3 | 4 | (async () => { 5 | const renderer = new WebToPDF({ dirname: __dirname }); 6 | 7 | await renderer.render({ 8 | templateSource: './src/index.html', 9 | outputName: 'files-as-source' 10 | }) 11 | })() 12 | -------------------------------------------------------------------------------- /examples/files-as-source/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/files-as-source/src/index.scss:
--------------------------------------------------------------------------------
1 | // You can use external web fonts!
2 | @import url('https://fonts.googleapis.com/css?family=Roboto');
3 |
4 | .Page {
5 | h1, p {
6 | font-family: Roboto;
7 | }
8 |
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
--------------------------------------------------------------------------------
/examples/function-to-pdf/README.md:
--------------------------------------------------------------------------------
1 | # Function to PDF example
2 | Web-to-pdf can accept a function as a source. This function can be async, meaning you can fetch data to use when rendering your PDF.
3 |
4 | ### Running
5 |
6 | If you dont have the repo installed, do so by running:
7 | ```
8 | git clone https://github.com/PDFTron/web-to-pdf.git
9 | cd web-to-pdf
10 | npm i
11 | ```
12 |
13 | Run the example:
14 | ```
15 | npx babel-node examples/function-to-pdf/index.js
16 | ```
17 |
18 | ### APIs and Techniques Used
19 | - [Function as template source](../../documentation/api.md#function)
20 | - [SCSS Strings as styles](../../documentation/api.md#styles)
21 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/function-to-pdf/index.js:
--------------------------------------------------------------------------------
1 | const WebToPDF = require('../../src/index');
2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
3 |
4 | const fetch = require('node-fetch');
5 |
6 | (async () => {
7 | const renderer = new WebToPDF({ dirname: __dirname });
8 |
9 | const getHTML = async () => {
10 | const response = await fetch('https://jsonplaceholder.typicode.com/todos');
11 | let json = await response.json();
12 |
13 | json = json.slice(0, 10);
14 |
15 | const content = json.reduce((acc, data) => {
16 | return acc + `
17 | Using an HTML file as a source.
9 |You can use an HTML file to generate a PDF. You can even reference external CSS/SCSS as seen above!
10 |This example uses Google fonts (imported in index.scss, check it out!)
11 |
18 |
20 | `
21 | }, '')
22 |
23 | const html = `
24 | ${data.title} ${data.completed ? "✓" : "✖"}
19 |
25 |
29 | `;
30 |
31 | return html;
32 |
33 | };
34 |
35 | await renderer.render({
36 | templateSource: getHTML,
37 | outputName: 'function-to-pdf',
38 | styles: [
39 | `
40 | .list {
41 | margin: 20px;
42 | }
43 |
44 | .item {
45 | p {
46 | font-size: 24px;
47 |
48 | .green {
49 | color: green;
50 | }
51 |
52 | .red {
53 | color: red;
54 | }
55 | }
56 |
57 | }
58 | `
59 | ]
60 | })
61 | })()
62 |
--------------------------------------------------------------------------------
/examples/headers-footers/README.md:
--------------------------------------------------------------------------------
1 | # Header and footer example
2 | This example shows how `header` and `footer` chunks are automatically appended to each page.
3 |
4 | ### Running
5 |
6 | If you dont have the repo installed, do so by running:
7 | ```
8 | git clone https://github.com/PDFTron/web-to-pdf.git
9 | cd web-to-pdf
10 | npm i
11 | ```
12 |
13 | Run the example:
14 | ```
15 | npx babel-node examples/headers-footers
16 | ```
17 |
18 | ### APIs and Techniques Used
19 | - [Headers and footers](../../documentation/headers-footers.md)
20 | - [HTML File as template source](../../documentation/api.md#html-file)
21 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/headers-footers/index.js:
--------------------------------------------------------------------------------
1 | const WebToPDF = require('../../src/index');
2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
3 |
4 | (async () => {
5 | const renderer = new WebToPDF({ dirname: __dirname });
6 |
7 | await renderer.render({
8 | templateSource: "./src/index.html",
9 | chunks: {
10 | header: "./src/header.html",
11 | footer: "./src/footer.html"
12 | },
13 | outputName: "headers-footers"
14 | })
15 |
16 | })()
17 |
--------------------------------------------------------------------------------
/examples/headers-footers/src/footer.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/headers-footers/src/header.html:
--------------------------------------------------------------------------------
1 |
26 | ${content}
27 |
28 |
2 |
--------------------------------------------------------------------------------
/examples/headers-footers/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Header content is automatically appended to each page.
3 |
8 |
12 |
13 |
9 | Page 1 content
10 |
11 |
14 |
18 |
19 |
15 | Page 2 content
16 |
17 |
20 |
24 |
25 |
--------------------------------------------------------------------------------
/examples/headers-footers/src/style.scss:
--------------------------------------------------------------------------------
1 | .content {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | justify-content: center;
6 | align-items: center;
7 | }
8 |
9 | .header, .footer {
10 | background-color: #222222;
11 | color: white;
12 | height: 50px;
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 |
17 | p {
18 | margin: 0;
19 | }
20 | }
--------------------------------------------------------------------------------
/examples/html-to-pdf-basic/README.md:
--------------------------------------------------------------------------------
1 | # HTML to PDF Basic Example
2 | This example shows how to convert an HTML string and SCSS string to a PDF.
3 |
4 | ### Running
5 |
6 | If you dont have the repo installed, do so by running:
7 | ```
8 | git clone https://github.com/PDFTron/web-to-pdf.git
9 | cd web-to-pdf
10 | npm i
11 | ```
12 |
13 | Run the example:
14 | ```
15 | npx babel-node examples/html-to-pdf-basic/index.js
16 | ```
17 |
18 | ### APIs and Techniques Used
19 | - [HTML String as template source](../../documentation/api.md#html-string)
20 | - [SCSS Strings as styles](../../documentation/api.md#styles)
21 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/html-to-pdf-basic/index.js:
--------------------------------------------------------------------------------
1 | const WebToPDF = require('../../dist/web-to-pdf');
2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
3 |
4 | (async () => {
5 | const renderer = new WebToPDF({ dirname: __dirname, debug: true });
6 |
7 | const html = `
8 |
21 | Page 3 content
22 |
23 |
9 |
14 | `;
15 |
16 | const scss = `
17 | .container {
18 | display: flex;
19 | flex-direction: column;
20 | justify-content: center;
21 | align-items: center;
22 | height: 100%;
23 |
24 | @media screen and (min-width: 300px) {
25 | background-color: red;
26 | }
27 |
28 | @media screen and (min-width: 400px) {
29 | background-color: green;
30 | }
31 |
32 | @media screen and (min-width: 500px) {
33 | background-color: blue;
34 | }
35 |
36 | @media screen and (min-width: 600px) {
37 | background-color: yellow;
38 | }
39 |
40 | @media screen and (min-width: 700px) {
41 | background-color: pink;
42 | }
43 |
44 | @media screen and (min-width: 800px) {
45 | background-color: black;
46 | }
47 |
48 | @media screen and (min-width: 900px) {
49 | background-color: grey;
50 | }
51 | }
52 |
53 |
54 | `;
55 |
56 | await renderer.render({
57 | templateSource: html,
58 | styles: [scss],
59 | outputName: 'htmlBasic'
60 | });
61 | })()
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/examples/javascript/README.md:
--------------------------------------------------------------------------------
1 | # Javascript example
2 | This example shows how we can use a third party JS library to render elements in our PDF, such as charts and graphs.
3 |
4 | ### Running
5 |
6 | If you dont have the repo installed, do so by running:
7 | ```
8 | git clone https://github.com/PDFTron/web-to-pdf.git
9 | cd web-to-pdf
10 | npm i
11 | ```
12 |
13 | Run the example:
14 | ```
15 | npx babel-node examples/javascript
16 | ```
17 |
18 | ### APIs and Techniques Used
19 | - [HTML File as template source](../../documentation/api.md#html-file)
20 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/javascript/index.js:
--------------------------------------------------------------------------------
1 | const WebToPDF = require('../../src/index');
2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
3 |
4 | (async () => {
5 | const renderer = new WebToPDF({ dirname: __dirname, debug: true });
6 |
7 | await renderer.render({
8 | templateSource: './src/index.html',
9 | outputName: 'javascript'
10 | })
11 | })()
12 |
--------------------------------------------------------------------------------
/examples/javascript/src/cool-rendering.js:
--------------------------------------------------------------------------------
1 | const ctx = document.getElementById("draw-here");
2 |
3 | const myChart = new Chart(ctx, {
4 | type: 'doughnut',
5 | data: {
6 | labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
7 | datasets: [{
8 | label: '# of Votes',
9 | data: [12, 19, 3, 5, 2, 3],
10 | backgroundColor: [
11 | 'rgba(255, 99, 132, 1)',
12 | 'rgba(54, 162, 235, 1)',
13 | 'rgba(255, 206, 86, 1)',
14 | 'rgba(75, 192, 192, 1)',
15 | 'rgba(153, 102, 255, 1)',
16 | 'rgba(255, 159, 64, 1)'
17 | ],
18 | borderColor: [
19 | 'rgba(255,99,132,1)',
20 | 'rgba(54, 162, 235, 1)',
21 | 'rgba(255, 206, 86, 1)',
22 | 'rgba(75, 192, 192, 1)',
23 | 'rgba(153, 102, 255, 1)',
24 | 'rgba(255, 159, 64, 1)'
25 | ],
26 | borderWidth: 1
27 | }]
28 | },
29 | });
30 |
--------------------------------------------------------------------------------
/examples/javascript/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
13 | Web to PDF
11 |Basic HTML Example
12 |
10 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/examples/javascript/src/style.scss:
--------------------------------------------------------------------------------
1 | .Page {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | flex-direction: column;
6 | }
--------------------------------------------------------------------------------
/examples/page-numbers/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
12 |
13 |
14 |
9 | Page {{pageNumber}}
10 |
11 |
12 |
13 | Page {{pageNumber}}
14 |
15 |
16 |
17 | Page {{pageNumber}}
18 |
19 |
20 |
--------------------------------------------------------------------------------
/examples/page-numbers/index.js:
--------------------------------------------------------------------------------
1 | import Renderer from '../../src';
2 |
3 | const r = new Renderer({ dirname: __dirname });
4 |
5 | r.render({
6 | templateSource: 'index.html',
7 | outputName: 'pageNumbers'
8 | })
9 |
--------------------------------------------------------------------------------
/examples/page-numbers/index.scss:
--------------------------------------------------------------------------------
1 | .Page {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | font-size: 40px;
6 | }
--------------------------------------------------------------------------------
/examples/page-numbers/readme.md:
--------------------------------------------------------------------------------
1 | # Javascript example
2 | This example shows you how to add page numbers dynamically into your PDFs
3 |
4 | ### Running
5 |
6 | If you dont have the repo installed, do so by running:
7 | ```
8 | git clone https://github.com/PDFTron/web-to-pdf.git
9 | cd web-to-pdf
10 | npm i
11 | ```
12 |
13 | Run the example:
14 | ```
15 | npx babel-node examples/page-numbers
16 | ```
17 |
18 | ### APIs and Techniques Used
19 | - [HTML File as template source](../../documentation/api.md#html-file)
20 | - [Page numbers](../../documentation/creating-pages.md#page-numbers)
--------------------------------------------------------------------------------
/examples/react-to-pdf/README.md:
--------------------------------------------------------------------------------
1 | # React to PDF Example
2 | This example shows how you can use a server side react component to render a PDF.
3 |
4 | ### Running
5 |
6 | If you dont have the repo installed, do so by running:
7 | ```
8 | git clone https://github.com/PDFTron/web-to-pdf.git
9 | cd web-to-pdf
10 | npm i
11 | ```
12 |
13 | Run the example:
14 | ```
15 | npx babel-node examples/react-to-pdf/index.js
16 | ```
17 |
18 | ### APIs and Techniques Used
19 | - [React Component as template source](../../documentation/api.md#react-component)
20 | - [SCSS Strings as styles](../../documentation/api.md#styles)
21 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/react-to-pdf/index.js:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 | const WebToPDF = require('../../src/index');
3 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
4 |
5 | class RootComponent extends React.Component {
6 | render() {
7 | const data = [
8 | { firstName: "Homer", lastname: "Simpson" },
9 | { firstName: "Marge", lastname: "Simpson" },
10 | { firstName: "Lisa", lastname: "Simpson" },
11 | { firstName: "Bart", lastname: "Simpson" },
12 | ]
13 |
14 | return (
15 |
16 |
21 | )
22 | }
23 | }
24 |
25 | class ListItem extends React.Component {
26 | render() {
27 | return (
28 | Simpsons Characters
17 | { 18 | data.map(({ firstName, lastname }) =>
29 |
31 | )
32 | }
33 | }
34 |
35 | (async () => {
36 | const renderer = new WebToPDF({ dirname: __dirname });
37 |
38 | await renderer.render({
39 | templateSource: RootComponent,
40 | outputName: 'react-to-pdf',
41 | styles: [
42 | `
43 | .Root {
44 | height: 100%;
45 | display: flex;
46 | flex-direction: column;
47 | justify-content: center;
48 | align-items: center;
49 | }
50 |
51 | .ListItem {
52 | p {
53 | font-size: 24px;
54 | }
55 | }
56 | `
57 | ]
58 | })
59 |
60 | })()
61 |
--------------------------------------------------------------------------------
/examples/real-time/README.md:
--------------------------------------------------------------------------------
1 | # Real time PDF building
2 | This example shows how to build your PDF templates in real time.
3 |
4 | ### Running
5 |
6 | If you dont have the repo installed, do so by running:
7 | ```
8 | git clone https://github.com/PDFTron/web-to-pdf.git
9 | cd web-to-pdf
10 | npm i
11 | ```
12 |
13 | Run the example:
14 | ```
15 | npx babel-node examples/real-time
16 | ```
17 |
18 | ### APIs and Techniques Used
19 | - [HTML files as template source](../../documentation/api.md#html-file)
20 | - [Real time PDF building](../../documentation/real-time.md)
21 | - [Multiple page PDFs](../../documentation/creating-pages.md)
22 | - [Dynamic content](../../documentation/content.md)
23 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/real-time/index.js:
--------------------------------------------------------------------------------
1 | const WebToPDF = require('../../src/index');
2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
3 |
4 | (async () => {
5 | const renderer = new WebToPDF({ dirname: __dirname });
6 |
7 | const renderFunc = () => {
8 | renderer.render('options.js');
9 | }
10 |
11 | renderer.on('change', renderFunc);
12 | renderFunc();
13 |
14 | })()
15 |
--------------------------------------------------------------------------------
/examples/real-time/options.js:
--------------------------------------------------------------------------------
1 | module.exports = () => {
2 |
3 | const contentSource = {
4 | title: "Real time PDF building ya ya ya!!!!",
5 | subtitle: "Try changing me and see what happens wow",
6 | description: "You can change anything in this file, in src/index.html, or any other referenced files (like index.scss).{this.props.firstName} {this.props.lastname}
30 |Its magic!" 7 | } 8 | 9 | return { 10 | templateSource: './src/index.html', 11 | contentSource, 12 | outputName: "real-time", 13 | pageClass: "Split", 14 | } 15 | } -------------------------------------------------------------------------------- /examples/real-time/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 |
12 |
13 | {{title}}
9 |{{subtitle}}
10 |{{description}}
11 |
14 |
16 |
17 |
--------------------------------------------------------------------------------
/examples/real-time/src/index.scss:
--------------------------------------------------------------------------------
1 | .Split {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #222222;
7 | color: white;
8 | font-family: arial;
9 |
10 | p {
11 | text-align: center;
12 | color: blue;
13 | }
14 | }
--------------------------------------------------------------------------------
/examples/remote-source/README.md:
--------------------------------------------------------------------------------
1 | # Remote source example
2 | Renders a PDF of https://www.pdftron.com.
3 |
4 | This example shows how we can inject CSS into a remote page to format it before render.
5 |
6 | ### Running
7 |
8 | If you dont have the repo installed, do so by running:
9 | ```
10 | git clone https://github.com/PDFTron/web-to-pdf.git
11 | cd web-to-pdf
12 | npm i
13 | ```
14 |
15 | Run the example:
16 | ```
17 | npx babel-node examples/remote-source
18 | ```
19 |
20 | ### APIs and Techniques Used
21 | - [Remote URL as source](../../documentation/remote-api.md)
22 | - [Inject SCSS into page](../../documentation/remote-api.md#styles)
23 | - [Width and height](../../documentation/api.md#width)
24 | - [Output name](../../documentation/api.md#outputname)
--------------------------------------------------------------------------------
/examples/remote-source/index.js:
--------------------------------------------------------------------------------
1 | const WebToPDF = require('../../src/index');
2 | // const WebToPDF = require('@pdftron/web-to-pdf'); // or this
3 |
4 | (async () => {
5 | const renderer = new WebToPDF({
6 | dirname: __dirname,
7 | height: 'auto',
8 | width: 1200,
9 | });
10 |
11 | await renderer.render({
12 | templateSource: "https://www.pdftron.com",
13 | styles: [
14 | `
15 | .Header, .Footer, .main-cta {
16 | display: none !important;
17 | }
18 |
19 | `
20 | ],
21 | outputName: "remote-source"
22 | })
23 |
24 | })()
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@pdftron/web-to-pdf",
3 | "version": "0.7.0",
4 | "description": "Headless HTML to PDF conversion",
5 | "main": "dist/web-to-pdf.js",
6 | "bin": {
7 | "web-to-pdf": "dist/web-to-pdf.js"
8 | },
9 | "scripts": {
10 | "test": "nyc mocha --compilers js:@babel/register",
11 | "build": "npm run test && npx webpack",
12 | "publish-npm": "npm run build && npm publish",
13 | "preinstall": "npm i node-sass live-server --save"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/PDFTron/web-to-pdf.git"
18 | },
19 | "author": "Logan Bittner",
20 | "license": "AGPL",
21 | "bugs": {
22 | "url": "https://github.com/PDFTron/web-to-pdf/issues"
23 | },
24 | "homepage": "https://github.com/PDFTron/web-to-pdf#readme",
25 | "dependencies": {
26 | "@babel/runtime": "^7.1.2",
27 | "anymatch": "^2.0.0",
28 | "cheerio": "^1.0.0-rc.2",
29 | "chokidar": "^2.0.4",
30 | "emitter": "0.0.5",
31 | "fs-extra": "^6.0.1",
32 | "http-proxy": "^1.17.0",
33 | "live-server": "^1.2.0",
34 | "passport": "^0.4.0",
35 | "pretty": "^2.0.0",
36 | "puppeteer": "^1.9.0",
37 | "react": "^16.4.1",
38 | "react-dom": "^16.4.1",
39 | "rimraf": "^2.6.2"
40 | },
41 | "devDependencies": {
42 | "@babel/core": "^7.1.2",
43 | "@babel/node": "^7.0.0",
44 | "@babel/plugin-proposal-class-properties": "^7.1.0",
45 | "@babel/plugin-proposal-decorators": "^7.1.2",
46 | "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
47 | "@babel/plugin-proposal-function-sent": "^7.1.0",
48 | "@babel/plugin-proposal-numeric-separator": "^7.0.0",
49 | "@babel/plugin-proposal-throw-expressions": "^7.0.0",
50 | "@babel/plugin-transform-dotall-regex": "^7.0.0",
51 | "@babel/plugin-transform-runtime": "^7.1.0",
52 | "@babel/polyfill": "^7.0.0",
53 | "@babel/preset-env": "^7.1.0",
54 | "@babel/preset-react": "^7.0.0",
55 | "@babel/preset-stage-2": "^7.0.0",
56 | "@babel/register": "^7.0.0",
57 | "babel-loader": "^8.0.4",
58 | "chalk": "^2.4.1",
59 | "copy-webpack-plugin": "^4.6.0",
60 | "css-loader": "^1.0.0",
61 | "express": "^4.16.4",
62 | "extract-text-webpack-plugin": "^3.0.2",
63 | "faker": "^4.1.0",
64 | "json-server": "^0.14.0",
65 | "mini-css-extract-plugin": "^0.4.1",
66 | "mocha": "^5.2.0",
67 | "node-fetch": "^2.2.0",
68 | "node-loader": "^0.6.0",
69 | "node-nightly": "^1.7.3",
70 | "node-sass": "^4.9.4",
71 | "nyc": "^12.0.2",
72 | "sass": "^1.9.2",
73 | "sass-loader": "^7.0.3",
74 | "shebang-loader": "0.0.1",
75 | "style-loader": "^0.21.0",
76 | "webpack": "^4.16.0",
77 | "webpack-cli": "^3.0.8",
78 | "wtfnode": "^0.7.0"
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | // require('@babel/polyfill');
2 |
3 | const isProd = process.env.NODE_ENV === 'production';
4 |
5 | const readFile = require('./util/read-file');
6 | const server = require('./server');
7 | const printPDF = require('./util/print-pdf');
8 | const ensureExists = require('./util/ensure-exists');
9 | const injectStyles = require('./util/inject-styles');
10 | const cleanHTML = require('./util/clean-html');
11 | const getScriptSrc = require('./util/get-script-src');;
12 | const listenToChanges = require('./util/listen-to-changes');
13 | const getCssSrc = require('./util/get-css-src');
14 | const getHTMLFromSource = require('./util/get-html-from-source');
15 | const insertContent = require('./util/insert-content');
16 | const replacePageNumbers = require('./util/replace-page-numbers');
17 | const getAssetSources = require('./util/get-asset-source');
18 | const getContent = require('./util/get-content');
19 | const injectCustomScripts = require('./util/inject-custom-scripts');
20 | const ensurePage = require('./util/ensure-page');
21 | const injectHeaderAndFooter = require('./util/inject-header-footer');
22 | const deleteDir = require('./util/delete-dir');
23 | const getCustomCSS = require('./util/get-custom-css');
24 | const getCustomScripts = require('./util/get-custom-scripts');
25 | const getOptions = require('./util/get-options');
26 |
27 | const puppeteer = require('puppeteer');
28 | const pretty = require('pretty');
29 | const Writer = require('./writer');
30 | const exec = require('child_process').exec;
31 |
32 | const Path = require('path');
33 | const chalk = require('chalk');
34 |
35 | class Renderer {
36 | constructor(options = {}) {
37 | this.debug = options.debug || false;
38 | this.port = options.port || 8080;
39 | this.host = options.host || '127.0.0.1';
40 | this.width = options.width || 612;
41 | this.height = options.height || 792;
42 | this.autoOpen = options.autoOpen || false;
43 | this.dirname = options.dirname;
44 | this.keepAlive = options.keepAlive || false;
45 | this.args = options.args || [];
46 | this.margin = options.margin || {
47 | top: '0px',
48 | right: '0px',
49 | bottom: '0px',
50 | left: '0px'
51 | }
52 |
53 | this.__openBrowser = options.__openBrowser || false;
54 |
55 | if (!options.dirname) {
56 | throw new Error(`Missing required parameter 'dirname'. Please add { dirname: __dirname } to your constructor options`);
57 | }
58 |
59 | // internal stuff
60 | this._listening = false;
61 |
62 | this._changeFunc = null;
63 | this._renderedHTML = null;
64 |
65 | this._queue = []
66 | this._activeWorkers = 0;
67 | this._maxWorkers = 20;
68 | this._lastPageSplitClass = 'Page';
69 |
70 | this.__browserPromise = new Promise(async (resolve) => {
71 | this.browser = await puppeteer.launch({
72 | headless: !this.__openBrowser,
73 | args: this.args,
74 | defaultViewport: {
75 | width: this.width,
76 | height: this.height === 'auto' ? 792 : this.height,
77 | deviceScaleFactor: 2
78 | }
79 | });
80 | resolve();
81 | })
82 | }
83 |
84 | on = (key, func) => {
85 | switch (key) {
86 | case 'change':
87 | this._changeFunc = func;
88 | break;
89 | case 'html':
90 | this._renderedHTML = func;
91 | break;
92 | }
93 | }
94 |
95 | _stop = async (err) => {
96 | if (!this.keepAlive) {
97 | return this.stop(err);
98 | }
99 | }
100 |
101 | stop = async (err) => {
102 |
103 | await this.__browserPromise;
104 |
105 | if (this.listener) {
106 | this.listener.close();
107 | }
108 |
109 | if (this.server) {
110 | server.close(this.server);
111 | }
112 |
113 | if (this.browser) {
114 | await this.browser.close();
115 | }
116 |
117 | if (err) throw err;
118 | }
119 |
120 | _autoOpen = (outputFolder, outputName) => {
121 | if (this.autoOpen && !this._changeFunc) {
122 | const getCommandLine = () => {
123 | switch (process.platform) {
124 | case 'darwin' : return 'open';
125 | case 'win32' : return 'start';
126 | case 'win64' : return 'start';
127 | default : return 'xdg-open';
128 | }
129 | }
130 |
131 | exec(getCommandLine() + ' ' + `${outputFolder}/${outputName}/${outputName}.pdf`);
132 | }
133 | }
134 |
135 | _pushQueue = (f) => {
136 | this._queue.push(f);
137 | this._flush();
138 | }
139 |
140 | _flush = async () => {
141 | if (this._activeWorkers < this._maxWorkers && this._queue.length > 0) {
142 | const next = this._queue.pop();
143 | this._activeWorkers++;
144 |
145 | await this.__browserPromise;
146 |
147 | await next();
148 | this._activeWorkers--;
149 |
150 | if (this._queue.length === 0 && this._activeWorkers === 0) {
151 | if (!this._changeFunc) {
152 | this._stop();
153 | }
154 |
155 | return;
156 | }
157 |
158 | this._flush();
159 | }
160 |
161 | }
162 |
163 | render(options) {
164 | return new Promise(async (r) => {
165 | const optionsResult = await getOptions(options, this.dirname);
166 | ({ options } = optionsResult);
167 | this._pushQueue(async () => {
168 | let result;
169 | if (typeof options.templateSource === 'string') {
170 | const src = options.templateSource.trim();
171 | if ((src.startsWith('http') || src.startsWith('https'))) {
172 | result = await this._renderRemote(optionsResult).catch(this._stop);
173 | }
174 | }
175 |
176 | if (!result) {
177 | result = await this._render(optionsResult).catch(this._stop);
178 | }
179 |
180 | r(result);
181 | });
182 | }).catch(this._stop)
183 | }
184 |
185 |
186 | async _renderRemote(optionsResult) {
187 | let options;
188 | let optionsPath = '';
189 | ({ options, optionsPath } = optionsResult);
190 |
191 | let {
192 | styles = [],
193 | scripts = [],
194 | templateSource: url,
195 | outputFolder = 'outputs',
196 | outputName = 'index',
197 | ignoreWatch
198 | } = options;
199 |
200 | let style = await getCustomCSS(styles, this.dirname, this.debug);
201 | let { linkedStyles } = style;
202 |
203 | style = style.css;
204 | const renderedScripts = await getCustomScripts(scripts, this.dirname, this.debug);
205 |
206 | await ensureExists(`${outputFolder}`);
207 |
208 | const result = await printPDF({
209 | url,
210 | scripts: renderedScripts,
211 | style,
212 | browser: this.browser,
213 | outputFolder,
214 | outputName,
215 | width: this.width,
216 | height: this.height,
217 | realtime: !!this._changeFunc,
218 | openBrowser: this.__openBrowser
219 | });
220 |
221 | console.log(chalk.green.bold(`Succesfully finished rendering ${chalk.bold(`${outputFolder}/${outputName}.pdf\n\n`)}`));
222 |
223 | if (this._changeFunc && !this._listening) {
224 | this.listener = listenToChanges([
225 | ...scripts,
226 | ...styles,
227 | ...linkedStyles,
228 | optionsPath
229 | ],
230 | this._changeFunc,
231 | this.debug,
232 | ignoreWatch,
233 | this.dirname
234 | );
235 |
236 | this._listening = true;
237 | }
238 |
239 | this._autoOpen(outputFolder, outputName);
240 |
241 | return {
242 | sourceMap: {
243 | html: result.html
244 | },
245 | output: `${outputFolder}/${outputName}.pdf`,
246 | metadata: {
247 | numberOfPages: null
248 | }
249 | };
250 | }
251 |
252 | async _render(optionsResult) {
253 | let options;
254 | let optionsPath = '';
255 | ({ options, optionsPath } = optionsResult);
256 |
257 | let {
258 | templateSource,
259 | contentSource = '',
260 | outputFolder = 'outputs',
261 | outputName = 'index',
262 | styles = [],
263 | chunks = {},
264 | assets = [], // not part of API
265 | ignoreWatch,
266 | middleware = [],
267 | pageClass = 'Page'
268 | } = options;
269 |
270 | // map of writes / sourceMap
271 | const writer = new Writer(this.debug);
272 |
273 | if (!templateSource) {
274 | await this._stop(new Error('templateSource is required'));
275 | }
276 |
277 | // If content source is set, parse it an apply it
278 | let content = await getContent({
279 | contentSource, debug: this.debug, dirname: this.dirname
280 | })
281 |
282 | // pass options into closure to avoid duplicating parameters everywhere
283 | const htmlGetter = getHTMLFromSource({
284 | debug: this.debug,
285 | dirname: this.dirname,
286 | listening: this._listening,
287 | content
288 | })
289 |
290 | let html = await htmlGetter(templateSource, 'templateSource');
291 |
292 | // Chunks!
293 | const chunkP = Object.keys(chunks).map((chunkName) => {
294 | return new Promise(async (r) => {
295 | const chunkData = await htmlGetter(chunks[chunkName], chunkName);
296 | html = insertContent(html, { [chunkName]: cleanHTML(chunkData) });
297 | r();
298 | })
299 | })
300 | if(chunkP.length) await Promise.all(chunkP);
301 |
302 | if (!html) {
303 | await this._stop(new Error('Could not parse templateSource to html, please make sure your input is a supported format.'));
304 | }
305 |
306 | //copy scripts
307 | const scripts = getScriptSrc(html, templateSource, this.dirname);
308 | scripts.forEach(({ fullPath, relativePath }) => {
309 | const to = Path.join(`${outputFolder}/${outputName}/`, relativePath);
310 | writer.addWrite(Writer.TYPES.SCRIPT, Writer.METHODS.COPY, to, fullPath);
311 | });
312 |
313 |
314 | styles = [...styles, ...(getCssSrc(html, templateSource, this.dirname) || [])];
315 | const cssResult = await getCustomCSS(styles, this.dirname, this.debug);
316 |
317 | let { linkedStyles, css } = cssResult;
318 | let customCss = css;
319 |
320 | let headerChunk = '';
321 | let footerChunk = '';
322 |
323 | if (chunks.header) {
324 | headerChunk = await htmlGetter(chunks.header, 'header');
325 | }
326 |
327 | if (chunks.footer) {
328 | footerChunk = await htmlGetter(chunks.footer, 'footer');
329 | }
330 |
331 | //HTML transforms
332 | html = cleanHTML(html, true);
333 | html = ensurePage(html, pageClass);
334 | html = injectHeaderAndFooter(html, pageClass, headerChunk, footerChunk);
335 | html = injectStyles(html, !!customCss);
336 | html = replacePageNumbers(html, pageClass);
337 | html = injectCustomScripts(html, content, pageClass);
338 | html = pretty(html, { ocd: true });
339 |
340 | // copy assets
341 | assets = [...assets, ...getAssetSources(html, customCss, this.dirname)];
342 | assets.forEach((asset) => {
343 |
344 | const relativeLocation = Path.relative(this.dirname, asset)
345 | writer.addWrite(
346 | Writer.TYPES.ASSET,
347 | Writer.METHODS.COPY,
348 | Path.join(`${outputFolder}/${outputName}`, relativeLocation),
349 | asset
350 | )
351 | })
352 |
353 | const nextMiddleWare = async () => {
354 | const next = middleware.pop();
355 | if (!next) return;
356 | html = await next(html);
357 | return nextMiddleWare();
358 | }
359 |
360 | middleware.reverse();
361 | await nextMiddleWare();
362 |
363 | if (this._renderedHTML) {
364 | this._renderedHTML(html);
365 | }
366 |
367 | if (!this._listening) {
368 | await ensureExists(`${outputFolder}`);
369 | await ensureExists(`${outputFolder}/${outputName}`);
370 | }
371 |
372 |
373 | if (!!customCss) {
374 | writer.addWrite(Writer.TYPES.CSS, Writer.METHODS.DATA, `${outputFolder}/${outputName}/custom.css`, customCss);
375 | }
376 |
377 | writer.addWrite(Writer.TYPES.HTML, Writer.METHODS.DATA, `${outputFolder}/${outputName}/index.html`, html);
378 |
379 | // only write this once, so if we are already listening then we dont need to write it again (unless the pageClass changes)
380 | if (!this._listening || pageClass !== this._lastPageSplitClass) {
381 | const path = Path.resolve(__dirname, isProd ? './index.css' : `./styles/index.css`);
382 | let css = await readFile(path);
383 |
384 | css = css.replace(/__WIDTH/g, this.width + 'px');
385 | css = css.replace(/__HEIGHT/g, this.height + 'px');
386 | css = css.replace(/__PAGE_NAME/g, pageClass);
387 | css = css.replace(/__MARGIN/g, `${this.margin.top} ${this.margin.right} ${this.margin.bottom} ${this.margin.left} !important`)
388 |
389 | writer.addWrite(Writer.TYPES.CSS, Writer.METHODS.DATA, `${outputFolder}/${outputName}/index.css`, css);
390 | }
391 |
392 | this._lastPageSplitClass = pageClass;
393 |
394 | const sourceMap = await writer.write();
395 |
396 | if (!this.server) {
397 | this.server = await server(this.port, this.host, outputFolder, this.debug);
398 | if (this._changeFunc) {
399 | console.log(chalk.green(`You can view your live PDF at ${chalk.bgGreen.whiteBright(`http://${this.host}:${this.port}/${outputName}`)}\n`));
400 | }
401 | }
402 |
403 | const reg = new RegExp(`class=['"].*?${pageClass}.*?['"].*?>`, 'gm');
404 | const numberOfPages = (html.match(reg) || []).length
405 |
406 | await printPDF({
407 | outputFolder,
408 | outputName,
409 | numberOfPages,
410 | browser: this.browser,
411 | width: this.width,
412 | height: this.height,
413 | margin: this.margin,
414 | realtime: !!this._changeFunc,
415 | source: `http://${this.host}:${this.port}`
416 | });
417 |
418 | console.log(chalk.green.bold(`Succesfully finished rendering ${chalk.bold(`${outputFolder}/${outputName}.pdf\n\n`)}`))
419 |
420 | if (this._changeFunc && !this._listening) {
421 | this.listener = listenToChanges(
422 | [
423 | contentSource,
424 | templateSource,
425 | ...Object.values(chunks),
426 | ...scripts,
427 | ...styles,
428 | ...assets,
429 | ...linkedStyles,
430 | optionsPath,
431 | ],
432 | this._changeFunc,
433 | this.debug,
434 | ignoreWatch,
435 | this.dirname
436 | );
437 |
438 | this._listening = true;
439 | }
440 |
441 | if (!this.debug && !this._changeFunc) {
442 | await deleteDir(`${outputFolder}/${outputName}`);
443 | }
444 |
445 | this._autoOpen(outputFolder, outputName);
446 |
447 |
448 | return {
449 | sourceMap,
450 | output: `${outputFolder}/${outputName}.pdf`,
451 | metadata: {
452 | numberOfPages
453 | }
454 | };
455 | }
456 | }
457 |
458 | module.exports = Renderer;
459 |
--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
1 | const liveServer = require('live-server');
2 |
3 | module.exports = (port, host, outputFolder, debug) => {
4 | return new Promise(async r => {
5 | const params = {
6 | port,
7 | host,
8 | root: `${outputFolder}`,
9 | open: false,
10 | quiet: true,
11 | logLevel: 0,
12 | ignore: '**/*.html,**/*.js,**/*.css,**/*.scss',
13 | wait: 500
14 | };
15 |
16 | const s = liveServer.start(params);
17 | await new Promise(resolve => setTimeout(resolve, 1000));
18 | r(s);
19 | })
20 |
21 | }
22 |
23 | module.exports.close = (instance) => {
24 | liveServer.shutdown(instance);
25 | }
--------------------------------------------------------------------------------
/src/styles/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | -webkit-print-color-adjust: exact;
4 | }
5 |
6 | html, body {
7 | padding: 0;
8 | margin: 0;
9 | font-family: Roboto;
10 | background-color: rgb(247, 239, 239);
11 | color: black;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | }
16 |
17 | .__PAGE_NAME {
18 | width: __WIDTH !important;
19 | height: __HEIGHT !important;
20 | background-color: white;
21 | position: relative;
22 | padding: __MARGIN;
23 | }
24 |
25 | body * {
26 | max-width: __WIDTH;
27 | max-height: __HEIGHT;
28 | }
29 |
30 | .page-spacer {
31 | height: 2px;
32 | width: 100vw;
33 | background: #00a5e4;
34 | opacity: 0.5;
35 | left: 0;
36 | min-width: 100vw;
37 | z-index: 999;
38 | }
39 |
40 | .List {
41 | max-height: 100% !important;
42 | }
43 |
44 | .List > * {
45 | max-height: 100% !important;
46 | }
47 |
48 | .webpdf-element {
49 | position: absolute;
50 | left: 0;
51 | right: 0;
52 | width: 100%;
53 | z-index: 99;
54 | }
55 |
56 | .webpdf-header {
57 | top: 0;
58 | }
59 |
60 | .webpdf-footer {
61 | bottom: 0;
62 | }
63 |
64 | .webpdf-error {
65 | color: white;
66 | background-color: red;
67 | position: fixed;
68 | z-index: 9999;
69 | top: 0;
70 | left: 0;
71 | width: 100vw;
72 | height: 100vh;
73 | display: flex;
74 | justify-content: center;
75 | align-items: center;
76 | }
77 |
78 | .webpdf-error p {
79 | font-size: 40px;
80 | }
81 |
82 |
--------------------------------------------------------------------------------
/src/util/clean-html.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = (input, includeOuter) => {
3 | input = input.replace(/&/g, '&');
4 | input = input.replace(/</g, '<');
5 | input = input.replace(/>/g, '>');
6 | input = input.replace(/'/g, '"')
7 | input = input.replace(/\\n/g, `
8 | `)
9 |
10 | if (includeOuter) {
11 | const html = /This is my page two content!! Wow it changes in real time!
15 |${g1}
`
14 | })
15 |
16 | }
--------------------------------------------------------------------------------
/src/util/get-asset-source.js:
--------------------------------------------------------------------------------
1 | const Path = require('path');
2 |
3 | module.exports = (html, css, dirname) => {
4 | const results = {};
5 |
6 | const getter = (m, g1) => {
7 | g1 = g1.trim();
8 |
9 | if (g1.startsWith('http')) return m;
10 |
11 | const fullPath = Path.resolve(dirname, g1);
12 | results[fullPath] = true;
13 | return m;
14 | }
15 |
16 | html.replace(/<(?!script).*?src=['"](.*?)['"].*?>/gm, getter);
17 |
18 | if (css) {
19 | css.replace(/url\(['"](.*?)['"]\)/gm, getter);
20 | }
21 |
22 | return Object.keys(results);
23 | }
--------------------------------------------------------------------------------
/src/util/get-content.js:
--------------------------------------------------------------------------------
1 | const getType = require('./type-check');
2 | const readFile = require('./read-file');
3 | const Path = require('path');
4 | const chalk = require('chalk');
5 |
6 | module.exports = async ({ contentSource, debug, dirname }) => {
7 | let obj = {};
8 | // If content source is set, parse it an apply it
9 | if (contentSource) {
10 | const contentSourceType = getType(contentSource);
11 |
12 | if (contentSourceType === 'string') {
13 | contentSource = contentSource.trim();
14 | if (contentSource.endsWith('.json')) {
15 | const j = await readFile(Path.resolve(dirname, contentSource));
16 | try {
17 | obj = JSON.parse(j);
18 | } catch (e) {
19 | obj = null;
20 | if (debug) {
21 | console.log(chalk.red(`${Path.resolve(dirname, contentSource)} contains invalid JSON, Skipping`));
22 | }
23 | }
24 |
25 | if (debug) {
26 | console.log(chalk.keyword('orange')(`Got content from ${chalk.bold(Path.resolve(dirname, contentSource))}`))
27 | }
28 |
29 | } else {
30 |
31 | if (debug) {
32 | console.log(chalk.keyword('orange')(`Got content from object passed in from contentSource`))
33 | }
34 | obj = JSON.parse(contentSource);
35 | }
36 | } else if(contentSourceType === 'object' || contentSourceType === 'array'){
37 | obj = contentSource;
38 | }
39 |
40 | if(debug && !obj) {
41 | console.log(chalk.red('contentSource could not be parsed, skipping'));
42 | }
43 | }
44 |
45 |
46 | return obj;
47 | }
--------------------------------------------------------------------------------
/src/util/get-css-src.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = (html, templateSource, dirname = __dirname) => {
4 | const regex = /${header}
10 | ${match}
11 | `;
12 | });
13 |
14 | return r;
15 | })
16 | }
--------------------------------------------------------------------------------
/src/util/inject-styles.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | module.exports = (html, hasCustom) => {
4 |
5 | let match = false;
6 |
7 | const css = `
8 |
9 | ${hasCustom ? ` ` : ''}
10 | `;
11 |
12 | html = html.replace(/
11 | 
12 | 
13 |
14 | `
15 |
16 | const r = getAssetSources(html, null, __dirname);
17 |
18 | assert(r.length === 2);
19 | assert(r.indexOf(path.resolve(__dirname, 'img.png')) > -1);
20 | assert(r.indexOf(path.resolve(__dirname, 'asset.jpg')) > -1);
21 |
22 | return;
23 | });
24 |
25 | it('can get a list of assets from css', async () => {
26 |
27 | const html = `
28 |
12 |
13 |
29 |
30 | `
31 |
32 | const css = `
33 | .bg {
34 | background-image: url('img.png');
35 | }
36 | `
37 |
38 | const r = getAssetSources(html, css, __dirname);
39 |
40 | assert(r.length === 1);
41 | assert(r.indexOf(path.resolve(__dirname, 'img.png')) > -1);
42 |
43 | return;
44 |
45 |
46 | })
47 |
48 | })
--------------------------------------------------------------------------------
/test/assets/content.json:
--------------------------------------------------------------------------------
1 | {
2 | "test": "test",
3 | "react": "pdf",
4 | "nested": {
5 | "data": "is cool"
6 | }
7 | }
--------------------------------------------------------------------------------
/test/assets/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{react}}
5 |
6 | {{nested.data}}
7 |
8 |
9 | {{customFooter}}
10 |
11 |
12 |
--------------------------------------------------------------------------------
/test/assets/options.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | module.exports = () => {
4 | return {
5 | templateSource: ""
6 | }
7 | }
--------------------------------------------------------------------------------
/test/assets/script.js:
--------------------------------------------------------------------------------
1 | console.log('waddup');
--------------------------------------------------------------------------------
/test/assets/style.scss:
--------------------------------------------------------------------------------
1 | .MY-STYLE {
2 | background-color: red;
3 | }
--------------------------------------------------------------------------------
/test/assets/temp.txt:
--------------------------------------------------------------------------------
1 | My data 0.7759274003893943
--------------------------------------------------------------------------------
/test/clean-html.js:
--------------------------------------------------------------------------------
1 | require('@babel/polyfill');
2 | const assert = require('assert');
3 | const cleanHTML = require('../src/util/clean-html');
4 | const ensurePage = require('../src/util/ensure-page');
5 | const insertChunks = require('../src/util/inject-header-footer');
6 |
7 |
8 | describe('Inject headers and footers', () => {
9 | it('injects headers and footers', () => {
10 |
11 | const html = `
12 |
13 | Content
14 |
15 |
16 | Content
17 |
18 | `
19 |
20 | const header = `Header
`
21 | const footer = ``
22 |
23 | const result = insertChunks(html, 'Page', header, footer);
24 |
25 | assert.equal((result.match(/Header/g) || []).length, 2)
26 | assert.equal((result.match(/Footer/g) || []).length, 2)
27 | assert.equal((result.match(/Content/g) || []).length, 2)
28 | assert.equal((result.match(/webpdf-header/g) || []).length, 2)
29 | assert.equal((result.match(/webpdf-footer/g) || []).length, 2)
30 |
31 | })
32 | })
33 |
34 | describe('Ensure page', () => {
35 | it ('Doesnt add a page if one already exists', () => {
36 | const html = `
37 |
38 |
39 |
40 | Test
41 |
42 |
43 |
44 | `;
45 |
46 | const result = ensurePage(html, 'Page');
47 |
48 | assert(result === html);
49 | })
50 |
51 | it ('Adds a page if one doesnt exists', () => {
52 | const html = `
53 |
54 |
55 | Test
56 |
57 |
58 | `;
59 |
60 | const result = ensurePage(html, 'Page');
61 |
62 | assert(result.indexOf("class='Page'") > -1);
63 | assert(result.indexOf("Test") > -1);
64 | })
65 | })
66 |
67 |
68 | describe('HTML cleaner', () => {
69 | it('adds html and body tags if none are present and true is passed', async () => {
70 |
71 | const html = `
72 |
73 |
74 |
75 | `;
76 | const result = cleanHTML(html, true);
77 | assert(result.indexOf('') > -1);
78 | assert(result.indexOf('') > -1);
79 |
80 | assert(result.indexOf('') > -1);
81 | assert(result.indexOf('') > -1);
82 | return;
83 | });
84 |
85 | it('does not add html and body tags if none are present and true is not passed', async () => {
86 |
87 | const html = `
88 |
89 |
90 |
91 | `;
92 | const result = cleanHTML(html);
93 | assert(result.indexOf('') === -1);
94 | assert(result.indexOf('') === -1);
95 |
96 | assert(result.indexOf('') === -1);
97 | assert(result.indexOf('') === -1);
98 | return;
99 | });
100 |
101 | it('Adds body tag if none present', () => {
102 | const html = `
103 |
104 |
105 |
106 |
107 |
108 | `;
109 |
110 | const result = cleanHTML(html, true);
111 |
112 | assert(result.indexOf('') > -1);
113 | assert(result.indexOf('') > -1);
114 | })
115 |
116 | it('Replaces encoded strings', async () => {
117 |
118 | const html = `
119 | <div>
120 | hello&test
121 | </div>
122 | `;
123 | const result = cleanHTML(html);
124 | assert(result.indexOf('') > -1);
125 | assert(result.indexOf('
') > -1);
126 |
127 | assert(result.indexOf('hello&test') > -1);
128 | return;
129 | });
130 | })
--------------------------------------------------------------------------------
/test/content.js:
--------------------------------------------------------------------------------
1 | require('@babel/polyfill');
2 | const assert = require('assert');
3 | const GetContent = require('../src/util/get-content');
4 | const Renderer = require('../src');
5 |
6 | describe('get content', () => {
7 | it('can read a json file', async () => {
8 | const obj = await GetContent({
9 | contentSource: 'assets/content.json',
10 | dirname: __dirname
11 | });
12 | assert(obj.test, 'test');
13 | return;
14 | });
15 |
16 | it('can read a js object', async () => {
17 | const obj = await GetContent({
18 | contentSource: {
19 | test: 'test'
20 | },
21 | dirname: __dirname
22 | });
23 |
24 | assert(obj.test, 'test');
25 | return;
26 | });
27 |
28 | it('can write nested content', async () => {
29 |
30 | const r = new Renderer({ dirname: __dirname });
31 |
32 | const html = `
33 |
34 |
35 |
36 | {{my.nested.content}}
37 |
38 |
39 |
40 | `;
41 |
42 | const contentSource = {
43 | my: {
44 | nested: {
45 | content: "Wow!"
46 | }
47 | }
48 | };
49 |
50 | const result = await r.render({
51 | templateSource: html,
52 | contentSource
53 | });
54 |
55 | assert(result.sourceMap.html[0].from.indexOf('Wow!') > -1);
56 |
57 | }).timeout(7000)
58 | })
--------------------------------------------------------------------------------
/test/html.js:
--------------------------------------------------------------------------------
1 | require('@babel/polyfill');
2 | const assert = require('assert');
3 | const getHTML = require('../src/util/get-html-from-source');
4 | const React = require('react');
5 |
6 | describe('HTML Parser', () => {
7 |
8 | const htmlGetter = getHTML({
9 | dirname: __dirname,
10 | obj: {}
11 | })
12 |
13 | it('can get html from a file', async () => {
14 | const html = await htmlGetter('assets/index.html');
15 | assert(html.indexOf('Page'));
16 | return;
17 | });
18 |
19 | it ('can get html from a string', async () => {
20 | const html = await htmlGetter(``);
21 | assert(html.indexOf('Page'));
22 | return;
23 | })
24 |
25 | it('can get html from a function', async () => {
26 | const fun = () => {
27 | return ``;
28 | }
29 | const html = await htmlGetter(fun);
30 | assert(html.indexOf('Page'));
31 | return;
32 | })
33 |
34 | it('can get html from a promise', async () => {
35 | const fun = () => {
36 | return new Promise(r => {
37 | setTimeout(() => {
38 | r(``)
39 | }, 1000)
40 | });
41 | }
42 | const html = await htmlGetter(fun);
43 | assert(html.indexOf('Page'));
44 | return;
45 | })
46 |
47 | it('can get html from a react component', async () => {
48 | class Comp extends React.Component {
49 | render() {
50 | return (
51 |
52 | )
53 | }
54 | }
55 |
56 | const html = await htmlGetter(Comp);
57 | assert(html.indexOf('Page'));
58 | return;
59 | });
60 |
61 | it('can get html from a react function', async () => {
62 |
63 | const Comp = ({ }) => {
64 | return
65 | }
66 |
67 | const html = await htmlGetter(Comp);
68 | assert(html.indexOf('Page'));
69 | return;
70 | })
71 |
72 | })
--------------------------------------------------------------------------------
/test/main.js:
--------------------------------------------------------------------------------
1 | require('@babel/polyfill');
2 | const assert = require('assert');
3 | const Renderer = require('../src');
4 | const Path = require('path');
5 | const React = require('react');
6 | async function assertThrowsAsync(fn, regExp) {
7 | let f = () => {};
8 | try {
9 | await fn();
10 | } catch(e) {
11 | f = () => {throw e};
12 | } finally {
13 | assert.throws(f, regExp);
14 | }
15 | }
16 |
17 | describe('WebToPDF', () => {
18 |
19 | it('throws if dirname is not provided', () => {
20 | assert.throws(() => {
21 | const ren = new Renderer({ });
22 | }, Error)
23 | })
24 |
25 |
26 | it('throws if no templateSource is provided', async () => {
27 | const ren = new Renderer({ dirname: __dirname });
28 |
29 | assertThrowsAsync(async () => {
30 | await ren.render({
31 |
32 | });
33 | }, /Error/)
34 | }).timeout(7000);
35 |
36 | it('throws if templateSource cannot be parsed', async () => {
37 | const ren = new Renderer({ dirname: __dirname });
38 |
39 | assertThrowsAsync(async () => {
40 | await ren.render({
41 | templateSource: 'dsgkhsdlfgj'
42 | });
43 | }, /Error/)
44 | }).timeout(7000);
45 |
46 |
47 | it('should return a sourcemap of assets written', async () => {
48 | const ren = new Renderer({ dirname: __dirname });
49 |
50 | const html = `
51 |
52 |
53 |
54 |
55 |
56 |
57 | `
58 |
59 | const sm = await ren.render({
60 | templateSource: html,
61 | });
62 |
63 | assert.equal(sm.sourceMap.html[0].to, 'outputs/index/index.html');
64 | assert(!!sm.sourceMap.html[0].from);
65 | assert(!!sm.sourceMap.html[0].method);
66 |
67 | assert.equal(sm.sourceMap.css[0].to, 'outputs/index/index.css');
68 | return;
69 | }).timeout(7000);
70 |
71 | it('automatically appends header and footer chunks to every page', async () => {
72 | const ren = new Renderer({ dirname: __dirname });
73 |
74 | const source = `
75 |
76 |
77 |
78 | Content
79 |
80 |
81 |
82 | Content
83 |
84 |
85 |
86 | `;
87 |
88 | const header = `My header
`
89 | const footer = ``
90 |
91 | const sm = await ren.render({
92 | templateSource: source,
93 | chunks: { header, footer }
94 | });
95 |
96 | const html = sm.sourceMap.html[0].from;
97 |
98 | assert.equal((html.match(/My header/g) || []).length, 2);
99 | assert.equal((html.match(/My footer/g) || []).length, 2);
100 | assert.equal((html.match(/Content/g) || []).length, 2);
101 |
102 | }).timeout(7000);
103 |
104 |
105 | it('should replace content in HTML', async () => {
106 | const ren = new Renderer({ dirname: __dirname });
107 |
108 | const sm = await ren.render({
109 | templateSource: 'assets/index.html',
110 | contentSource: 'assets/content.json'
111 | });
112 |
113 | const html = sm.sourceMap.html[0].from;
114 |
115 |
116 | assert(html.indexOf('pdf') > -1);
117 | assert(html.indexOf('is cool') > -1);
118 |
119 | return;
120 | }).timeout(7000);
121 |
122 |
123 | it('should replace chunks in HTML', async () => {
124 | const ren = new Renderer({ dirname: __dirname });
125 |
126 | const customFooter = `
127 |
130 | `
131 |
132 | const sm = await ren.render({
133 | templateSource: 'assets/index.html',
134 | contentSource: 'assets/content.json',
135 | chunks: {
136 | customFooter
137 | }
138 | });
139 |
140 | const html = sm.sourceMap.html[0].from;
141 |
142 | assert(html.indexOf('MY FOOTER!') > -1);
143 |
144 | return;
145 | }).timeout(7000);
146 |
147 | it('should replace page numbers in HTML', async () => {
148 | const ren = new Renderer({ dirname: __dirname });
149 |
150 | const htmlS = `
151 |
152 | ONE {{pageNumber}}
153 |
154 |
155 | TWO {{pageNumber}}
156 |
157 |
158 | THREE {{pageNumber}}
159 |
160 | {{otherContent}}
161 |
162 | `
163 | const otherContent = `
164 |
167 | `
168 |
169 | const sm = await ren.render({
170 | templateSource: htmlS,
171 | contentSource: 'assets/content.json',
172 | chunks: {
173 | otherContent
174 | }
175 | });
176 |
177 | const html = sm.sourceMap.html[0].from;
178 |
179 | assert(html.indexOf('ONE 1') > -1);
180 | assert(html.indexOf('TWO 2') > -1);
181 | assert(html.indexOf('THREE 3') > -1);
182 | assert(html.indexOf('footer 3') > -1);
183 |
184 | return;
185 | }).timeout(7000);
186 |
187 | it('can set page width and height', async () => {
188 | const ren = new Renderer({ dirname: __dirname, width: 500, height: 700 });
189 |
190 | const sm = await ren.render({
191 | templateSource: 'assets/index.html',
192 |
193 | });
194 |
195 | const css = sm.sourceMap.css[0].from;
196 |
197 | assert(css.indexOf('width: __WIDTH') === -1);
198 | assert(css.indexOf('height: __HEIGHT') === -1);
199 |
200 | return;
201 | }).timeout(7000);
202 |
203 | it('passes content to a function', async () => {
204 |
205 | const ren = new Renderer({ dirname: __dirname });
206 | let called = false;
207 | const func = (content) => {
208 |
209 | assert(content.test === 'hello');
210 | called = true;
211 | return `
212 |
213 |
214 |
215 | `
216 | }
217 |
218 | await ren.render({
219 | templateSource: func,
220 | contentSource: {
221 | "test": "hello"
222 | }
223 | });
224 |
225 | assert(called);
226 |
227 | return;
228 | }).timeout(7000);
229 |
230 | it('passes content to a react component', async () => {
231 |
232 | const ren = new Renderer({ dirname: __dirname });
233 |
234 | let called = false;
235 | class Comp extends React.Component {
236 | render() {
237 | const { content } = this.props;
238 | assert(content.test === 'hello');
239 | called = true;
240 | return
241 | }
242 | }
243 |
244 | await ren.render({
245 | templateSource: Comp,
246 | contentSource: {
247 | "test": "hello"
248 | }
249 | });
250 |
251 | assert(called);
252 |
253 | return;
254 | }).timeout(7000);
255 |
256 | it('copies scripts to server folder', async () => {
257 | const ren = new Renderer({ dirname: __dirname });
258 |
259 | const html = `
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 | `;
269 |
270 | const sm = await ren.render({
271 | templateSource: html,
272 | });
273 |
274 | const write = sm.sourceMap.script[0];
275 |
276 | assert.equal(write.from, Path.resolve(__dirname, 'assets/script.js'));
277 | assert.equal(write.to, 'outputs/index/assets/script.js');
278 |
279 | return;
280 | }).timeout(7000);
281 |
282 | it('calls on html event', async () => {
283 | const ren = new Renderer({ dirname: __dirname });
284 |
285 | const html = `
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 | `;
295 |
296 | let called = false;
297 |
298 | ren.on('html', (h) => {
299 | called = h;
300 | })
301 |
302 | const sm = await ren.render({
303 | templateSource: html,
304 | });
305 |
306 | assert(called);
307 | assert(called.indexOf('') > -1);
308 |
309 | return;
310 | }).timeout(7000);
311 |
312 | it('can accept html transforming middleware', async () => {
313 | const ren = new Renderer({ dirname: __dirname });
314 |
315 | const html = `
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 | `;
325 |
326 |
327 | const sm = await ren.render({
328 | templateSource: html,
329 | middleware: [
330 | (h) => {
331 | h = html.replace('assets/script.js', "TEST!");
332 | return h;
333 | }
334 | ]
335 | });
336 |
337 | const returnedHTML = sm.sourceMap.html[0].from;
338 |
339 | assert(returnedHTML.indexOf('TEST!') > -1);
340 |
341 | return;
342 | }).timeout(7000);
343 |
344 |
345 | it('can accept async middleware', async () => {
346 | const ren = new Renderer({ dirname: __dirname });
347 |
348 | const html = `
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 | `;
358 |
359 |
360 | const sm = await ren.render({
361 | templateSource: html,
362 | middleware: [
363 | async (h) => {
364 | await new Promise(r => setTimeout(r, 500));
365 | h = h.replace('assets/script.js', "TEST!");
366 | return h;
367 | },
368 | async (h) => {
369 | await new Promise(r => setTimeout(r, 700));
370 | h = h.replace('TEST!', "TEST2!");
371 | return h;
372 | }
373 | ]
374 | });
375 |
376 | const returnedHTML = sm.sourceMap.html[0].from;
377 |
378 | assert(returnedHTML.indexOf('TEST!') === -1);
379 | assert(returnedHTML.indexOf('TEST2!') > -1);
380 |
381 | return;
382 | }).timeout(1233333)
383 |
384 |
385 | it('gets image sources in chunks', async () => {
386 | const ren = new Renderer({ dirname: __dirname });
387 |
388 | const html = `
389 |
390 | {{htmlChunk}}
391 |
392 | `;
393 |
394 | const sm = await ren.render({
395 | templateSource: html,
396 | chunks: {
397 | htmlChunk: `
398 |
399 | 
401 |
402 | `
403 | },
404 | })
405 |
406 | const assets = sm.sourceMap.assets;
407 | assert.ok(assets);
408 | assert.ok(assets.length === 1);
409 | assert.ok(assets[0].from.indexOf('test.png') > -1)
410 |
411 | // const returnedHTML = sm.sourceMap.html[0].from;
412 | }).timeout(6000)
413 |
414 | it('can accept inline styles as a styles param', async () => {
415 | const ren = new Renderer({ dirname: __dirname });
416 |
417 | const html = `
418 |
419 | `;
420 |
421 | const css = `
422 | #testCSS {
423 | color: red;
424 | }
425 | `
426 |
427 | const scss = `
428 | #testSCSS {
429 | p.testP {
430 | color: white;
431 | }
432 | }
433 | `;
434 |
435 | const sm = await ren.render({
436 | templateSource: html,
437 | styles: [ css, scss ]
438 | })
439 |
440 | const returnedCSS = sm.sourceMap.css[0].from;
441 |
442 | assert(returnedCSS.indexOf('#testCSS') > -1);
443 | assert(returnedCSS.indexOf('#testSCSS') > -1);
444 | assert(returnedCSS.indexOf('.testP') > -1);
445 | return;
446 |
447 | }).timeout(7000);
448 | })
--------------------------------------------------------------------------------
/test/other.js:
--------------------------------------------------------------------------------
1 | require('@babel/polyfill');
2 | const assert = require('assert');
3 | const verifyPage = require('../src/util/verify-page');
4 |
5 | describe('verification', () => {
6 | it('returns false if no .Page is present', async () => {
7 |
8 | const html = ``;
9 |
10 | const html2 = ""
11 |
12 | assert(!verifyPage(html));
13 | assert(verifyPage(html2));
14 |
15 | });
16 |
17 | })
--------------------------------------------------------------------------------
/test/pageClass.js:
--------------------------------------------------------------------------------
1 | require('@babel/polyfill');
2 | const assert = require('assert');
3 | const React = require('react');
4 | const Renderer = require('../src');
5 |
6 | describe('HTML Parser', () => {
7 |
8 |
9 | it('can use custom className as page divider', async () => {
10 |
11 | const r = new Renderer({ dirname: __dirname })
12 |
13 | const html = `
14 |
15 |
16 | I will be dynamically inserted!
400 |
401 |
17 | Test 1
18 |
19 |
20 |
21 | Test 2
22 |
23 |
24 |
25 | `
26 |
27 | const sm = await r.render({
28 | templateSource: html,
29 | pageClass: 'Split'
30 | });
31 |
32 | assert.equal(sm.metadata.numberOfPages, 2);
33 |
34 | return;
35 | }).timeout(7000);
36 |
37 | it('replaces css page with custom class', async () => {
38 | const r = new Renderer({ dirname: __dirname })
39 |
40 | const html = `
41 |
42 |
43 |
44 | Test 1
45 |
46 |
47 |
48 | Test 2
49 |
50 |
51 |
52 | `
53 |
54 | const sm = await r.render({
55 | templateSource: html,
56 | pageClass: 'Split'
57 | });
58 |
59 |
60 | assert(sm.sourceMap.css[0].from.indexOf('.Split') > -1);
61 | assert(sm.sourceMap.css[0].from.indexOf('.Page') === -1);
62 | }).timeout(7000)
63 |
64 |
65 |
66 | })
--------------------------------------------------------------------------------
/test/realtime.js:
--------------------------------------------------------------------------------
1 | require('@babel/polyfill');
2 | const assert = require('assert');
3 | const listenToChanges = require('../src/util/listen-to-changes');
4 | const writeFile = require('../src/util/write-file');
5 | const path = require('path');
6 | const Renderer = require('../src');
7 |
8 | describe('real time listener', () => {
9 | // it('can listen to files and return changed files', (done) => {
10 |
11 | // const w = listenToChanges([path.resolve(__dirname, 'assets/temp.txt')], (changes) => {
12 | // assert(changes.length === 1);
13 | // assert(changes[0] === path.resolve(__dirname, 'assets/temp.txt'));
14 | // w.close();
15 | // done();
16 | // })
17 |
18 | // writeFile(path.resolve(__dirname, 'assets/temp.txt'), `My data ${Math.random()}`);
19 | // }).timeout(60000);
20 |
21 | it('ignored empty entries', (done) => {
22 |
23 | const w = listenToChanges([path.resolve(__dirname, 'assets/temp.txt'), '', '', ''], (changes) => {
24 | assert(changes.length === 1);
25 | assert(changes[0] === path.resolve(__dirname, 'assets/temp.txt'));
26 | w.close();
27 | done();
28 | })
29 |
30 | writeFile(path.resolve(__dirname, 'assets/temp.txt'), `My data ${Math.random()}`);
31 | }).timeout(6000);
32 |
33 | it('can ignore files', (done) => {
34 |
35 | let called = false;
36 |
37 | const w = listenToChanges([path.resolve(__dirname, 'assets/temp.txt'), '', '', ''], (changes) => {
38 | called = true;
39 | }, false, "**/*.txt")
40 |
41 | writeFile(path.resolve(__dirname, 'assets/temp.txt'), `My data ${Math.random()}`);
42 |
43 | setTimeout(() => {
44 | assert(!called);
45 | done();
46 | }, 4000)
47 | }).timeout(6000);
48 |
49 | it('goes into real time mode when on change handler is set', (done) => {
50 | const r = new Renderer({ dirname: __dirname });
51 | const ren = () => {
52 | assert(!!r._changeFunc);
53 |
54 | r.stop();
55 | done();
56 | }
57 | r.on('change', ren);
58 | ren();
59 | }).timeout(7000);
60 |
61 | it('can accept an options file instead of options object', async () => {
62 | const r = new Renderer({ dirname: __dirname });
63 | const ren = async () => {
64 | assert(!!r._changeFunc);
65 | const sm = await r.render('assets/options.js');
66 | r.stop();
67 | return sm;
68 | }
69 | r.on('change', ren);
70 | const sm = await ren();
71 |
72 | assert(sm);
73 |
74 | r.stop();
75 | return;
76 |
77 | }).timeout(7000);
78 | })
--------------------------------------------------------------------------------
/test/remote.js:
--------------------------------------------------------------------------------
1 | require('@babel/polyfill');
2 | const assert = require('assert');
3 | const Renderer = require('../src');
4 |
5 | describe('verification', () => {
6 | it('can render a remote source', async () => {
7 | const renderer = new Renderer({ dirname: __dirname });
8 |
9 | const sm = await renderer.render({
10 | templateSource: 'http://pdftron.com'
11 | });
12 |
13 | assert(sm.sourceMap.html.indexOf('___gatsby') > -1);
14 | return;
15 |
16 | }).timeout(14000);
17 |
18 |
19 | it('can inject a stylesheet', async () => {
20 | const renderer = new Renderer({ dirname: __dirname });
21 |
22 | const sm = await renderer.render({
23 | templateSource: 'http://pdftron.com',
24 | styles: [
25 | './assets/style.scss'
26 | ]
27 | });
28 |
29 | assert(sm.sourceMap.html.indexOf('.MY-STYLE') > -1);
30 | return;
31 |
32 | }).timeout(14000);
33 |
34 | it('can inject a script', async () => {
35 | const renderer = new Renderer({ dirname: __dirname });
36 |
37 | const sm = await renderer.render({
38 | templateSource: 'http://pdftron.com',
39 | scripts: [
40 | './assets/script.js'
41 | ]
42 | });
43 |
44 | assert(sm.sourceMap.html.indexOf("console.log('waddup');") > -1);
45 | return;
46 |
47 | }).timeout(14000);
48 |
49 | })
--------------------------------------------------------------------------------
/test/scripts.js:
--------------------------------------------------------------------------------
1 | require('@babel/polyfill');
2 | const assert = require('assert');
3 | const getSciptSrc = require('../src/util/get-script-src');
4 |
5 | describe('scripts', () => {
6 | it('can extract script tags', async () => {
7 |
8 | const html = `
9 |
10 |