CA3.0/src/views/previewPage/index.vue

<template>
  <div v-loading="loading" class="home">
    <div v-if="fileType == 'xlsx'" style="overflow-y: scroll;" class="home_content">
      <div class="home_content_xlsx" v-html="tableau"></div>
    </div>
    <div v-else-if="fileType == 'pdf'" style="overflow-y: scroll;" class="home_content">
      <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf>
    </div>
    <div v-else-if="fileType == 'docx' || fileType == 'doc'" style="overflow-y: scroll;" class="home_content">
      <div ref="file"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import * as XLSX from 'xlsx'
import pdf from 'vue-pdf'
const docx = require('docx-preview')

export default {
  components: { pdf },
  data () {
    return {
      loading: false,
      tableau: null,
      fileType: '',
      pdfSrc: '',
      docxSrc: '',
      numPages: 1
    }
  },
  created () {
    const { query } = this.$route
    if (!query) return
    this.loading = true
    const { fileName } = query
    this.getFileType(fileName)
  },
  methods: {
    getXlxsData (fileName) {
      axios.get('./' + fileName, {
        responseType: "arraybuffer", // 设置响应体类型为arraybuffer
      }).then(({ data }) => {
        const workbook = XLSX.read(new Uint8Array(data), { type: "array" }); // 解析数据
        const sheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
        const csv = XLSX.utils.sheet_to_html(sheet)
        this.tableau = this.apendTable(this.csv2table(csv, fileName))
        this.loading = false
      }).catch(err => {
        this.loading = false
        console.error(err)
      })
    },
    getDocxData (fileName) {
      axios.get('./' + fileName, {
        responseType: 'blob'
      }).then(({ data }) => {
        docx.renderAsync(data, this.$refs.file) // 渲染到页面
        this.loading = false
      }).catch(err => {
        this.loading = false
        console.error(err)
      })
    },
    getFileType (dotName) {
      if (dotName.includes('pdf')) {
        this.fileType = 'pdf'
        // this.loadPDF('./' + dotName)
        this.getNumPages('./' + dotName)
      } else if (dotName.includes('docx') || dotName.includes('doc')) {
        this.fileType = 'docx' || 'doc'
        this.getDocxData('./' + dotName)
      } else if (dotName.includes('xlsx')) {
        this.fileType = 'xlsx'
        this.getXlxsData('./' + dotName)
      }
    },
    getNumPages (url) {
      const loadingTask = pdf.createLoadingTask(url)
      loadingTask.promise.then(pdf => {
        this.pdfSrc = loadingTask
        this.numPages = pdf.numPages
        this.loading = false
      }).catch((err) => {
        this.loading = false
        console.error(err)
      })
    },
    csv2table (csv, fileName) {
      var html = '';
      let str = csv;
      let startNo = str.indexOf(`<table>`);
      let endNo = str.indexOf(`</table>`);
      str = str.substring(startNo, endNo + `</table>`.length);
      str = str.replace(/(\b(?:id|t|v)=".*?")/g, '');
      if (fileName == './航站三字码对应表.xlsx') {
        str = str.replace('<table>', `<table border="1" style="border-collapse:collapse; width: 100%; border:1px solid #666666;line-height: 2;">`);
      } else {
        str = str.replace('<table>', `<table class="table" border="1" style="border-collapse:collapse; width: 100%; border:1px solid #666666;line-height: 2;">`);
      }
      html += str;
      return html;
    },
    apendTable (str) {
      let html = '';
      let startNo = str.indexOf(`<tr>`);
      let endNo = str.indexOf(`</tr>`);
      let thead = str.substring(startNo, endNo);
      let theadh = thead.replaceAll('td', 'th')
      str = str.replace(`${thead}</tr>`, `<thead>${theadh}</tr></thead>`)
      html += str;
      return html;
    }
  },
}
</script>

<style lang="scss" scoped>
.home {
  height: calc(100vh - 80px);
  padding: 24px;
  &_content {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    ::v-deep &_xlsx {
      .table {
        tr {
          th {
            &:last-child {
              display: none;
            }
          }
          td {
            &:last-child {
              display: none;
            }
          }
        }
      }
      table {
        table-layout: fixed;
        thead {
          text-align: center;
          tr {
            // height: 50px;
            th {
              position: sticky;
              top: 0;
              background: #fff;
            }
          }
        }
        tbody {
          text-align: center;
        }
      }
    }
  }
}
</style>