使用网站效果网站建设用户体验

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>