如何在 VSCode 中通过 Node 环境进行简单的 PDF 文件生成

冬芳小哥_1667

冬芳小哥_1667

2026-07-13

619人浏览

原创

直接用node脚本生成pdf需依赖puppeteer-core,手动指定浏览器路径,设置networkidle0等待动态内容加载,并显式声明中文字体fallback,避免插件封装带来的不可控问题。

如何在 vscode 中通过 node 环境进行简单的 pdf 文件生成

直接用 Node 脚本生成 PDF,不依赖 VSCode 插件

VSCode 本身不提供 PDF 生成能力,所谓“在 VSCode 中通过 Node 环境生成 PDF”,本质是:你在 VSCode 里写 Node 脚本,用命令行执行它,输出 PDF。VSCode 只是编辑器,真正干活的是 Node 进程和你选的库。

推荐首选 puppeteer —— 它调用本地 Chromium/Edge 渲染 HTML 再转 PDF,兼容性好、中文支持稳、样式还原度高。不要用已废弃的 phantomjs 或卡死的 wkhtmltopdf(后者在 macOS 14+/Windows 11 上常因字体或 sandbox 权限失败)。

安装命令:npm install puppeteer-core(比完整版小 70%,你只需自己指定浏览器路径)

关键点:

  • puppeteer-core 不自动下载 Chromium,避免首次运行卡在内网/杀软拦截
  • 必须手动填浏览器路径,例如:const browser = await puppeteer.launch({ executablePath: '/Applications/Brave Browser.app/Contents/MacOS/Brave Browser' });
  • 导出前务必设置 waitUntil: 'networkidle0',否则动态内容(如 Mermaid、MathJax)可能截空
  • PDF 字体 fallback 必须显式声明,比如:body { font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }

用 Markdown 源文件生成 PDF 的最小可行脚本

如果你已有 report.md,不想装一堆插件,只想跑一条命令就出 PDF,可以用 marked + puppeteer-core 组合。

示例脚本 md2pdf.js:

const fs = require('fs');
const marked = require('marked');
const puppeteer = require('puppeteer-core');

const html = `

<meta charset="utf-8"><style>
  body { font-family: "Noto Sans CJK SC", sans-serif; line-height: 1.6; margin: 2cm; }
  code { background: #f4f4f4; padding: 2px 4px; }
</style>${marked(fs.readFileSync('report.md', 'utf8'))}

`;

(async () => {
  const browser = await puppeteer.launch({
    executablePath: process.env.BROWSER_PATH || '/usr/bin/chromium',
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  const page = await browser.newPage();
  await page.setContent(html, { waitUntil: 'networkidle0' });
  await page.pdf({
    path: 'report.pdf',
    format: 'A4',
    margin: { top: '20mm', right: '15mm', bottom: '20mm', left: '15mm' }
  });
  await browser.close();
})();

运行前确保:

Rydberg Agent Node
Rydberg Agent Node

使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1),免gas,支持macOS/Linux/Windows。触发词:/r

下载
  • BROWSER_PATH 环境变量已设(Linux/macOS)或改代码中路径(Windows)
  • report.md 文件存在且编码为 UTF-8(BOM 会破坏 HTML 解析)
  • 系统已安装中文字体,如 Noto Sans CJK SC(macOS 自带)、fonts-wqy-zenhei(Ubuntu)或 simhei.ttf(Windows)

VSCode 任务集成:一键运行脚本并打开 PDF

把上面脚本变成 VSCode 任务,就能 Ctrl+Shift+P → “Tasks: Run Task” → 选 “Generate PDF”,全程不切窗口。

在项目根目录建 .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Generate PDF",
      "type": "shell",
      "command": "node md2pdf.js",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true
      },
      "problemMatcher": [],
      "dependsOn": []
    }
  ]
}

再加个快捷方式:在 keybindings.json 里绑定快捷键,比如:

[{
  "key": "ctrl+alt+p",
  "command": "workbench.action.terminal.sendSequence",
  "args": { "text": "node md2pdf.js\u000D" }
}]

注意:

  • PDF 生成后不会自动打开,需额外加一行 require('child_process').exec('open report.pdf');(macOS)或 start report.pdf(Windows)
  • 如果 PDF 打开报“文件损坏”,大概率是 page.setContent() 传入了非法 HTML(比如未转义的 符号),建议先用 <code>console.log(html) 检查输出

为什么不用 markdown-pdf 或 MPE 插件?

因为你要的是“通过 Node 环境生成”,不是“在 VSCode 图形界面里点一下”。插件隐藏了底层细节,反而不利于调试和定制。

典型问题包括:

  • markdown-pdf(yzane 版)已在 2026 年彻底失效:导出中文全方框、Mermaid 图空白、公式不渲染——不是你配错了,是它底层还在用 PhantomJS
  • Markdown Preview Enhanced(MPE)虽可用,但它的导出逻辑是“截图预览页 DOM”,一旦预览没加载完成(比如网络延迟、MathJax 未就绪),PDF 就是白页或错位
  • 所有插件都强制走 Puppeteer 自动下载 Chromium,而你的 CI/CD 或公司内网机器往往禁止外网访问,导致构建失败

真正的可控,是把浏览器路径、HTML 构造、PDF 参数全部写死在脚本里,而不是靠插件猜你想要什么。

相关文章

极轻PDF
极轻PDF

专业的在线PDF工具,支持PDF编辑、转换、合并、压缩等多种功能,操作简单,处理高效,满足日常办公与学习中的PDF处理需求。

下载

相关标签:

vscode node.js node

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1255

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2612

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1889

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1707

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2587

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1798

14

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1242

10

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1116

8

vscode设置中文界面不生效解决方法
vscode设置中文界面不生效解决方法

vscode设置中文界面不生效解决方法:安装中文语言包、通过命令面板设置语言、检查 locale.json 设置、重新安装中文语言包、检查 VSCode 版本和更新、排除插件冲突、检查系统语言设置、查看 VSCode 日志和错误消息、重置 VSCode 设置、查看官方文档和社区支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

454

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程