Question : How to add TOC, Header and Footer ? about md-to-pdf HOT 15 CLOSED

You can write a config file in json format, or as a commonjs module that default exports an object, and supply that along with the command, using the --config-file flag. This way you can share the same config for converting multiple files.

Example:

 // config.js

module.exports = {
  displayHeaderFooter: true,
  headerTemplate: `<div class="timestamp">${new Date().toLocaleString()}</div>`,
  footerTemplate: '(c) 2019 - Jean',
};

md-to-pdf --config-file config.js file-1.md
md-to-pdf --config-file config.js file-2.md

For how to write the header and footer templates please see this section of the docs: https://github.com/simonhaenisch/md-to-pdf#headerfooter.

Regarding automatic TOC, that's a feature I'm planning to add (#9) but haven't had the time and need for yet. For now, you'll either have to manually create it, have a separate tool for it, or inject a script that generates it from all the headings elements (see https://github.com/simonhaenisch/md-to-pdf/compare/feature-toc for reference).

from md-to-pdf.

Good Morning Simon!

Thanks for your explanations.
I've tried to use your config.js file without success.
The PDF is still generated without header and footer. :-(

For the TOC, what do you think about https://github.com/jonschlinkert/markdown-toc ?

See you,

Jean

from md-to-pdf.

I have look into markdown-toc before, but it's based on remarkable as a parser, whereas this project is using marked. I think it's relatively simple to write a toc plugin for marked though. I will solve that eventually but now I'm in the middle of moving this project to typescript, so it'll have to wait till I'm done with that.

You can try to use markdown-toc for yourself though, and inject the toc into the markdown file before converting it to pdf.

As for headers and footers, they indeed don't work... i'll look into it.

from md-to-pdf.

I forgot that those options need to be wrapped in the pdf_options object, and for some reason the font-size defaults to like 1px or sth, so the exported config should be e. g.:

module.exports = {
  pdf_options: {
    displayHeaderFooter: true,
    headerTemplate: `
      <style>
        div { font-size: 11px; width: 100%; text-align: center; }
      </style>
      <div>${new Date().toLocaleString()}</div>
    `,
    footerTemplate: '<div>(c) 2019 - Jean</div>',
  },
};

Note that the styles in the <style> tag of the header template get applied to both the header and the footer template.

I'll update the readme to raise awareness about this quirky behavior.

Thanks!

from md-to-pdf.

Hi Simon,
Now, with this config.js, the generated pdf file no longer has any margin. No headers are displayed.
The string "(c) 2019 - Jean" is displayed only one time in the document, on the last page.
Have a nice WE!
:-)

from md-to-pdf.

If you want to have margin, you have to specify it in your config, because the defaults will not be applied if you pass your own pdf_options. The default pdf options are

pdf_options: {
  printBackground: true,
  format: 'A4',
  margin: {
    top: '30mm',
    right: '40mm',
    bottom: '30mm',
    left: '20mm',
  },
},

which you can just add into the config above.

This will likely also solve the issue that you only see the footer on the last page, because on the other pages the content probably overlays the footer.

from md-to-pdf.

Hi Simon!
How are you?

Following your advice, now it works. The headers and footers of pages are out magically! ;-)
Now I'm able to personalize them.
For more readability , is it possible to specify sources files instead of specifying each option?

About the TOC, I'm using marked-toc. (https://github.com/jonschlinkert/marked-toc#author)
Even if it's deprecated, it works ! :-) (I wasn't able to install markdown-toc).
For title numbering, the css should do the job.

By the way, you told me that you are "in the middle of moving this project to typescript".
Why do not go further with node js ?

Thanks for your help.

Jean

from md-to-pdf.

For more readability , is it possible to specify sources files instead of specifying each option?

Yes, if you use a config.js... then you can just do sth like

const { readFileSync } require('fs');

module.exports = {
  pdf_options: {
    displayHeaderFooter: true,
    headerTemplate: readFileSync('path/to/header.html', { encoding: 'utf-8' }),
  }
}

By the way, you told me that you are "in the middle of moving this project to typescript".
Why do not go further with node js ?

It will still run on Node.js, the source will just be written in Typescript (and transpiled to JS for distribution). I find it favorable for a few reasons, mainly better Intellisense. Documenting types within JSDoc blocks is just a bit cumbersome.

from md-to-pdf.

Hi Simon,

Adding this declarationconst fs = require('fs') at the beginning, here is what I get :

from md-to-pdf.

Please have a look at template literals...

const string = `The current date is ${new Date().toLocaleString()}.`

new Date().toLocaleString() is a JS expression and its return value will be put into the string in place of the ${...}. Of course this won't work in HTML. You'll have to add a script tag in your template if you want to run any JS.

Note that you can also use some special class names that Puppeteer will inject values into automatically. See headerTemplate in https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions for available classes. E. g., if you add a <span class="date"></span> into your header, Puppeteer will write the current date into that span.

from md-to-pdf.

I know template literals. In fact, I wanted to know what kind of files we can include. What syntax to use?

According https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions ; so it's possible to have [pageNumber/totalPages] in the footer for instance?

from md-to-pdf.

Well, if you know template literals and HTML, then why does it surprise you that with

<style>
  div { font-size: 11px; width: 100%; text-align: center; }
</style>
<div>${new Date().toLocaleString()}</div>

it prints

${new Date().toLocaleString()}

in the header? 🤔 That's exactly the content you have put in the div.

I'm happy to help, but that has very little to do with this tool.

As for what files you can include, for the header and footer templates Puppeteer expects a string that contains HTML. fs.readFileSync just reads a file and returns its content as a string (if the encoding option is set, and a buffer otherwise). Reading the docs might enlighten you about how you can put this together yourself. Of course you can inline script tags into your html template if you want to dynamically do sth there.

According https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions ; so it's possible to have [pageNumber/totalPages] in the footer for instance?

Why don't you just try it out? You'd probably also find this info on stackoverflow already... anyway, here you go:

<style>
  div { font-size: 11px; width: 100%; text-align: center; }
</style>
<div>[<span class="pageNumber"></span>/<span class="totalPages"></span>]</div>

(Remember, you only need the css either in the header or in the footer... it'll be applied to both.)

from md-to-pdf.

My question was only about the "points to be taken in account" between the two options :

• On the one hand, write directly into the config.js file.
• On the other hand, import a specific file for the header and another one for the footer.

Don't worry, I will develop only into the config.js It works fine.

from md-to-pdf.

Hi Simon !
How are you doing?

Did you already try to insert a picture in the header ?
Even if I found some informations on stackoverflow about this matter ( https://stackoverflow.com/questions/47925115/puppeteer-cannot-render-pdf-with-images-stored-locally ), I opened yesterday a new issue : puppeteer/puppeteer#4837

Perhaps do you know a workaround.

from md-to-pdf.

#13 (comment)

from md-to-pdf.