ops/front
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加报表 PDF 下载

Browse Source
This commit is contained in:
zxr
2026-08-03 21:13:07 +08:00
parent 7353c4eede
commit 195aa7ccff
8 changed files with 92 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/api/ops/report.ts
View File

@@ -64,6 +64,13 @@ export interface PageResult<T> {
data: T[]
}
export type ReportExportFormat = 'csv' | 'xlsx' | 'pdf'
export interface DownloadedReport {
blob: Blob
fileName: string
}
// ============ 报表生成参数接口 ============
export interface TrafficReportParams {
@@ -239,8 +246,8 @@ export const fetchReportMetricsRegistry = (params: { data_source: string }) =>
/** 查看报表内容 */
export const fetchReportContent = (id: number) => request.get<ApiResponse<Record<string, any>>>(`/DC-Control/v1/reports/${id}/content`)
/** 原始 ArrayBuffer → 下载用 Blob；xlsx 校验 ZIP 魔数 PK */
function exportBufferToBlob(ab: ArrayBuffer, format: 'csv' | 'xlsx', contentType: string | null): Blob {
/** 原始 ArrayBuffer → 下载用 Blob；xlsx 校验 ZIP 魔数 PK，PDF 校验 %PDF- */
function exportBufferToBlob(ab: ArrayBuffer, format: ReportExportFormat, contentType: string | null): Blob {
const u8 = new Uint8Array(ab)
if (format === 'xlsx') {
const okZip = u8.length >= 4 && u8[0] === 0x50 && u8[1] === 0x4b
@@ -265,16 +272,42 @@ function exportBufferToBlob(ab: ArrayBuffer, format: 'csv' | 'xlsx', contentType
: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
return new Blob([ab], { type: mime })
}
if (format === 'pdf') {
const okPdf =
u8.length >= 5 &&
u8[0] === 0x25 &&
u8[1] === 0x50 &&
u8[2] === 0x44 &&
u8[3] === 0x46 &&
u8[4] === 0x2d
if (!okPdf) {
throw new Error('导出失败：服务器返回的不是有效的 PDF。')
}
const mime = contentType && /pdf/i.test(contentType) ? contentType : 'application/pdf'
return new Blob([ab], { type: mime })
}
const mime =
contentType && /csv|text|plain/i.test(contentType) ? contentType : 'text/csv;charset=utf-8'
return new Blob([ab], { type: mime })
}
function parseContentDispositionFileName(value: string | null): string | undefined {
if (!value) return undefined
const utf8FileName = value.match(/filename\*=UTF-8''([^;]+)/i)
if (utf8FileName) return decodeURIComponent(utf8FileName[1])
return value.match(/filename="([^"]+)"/i)?.[1]
}
/**
* 报表文件导出：使用 fetch + arrayBuffer，绕过 axios 拦截器与 Blob 中间态，
* 避免网络面板里已是合法 xlsx（PK…）但落盘文件损坏的情况。
*/
export const exportReport = async (id: number, format: 'csv' | 'xlsx' = 'csv'): Promise<Blob> => {
export const exportReport = async (
id: number,
format: ReportExportFormat = 'csv',
): Promise<DownloadedReport> => {
const base = String(import.meta.env.VITE_API_BASE_URL || '').replace(/\/$/, '')
const url = `${base}/DC-Control/v1/reports/${id}/export?format=${encodeURIComponent(format)}`
const token = SafeStorage.get(AppStorageKey.TOKEN)
@@ -296,7 +329,10 @@ export const exportReport = async (id: number, format: 'csv' | 'xlsx' = 'csv'):
}
throw new Error(msg)
}
return exportBufferToBlob(ab, format, r.headers.get('content-type'))
return {
blob: exportBufferToBlob(ab, format, r.headers.get('content-type')),
fileName: parseContentDispositionFileName(r.headers.get('content-disposition')) || `report_${id}.${format}`,
}
}
// ============ 监测指标类接口（旧版兼容） ============

20
src/views/ops/pages/report/device/index.vue
View File

@@ -53,6 +53,7 @@
<template #content>
<a-doption @click="handleExport('csv')">导出 CSV</a-doption>
<a-doption @click="handleExport('xlsx')">导出 Excel</a-doption>
<a-doption @click="handleExport('pdf')">导出 PDF</a-doption>
</template>
</a-dropdown>
</a-space>
@@ -70,6 +71,7 @@
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleViewContent(record)">查看</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('csv', record)">CSV</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('xlsx', record)">Excel</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('pdf', record)">PDF</a-button>
</a-space>
</template>
</search-table>
@@ -211,12 +213,13 @@ import {
fetchReportList,
generateReport,
fetchReportContent,
exportReport,
ReportType,
type ReportRecord,
type NetworkDeviceReportParams,
} from '@/api/ops/report'
import * as echarts from 'echarts'
import { downloadReportFile } from '../useReportExport'
import type { ReportExportFormat } from '@/api/ops/report'
import { normalizeReportRows, reportStatusColor, reportStatusLabel } from '../useReportListRow'
import { useReportNetworkDevicePickOptions } from '../useReportNetworkDevicePickOptions'
@@ -560,7 +563,7 @@ const handleViewContent = async (record?: ReportRecord) => {
}
// 导出报表
const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
const handleExport = async (format: ReportExportFormat, record?: ReportRecord) => {
const targetRecord = record || selectedRecord.value
if (!targetRecord) {
Message.warning('请选择要导出的报表')
@@ -575,18 +578,7 @@ const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
exporting.value = true
try {
const blob = await exportReport(targetRecord.id, format)
// 创建下载链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `report_${targetRecord.id}.${format}`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
await downloadReportFile(targetRecord, format)
Message.success('导出成功')
} catch (error: any) {

20
src/views/ops/pages/report/fault/index.vue
View File

@@ -57,6 +57,7 @@
<template #content>
<a-doption @click="handleExport('csv')">导出 CSV</a-doption>
<a-doption @click="handleExport('xlsx')">导出 Excel</a-doption>
<a-doption @click="handleExport('pdf')">导出 PDF</a-doption>
</template>
</a-dropdown>
</a-space>
@@ -74,6 +75,7 @@
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleViewContent(record)">查看</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('csv', record)">CSV</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('xlsx', record)">Excel</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('pdf', record)">PDF</a-button>
</a-space>
</template>
</search-table>
@@ -235,13 +237,14 @@ import {
fetchReportList,
generateReport,
fetchReportContent,
exportReport,
exportEvidenceReport,
ReportType,
type ReportRecord,
type FaultReportParams,
} from '@/api/ops/report'
import { normalizeReportRows, reportStatusColor, reportStatusLabel } from '../useReportListRow'
import { downloadReportFile } from '../useReportExport'
import type { ReportExportFormat } from '@/api/ops/report'
import { useFaultReportServiceIdentityOptions } from '../useReportTargetIdentityOptions'
const {
@@ -619,7 +622,7 @@ const handleViewContent = async (record?: ReportRecord) => {
}
// 导出报表
const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
const handleExport = async (format: ReportExportFormat, record?: ReportRecord) => {
const targetRecord = record || selectedRecord.value
if (!targetRecord) {
Message.warning('请选择要导出的报表')
@@ -634,18 +637,7 @@ const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
exporting.value = true
try {
const blob = await exportReport(targetRecord.id, format)
// 创建下载链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `report_${targetRecord.id}.${format}`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
await downloadReportFile(targetRecord, format)
Message.success('导出成功')
} catch (error: any) {

20
src/views/ops/pages/report/host/index.vue
View File

@@ -53,6 +53,7 @@
<template #content>
<a-doption @click="handleExport('csv')">导出 CSV</a-doption>
<a-doption @click="handleExport('xlsx')">导出 Excel</a-doption>
<a-doption @click="handleExport('pdf')">导出 PDF</a-doption>
</template>
</a-dropdown>
</a-space>
@@ -70,6 +71,7 @@
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleViewContent(record)">查看</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('csv', record)">CSV</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('xlsx', record)">Excel</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('pdf', record)">PDF</a-button>
</a-space>
</template>
</search-table>
@@ -211,12 +213,13 @@ import {
fetchReportList,
generateReport,
fetchReportContent,
exportReport,
ReportType,
type ReportRecord,
type ServerReportParams,
} from '@/api/ops/report'
import { normalizeReportRows, reportStatusColor, reportStatusLabel } from '../useReportListRow'
import { downloadReportFile } from '../useReportExport'
import type { ReportExportFormat } from '@/api/ops/report'
import { useReportServerPickOptions } from '../useReportServerPickOptions'
const { serverIdentityOptions, serverOptionsLoading, loadServerPickOptions } = useReportServerPickOptions()
@@ -548,7 +551,7 @@ const handleViewContent = async (record?: ReportRecord) => {
}
// 导出报表
const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
const handleExport = async (format: ReportExportFormat, record?: ReportRecord) => {
const targetRecord = record || selectedRecord.value
if (!targetRecord) {
Message.warning('请选择要导出的报表')
@@ -563,18 +566,7 @@ const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
exporting.value = true
try {
const blob = await exportReport(targetRecord.id, format)
// 创建下载链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `report_${targetRecord.id}.${format}`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
await downloadReportFile(targetRecord, format)
Message.success('导出成功')
} catch (error: any) {

20
src/views/ops/pages/report/statistics/index.vue
View File

@@ -53,6 +53,7 @@
<template #content>
<a-doption @click="handleExport('csv')">导出 CSV</a-doption>
<a-doption @click="handleExport('xlsx')">导出 Excel</a-doption>
<a-doption @click="handleExport('pdf')">导出 PDF</a-doption>
</template>
</a-dropdown>
</a-space>
@@ -70,6 +71,7 @@
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleViewContent(record)">查看</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('csv', record)">CSV</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('xlsx', record)">Excel</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('pdf', record)">PDF</a-button>
</a-space>
</template>
</search-table>
@@ -248,12 +250,13 @@ import {
fetchReportList,
generateReport,
fetchReportContent,
exportReport,
ReportType,
type ReportRecord,
type StatisticsReportParams,
} from '@/api/ops/report'
import * as echarts from 'echarts'
import { downloadReportFile } from '../useReportExport'
import type { ReportExportFormat } from '@/api/ops/report'
import { useReportTargetIdentityOptions } from '../useReportTargetIdentityOptions'
import { useReportMetricRegistryOptions } from '../useReportMetricRegistryOptions'
import { normalizeReportRows, reportStatusColor, reportStatusLabel } from '../useReportListRow'
@@ -634,7 +637,7 @@ const handleViewContent = async (record?: ReportRecord) => {
}
// 导出报表
const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
const handleExport = async (format: ReportExportFormat, record?: ReportRecord) => {
const targetRecord = record || selectedRecord.value
if (!targetRecord) {
Message.warning('请选择要导出的报表')
@@ -649,18 +652,7 @@ const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
exporting.value = true
try {
const blob = await exportReport(targetRecord.id, format)
// 创建下载链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `report_${targetRecord.id}.${format}`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
await downloadReportFile(targetRecord, format)
Message.success('导出成功')
} catch (error: any) {

20
src/views/ops/pages/report/topn/index.vue
View File

@@ -53,6 +53,7 @@
<template #content>
<a-doption @click="handleExport('csv')">导出 CSV</a-doption>
<a-doption @click="handleExport('xlsx')">导出 Excel</a-doption>
<a-doption @click="handleExport('pdf')">导出 PDF</a-doption>
</template>
</a-dropdown>
</a-space>
@@ -70,6 +71,7 @@
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleViewContent(record)">查看</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('csv', record)">CSV</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('xlsx', record)">Excel</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('pdf', record)">PDF</a-button>
</a-space>
</template>
</search-table>
@@ -238,12 +240,13 @@ import {
fetchReportList,
generateReport,
fetchReportContent,
exportReport,
ReportType,
type ReportRecord,
type TopNReportParams,
} from '@/api/ops/report'
import * as echarts from 'echarts'
import { downloadReportFile } from '../useReportExport'
import type { ReportExportFormat } from '@/api/ops/report'
import { useReportTargetIdentityOptions } from '../useReportTargetIdentityOptions'
import { useReportMetricRegistryOptions } from '../useReportMetricRegistryOptions'
import { normalizeReportRows, reportStatusColor, reportStatusLabel } from '../useReportListRow'
@@ -639,7 +642,7 @@ const handleViewContent = async (record?: ReportRecord) => {
}
// 导出报表
const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
const handleExport = async (format: ReportExportFormat, record?: ReportRecord) => {
const targetRecord = record || selectedRecord.value
if (!targetRecord) {
Message.warning('请选择要导出的报表')
@@ -654,18 +657,7 @@ const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
exporting.value = true
try {
const blob = await exportReport(targetRecord.id, format)
// 创建下载链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `report_${targetRecord.id}.${format}`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
await downloadReportFile(targetRecord, format)
Message.success('导出成功')
} catch (error: any) {

20
src/views/ops/pages/report/traffic/index.vue
View File

@@ -53,6 +53,7 @@
<template #content>
<a-doption @click="handleExport('csv')">导出 CSV</a-doption>
<a-doption @click="handleExport('xlsx')">导出 Excel</a-doption>
<a-doption @click="handleExport('pdf')">导出 PDF</a-doption>
</template>
</a-dropdown>
</a-space>
@@ -70,6 +71,7 @@
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleViewContent(record)">查看</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('csv', record)">CSV</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('xlsx', record)">Excel</a-button>
<a-button v-if="record.status === 'success'" type="text" size="small" @click="handleExport('pdf', record)">PDF</a-button>
</a-space>
</template>
</search-table>
@@ -323,12 +325,13 @@ import {
fetchReportList,
generateReport,
fetchReportContent,
exportReport,
ReportType,
type ReportRecord,
type TrafficReportParams,
} from '@/api/ops/report'
import * as echarts from 'echarts'
import { downloadReportFile } from '../useReportExport'
import type { ReportExportFormat } from '@/api/ops/report'
import { normalizeReportRows, reportStatusColor, reportStatusLabel } from '../useReportListRow'
import { useReportTopologyOptions } from '../useReportTopologyOptions'
import { useReportTargetIdentityOptions } from '../useReportTargetIdentityOptions'
@@ -815,7 +818,7 @@ const handleViewContent = async (record?: ReportRecord) => {
}
// 导出报表
const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
const handleExport = async (format: ReportExportFormat, record?: ReportRecord) => {
const targetRecord = record || selectedRecord.value
if (!targetRecord) {
Message.warning('请选择要导出的报表')
@@ -830,18 +833,7 @@ const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
exporting.value = true
try {
const blob = await exportReport(targetRecord.id, format)
// 创建下载链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `report_${targetRecord.id}.${format}`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
await downloadReportFile(targetRecord, format)
Message.success('导出成功')
} catch (error: any) {

16
src/views/ops/pages/report/useReportExport.ts Normal file
View File

@@ -0,0 +1,16 @@
import { exportReport, type ReportExportFormat, type ReportRecord } from '@/api/ops/report'
export async function downloadReportFile(record: ReportRecord, format: ReportExportFormat): Promise<void> {
const { blob, fileName } = await exportReport(record.id, format)
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
try {
link.href = url
link.download = fileName
document.body.appendChild(link)
link.click()
} finally {
link.remove()
window.URL.revokeObjectURL(url)
}
}