vue2 预览

html

<el-button type="text" size="small" @click="watch(scope.row)" icon="el-icon-view">预览</el-button>


  <el-dialog :title="fileTitle" :visible.sync="dialogFileVisible" width="70%">
      <div class="file_content" v-loading="fileLoading" ref="pdfContent">
        <div v-show="!fileLoading">
          <div v-if="fileType === '1' || fileType === '3' || fileType === '6'">
            <PDF style="width:100%" v-for="i in pageNum" :key="i" :page="i" ref="pdf" :src="fileSrc" />
          </div>
          <div v-if="fileType === '2'" class="docx" ref="docxRef" />
          <div v-if="fileType === '4'" ref="excelRef" class="excelRef" />
        </div>
        <!--        <div v-if="fileType==='6'" ref="docRef" class="doc">
          <VueDocPreview :value="fileSrcData" type="office" />
        </div>-->
      </div>
      <el-backtop target=".el-dialog__body"></el-backtop>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFileVisible = false">取 消</el-button>
      </span>
    </el-dialog>

js

//下载引入插件
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import PDF from 'vue-pdf'
import * as XLSX from 'xlsx'
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
var docx = require('docx-preview')
window.JSZip = require("jszip");
//方法
 //预览
    watch(row) {
      this.fileType = '999'
      console.log(row);
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      //获取token
      getDownloadToken().then(res => {
        if (res && res.code == 200) {
          this.fileType = row.fileType
          const fileSrc = process.env.VUE_APP_BASE_API + "/xxxxxx/download/resource?resource=" + row.filepath
          this.fileSrcData = fileSrc
          this.fileTitle = row.filename
          if (row.fileType === '1') {
            this.fileSrc = ''
            this.fileLoading = true
            this.fileSrc = PDF.createLoadingTask({ url: fileSrc, CMapReaderFactory })
            this.fileSrc.promise.then(pdf => {
              this.pageNum = pdf.numPages
              this.fileLoading = false
            })
            loading.close()
            this.dialogFileVisible = true
            return
          }

          if (row.fileType === '2' || row.fileType === '6') {
            this.fileLoading = true
            //this.dialogFileVisible = true
            //console.log(document.getElementsByClassName('docx')[0]);
            this.dialogFileVisible = true
            this.$nextTick(() => {
              this.$refs.docxRef.innerHTML = ''
            })
            downEnv(row.filepath).then(res => {
              docx.renderAsync(res, this.$refs.docxRef).then((r1, r2) => {
                this.fileLoading = false
              })
            })
            loading.close()
            return;
          }
          if (row.fileType === '3') {
            this.fileLoading = true
            pptToPDF({ resource: row.filepath }).then(response => {
              const { msg } = response
              console.log(response, "777777");
              //this.dialogFileVisible = true
              const fileSrc1 = process.env.VUE_APP_BASE_API + "/common/download/resource?resource=" + msg
              this.fileSrc = PDF.createLoadingTask({ url: fileSrc1, CMapReaderFactory })
              console.log(this.fileSrc, "888888888");
              this.fileSrc.promise.then(pdf => {
                console.log(pdf, "99999999999999999999");
                this.pageNum = pdf.numPages
                this.fileLoading = false
              })
                .catch(err => {
                  console.log(err);
                  // this.fileLoading = false
                  // this.dialogFileVisible = false
                  // loading.close()
                  // this.$message("文件为空不可以浏览")
                })
            })
            loading.close()
            this.dialogFileVisible = true
            return;
          }
          if (row.fileType === '5') {
            this.imgList = []
            this.picSrc = fileSrc
            this.imgList.push(fileSrc)

            this.$refs.imgRef.showViewer = true
            loading.close()
            return;
          }
          if (row.fileType === '4') {
            //this.dialogFileVisible = true
            let binary = "";
            downEnv(row.filepath).then(res => {
              const bytes = new Uint8Array(res)
              const length = bytes.byteLength;
              for (let i = 0; i < length; i++) {
                binary += String.fromCharCode(bytes[i]);
              }
              const wb = XLSX.read(binary, { type: "binary" });
              const wsname = wb.SheetNames[0];
              const ws = wb.Sheets[wsname];
              const HTML = XLSX.utils.sheet_to_html(ws);
              if (this.$refs.excelRef) {
                this.$nextTick(() => {
                  //this.$refs.docxRef.innerHTML = ''
                  this.$refs.excelRef.innerHTML = HTML;
                })
              }
            })
            loading.close()
            this.dialogFileVisible = true
            return;
          }
          // if (row.documentType==='6') {
          //   loading.close()
          //   this.dialogFileVisible = true
          //   return;
          // }
          //直接下载
          this.downloadFiles(row)
          loading.close()
        }
      })
    },