diff --git a/bin/browser.js b/bin/browser.js index 0ed9816e..ce25901b 100644 --- a/bin/browser.js +++ b/bin/browser.js @@ -297,10 +297,91 @@ const callChrome = async pup => { await page.addStyleTag(JSON.parse(request.options.addStyleTag)); } + if (request.options && request.options.pagedjs) { + await page.evaluate(() => { + window.PagedConfig = window.PagedConfig || {}; + window.PagedConfig.auto = false; + }); + + await page.addScriptTag({ + url: request.options.pagedjs + }); + } + if (request.options && request.options.addScriptTag) { await page.addScriptTag(JSON.parse(request.options.addScriptTag)); } + if (request.options && request.options.pagedjs) { + await page.exposeFunction("onSize", (size) => { + this.emit("size", size); + }); + + await page.exposeFunction("onPage", (page) => { + + this.pages.push(page); + + this.emit("page", page); + }); + + await page.exposeFunction("onRendered", (msg, width, height, orientation) => { + this.emit("rendered", msg, width, height, orientation); + resolver({msg, width, height, orientation}); + }); + + await page.evaluate(async () => { + let done; + window.PagedPolyfill.on("page", (page) => { + const { id, width, height, startToken, endToken, breakAfter, breakBefore, position } = page; + + const mediabox = page.element.getBoundingClientRect(); + const cropbox = page.pagebox.getBoundingClientRect(); + + function getPointsValue(value) { + return (Math.round(CSS.px(value).to("pt").value * 100) / 100); + } + + let boxes = { + media: { + width: getPointsValue(mediabox.width), + height: getPointsValue(mediabox.height), + x: 0, + y: 0 + }, + crop: { + width: getPointsValue(cropbox.width), + height: getPointsValue(cropbox.height), + x: getPointsValue(cropbox.x) - getPointsValue(mediabox.x), + y: getPointsValue(cropbox.y) - getPointsValue(mediabox.y) + } + }; + + window.onPage({ id, width, height, startToken, endToken, breakAfter, breakBefore, position, boxes }); + }); + + window.PagedPolyfill.on("size", (size) => { + window.onSize(size); + }); + + window.PagedPolyfill.on("rendered", (flow) => { + let msg = "Rendering " + flow.total + " pages took " + flow.performance + " milliseconds."; + window.onRendered(msg, flow.width, flow.height, flow.orientation); + }); + + if (window.PagedConfig.before) { + await window.PagedConfig.before(); + } + + done = await window.PagedPolyfill.preview(); + + if (window.PagedConfig.after) { + await window.PagedConfig.after(done); + } + }) + + await page.waitForSelector(".pagedjs_pages"); + } + if (request.options.delay) { await page.waitForTimeout(request.options.delay); } diff --git a/docs/miscellaneous-options/use-with-pagedjs.md b/docs/miscellaneous-options/use-with-pagedjs.md new file mode 100644 index 00000000..8c30fd2d --- /dev/null +++ b/docs/miscellaneous-options/use-with-pagedjs.md @@ -0,0 +1,18 @@ +--- +title: Use paged.js +weight: 21 +--- + +You can inject the paged.js polyfill library: + +```php +Browsershot::url('https://example.com') + ->usePagedJS() +``` + +You can also provide a custom version of the script which will be injected as an argument: + +```php +Browsershot::url('https://example.com') + ->usePagedJS('https://unpkg.com/pagedjs@0.2.0/dist/paged.polyfill.js') +``` diff --git a/docs/miscellaneous-options/using-a-pipe-instead-of-a-websocket.md b/docs/miscellaneous-options/using-a-pipe-instead-of-a-websocket.md index d5a6e597..ce1ed216 100644 --- a/docs/miscellaneous-options/using-a-pipe-instead-of-a-websocket.md +++ b/docs/miscellaneous-options/using-a-pipe-instead-of-a-websocket.md @@ -1,6 +1,6 @@ --- title: Using a pipe instead of a WebSocket -weight: 21 +weight: 22 --- If you want to connect to the browser over a pipe instead of a WebSocket, you can use: diff --git a/docs/miscellaneous-options/using-cookies.md b/docs/miscellaneous-options/using-cookies.md index 23050fd0..d2222427 100644 --- a/docs/miscellaneous-options/using-cookies.md +++ b/docs/miscellaneous-options/using-cookies.md @@ -1,6 +1,6 @@ --- title: Using cookies -weight: 22 +weight: 23 --- You can add cookies to the request to the given url: diff --git a/docs/miscellaneous-options/using-http-authentication.md b/docs/miscellaneous-options/using-http-authentication.md index d8a766ff..fd3f8a84 100644 --- a/docs/miscellaneous-options/using-http-authentication.md +++ b/docs/miscellaneous-options/using-http-authentication.md @@ -1,6 +1,6 @@ --- title: Using HTTP Authentication -weight: 23 +weight: 24 --- You can provide credentials for HTTP authentication: diff --git a/docs/miscellaneous-options/using-url-for-html-content.md b/docs/miscellaneous-options/using-url-for-html-content.md index 25181ec4..2d91c206 100644 --- a/docs/miscellaneous-options/using-url-for-html-content.md +++ b/docs/miscellaneous-options/using-url-for-html-content.md @@ -1,6 +1,6 @@ --- title: Using url for html content -weight: 24 +weight: 25 --- Using the method *setContentUrl* you can set the base url of the request when using the *html* method. Sometimes you may have relative paths in your code. When passing a html page to puppeteer, you don't have a base url set. So any relative path present in your html content will not fetch correctly. diff --git a/docs/miscellaneous-options/writing-options-to-a-file.md b/docs/miscellaneous-options/writing-options-to-a-file.md index 13087358..41529aec 100644 --- a/docs/miscellaneous-options/writing-options-to-a-file.md +++ b/docs/miscellaneous-options/writing-options-to-a-file.md @@ -1,6 +1,6 @@ --- title: Writing options to a file -weight: 25 +weight: 26 --- When the amount of options given to puppeteer becomes too big, Browsershot will fail because of an overflow of characters in the command line. diff --git a/src/Browsershot.php b/src/Browsershot.php index b0dd253b..4f6683f5 100644 --- a/src/Browsershot.php +++ b/src/Browsershot.php @@ -632,6 +632,10 @@ public function evaluate(string $pageFunction): string return $this->callBrowser($command); } + public function usePagedJS(string $url = '//unpkg.com/pagedjs/dist/paged.polyfill.js') { + $this->setOption('pagedjs', $url); + } + public function triggeredRequests(): array { $command = $this->createTriggeredRequestsListCommand(); diff --git a/tests/BrowsershotTest.php b/tests/BrowsershotTest.php index ea0f6050..265f867c 100644 --- a/tests/BrowsershotTest.php +++ b/tests/BrowsershotTest.php @@ -1034,6 +1034,27 @@ expect($result)->toEqual('2'); }); +it('can use pagedjs', function () { + $command = Browsershot::url('https://example.com') + ->usePagedJS() + ->createScreenshotCommand('screenshot.png'); + + $this->assertEquals([ + 'url' => 'https://example.com', + 'action' => 'screenshot', + 'options' => [ + 'pagedjs' => '//unpkg.com/pagedjs/dist/paged.polyfill.js', + 'path' => 'screenshot.png', + 'viewport' => [ + 'width' => 800, + 'height' => 600, + ], + 'args' => [], + 'type' => 'png', + ], + ], $command); +}); + it('can add a timeout to puppeteer', function () { $command = Browsershot::url('https://example.com') ->timeout(123)