【无标题】

VUE预览.xls .docx .pdf文件

.docx

    <h2>word本地文件预览</h2>
    <div class="my-component" ref="preview">
      <input type="file" @change="preview" ref="file" />
    </div>

import { renderAsync } from 'docx-preview'
window.JSZip = require('jszip')

 preview(e) {
      renderAsync(this.$refs.file.files[0], this.$refs.preview)
    },

.xls

<h2>excel本地文件预览</h2>
    <div class="excel">
      <input type="file" @change="upload" />
    </div>

import XLSX from 'xlsx'

upload(e) {
    const reader = new FileReader()
    var file = e.target.files[0]
    reader.readAsArrayBuffer(file) //将文件对象读取为arraybuffer类型的数据
    reader.onload = (event) => {
      var data = new Uint8Array(event.target.result)
      console.log(data)
      var workbook = XLSX.read(data, { type: 'array' })

      var sheetNames = workbook.SheetNames // 工作表名称集合
      var worksheet = workbook.Sheets[sheetNames[0]]
      this.excelView = XLSX.utils.sheet_to_html(worksheet) // 渲染
      this.$nextTick(function() {
        // DOM加载完毕后执行，解决HTMLConnection有内容但是length为0问题。
        this.setStyle4ExcelHtml()
      })
    
      // var excelData = XLSX.utils.sheet_to_json(worksheet)
      // this.data = excelData
    }
  },

  // 设置Excel转成HTML后的样式
  setStyle4ExcelHtml() {
    const excelViewDOM = document.getElementById('excelView')
    if (excelViewDOM) {
      const excelViewTDNodes = excelViewDOM.getElementsByTagName('td') // 获取的是HTMLConnection
      if (excelViewTDNodes) {
        const excelViewTDArr = Array.prototype.slice.call(excelViewTDNodes)
        for (const i in excelViewTDArr) {
          const id = excelViewTDArr[i].id // 默认生成的id格式为sjs-A1、sjs-A2......
          if (id) {
            const idNum = id.replace(/[^0-9]/gi, '') // 提取id中的数字，即行号
            if (idNum && (idNum === '1' || idNum === 1)) {
              // 第一行标题行
              excelViewTDArr[i].classList.add('class4Title')
            }
            if (idNum && (idNum === '2' || idNum === 2)) {
              // 第二行表头行
              excelViewTDArr[i].classList.add('class4TableTh')
            }
          }
        }
      }
    }
  },

pdf

       <!-- pdf分页展示 -->
       <pdf :page="currentPage" src="/static/pdf2.pdf" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"></pdf>
      {{ currentPage }} / {{ pageCount }}
      <button v-if="this.currentPage > 1" @click="last()">last</button>
      <button v-if="this.currentPage < this.pageCount" @click="next()">next</button>
    </div>
    <!-- pdf展示所有页面 -->
     <pdf v-for="i in numPages" :key="i" :src="src" :page="i"></pdf> 

import pdf from 'vue-pdf' //pdf
var loadingTask = pdf.createLoadingTask('/static/pdf2.pdf') //该方法用来显示所有pdf页面

data() {
    return {
      currentPage: 0,
      pageCount: 0,
      numPages: undefined,
      src: loadingTask,
      excelView: null,
    }
  },

mounted() {
    //pdf总页数
    this.src.promise.then((pdf) => {
      this.numPages = pdf.numPages
    })
  },
methods: {
    last() {
      if (this.currentPage !== 1) {
        this.currentPage--
      }
    },
    next() {
      this.currentPage++
    },