如何将VS Code中Swagger预览的Open API导出为HTML/PDF？

下面是几个能保证导出样式和VS Code预览完全匹配的实用方法，按操作复杂度排序：

方法1：直接用VS Code打印功能导出（最简单） #

这是最直接的方式，利用系统打印功能将预览页面转成PDF：

• 打开VS Code中的Swagger预览页面，确保内容显示完整
• 按下Ctrl+P（Windows/Linux）或Cmd+P（Mac）调出打印对话框
• 在打印设置里，选择“保存为PDF”作为输出目标
• 关键设置：必须勾选“背景图形”（否则会丢失Swagger的彩色导航栏、高亮样式），缩放比例设为100%，边距可根据需求调整为“无”或“最小值”
• 点击“保存”，生成的PDF样式会和VS Code预览完全一致

方法2：本地部署Swagger UI导出（适配复杂文档） #

VS Code的Swagger扩展本质是内嵌了Swagger UI，本地部署后加载你的文档，样式会完全匹配：

• 获取Swagger UI的静态资源包（包含index.html、css、js等核心文件）
• 将你的OpenAPI JSON文档放到Swagger UI的dist目录下
• 编辑dist/index.html，找到url参数，将值修改为你的JSON文件名（比如url: "./your-api-spec.json"）
• 用浏览器打开这个index.html，此时界面和VS Code预览完全一致
• 重复方法1的打印步骤，导出PDF即可

方法3：修复Swagger Editor Next导出差异 #

如果坚持用Swagger Editor Next，可通过以下步骤缩小样式差异：

• 在Swagger Editor Next中导入你的JSON文档，切换到“Preview”标签确认样式是否匹配VS Code预览
• 导出时选择“HTML”格式（而非HTML2，HTML2是简化版样式，和预览差异极大）
• 用浏览器打开导出的HTML文件，再通过浏览器打印功能转成PDF，记得勾选背景图形，这样样式会更接近预览效果

内容的提问来源于stack exchange，提问作者Daniel Traub