I'm running this command:
npx mr-pdf --initialDocURLs="http:/localhost:3000/explore" --contentSelector="article" --paginationSelector=".pagination-nav__item--next > a"
The result is an (almost) empty PDF. First page is blank, second page has the 'Table of contents' title and nothing else.
The values for the params look correct to me.
Pointers appreciated.
Quite possibly related to #31

This issue is for uploading demo PDF.

Given a document site structure like below, the TOC in the PDF does not include category names. (See sections highlighted in red in the image). This means that the TOC sometimes does not make sense

Current generated structure

* Introduction
* Installation
* Configuration
* TypeScript Support
* Creating Pages

Currently the image is hard-coded to 140px, square. If your image is not square, it will be distorted.

Is there a way to override this? I tried this in my Docusaurus custom.css

@media print {
  img.cover-img {
    width: auto !important;
    height: auto !important;
  }
}

but it didn't work.

In general, I think it would be great if there was a way to just allow the client to specify cover html (I would put the image above the title and sub-title as it looks weird below them) but I can't think of a slick way to propose at the moment.

Some sites have pages that are temporary, transient, or just don't translate well to printed form (lots of links of videos, or interactive graphs). Being able to provide an --exclude-urls option with a file that lists all URLs to be excluded, or just a full list e.g. --exclude-urls="foo,bar,foo.*" would be great. Notice the regex in the last one.

Add test to check mr-pdf correctly generates PDF.

I'm running into an issue where the error doesn't tell me much. It would be awesome if I could run the PDF generation command and observe puppeteer. That way, I can talk if it has trouble with navigation or getting to the initial page.

After a year of inactivity of @kohheepeace, many users of the solutions asked for new features or fixes.
I created an active fork of the solution here : https://github.com/jean-humann/docs-to-pdf
Feel free to use it and contribute

@kohheepeace Thank you for all the pevious work 👍

Thanks for your great tool. It generates pefect pdf files for my docusaurus v2 based document sites.

It will be great if it supports to specific sub-title and long text on cover page (e.g. user can put copyright statement, or detail description about his/her project here).

OS: Windows 10

Running the example command for Docusaurus v2 fails with the message Unexpected token '.'

Command:

npx mr-pdf --initialDocURLs="https://docusaurus.io/docs/" --contentSelector="article" --paginationSelector=".pagination-nav__item--next > a" --excludeSelectors=".margin-vert--xl a" --coverImage="https://docusaurus.io/img/docusaurus.png" --coverTitle="Docusaurus v2"

Screenshot:

Hi,

I can't generate, this is error info

system: macOS
yarn: v1.22.10
node: v14.15.4

➜  mr-pdf git:(master) npx mr-pdf --initialDocsURL="https://docusaurus.io/docs/en/installation" --paginationSelector=".docs-prevnext > a.docs-next" --excludeSelectors=".fixedHeaderContainer,footer.nav-footer,#docsNav,nav.onPageNav,a.edit-page-link,div.docs-prevnext" --cssStyle=".navPusher {padding-top: 0;}" --pdfMargin="20"

Downloading Chromium r722234 - 116.4 Mb [====================] 100% 0.0s
error: unknown option '--initialDocsURL'

Using Docusaurus as a model:

is there a mechanism to have mr-pdf generate a PDF for each Blog Entry, so that the person reading it can download as PDF an individual article? I can only manage to get it to do everything into one single document. My Goal is just short snippets per page to capture a single idea.

Thank You!

#10 (comment)

this is a issue to upload images

Table of Contents:
only the first-level menu item actually has a hyperlink to the page, the sub-levels do not - is that a bug or by design?
If it's not possible to hyperlink the sub-sections, then I'm not sure it makes much sense to have them listed in the TOC at all - it takes up 3 pages of the manual, has no page numbers nor links, so maybe better to only have the top level in the TOC

I have searched for the error on the Internet and this module reported issues, to no avail.

I run the following command:

npx --loglevel verbose mr-pdf --initialDocURLs="https://v1.docusaurus.io/docs/en/installation" --contentSelector="article" --paginationSelector=".pagination-nav__item--next > a" --outputPDFFilename="nicefile.pdf" --coverTitle="My Title"

but always get the following error:

Downloading Chromium r722234 - 134.7 Mb [====================] 100% 0.0s

Retrieving html from https://v1.docusaurus.io/docs/en/installation

