licp
2024-11-26 e6c3fccc9e412e79964a6dc2dae4c3da0c80095c
src/components/tool/file-preview.vue
@@ -11,7 +11,7 @@
    <div v-if="isDoc">
      <p v-if="!isDocShow">文档无法直接预览,请下载查看。</p>
      <a :href="fileUrl" v-if="!isDocShow">下载文件</a>
      <vue-office-docx
      <vue-office-docx v-else
          :src="fileUrl"
          style="height: 100vh;"
          @rendered="renderedHandler"
@@ -21,7 +21,7 @@
    <div v-if="isXls">
      <p v-if="!isDocShow">文档无法直接预览,请下载查看。</p>
      <a :href="fileUrl" v-if="!isDocShow">下载文件</a>
      <vue-office-excel
      <vue-office-excel v-else
        :src="fileUrl"
        :options="options"
        style="height: 100vh;"
@@ -67,6 +67,7 @@
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
import * as XLSX from "xlsx";
export default {
  components: {
    VueOfficeDocx,
@@ -108,7 +109,15 @@
      return /\.(doc|docx)$/i.test(this.fileUrl);
    },
    isXls(){
      return /\.(xls|xlsx)$/i.test(this.fileUrl);
      let state = /\.(xls|xlsx)$/i.test(this.fileUrl)
      if(state){
        if(/\.(xlsx)$/i.test(this.fileUrl)){
          this.options.xls = false
        }else{
          this.options.xls = true
        }
      }
      return state;
    },
    isZipOrRar() {
      return /\.(zip|rar)$/i.test(this.fileUrl);
@@ -129,6 +138,7 @@
    renderedHandler() {
        console.log("渲染完成")
        this.isDocShow = true
        this.resetStyle()
    },
    errorHandler() {
        console.log("渲染失败")
@@ -155,6 +165,11 @@
          return obj
        })
        this.csvList = arr
        // console.log(333,this.csvList)
        this.csvList.forEach(m=>{
          console.log(this.calculateFormulas(m.column,m.tableData))
          m.tableData = this.calculateFormulas(m.column,m.tableData)
        })
      }).catch( err => {
        console.log(err)
      })
@@ -196,6 +211,37 @@
      }
      return result
    },
    /**
     * 计算表格公式
     *
     * @param tableHeaders 表头数据
     * @param tableData 表格数据
     */
    calculateFormulas(tableHeaders,tableData){
      // 生成 Excel Sheet 格式
      const sheetData = [tableHeaders.map(m=>m.label), ...tableData.map((row) => Object.values(row))];
      const worksheet = XLSX.utils.aoa_to_sheet(sheetData);
      // 计算公式
      XLSX.utils.sheet_add_aoa(worksheet, [], { origin: -1 });
      const newSheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      // 更新表头和表格数据
      tableData = newSheetData.slice(1).map((row) =>
        row.reduce((obj, value, index) => {
          obj[newSheetData[0][index]] = value;
          return obj;
        }, {})
      );
      return tableData
    },
    resetStyle(){
      const elements = document.querySelectorAll('[style*="pt"]');
      for (const element of elements) {
        const style = element.getAttribute('style');
        if (!!style) {
          element.setAttribute('style', style.replace(/pt/g, 'px'));
        }
      }
    },
  }
}
</script>