vxeTable打印导出使用小计

vxeTable 表格使用 打印、导出文件 自定义

打印样式调节、自定义数据源（全量打印）、导出xlsx（全量数据）文件 使用实例

vxe使用版本

 "@vxe-ui/plugin-export-xlsx": "4.0.8",
     "vxe-pc-ui": "^4.3.66",
    "vxe-table": "^4.10.2",
    "xlsx": "^0.18.5",
    [xlsx]([Vxe UI v4 Plugins](https://vxeui.com/other4/#/plugin-export-xlsx/install))
    按需导入 或者 全量导入 根据个人需求 配置[官方文档]([Vxe Table v4](https://vxetable.cn/#/start/install))使用即可

使用案例

   
     <vxe-table border show-overflow ref="tableRef" :data="tableData" :print-config="{ style: printStyle }">
            <vxe-column field="codeTitle" title="指标名称" align="center"></vxe-column>
            ......
     </vxe-table>
     
     // 这里写上打印的样式调整，css选择器是 原生的html dom 选择，这里只写了表格的自动换行
     const printStyle = ref(`
        table tbody tr td {
          white-space: normal !important;
          word-break: break-all !important;
        }
    `)
       
       
     // 全量输出数据 自行根据业务改写即可 
     const getExportData = async () => {
          printPagination.page = 1
          let isEnd = true
          let data = []
          while (isEnd) {
            const res = await getPrintData()
            if (res?.status === 1 && res?.data?.data?.length) {
              data = [...data, ...res.data.data]
              if (res.data.data.length < printPagination.limit) {
                isEnd = false
              } else {
                printPagination.page++
              }
            } else {
              isEnd = false
            }
          }
          data.forEach((item) => {
            item.remark = item.remark || '-'
          })
          return data
    }
    const exportData = ref('')
    // 打印方法 
    const printEvent = async () => {
      const $table = tableRef.value
      if (!$table) return
       try {
           /*  这里写的是 自定义打印的数据 可以支持 模版字符串拼接
           *   模版字符串内部可以使用html标签，使用class 或者 行内style的时候 使用单引号，双信号会被打印出来
           *   自行根据业务需求处理数据
           */
               exportData.value = await getExportData()
               exportData.value.forEach((item) => {
                      if (Number(item.statisticsValue) > Number(item.statisticsValueOld)) {
                        item.statisticsValue = `${item.statisticsValue} <span> ${item.unit || ''}</span> <span style='color: #28c345'>↑</span>`
                      } else if (Number(item.statisticsValue) < Number(item.statisticsValueOld)) {
                        item.statisticsValue = `${item.statisticsValue}<span> ${item.unit || ''}</span> <span style='color: #f2503b'>↓</span>`
                      }
                      item.statisticsValue = item.statisticsValue || '-'
                      item.statisticsValueOld = item.statisticsValueOld ? item.statisticsValueOld + (item.unit || '') : '-'
                })
              $table.print({
                  // 如果不需要自定义打印的数据，直接使用页面列表展示的数据源即可
                 data: exportData.value
              })
          } catch (error) {
            console.error('打印失败:', error)
            ElMessage.error('打印失败')
          }
    })
    
    // 导出方法 
  const exportEvent = async () => {
      const $table = tableRef.value
      if (!$table) return
      if (!tableData.value?.length) {
        ElMessage.warning('暂无数据导出')
        return
      }
      try {
        exportData.value = await getExportData()
        exportData.value.forEach((item) => {
          // 自行根据业务需求处理数据  和打印方法一样，直接导出xlsx文件
        })
        $table.exportData({
          filename: '标准修订记录',
          type: 'xlsx',
          data: exportData.value
        })
      } catch (error) {
        console.error('导出失败:', error)
        ElMessage.error('导出失败')
      }
}

代码写的不好，可自行纠正，谢谢