Excel预览 - 技术栈

html 复制代码
<template>
  <div class="preview-page">
    <vue-office-excel :src="excel" :options="options" style="height: 100%;" @rendered="renderedHandler"
      @error="errorHandler" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

/**
 * 将Excel序列日期转换为格式化日期
 * @param {number} serial - Excel日期序列值
 * @returns {string} 格式化后的日期字符串
 */
const excelSerialToDate = (serial) => {
  // Excel日期从1900-01-01开始，JavaScript从1970-01-01开始
  const utcDays = Math.floor(serial - 25569); // 25569是1900-01-01到1970-01-01的天数
  const utcValue = utcDays * 86400; // 转换为秒
  const dateInfo = new Date(utcValue * 1000);

  // 调整时区偏移
  const timezoneOffset = dateInfo.getTimezoneOffset() * 60000;
  const adjustedDate = new Date(dateInfo.getTime() + timezoneOffset);

  const month = adjustedDate.getMonth() + 1;
  const day = adjustedDate.getDate();

  return `${month}月${day}日`;
}

/**
 * 判断是否为Excel日期序列值
 * @param {*} value - 单元格值
 * @returns {boolean}
 */
const isExcelDateSerial = (value) => {
  return value >= 1 && value <= 2958465 // Excel支持的日期范围
}

/**
 * 处理单元格数据转换
 * @param {Object} workbookData - 工作簿数据
 * @returns {Object} 处理后的数据
 */
const transformCellData = (workbookData) => {
  console.log('transformData received:', workbookData)
  workbookData?.forEach(item => {
    Object.keys(item.rows)?.forEach(key => {
      if (item.rows[key] && item.rows[key].cells && isExcelDateSerial(Number(item.rows[key].cells[0].text))) {
        console.log(Number(item.rows[key].cells[0].text))
        item.rows[key].cells[0].text = excelSerialToDate(Number(item.rows[key].cells[0].text))
      }
    })

    item.styles?.forEach(self => {
      self.font.size += 2
    })
  })

  return workbookData
}

const options = ref({
  xls: false,       //预览xlsx文件设为false；预览xls文件设为true
  minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
  minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
  widthOffset: 70,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
  heightOffset: 0, //在默认渲染的列表高度上再加 Npx高
  beforeTransformData: (workbookData) => {
    return workbookData
  }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
  transformData: (workbookData) => {
    return transformCellData(workbookData)
  }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
})
const excel = ref('/spoverview/config/dutyInfo/export/folder/V1')
</script>


<style lang="scss" scoped>
.preview-page {
  height: 100%;
  width: 100%;
}
</style>