基于Vue和Java的文档生成与下载功能实现
前端实现
1. 添加在线查看功能
在诊断报告管理界面，添加在线查看按钮：
<!-- 在线查看按钮 -->
<el-button
size="small"
class="el-button--primary"
v-if="selectedReport"
@click="viewReport"
icon="el-icon-view"
>查看报告</el-button>
对应的点击事件处理方法：
viewReport() {
if (!this.selectedReport) {
this.$message.error('请先选择报告');
return;
}
this.$router.resolve({
path: '/report-viewer',
query: { id: this.selectedReport.id }
});
window.open(routeData.href, '_blank');
},
2. 配置路由
在路由配置中添加报告查看路由：
{
path: '/report-viewer',
name: 'ReportViewer',
component: () =>
import('@/components/ReportViewer'),
meta: {
keepAlive: true,
isTab: false,
isAuth: false
}
},
3. 实现报告查看页面
报告查看页面主要包含以下内容：
- 诊断报告的基本信息展示
- 两个下载按钮（Word和PDF格式）
<template>
<div class="report-container">
<el-row style="text-align: right; margin-right: 20px;">
<el-button
type="danger"
size="small"
@click="downloadWord"
>Word下载</el-button>
<el-button
type="danger"
size="small"
@click="downloadPdf"
>PDF下载</el-button>
</el-row>
<h1 style="text-align: center; font-size: 32px;">设备诊断报告书</h1>
<h2 style="margin-left: 20px; font-size: 28px;">诊断信息</h2>
- 设备SN：{{reportData.sn}}
- 设备名称：{{reportData.deviceName}}
- 问题描述：{{reportData.problemDescription}}
<!-- 其他诊断信息展示部分省略 -->
</div>
</template>
页面初始化时获取报告详情：
created() {
const reportId = this.$route.query.id;
this.fetchReport(reportId);
},
methods: {
fetchReport(id) {
getReportDetail(id).then(response => {
if (response.data && response.data.code === 200) {
this.reportData = response.data.data;
}
});
},
// 下载方法省略
}
后端实现
1. 控制器层
在Spring Boot控制器中添加下载接口：
@GetMapping("/download/word")
public ResponseEntity<String> generateWordReport(@RequestParam Long id) {
String filePath = diagnoseService.generateWordReport(id);
return ResponseEntity.ok().body(filePath);
}
@GetMapping("/download/pdf")
public ResponseEntity<String> generatePdfReport(@RequestParam Long id) {
String filePath = diagnoseService.generatePdfReport(id);
return ResponseEntity.ok().body(filePath);
}
2. 业务逻辑层
实现报告生成的业务逻辑：
@Override
public String generateWordReport(Long id) {
ReportDetailVO detail = reportMapper.getDetail(id);
String fileName = generateWordDocument(detail);
return "/uploads/" + fileName;
}
@Override
public String generatePdfReport(Long id) {
ReportDetailVO detail = reportMapper.getDetail(id);
String fileName = generatePdfDocument(detail);
return "/uploads/" + fileName;
}
3. PDF生成实现
使用iText库生成PDF：
private String generatePdfDocument(ReportDetailVO detail) throws IOException, DocumentException {
Document document = new Document(PageSize.A4);
PdfWriter writer = PdfWriter.getInstance(document, new ByteArrayOutputStream());
document.setMargins(30, 30, 20, 20);
document.open();
// PDF内容生成逻辑省略
document.close();
String fileName = System.currentTimeMillis() + ".pdf";
String path = uploadPath + fileName;
Files.copy(outputStream, new File(path));
return fileName;
}
4. Word生成实现
使用POI库生成Word文档：
private String generateWordDocument(ReportDetailVO detail) {
XWPFDocument document = new XWPFDocument();
// 内容生成逻辑省略
String fileName = System.currentTimeMillis() + ".docx";
String path = uploadPath + fileName;
try {
document.write(new FileOutputStream(new File(path)));
} catch (IOException e) {
e.printStackTrace();
}
return fileName;
}
项目配置
在application.yml中配置上传路径：
upload:
path: /var/lib/uploads/