Success
Finish generating PDF!
Error: ENOTEMPTY: directory not empty, rmdir 'C:\Users\mygreatusername\AppData\Roaming\npm-cache\_npx\23396\node_modules\mr-pdf\node_modules\puppeteer\.local-chromium\win64-722234'
    at Object.rmdirSync (fs.js:916:10)
    at rmkidsSync (C:\Program Files\nodejs\node_modules\npm\node_modules\rimraf\rimraf.js:364:25)
    at rmdirSync (C:\Program Files\nodejs\node_modules\npm\node_modules\rimraf\rimraf.js:342:7)
    at rimrafSync (C:\Program Files\nodejs\node_modules\npm\node_modules\rimraf\rimraf.js:312:9)
    at C:\Program Files\nodejs\node_modules\npm\node_modules\rimraf\rimraf.js:350:5
    at Array.forEach (<anonymous>)
    at rmkidsSync (C:\Program Files\nodejs\node_modules\npm\node_modules\rimraf\rimraf.js:349:26)
    at rmdirSync (C:\Program Files\nodejs\node_modules\npm\node_modules\rimraf\rimraf.js:342:7)
    at rimrafSync (C:\Program Files\nodejs\node_modules\npm\node_modules\rimraf\rimraf.js:312:9)
    at C:\Program Files\nodejs\node_modules\npm\node_modules\rimraf\rimraf.js:350:5

As you see, it always downloads chromium. I do not know if the pdf is the one that I was expecting (since it says "Finish generating PDF!"), but it does not look like so: The pdf is small, 3 pages, while the docusaurus installation takes +70 pages.

Thanks in advance!

#10 (comment)

After adding TOC, internal links didn't work. So, the HTML parse for TOC is related.

This pull request for just a README update is apparently still valid.

#55

Could the README get an update?

Note: The step of build and serve should be mentioned if it is not for the doc website.

