vue word预览，excel预览，pdf预览

淩亂°似流年 2022-11-15 11:13 702阅读 0赞

### 一、word预览–mammoth.js ###

安装：`npm install --save mammoth`

**tip：只能预览.docx文件**

word.vue:

<template>
      <div>
        <div id="wordView" v-html="vHtml" />
      </div>
    </template>
    
    <script>
    import mammoth from "mammoth";
    export default {
      name: "word",
      data() {
        return {
          vHtml: "",
          wordURL:''//文件地址
        };
      },
      created() {
        let vm=this;
        vm.wordURL = this.$route.query.wordURL;
    
        const xhr = new XMLHttpRequest();
        xhr.open("get", this.wordURL, true);
        xhr.responseType = "arraybuffer";
        xhr.onload = function () {
          if (xhr.status == 200) {
            mammoth
              .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
              .then(function (resultObject) {
                vm.$nextTick(() => {
                  // document.querySelector("#wordView").innerHTML =
                  //   resultObject.value;
                  vm.vHtml=resultObject.value;
                });
              });
          }
        };
        xhr.send();
      },
      methods: {
      },
    };
    </script>

跳转带的参数：

if (row.fileType == 3) {
             //word
             let routeData = this.$router.resolve({
               path: "/word",
               query: {
                 wordURL: response.data,
               },
             });
             window.open(routeData.href, "_blank"); 
           } else if (row.fileType == 5) {
             //pdf
             window.open(response.data);
           } else if (row.fileType == 4) {
             //excel
             let routeData = this.$router.resolve({
               path: "/excel",
               query: {
                 excelURL: response.data,
               },
             });
             window.open(routeData.href, "_blank");
           }

### 二、excel预览–sheetjs ###

安装：`npm install --save xlsx`

excel.vue：

<template>
      <div id="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            v-for="(value,key,index) in tableData[2]"
            :key="index"
            :prop="key"
            :label="key"
          ></el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    import XLSX from "xlsx";
    export default {
      data() {
        return {
          tableData: [],
          workbook: {},
          excelURL: "",
        };
      },
      mounted() {
        this.excelURL = this.$route.query.excelURL;
        this.readWorkbookFromRemoteFile(this.excelURL);
      },
      methods: {
        readWorkbookFromRemoteFile: function (url) {
          var xhr = new XMLHttpRequest();
          xhr.open("get", url, true);
          xhr.responseType = "arraybuffer";
          let _this = this;
          xhr.onload = function (e) {
            if (xhr.status === 200) {
              var data = new Uint8Array(xhr.response);
              var workbook = XLSX.read(data, { type: "array" });
              console.log(workbook);
    
              var sheetNames = workbook.SheetNames; // 工作表名称集合
              _this.workbook = workbook;
              _this.getTable(sheetNames[0]);
            }
          };
          xhr.send();
        },
        getTable(sheetName) {
          console.log(sheetName);
          var worksheet = this.workbook.Sheets[sheetName];
          this.tableData = XLSX.utils.sheet_to_json(worksheet);
          console.log(this.tableData);
        },
      },
    };
    </script>
    
    <style lang="stylus" scoped>
    #table {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
      margin-top: 60px;
      border: 1px solid #ebebeb;
      padding: 20px;
      width: 80%;
      margin: 20px auto;
      border-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
      border-radius: 10px;
      overflow: scroll;
      height: 100%;
    
      .tab {
        margin: 0 0 20px 0;
        display: flex;
        flex-direction: row;
      }
    }
    </style>
    
    <style scoped>
    .is-active {
      background-color: #409eff;
    }
    span {
      background-color: red;
    }
    </style>

### 三、pdf预览——vue-pdf ###

安装：`npm install --save vue-pdf`

<template>
        <div>
              <pdf ref="pdf" :src="pdfUrl" style="width: 100%;" />
        </div>
    </template>
    <script>
    import pdf from 'vue-pdf'
    export default {
        data(){
            return: {
                pdfUrl: '',
            }
        }
        created() {
           const path = 'test.pdf'// 你获取到的pdf路径
           // pdf.createLoadingTask解决文件件跨域问题
           this.pdfUrl = pdf.createLoadingTask(path)
      },
    }
    </script>