Vscode-markdown: Feature request: Print to PDF

[sloth3toe]

What is the problem?

This is a feature request.

Feature request

An option to print directly to pdf.

I do this very often and having to go through the browser each time isn't the most convenient. There seems to be some tool to help facilitate this https://github.com/marcbachmann/node-html-pdf?

Thanks for the extension!

[yzhang-gh]

The node-html-pdf package has an unsolved issue.

Actually, I am also looking for a good solution but no satisfactory one by now 😔

[sloth3toe]

Ah that's too bad 😞 . I'm glad to hear that you're on it though!

Do you know how the guys at markdown-pdf get around the problem, or they use another tool or just live with it?

[yzhang-gh]

It uses Puppeteer, just Chrome without GUI. The price is making the extension be ~300Mb big (because it needs to include "Chrome" binaries for 3 platforms)

[sloth3toe]

Got it, thanks! It is indeed a big cost.

I wonder if it's not worth it to still add node-html-pdf, with the warning that it won't work for Anchor links? Does this mean that it'll work if one doesn't have a TOC? I guess another downside is that if another solution comes up, this will have to be removed.

[sloth3toe]

I forgot about this: What about using this command line tool https://wkhtmltopdf.org/? I've tried it by itself and it works great.

It's about 50mb which I think is reasonable. It also comes with wkhtmltoimage which is another 50mb. If you don't want to ship with these built-in, it's also okay to instruct the users to install them if they wish. It's available as a Homebrew Cask for MacOS users.

[sloth3toe]

Maybe you've already researched these, so apologies if these are redundant, but I just realize that there are more options as well, such as https://github.com/fraserxu/electron-pdf. This one is simpler to install with node maybe? But the number of command line options seems to be fewer (you can't set header/footer, or customize margins to anything it seems).

[yzhang-gh]

wkhtmltopdf seems to be a good candidate (since it gets 7k stars and might be well-tested by the users)

I'd like to prompt users to install it by themselves or even better install it for them when printing a file for the first time.

The remain problem is that I won't have much time for it recently... marking as "help wanted".

[sloth3toe]

Awesome, thanks! The plan sounds great to me. I personally tested and liked wkhtmltopdf, so I already have it installed to call from Python etc.

Unfortunately my JS skills aren't up to par to help out with this task... But hopefully someone else can!

[yzhang-gh]

A Quick Hack

Navigate to [youruserhome]/.vscode/extensions/yzhang.markdown-all-in-one-1.6.0/out/src/print.js, starting from line 89, replace the switch block with following codes

    switch (type) {
        case 'html':
            const { exec } = require('child_process');
            fs.writeFileSync(outPath, html, 'utf-8');
            exec(`wkhtmltopdf ${outPath} ${outPath.replace('.html', '.pdf')}`);
            break;
        case 'pdf':
            break;
    }

Then reload vscode

[sloth3toe]

Thanks! I tried that but somehow, even though a .pdf file is created, it can't be open with the error It may be damaged or use a file format that Preview doesn’t recognize. (a similar error with Adobe)

If I print to html first, and then use the command line wkhtmltopdf file.html file.pdf then it works just fine. Odd.

[yzhang-gh]

How about changing to

    switch (type) {
        case 'html':
            const { execSync } = require('child_process');
            fs.writeFileSync(outPath, html, 'utf-8');
            execSync(`wkhtmltopdf ${outPath} ${outPath.replace('.html', '.pdf')}`);
            break;
        case 'pdf':
            break;
    }

[sloth3toe]

Thanks! Actually either exec or execSync works, and it was my bad. I tried to keep the html case and added the pdf case instead (after adding the relevant code to create such functionality in the different .json files, mimicking the html case). What I didn't realize is that outPath is defined with the extension being the same as type, so what I needed was:

    switch (type) {
        case 'html':
            fs.writeFile(outPath, html, "utf-8", function (err) {
                if (err) {
                    console.log(err);
                }
            });
            break;
        case 'pdf':
            const { execSync } = require('child_process');
            fs.writeFileSync(outPath.replace('.pdf', '.html'), html, 'utf-8');
            execSync(`wkhtmltopdf ${outPath.replace('.pdf', '.html')} $outPath`);
            break;   
 }

I think I can also print to a temp html file and then delete it, if I want this other printtoPDF function to just be creating PDFs. Next is to allow options for the wkhtmltopdf command.

Sorry about the confusion! I'll keep using the hack for now, though when the next update comes it'd be some headache then.

[DamianSuess]

Id suggest merging efforts with the extension, vscode-pandoc This has been a huge help for me, and in the future i'd rather use just your extension and not two

[Yue-Zhengyuan]

Hi! Do you have time to try the solution used in another extension (Markdown PDF by yzane). He uses Chrome in headless mode (see this document, but unfortunately his extension does not support html formatting and latex equation in Markdown files. You add the "print to PDF" option by:

• requiring the users to install Chrome
• first generate the html, then call headless Chrome to print it to PDF

[yzhang-gh]

@Yue-Zhengyuan Thanks. It (the Chrome Devtools Protocol) is indeed a helpful link. However, it requires some effort to implement and test it. For now I would suggest users open the exported HTML with Chrome and Ctrl+P to print it to PDF. And also testing or proof-of-concept or any help is welcome.