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.158
        System.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=*"); // 允许跨域WebSocket
        options.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);

            // 智能等待：直到页面设置true
            wait.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      

七、总结

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