Java调用Vue前端页面生成PDF文件

一、业务背景

        在实际业务使用中，有些情况下打印功能是由后端组装数据，前端整理数据生成pdf文件。此时如果某个功能需要后端再拿到生成的pdf进行下一步处理就不好实现。

        比如后端需要拿到pdf文件发给CA厂商进行鉴权，如果在之前基础上增加新的交互逻辑整个流程就变得复杂冗余，于是我们考虑后端直接调用前端获取pdf文件。

二、流程概览

        页面点击触发——>后端组装参数调用Vue生成PDF——>前端收到请求解析参数绘制PDF——>后端拿到PDF文件进行后续业务处理（CA鉴权等）

        其中关键的一点在于后端访问后需要等待多久再生成PDF，如果固定某个时间间隔可能会出现PDF没生成全或者已经生成完成但是还在等待浪费时间。

        所以约定了一个属性，当前端页面渲染完成给这个属性打标记，后端读取标记成功后生成PDF。

三、环境准备

        该功能需要依赖浏览器，我们以谷歌为例，确认好本地谷歌浏览器版本，下载对应的浏览器驱动。（驱动下载地址：Chrome for Testing availability）

        大版本必须一致（139），然后将下载好的驱动放到固定位置，谷歌浏览器exe位置也需要摘出来，稍后需要在Java代码中配置。

四、后端代码

        需要将驱动路径、浏览器路径，前端访问路径进行配置，前端访问路由可自行调整。以下是具体代码，整体流程简单需要调试的配置较多。

private String dllUrl;//存储驱动的根目录，完整路径代码拼接，可自行调整

private String mWebAddress;//存储前端访问页面，后续访问路由代码拼接，可自行调整

private String chromePath;//浏览器启动程序完整路径，可自行调整

package com.aikes.util;import lombok.extern.slf4j.Slf4j;
import org.openqa.selenium.By;
import org.openqa.selenium.Pdf;
import org.openqa.selenium.PrintsPage;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.print.PrintOptions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;import java.io.File;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.time.Duration;
import java.util.Base64;
import java.util.Collections;/*** 调用vue页面获取PDF文件*/
@Slf4j
@Service
public class WebAccessServerUtil {@Value("${dllUrl:D:/DLL}")private String dllUrl;@Value("${webAddress:http://127.0.0.1:8080/mcpc/ui/dist/index.html}")private String mWebAddress;@Value("${chromePath:C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe}")private String chromePath;public boolean getPdfFromWeb(String cPath,String cpk_notification,String cpk_emgency){log.info("根目录：" + dllUrl);log.info("Web端访问地址：" + mWebAddress);log.info("谷歌浏览器路径：" + chromePath);// 完全禁用WebDriverManager自动下载，手动指定驱动路径（避免版本冲突）System.setProperty("wdm.enabled", "false");// 手动指定本地ChromeDriver路径（替换为你的实际路径）//驱动版本需要和服务器浏览器版本对应   138.0.7204.158System.setProperty("webdriver.chrome.driver", dllUrl + File.separator + "chromedriver" + File.separator + "chromedriver.exe");System.setProperty("webdriver.chrome.bin", chromePath);// 配置浏览器选项（重点修复）ChromeOptions options = new ChromeOptions();options.addArguments("--headless=new"); // 新版headless模式options.addArguments("--disable-gpu");options.addArguments("--no-sandbox");options.addArguments("--disable-dev-shm-usage");options.addArguments("--remote-allow-origins=*"); // 允许跨域WebSocketoptions.setExperimentalOption("excludeSwitches", Collections.singletonList("enable-automation"));WebDriver driver = new ChromeDriver(options);WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(15)); // 最大等待10秒try {String vuePageUrl = mWebAddress + "#/generatePdfTest?pk_notification=" + cpk_notification + "&pk_emgency=" + cpk_emgency;driver.get(vuePageUrl);// 智能等待：直到页面设置truewait.until(ExpectedConditions.attributeToBe(By.tagName("body"), "data-pdf-ready", "true"));PrintOptions printOptions = new PrintOptions();printOptions.setBackground(true);printOptions.setPageRanges("1-5");// 替换原PDF字节处理代码Pdf pdf = ((PrintsPage) driver).print(printOptions);String base64Pdf = pdf.getContent(); // 获取Base64编码的PDF内容byte[] pdfBytes = Base64.getDecoder().decode(base64Pdf); // 解码为原始二进制Files.write(Paths.get(cPath), pdfBytes);log.info("调用Web端生成PDF文件成功: " + cPath);return true;} catch (Exception e) {log.error("获取Web端PDF文件失败:{}", e.getMessage(), e);return false;} finally {try {driver.quit();} catch (Exception ignore) {}}}
}

五、前端代码

        前端vue仅供测试使用页面，具体业务使用需要进行美化和数据填充

        在路由配置文件增加如下配置，实现路由和文件的绑定

    {path: '/generatePdfTest',name: 'GeneratePDFTest',component: (resolve) =>require(['@/components/notificationRecord/MedicalNotificationPdf'], resolve),}

        具体pdf生成页面代码如下

<template><div class="pdf-container"><h1>{{ title }}</h1><div v-for="item in items" :key="item.id" class="item"><p><strong>{{ item.label }}:</strong> {{ item.value }}</p></div></div>
</template><script>export default {data() {return {title: '测试通知记录书',items: []}},mounted() {try {// 检查路由是否可用（避免this.$route未定义的错误）if (!this.$route) {throw new Error("Vue Router未正确配置");}const recordId = this.$route.query.id || 'default';// 模拟数据加载setTimeout(() => {this.items = [{ id: 1, label: '患者姓名', value: '张三' },{ id: 2, label: '病历号', value: recordId },{ id: 3, label: '诊断结果', value: 'stemi' },{ id: 4, label: '诊断日期', value: '2025-08-12' },{ id: 5, label: '诊断医生', value: '李四' }];// 确认body元素存在后再设置属性if (document.body) {document.body.setAttribute('data-pdf-ready', 'true');console.log("PDF渲染标记已设置"); // 用于浏览器控制台调试} else {console.error("body元素不存在，无法设置标记");}}, 500);} catch (error) {console.error("组件加载错误：", error);}}}
</script><style scoped>/* 样式保持不变 */.pdf-container {width: 210mm;margin: 0 auto;padding: 20px;font-family: "SimSun";}.item {margin: 10px 0;}
</style>

六、最终效果

        页面查看网页PDF

        后端调用生成的PDF      

七、总结

        该功能仅作为“曲线救国”方案，实际业务场景需要尽可能预想到该流程提前设计交互思路，供大家参考学习哈。