Browse Source

响应拦截器加入pdf拦截;对接导出PDF接口完成;

zhaowenkang/feature-20260206140254-后台AI复盘二期
songjie 1 month ago
parent
commit
d070135a7a
  1. 23
      src/api/platformData.js
  2. 5
      src/utils/myAxios.js
  3. 32
      src/views/PlatformData/UserOverview.vue

23
src/api/platformData.js

@ -39,3 +39,26 @@ export function getUserFullReportList(params) {
data: formData
})
}
// 导出用户数据明细 PDF
export function exportUserFullReport(params) {
const formData = new FormData();
formData.append('token', localStorage.getItem('token'));
if (params) {
if (params.start_time) formData.append('start_time', params.start_time);
if (params.end_time) formData.append('end_time', params.end_time);
}
return request({
url: 'http://280e5e98.r7.cpolar.top/admin/user/fullReport/list/exportPDF',
method: 'post',
headers: {
'token': localStorage.getItem('token'),
'client': 'ios',
'version': '1',
'Content-Type': 'multipart/form-data'
},
data: formData,
responseType: 'blob' // Important for file download
})
}

5
src/utils/myAxios.js

@ -37,6 +37,11 @@ myAxios.interceptors.request.use(
// 响应拦截器:处理响应数据、统一错误提示
myAxios.interceptors.response.use(
(response) => {
// 如果响应类型是 blob,直接返回整个 response.data
if (response.config.responseType === 'blob' || response.headers['content-type']?.includes('application/pdf')) {
return response.data;
}
const res = response.data
// 假设后端接口规范:成功时 code=200,其他为错误

32
src/views/PlatformData/UserOverview.vue

@ -106,7 +106,7 @@
/>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
<el-button type="primary" class="reset-btn" @click="handleReset">重置</el-button>
<el-button type="danger" class="export-btn">数据导出</el-button>
<el-button type="danger" class="export-btn" @click="handleExport">数据导出</el-button>
</div>
<!-- 表格1: 用户构成明细 -->
@ -185,7 +185,8 @@
import { ref, onMounted, nextTick, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts';
import { getUserOverviewList, getUserFullReportList } from '../../api/platformData';
import { getUserOverviewList, getUserFullReportList, exportUserFullReport } from '../../api/platformData';
import { ElMessage } from 'element-plus';
const route = useRoute();
const router = useRouter();
@ -342,6 +343,33 @@ const handleReset = () => {
fetchDetailData();
};
const handleExport = async () => {
loading.value = true;
let params = {};
if (dateRange.value && dateRange.value.length === 2) {
params.start_time = formatDate(dateRange.value[0]);
params.end_time = formatDate(dateRange.value[1]);
}
try {
const res = await exportUserFullReport(params);
// Blob
const blob = new Blob([res]);
const fileName = '用户数据明细.pdf';
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
ElMessage.success('导出成功');
} catch (e) {
console.error('导出失败:', e);
ElMessage.error('导出失败');
} finally {
loading.value = false;
}
};
const initCharts = () => {
if (activeTab.value === 'overview') {
nextTick(() => {

Loading…
Cancel
Save