Forum How do I...?

1 2 Next

Trouble creating a PDF from localhost

ZurichKevin

Hi!

I have installed Prince without a license to do an evaluation. When I run the following command:

npx docusaurus-prince-pdf -u http://localhost:3000/docs

The system returns the following message:

npx: installed 108 in 6.499s
No next link found!
No buffer to write!

The URL points to the local docusaurus web site.

Any clue what to do?

Thanks!

Kevin Donovan

mikeday
Are you using this package:

https://libraries.io/npm/docusaurus-prince-pdf

You might need to ask the author for help.

Do you have Prince installed on your local machine, and does it work if you run it from the command-line on a simple document, such as "prince test.html"?
ZurichKevin
This error went away when I entered the correct URL. Unfortunately, another error replaced it:

Error: HTTPError: Response code 404 (Not Found)
    at Request.<anonymous> (C:\Users\KevinDonovan\node_modules\got\dist\source\as-promise\index.js:117:42)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  code: 'ERR_NON_2XX_3XX_RESPONSE',
  timings: {
    start: 1639995190981,
    socket: 1639995190983,
    lookup: 1639995190988,
    connect: 1639995190989,
    secureConnect: undefined,
    upload: 1639995190989,
    response: 1639995190993,
    end: 1639995190997,
    error: undefined,
    abort: undefined,
    phases: {
      wait: 2,
      dns: 5,
      tcp: 1,
      tls: undefined,
      request: 0,
      firstByte: 4,
      download: 4,
      total: 16
    }
  }
}



The command that I entered is as follows:

npx docusaurus-prince-pdf -u http://localhost:3000/userguide/docs  --output ATGuide.pdf       

Kevin Donovan

hallvord
Obvious first questions are

- is Prince installed and work, as Mike already asked above?
- is Prince in your path so the exec command here can find it? https://github.com/signcl/docusaurus-prince-pdf/blob/master/index.js#L96
- is the docusaurus site running? The error message indicates the got() call here fails https://github.com/signcl/docusaurus-prince-pdf/blob/master/index.js#L105

Announcement: repos for tests/utils

ZurichKevin
Prince is installed on my PC, but when I run prince test.html the following appears:


prince : The term 'prince' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ prince test.html
+ ~~~~~~
    + CategoryInfo          : ObjectNotFound: (prince:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException



Prince is available as a desktop application.

Kevin Donovan

csant
Note that on Windows you need to specify the full path to the prince.exe file, as described here: https://www.princexml.com/doc/command-line/

And if that prince.exe file is on your path, you should run 'prince.exe', not just 'prince'.
ZurichKevin
OK I added the path to the Path envoironment variable. When I run

 
npx docusaurus-prince-pdf -u http://localhost:3000/userguide/docs  --output ATGuide.pdf


The system displays:

Error: HTTPError: Response code 404 (Not Found)
    at Request.<anonymous> (C:\Users\KevinDonovan\node_modules\got\dist\source\as-promise\index.js:117:42)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  code: 'ERR_NON_2XX_3XX_RESPONSE',
  timings: {
    start: 1641376374558,
    socket: 1641376374562,
    lookup: 1641376374568,
    connect: 1641376374569,
    secureConnect: undefined,
    upload: 1641376374570,
    response: 1641376374575,
    end: 1641376374579,
    error: undefined,
    abort: undefined,
    phases: {
      wait: 4,
      dns: 6,
      tcp: 1,
      tls: undefined,
      request: 1,
      firstByte: 5,
      download: 4,
      total: 21
    }
  }
}

Kevin Donovan

csant
Does it actually work when you run the prince.exe on that URL manually?
ZurichKevin
When I enter this:

prince ---baseurl= http://localhost:3000/userguide/docs  --output ATGuide.pdf


The following message appears:

prince: error: no input documents to process

Kevin Donovan

csant
What actually happens if you run

prince http://localhost:3000/userguide/docs  --output ATGuide.pdf