With docusaurus-pdf (https://github.com/kohheepeace/docusaurus-pdf) it is possible to provide a build artifact as generation input. I'd like to be able to provide a build artifact instead of starting a local webserver.

Is this possible with mr-pdf?

I have no clean idea.

ref: https://medium.com/@pofider/generate-pdf-with-toc-using-chrome-c3b44f924ff9

coverTitle can not allow Chinese

Running

mr-pdf --initialDocURLs='http://localhost:3000/docs/next' --waitForRender=5000 ....

causes the following error because the parameter is considered to be string in utils at the end in all cases, which expects it to be a selector:

`
Retrieving html from http://localhost:3000/docs/next

Rendering...
Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '5000' is not a valid selector.
at predicate (eval at waitForPredicatePageFunction (:2:21), :6:20)
at eval (eval at waitForPredicatePageFunction (:2:21), :25:7)
at pollMutation (puppeteer_evaluation_script:17:31)
at waitForPredicatePageFunction (puppeteer_evaluation_script:9:18)
at ExecutionContext._evaluateInternal (/Users/.../node_modules/puppeteer/lib/ExecutionContext.js:122:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async WaitTask.rerun (/Users/.../node_modules/puppeteer/lib/DOMWorld.js:570:17)
-- ASYNC --
at ExecutionContext. (/Users/.../node_modules/puppeteer/lib/helper.js:111:15)
at WaitTask.rerun (/Users/.../node_modules/puppeteer/lib/DOMWorld.js:570:65)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- ASYNC --
at Frame. (/Users/.../node_modules/puppeteer/lib/helper.js:111:15)
at Frame.waitFor (/Users/.../node_modules/puppeteer/lib/FrameManager.js:612:19)
at Page.waitFor (/Users/.../node_modules/puppeteer/lib/Page.js:1113:29)
at Object.generatePDF (/Users/.../node_modules/mr-pdf/lib/utils.js:23:32)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
`

Docusaurus v2 seems to make images lazy loading by default. They are not included in the PDF because puppeteer never loads them.

Suggested approach that I've tested on my fork is to use puppeteer-autoscroll-down to scroll to the bottom of each page. This forces loading of all the images. I will create a PR, but welcome comments.

With docusaurus v2, autogenerated sidebars on the last page the selector gets empty, but the eval has no check for that:

`
node:internal/process/promises:246
triggerUncaughtException(err, true /* fromPromise */);
^

Error: Evaluation failed: DOMException: Failed to execute 'querySelectorAll' on 'Document': The provided selector is empty.
at puppeteer_evaluation_script:3:46
at ExecutionContext._evaluateInternal (/Users/.../node_modules/puppeteer/lib/ExecutionContext.js:122:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async ExecutionContext.evaluate (/Users/.../node_modules/puppeteer/lib/ExecutionContext.js:48:12)
at async /Users/.../node_modules/mr-pdf/lib/utils.js:122:13
-- ASYNC --
at ExecutionContext. (/Users/.../node_modules/puppeteer/lib/helper.js:111:15)
at DOMWorld.evaluate (/Users/.../node_modules/puppeteer/lib/DOMWorld.js:112:20)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- ASYNC --
at Frame. (/Users/.../node_modules/puppeteer/lib/helper.js:111:15)
at Page.evaluate (/Users/.../node_modules/puppeteer/lib/Page.js:860:43)
at Page. (/Users/.../node_modules/puppeteer/lib/helper.js:112:23)
at /Users/.../node_modules/mr-pdf/lib/utils.js:122:24
at Array.map ()
at Object.generatePDF (/Users/.../node_modules/mr-pdf/lib/utils.js:119:26)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
`

Some markdown pages might use <details/> & <summary/> elements in the documentation like below

Code:

<details>
  <summary>Click on it</summary>
  <p>Content will be shown</p>
</details>

Issue:

While printing the pages these content inside these details elements hide and thus could not be read as can be find on page 2 of https://zowe-docs.netlify.app/zowe-docs.pdf as shown below:

What could be done:

Look for all the <details> elements and print them with their open state like this

Code Logic

While converting to HTML, you can add an open attribute to <details> tag. So that while printing. It will print with content inside the details tag as well:

<details open>
  <summary>Click on it</summary>
  <p>Content will be shown</p>
</details>

Is it possible to run mr-pdf from-build on docusaurus?

I am generating pdf from a docusaurus v2 site that contains many large images. I have not been able to generate a pdf where all images are displayed.

Found this: https://stackoverflow.com/a/24685599. Could this be the source of the problem?

First got this error

Then upgraded to node v14.18.3 and again got this

npx mr-pdf --initialDocsURL="https://docusaurus.io/docs/en/installation" --paginationSelector=".docs-prevnext > a.docs-next" --excludeSelectors=".fixedHeaderContainer,footer.nav-footer,#docsNav,nav.onPageNav,a.edit-page-link,div.docs-prevnext" --cssStyle=".navPusher {padding-top: 0;}" --pdfMargin="20"
Downloading Chromium r722234 - 116.4 Mb [====================] 100% 0.0s 
error: unknown option '--initialDocsURL'

Any ideas?

The only thing missing from this awesome tool is the ability to generate a ToC to put at the top of the document, or after an intro page / cover. That way people could jump to pages and see what's where. This cannot be done on the CSS side since the pages are merged on the mr-pdf side and we have no way of knowing where each page will end up so no way to tell which anchor links to use. Additionally, the titles aren't anchored, so this would have to be done on the mr-pdf side.

An option to put page numbers at the bottom (left, middle, or right within margins) of pages would be great, especially if we want to have a working TOC (#3).

Borrow the @bojl idea of this PR for making internal links work.

Currently if there is several large images there is a race condition to loading while generating the PDF. This may mean some images are only partially loaded.

I've got a workaround that I've applied locally, but it would be good for a native solution:

    await page.evaluate(async () => {
        window.scrollBy(0, window.innerHeight);
        const selectors = Array.from(document.querySelectorAll("img"));
        await Promise.all(selectors.map(img => {
            if (img.complete) return;
            return new Promise((resolve, reject) => {
                img.addEventListener('load', resolve);
                img.addEventListener('error', reject);
            });
        }));
    });

This is applied after the content has been injected back into page but before final pdf rendering...

A blind timeout would also work, but this works reasonably well for me so far

first, i use this command to install it:

sudo npm i -g mr-pdf

then, i execute this command:

mr-pdf --initialDocURLs="http://localhost:3000/docs/intro" --contentSelector="article" --paginationSelector="pagination-nav__link--next" --excludeSelectors=".theme-doc-breadcrumbs,a.theme-edit-this-page" --coverImage="https://docusaurus.io/img/docusaurus.png" --coverTitle="Docusaurus v2"

But after a few seconds, the command returns directly without any information or errors

docusaurus version is 2.4.0

I am sure this doc url is valid and accessible and this folder is writable and readable

In fact I also tried it with npx mr-pdf xxxx and got the same response

My node version is v18.15.0 and npm version is 9.5.0

Open an issue again.
I installed mr-pdf(v1.0.5) for my mac via yarn tool.
When I run mr-pdf, it gives me an error of env: node\r: No such file or directory.
I just open the mr-pdf script and fount it is doc format (with end line \r\n), not unix format.
I have to convert it to unix format via vim: :set fileformat=unix, which could not be an easy problem if user don't know the file format.

node version: v14.15.5

It would be great to permit adding simple images as headers and footers as usually documents need to be branded.

Context

I'm trying to export my docs from Docusaurus v2.2.0 by first running npm run build, followed by npm run serve.

My PDF generation command is:

npx mr-pdf --initialDocURLs="http://localhost:3000/docs/introduction/"
--paginationSelector=".docs-prevnext > a.docs-next"
--excludeSelectors=".fixedHeaderContainer,footer.nav-footer,#docsNav,nav.onPageNav,a.edit-page-link,div.docs-prevnext" 
--cssStyle=".navPusher {padding-top: 0;}" 
--contentSelector="article"

The initialDocURL is correct. I tested that by running puppeteer with a custom script like so:

´´´js
import puppeteer from 'puppeteer';

(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('http://localhost:3000/docs/introduction/');
// wait 5 seconds
await page.waitForTimeout(5000);

await browser.close();
})();
´´´

The error I get when running the PDF generation command shown above:

Retrieving html from http://localhost:3000/docs/introduction/

Success
Error: Protocol error (Page.navigate): Cannot navigate to invalid URL
    at C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\Connection.js:183:56
    at new Promise (<anonymous>)
    at CDPSession.send (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\Connection.js:182:12)
    at navigate (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\FrameManager.js:118:39)
    at FrameManager.navigateFrame (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\FrameManager.js:95:7)    
    at Frame.goto (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\FrameManager.js:406:37)
    at Frame.<anonymous> (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\helper.js:112:23)
    at Page.goto (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\Page.js:672:49)
    at Page.<anonymous> (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\helper.js:112:23)
    at Object.generatePDF (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\mr-pdf\lib\utils.js:70:35)
  -- ASYNC --
    at Frame.<anonymous> (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\helper.js:111:15)
    at Page.goto (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\Page.js:672:49)
    at Page.<anonymous> (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\puppeteer\lib\helper.js:112:23)
    at Object.generatePDF (C:\Users\Zenahr\AppData\Local\npm-cache\_npx\f49524b68d136ed3\node_modules\mr-pdf\lib\utils.js:70:35)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I'm guessing the error is due to the CSS classes change on the navigation items in Docusaurus?

Solution (update the pagination selector)

Edit: Yep, funny how rubber duck debugging works while writing an issue.

To solve this issue all I had to do was updating the pagination selector parameter to --paginationSelector="a.pagination-nav__link--next".

Hi,

I can get great results on Wiindows, but if I try and run npx mr-pdf on Mac it gives the following error:

npm ERR! path /Users/xxx/.npm/_npx/69077/lib/node_modules/mr-pdf/bin\index.js
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod '/Users/xxx/.npm/_npx/69077/lib/node_modules/mr-pdf/bin\index.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xxx/.npm/_logs/2020-10-08T08_28_56_179Z-debug.log
Install for mr-pdf@latest failed with code 254

I assume because the path has a \ not /

Would be good if it could work on Mac/linux!

Thanks for the great software.

Paul.

Test command:

npx mr-pdf --initialDocURLs="https://docusaurus.io/docs" --contentSelector="article" --paginationSelector=".pagination-nav__item--next > a" --excludeSelectors=".margin-vert--xl a,[class^='tocCollapsible'],.breadcrumbs"

Screenshot

After the new release the CSS styles are not getting applied on the PDF

PDF created using latest released mr-pdf: docusaurus-website-generated.pdf

To support website such as hugo, docsify which doesn't have paginationSelector

It is better to accept json file which specify URL to be printed as PDF.

root@ykla:/home/ykla # npx mr-pdf --initialDocURLs="https://v2.vuepress.vuejs.org/guide/" --contentSelector="main" --paginationSelector=".page-nav .next a" --excludeSelectors="header.navbar,aside.sidebar,footer.page-edit .edit-link,.global-ui,.page-nav" --coverImage="https://v2.vuepress.vuejs.org/images/hero.png" --coverTitle="VuePress" --coverSub="Vue-powered Static Site Generator"
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
npm WARN deprecated [email protected]: Version no longer supported. Upgrade to @latest
root@ykla:/home/ykla # 

然后停止运行了，也没有生成 PDF 文件。