Vue渲染页面后如何用C#获取页面HTML以生成PDF

因为Vue采用客户端渲染，WebClient/HttpClient这类工具只会拉取服务器返回的静态初始HTML，不会执行页面中的JavaScript，所以拿不到Vue动态渲染后的内容。要获取渲染完成的HTML并生成PDF，需要使用能模拟浏览器执行JS的工具，以下是具体方案：

推荐方案：使用PuppeteerSharp（.NET版无头Chrome） #

PuppeteerSharp可以启动无头Chrome浏览器，完整加载页面并执行JS，等待Vue渲染完成后再获取HTML或直接生成PDF。

示例代码 #

using PuppeteerSharp;
using System.Threading.Tasks;

class VueHtmlPdfGenerator
{
    static async Task Main(string[] args)
    {
        // 首次运行需下载Chrome内核，后续可注释此步骤
        await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);

        // 启动无头浏览器
        using var browser = await Puppeteer.LaunchAsync(new LaunchOptions 
        { 
            Headless = true,
            Args = new[] { "--no-sandbox" } // 部分环境需要添加此参数
        });
        
        using var page = await browser.NewPageAsync();

        // 导航到目标页面
        await page.GoToAsync("https://www.mypage.com");

        // 等待Vue渲染完成：根据页面中Vue生成的元素选择器等待，替换成你页面的实际选择器
        await page.WaitForSelectorAsync(".vue-rendered-element");

        // 获取渲染完成的完整HTML
        string renderedHtml = await page.GetContentAsync();

        // 直接生成PDF（Puppeteer原生支持，无需额外处理HTML）
        await page.PdfAsync("output.pdf", new PdfOptions
        {
            Format = PaperFormat.A4,
            PrintBackground = true // 确保背景样式也被打印
        });
    }
}

其他可选方案 #

• Selenium WebDriver：配合ChromeDriver也能实现无头浏览器渲染，适合已经熟悉Selenium生态的场景，但配置相对繁琐。

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