vue3+ts导出PDF

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>
相关推荐
尚学教辅学习资料3 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|3 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊4 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
@CLoudbays_Martin114 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
Access开发易登软件5 小时前
Access开发导出PDF的N种姿势,你get了吗?
后端·低代码·pdf·excel·vba·access·access开发
缘如风6 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱6 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年6 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划