(and, BTW, it should be just a double dash, thus
--baseurl
, not
---baseurl
)
ZurichKevin
When I enter

prince http://localhost:3000/userguide/docs  --output ATGuide.pdf



The following displays:

prince: http://localhost:3000/userguide/styles.css:2344: warning: unknown property 'overscroll-behavior'
prince: http://localhost:3000/userguide/styles.css:2518: warning: unknown pseudo-element '::placeholder'
prince: http://localhost:3000/userguide/styles.css: warning: unsupported properties: overflow-x, overflow-y, pointer-events

Kevin Donovan

csant
Excellent, so that works - and I guess that a PDF has been produced.

Given that you are getting a 404 error above - is there any broken link in the 'next' links of your docusaurus site?
ZurichKevin
Well it produces a document that is 1 page long. Please see attached.

Kevin Donovan

  1. ATGuide.pdf2.1 kB
csant
That is to be expected - Prince in itself does not follow 'next' links, as does docusaurus-prince-pdf.

Given that you were getting a 404 error by using that package - is there any broken link in the 'next' links of your docusaurus site?
ZurichKevin
Nope

Kevin Donovan

csant
From some little testing locally, I seem to understand that you get the 404 error because docusaurus-prince-pdf does not find the expected 'next' link. There might be several reasons for this:
1. in its default setting, it works with dovusaurus v2
2. if you have a custom landing page, also that page needs a (recognizeable) 'next' link.

Thus:
1. if you are working with docusaurus v1, the command to run is:
prince http://localhost:3000/userguide/docs  --selector '.docs-next' --output ATGuide.pdf

2. if you are using v2 and have a custom landing page, you need to add a link constructed like this:
<div class="pagination-nav__item--next">
  <a href="your-next-page">Next</a>
</div>


Let me know if this brings you forward.
ZurichKevin
I added the custom link. (I use v2.)

I still get theses messages:

prince: http://localhost:3000/userguide/styles.css:2344: warning: unknown property 'overscroll-behavior'
prince: http://localhost:3000/userguide/styles.css:2518: warning: unknown pseudo-element '::placeholder'
prince: http://localhost:3000/userguide/styles.css: warning: unsupported properties: overflow-x, overflow-y, pointer-events


Kevin Donovan

ZurichKevin
There is a kind of landing page that is defined by docusaurus.config.js. Here are its contents:

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

