mr-pdf

Generate pdf from document

Usage no npm install needed!

<script type="module">
  import mrPdf from 'https://cdn.skypack.dev/mr-pdf';
</script>

README

📌 Introduction

This is a PDF generator from document website such as docusaurus, vuepress, mkdocs.

⚡ Usage

npx mr-pdf --initialDocURLs="https://docusaurus.io/docs" --paginationSelector="li > a" --contentSelector="article"

🍗 CLI Options

Option Required Description
--initialDocURLs Yes set URL to start generating PDF from.
--contentSelector Yes used to find the part of main content
--paginationSelector Yes CSS Selector used to find next page to be printed for looping.
--excludeURLs No URLs to be excluded in PDF
--excludeSelectors No exclude selectors from PDF. Separate each selector with comma and no space. But you can use space in each selector. ex: --excludeSelectors=".nav,.next > a"
--cssStyle No CSS style to adjust PDF output ex: --cssStyle="body{padding-top: 0;}" *If you're project owner you can use @media print { } to edit CSS for PDF.
--outputPDFFilename No name of the output PDF file. Default is mr-pdf.pdf
--pdfMargin No set margin around PDF file. Separate each margin with comma and no space. ex: --pdfMargin="10,20,30,40". This sets margin top: 10px, right: 20px, bottom: 30px, left: 40px
--pdfFormat No pdf format ex: --pdfFormat="A3". Please check this link for available formats Puppeteer document
--disableTOC No Optional toggle to show the table of contents or not
--coverTitle No Title for the PDF cover.
--coverImage No <src> Image for PDF cover (does not support SVG)
--coverSub No Subtitle the for PDF cover. Add <br/> tags for multiple lines.

🎨 Examples and Demo PDF

Docusaurus v1

https://docusaurus.io/en/

initialDocURLs: https://docusaurus.io/docs/en/installation

demoPDF: https://github.com/kohheepeace/mr-pdf/blob/master/v1-docusaurus.pdf

command:

npx mr-pdf --initialDocURLs="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"

Docusaurus v2 beta

20210603060438

https://docusaurus.io/

initialDocURLs: https://docusaurus.io/docs

demoPDF: https://github.com/kohheepeace/mr-pdf/blob/master/v2-docusaurus.pdf

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"

Vuepress

https://vuepress.vuejs.org/

initialDocURLs:

https://vuepress.vuejs.org/guide/

demoPDF: https://github.com/kohheepeace/mr-pdf/blob/master/vuepress.pdf command:

npx mr-pdf --initialDocURLs="https://vuepress.vuejs.org/guide/" --paginationSelector=".page-nav .next a" --excludeSelectors="header.navbar,aside.sidebar,footer.page-edit .edit-link,.global-ui,.page-nav"

Mkdocs

https://www.mkdocs.org/

initialDocURLs: https://www.mkdocs.org/

demoPDF: https://github.com/kohheepeace/mr-pdf/blob/master/mkdocs.pdf

command:

npx mr-pdf --initialDocURLs="https://www.mkdocs.org/" --paginationSelector="ul.navbar-nav li.nav-item a[rel~='next']" --excludeSelectors=".navbar.fixed-top,footer,.homepage .container .row .col-md-3,#toc-collapse" --cssStyle=".col-md-9 {flex: 0 0 100%; max-width: 100%;}"

Material for Mkdocs

https://squidfunk.github.io/mkdocs-material/

initialDocURLs: https://squidfunk.github.io/mkdocs-material/getting-started/

demoPDF: https://github.com/kohheepeace/mr-pdf/blob/master/material-for-mkdocs.pdf command:

npx mr-pdf --initialDocURLs="https://squidfunk.github.io/mkdocs-material/getting-started/" --paginationSelector="a.md-footer-nav__link--next" --excludeSelectors="header.md-header,.announce,nav.md-tabs,.md-main__inner .md-sidebar--primary,.md-main__inner .md-sidebar--secondary,footer" --cssStyle=".md-content {max-width: 100%!important;}"

PR to add new docs is welcome here... 😸

📄 How this plugin works

This plugin uses puppeteer to make PDF of the document website.

mr-pdf-diagram

🎉 Thanks

This repo's code is coming from https://github.com/KohheePeace/docusaurus-pdf.

Thanks for awesome code made by @maxarndt and @aloisklink.

@bojl approach to make TOC was awesome and breakthrough.