import html2pdf from 'html2pdf.js';主要用这个包，HTML还包含了嵌套表格-效果，我是在弹窗里引入了子组件页面，横向打印，宽度写死为了解决表格没有自适应PDF
<div class="data-table__toolbar" style="float: right;">
<el-button icon="download" @click="handleExport()">
导出
</el-button>
</div>
<div class="handleExport" ref="ReportRef">
<div>
<div class="summary-row" v-if="props.type === 'department'" style="width: 1082px">
<div class="row-left-depname">
<span class="summary-label">部门名称</span>
<span class="summary-value">{{ pageObject.departmentName }}</span>
</div>
<div class="row-right">
<span class="summary-label">总用电量
<span style="font-size: 12px;">(kWh)</span>
</span>
<span class="summary-value">{{ pageObject.totalElectricity }}</span>
</div>
</div>
<!-- <div class="row-left-dep" style="margin-bottom: 10px;">
<span class="summary-label">明细信息</span>
</div> -->
<!-- 主表格 -->
<div class="table-container" v-if="props.type === 'department'">
<el-table :data="pageObject.roomElectricityList" style="width: 1160px" :show-header="false">
<el-table-column>
<template #default="{ row }">
<div class="table-data-row">
<div class="table-data-row-top">
<div class="data-cell building-cell">所属楼宇：{{ row.buildingName }}</div>
<div class="data-cell floor-cell">所属楼层：{{ row.floorName }}</div>
<div class="data-cell room-cell">房间名称：{{ row.roomName }}</div>
<div class="data-cell electricity-cell">
用电量：{{ row.totalElectricity }} kWh
</div>
</div>
<div class="data-cell detail-cell">
<el-table :data="row.categoryElectricityList" size="small" style="width: 1160px">
<el-table-column label="序号" width="60" align="center" show-overflow-tooltip>
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column label="设备类型" prop="categoryName" align="center" show-overflow-tooltip />
<el-table-column label="用电量（kWh）" prop="categoryElectricity" align="center"
show-overflow-tooltip>
<template #default="{ row }">
{{ row.categoryElectricity }}
</template>
</el-table-column>
<el-table-column v-if="props.range === 'today'" label="最早开始时间" prop="startTime" align="center"
width="160" show-overflow-tooltip>
<template #default="{ row }">
{{ row.startTime == null || row.startTime === '' ? '-' : row.startTime }}
</template>
</el-table-column>
<el-table-column v-if="props.range === 'today'" label="最晚结束时间" prop="endTime" align="center"
width="160" show-overflow-tooltip>
<template #default="{ row }">
{{ row.endTime == null || row.endTime === '' ? '-' : row.endTime }}
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="summary-row-dep" v-if="props.type === 'building'">
<div class="row-left" style="margin-bottom: 10px;">
<span class="summary-label">汇总信息</span>
</div>
<el-table ref="dataTableRef" v-loading="loading" style="width: 100%" :data="pageData" highlight-current-row>
<el-table-column label="所属楼宇" prop="buildingName" align="center" show-overflow-tooltip />
<el-table-column label="所属楼层" prop="floorName" align="center" show-overflow-tooltip />
<el-table-column label="房间名称" prop="roomName" align="center" show-overflow-tooltip />
<el-table-column label="部门名称" prop="departmentName" align="center" show-overflow-tooltip />
<el-table-column label="总用电量" prop="totalElectricity" align="center" show-overflow-tooltip>
<template #default="{ row }">
{{ row.totalElectricity }} kWh
</template>
</el-table-column>
</el-table>
<div class="row-left" style="margin: 30px 0 10px;">
<span class="summary-label">明细信息</span>
</div>
<el-table :data="pageDataDetailBuilding" style="width: 100%">
<el-table-column label="序号" width="60" align="center" show-overflow-tooltip>
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column label="类型" prop="categoryName" align="center" show-overflow-tooltip />
<el-table-column label="用电量（kWh）" prop="categoryElectricity" align="center" show-overflow-tooltip>
<template #default="{ row }">
{{ row.categoryElectricity }}
</template>
</el-table-column>
<el-table-column v-if="props.range === 'today'" label="最早开始时间" prop="startTime" align="center"
show-overflow-tooltip>
<template #default="{ row }">
{{ row.startTime == null || row.startTime === '' ? '-' : row.startTime }}
</template>
</el-table-column>
<el-table-column v-if="props.range === 'today'" label="最晚结束时间" prop="endTime" align="center"
show-overflow-tooltip>
<template #default="{ row }">
{{ row.endTime == null || row.endTime === '' ? '-' : row.endTime }}
</template>
</el-table-column>
</el-table>
</div>
</div>
const handleExport = async () => {
try {
// 宽度没有自适应-在父组件设置了宽百分比
const element = document.querySelector('.handleExport');
const options = {
margin: 5,
filename: `房间详情_${new Date().toLocaleDateString()}.pdf`,
image: { type: 'png', quality: 0.98 },
html2canvas: {
scale: 2, // 提高清晰度
useCORS: true,
letterRendering: true,
backgroundColor: '#ffffff',
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }, // 设置为横向
pagebreak: {
// 配置自动分页规则：当元素碰到页脚/页边时自动分页
mode: ['css', 'legacy'],
avoid: ['.el-table__header-wrapper', '.el-table__row', '.row-left'], // 避免表头被截断
}
};
html2pdf().from(element).set(options).save();
} catch (error) {
console.error('导出PDF失败', error);
}
} <el-dialog v-model="dialog.visible" :title="dialog.title" :width="'1183px'" @close="handleCloseDialog">
<RoomDetails :deptId="RoomDetailsIdDeptId || ''" :range="selectedDateShortcut" :startTime="queryParams.startTime"
:endTime="queryParams.endTime" :type="'department'" :roomId="RoomDetailsId" />
</el-dialog>