// With JSDoc @type annotations, IDEs can provide config autocompletion
/** @type {import('@docusaurus/types').DocusaurusConfig} */
(module.exports = {
  title: 'AlgoTrader User Guide',
  tagline: 'Learn how to configure AlgoTrader',
  url: 'https://your-docusaurus-test-site.com',
  baseUrl: '/userguide/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'AlgoTrader', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.

  presets: [
    [
      '@docusaurus/preset-classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          //editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          //editUrl:
          //  'https://github.com/facebook/docusaurus/edit/main/website/blog/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: '',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [ 
          
        ],
      },
      footer: {
        style: 'dark',
        
        copyright: `Copyright © ${new Date().getFullYear()} AlgoTrader AG. All rights reserved.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
        additionalLanguages: ['java'],
      },
    }),
});

Kevin Donovan

csant
As for the warning messages for unsupported CSS properties: that shouldn't cause any problem in the generation of a PDF. Prince is just telling you that it doesn't support these CSS properties. But did the PDF actually get produced?
ZurichKevin
Yes one was produced but almost empty.

Kevin Donovan

  1. ATGuide-Test.pdf2.1 kB
csant
It looks like you might be missing a 'next' link to the rest of the documentation.

To check if everything else works, you can enter the next page in the sequence (i.e. the first page of the actual documentation) - if all is OK, it should generate the whole documentation without the first page.

As for the landing page: the JSX page is irrelevant here, what you care for is the page that actually gets served. You can either build your site and check the generated HTML landing file, or you load the landing page in your favourite browser and find out whether the landing page actually contains said link (for v2, the default class you are looking for is 'pagination-nav__item--next'.

If that class does not exist, you need to find a way to insert it on the landing page - I'll leave it to you to find out how (I have been struggling with some "docusaurus-v2-magic" myself, and I know that at times some things can get rather messy...).
ZurichKevin
OK, I was able to resolve some of the issues.

I had to run the following command:

yarn run build

followed by

npm run serve

in order for the Docusaurus locally hosted site to be served properly. (yarn run serve did not serve pages properly)

Then I ran the following command:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book --output BBDDAFFF.pdf

and the following messages were displayed:

Got link: http://localhost:3000/docs/dashboard_overview
Got link: http://localhost:3000/docs/customizing_the_dashboard
Got link: http://localhost:3000/docs/managing_portfolios
Got link: http://localhost:3000/docs/viewing_conditions
Got link: http://localhost:3000/docs/buying_and_selling_securities
Got link: http://localhost:3000/docs/smart_trading
Got link: http://localhost:3000/docs/creating_an_RFQ_for_a_trade
Got link: http://localhost:3000/docs/downloading_historical_data
Got link: http://localhost:3000/docs/reference_data
Got link: http://localhost:3000/docs/performance
Got link: http://localhost:3000/docs/viewing_balances
Got link: http://localhost:3000/docs/drawing_configuration
Got link: http://localhost:3000/docs/order_display_configuration
Got link: http://localhost:3000/docs/account_creation
No next link found!
Writing buffer (14 links) to ./pdf/localhost-docs-book.txt
Generating PDF BBDDAFFF.pdf

And so a PDF was created! And the TOC on the left worked!

But there was a big problem - only the first page of each individual file was inserted into the PDF. Would this be due to the fact that I do not have a Prince license but just a trial version? Or is there something else?

Thanks!





Kevin Donovan

csant
Good to hear you solved issues so far! What you are hitting now seems to actually be this: https://www.princexml.com/forum/topic/4608/page-cut-off-for-docusaurus-sites
ZurichKevin

This might be the solution, but how do I specify the CSS file in the command line. I tried the following:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book --output B.pdf --prince-args '-s print.css'

but received the message:

npx: installed 108 in 9.4s
No next link found!
No buffer to write!

So would you know how to pass a Prince option to docusaurus-prince-pdf?

Thanks!

Kevin Donovan

csant
https://github.com/signcl/docusaurus-prince-pdf/issues/2

Sounds like an issue in docusaurus-prince-pdf
ZurichKevin
Thanks but I don't have a login at GitHub. There does not seem to be a fix. Is this correct?

Kevin Donovan

ZurichKevin
So close and yet so far.

Kevin Donovan

csant
Thanks but I don't have a login at GitHub. There does not seem to be a fix. Is this correct?


Indeed, I reported the issue a few days ago, when noticing that it didn't seem to work. And it is yet to be fixed. Will try and see if I have some time to look for a fix.
ZurichKevin
On a related issue, the first file in the group of files is not part of the PDF when I enter the following command:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book/ --output GOSH.pdf

The first file is 'book' but it is ignored by docusaurus-prince-pdf.

Any idea on how I could include this file in the PDF output?

Kevin Donovan

csant
You need to pass --include-index to docusaurus-prince-pdf
ZurichKevin
Thanks! It worked.

Kevin Donovan

csant
And I actually figured out that it does take custom arguments, but they need to be properly escaped!

So in your case you need to pass
--prince-args '\-s print.css'
and it should work.
ZurichKevin
Still not working for me. Could you display the command line that works for you?

Kevin Donovan

csant
Still not working for me


What exactly is not working? If I run my command with the parameter `--prince-args '\-s print.css` the extra styles in print.css get applied.

Have you tried running:
npx docusaurus-prince-pdf -u http://localhost:3000/docs/book --output BBDDAFFF.pdf --prince-args '\-s print.css'

? i.e. the command which you above said that it worked, plus the extra args.

Make sure docusaurus site is actually up and running...

Edited by csant

ZurichKevin
And this is the only content of print.css:

@media print {
    .row { display: block !important; }
}

Kevin Donovan

ZurichKevin
The Docusaurus site is running and output is created but onth the first pages of each file are inserted into the PDF.

Kevin Donovan

csant
Upon investigation that print/pdf is already included in docusaurus-prince-pdf - and when I run
npx docusaurus-prince-pdf -u https://docusaurus.io/docs --include-index

all works indeed fine.

I don't know your local site - it looks like you have styled something in some other way, and might have caused some other issues. Without having access to your local site, debugging is impossible.
ZurichKevin
It is still the same problem, only the first page of a file is inserted into the PDF.

Kevin Donovan

ZurichKevin
Thanks for your help. I think it is a problem with docusaurus-prince-pdf. I made no chanegs to the CSS and other elements.

Kevin Donovan

ZurichKevin

The following command does eliminate the cutoff page problem:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book  --include-index -o ZAZ.pdf  --prince-args  '\-\-javascript'


Apparently the
--javascript
option is needed to assure that each file is not cut off after the first page.

Kevin Donovan

ZurichKevin
This probabaly should be documented somewhere.

Kevin Donovan

csant
I am very happy that you managed to find a solution!

This probably should be documented somewhere.


As mentioned above, I am not able to reproduce the issue on the Docusaurus page - can you reproduce the cut-off issue by running this command

npx docusaurus-prince-pdf -u https://docusaurus.io/docs --include-index


? If yes, I agree that docusaurus-prince-pdf should document it somewhere - or better yet, they might want to consider whether to enable JavaScript by default. Else, it might be an issue specific to your local site.

Edited by csant

ZurichKevin
What I had to do was simply put this string:

@media print {
    .row { display: block !important; }
}


at the top of the custom.css file in the \src\css directory.

I just ran the command without --javascript and everything worked fine.

The main thing to do then, AFAIK, is to pur the string at the top of the custom.css file, as shown below:


/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */

@media print {
    .row { display: block !important; }
}

:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
}


.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.markdown img {
  margin-left: auto;
  margin-right: auto;
  display: img;
}

html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

table {
  margin-left: auto;
  margin-right: auto;
  display: table;
}



When I placed this string in a special CSS file, and tried to include this special file using the -s option on a command line, it did not work.

The command that I ran to build the PDF was as follows:


npx docusaurus-prince-pdf -u http://localhost:3000/docs/book  --include-index -o DOCUMENT.pdf




Kevin Donovan

Edited by ZurichKevin

csant
That is most strange - since that very extra CSS rule is included by default by docusaurus-prince-pdf!
See here: https://github.com/signcl/docusaurus-prince-pdf

I don't understand, why it is not included when you run the command...

As for "using the -s option on a command line" - please make sure that the command passed is "\-s"!
ZurichKevin
I escaped the -s option and it did not work.

I put the following:

@media print {
    .row { display: block !important; }
}


at the end of the /src/css/custom.css file and when I subsequently ran the command:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book  --include-index -o DOCUMENT.pdf


only the first page of each file was integrated into the PDF file.

But hey, it works and that's great.

Kevin Donovan

ZurichKevin
On a different topic, would you know why hash marks appear in the TOC, as shown in the attached screen shot?

Kevin Donovan

  1. Hash-Marks-in-TOC.png32.1 kB
csant
It must be something in your HTML or CSS - I cannot reproduce this in the Docusaurus site. Without seeing your HTML and CSS it is impossible to give you an answer.
ZurichKevin
How much of the file do you need to see? Here is the custom.css file.

Kevin Donovan

  1. custom.css1.1 kB
csant
Thank you, nothing in there justifies the hashes. Do you only see it in the generated PDF?

It would be good to post the HTML of the title generating the PDF-bookmark-with-hash, and any CSS connected with it (you might find that in the web development tools in your browser).
ZurichKevin
The hashes appear only in the PDF.

Kevin Donovan

1 2 Next
Showing 1 - 50 of 65