欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中如何實(shí)現(xiàn)在線預(yù)覽word文件、excel文件

 更新時間：2022年07月21日 10:27:35   作者：普通網(wǎng)友  
這篇文章主要介紹了Vue中如何實(shí)現(xiàn)在線預(yù)覽word文件、excel文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

實(shí)現(xiàn)效果

一、查看word

1.引用mammoth.js

（1）安裝 npm install --save mammoth

npm install --save mammoth

（2）引入import mammoth from “mammoth”;

import mammoth from "mammoth";

2. 頁面布局

<!-- word查看詳情 -->
<div id="wordView" v-html="vHtml"/></div>

3. 請求URL顯示數(shù)據(jù)

data() {
  return {
    vHtml: "",
    wordURL:''  //文件地址，看你對應(yīng)怎末獲取、賦值
  };
},
created() {
  // 具體函數(shù)調(diào)用位置根據(jù)情況而定
  this.readExcelFromRemoteFile(this.wordURL);
}
methods：{
    // 在線查看word文件
    readExcelFromRemoteFile: function (url) {
      var vm = this;
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, 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();
    },
}

二、查看Excel

1.引用sheetjs

（1）安裝 npm install --save xlsx

npm install --save xlsx

（2）引入import XLSX from “xlsx”;

import XLSX from "xlsx";

2.頁面布局

<!-- excel查看詳情 -->
  <div id="table" v-if="!isWord">
    <el-table :data="excelData" style="width: 100%">
      <el-table-column
         v-for="(value, key, index) in excelData[2]"
         :key="index"
          :prop="key"
          :label="key"
      ></el-table-column>
     </el-table>
 </div>

3.請求URL顯示數(shù)據(jù)

data() {
  return {
    excelData: [],
    workbook: {},
    excelURL: "", //文件地址，看你對應(yīng)怎末獲取、賦值
  };
},
created() {
  // 具體函數(shù)調(diào)用位置根據(jù)情況而定
  this.readWorkbookFromRemoteFile(this.wordURL);
}
methods：{
    // 在線查看excel文件
    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", 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.excelData = XLSX.utils.sheet_to_json(worksheet);
      console.log(this.excelData);
    },
}

三、項(xiàng)目應(yīng)用：根據(jù)詳情后綴分情況顯示word、excel

1. 效果展示

場景說明： 點(diǎn)擊查看按鈕，吊起彈框展示數(shù)據(jù)

2. 頁面布局

<div :style="'border:1px dashed;width:100%;height:300px;overflow:scroll'">
  <!-- word查看詳情 -->
  <div id="wordView" v-html="vHtml" v-if="isWord" />
  <!-- excel查看詳情 -->
  <div id="table" v-if="!isWord">
     <el-table :data="excelData" style="width: 100%">
        <el-table-column
            v-for="(value, key, index) in excelData[2]"
            :key="index"
            :prop="key"
            :label="key"
         ></el-table-column>
     </el-table>
  </div>
  <!-- <div v-else></div> -->
</div>

3.調(diào)用函數(shù)展示數(shù)據(jù)

根據(jù)row中文件后綴判斷使用哪種形式

data() {
  return {
    // 顯示word excel
    vHtml: "",
    wordURL: "",
    isWord: "",
    fileType: "", // 1 word(.docx .doc) 2 excel(.xlsx .xsl) 3 其他()
    excelData: [],
    workbook: {},
    excelURL: "", //文件地址，看你對應(yīng)怎末獲取、賦值
  };
},
methods：{
   // 查看詳情=列表操作
   // <el-button type="text" @click="handleDetail(scope.row)" v-if="!scope.row.havePassword">查看</el-button>
   handleDetail(row) {
      console.log(row, "查看row");
      this.tzOpen = true;
      this.detailForm = row;
      if (row.suffix === "docx" || row.suffix === "doc") {
        // this.fileType = 1;
        this.isWord = 1;
        // this.wordURL = row.url;
        this.readExcelFromRemoteFile(row.url);
      } else if (row.suffix === "xlsx" || row.suffix === "xls") {
        // this.fileType = 2;
        this.isWord = 0;
        // this.excelURL = row.url;
        this.readWorkbookFromRemoteFile(row.url);
      }
    },
// 在線查看excel文件
    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", workbook);
          var sheetNames = workbook.SheetNames; // 工作表名稱集合
          _this.workbook = workbook;
          _this.getTable(sheetNames[0]);
        }
      };
      xhr.send();
    },
    // 在線查看word文件
    readExcelFromRemoteFile: function (url) {
      var vm = this;
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, 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();
    },
    getTable(sheetName) {
      console.log(sheetName);
      var worksheet = this.workbook.Sheets[sheetName];
      this.excelData = XLSX.utils.sheet_to_json(worksheet);
      console.log(this.excelData);
    },
}
#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: 100%;
  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;
  }
}

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。 

相關(guān)文章

  • vue實(shí)現(xiàn)驗(yàn)證碼倒計時按鈕

    vue實(shí)現(xiàn)驗(yàn)證碼倒計時按鈕

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證碼倒計時按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • element中async-validator異步請求驗(yàn)證使用

    element中async-validator異步請求驗(yàn)證使用

    本文主要介紹了element中async-validator異步請求驗(yàn)證使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • vue 指令和過濾器的基本使用(品牌管理案例)

    vue 指令和過濾器的基本使用(品牌管理案例)

    這篇文章主要介紹了vue-品牌管理案例-指令和過濾器的相關(guān)知識，文中通過代碼給大家介紹了過濾器的基本使用,需要的朋友可以參考下
    2019-11-11
  • vue中el-table合并列的具體實(shí)現(xiàn)

    vue中el-table合并列的具體實(shí)現(xiàn)

    本文主要介紹了vue中el-table合并列的具體實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • vue3封裝一個帶動畫的關(guān)閉按鈕示例詳解

    vue3封裝一個帶動畫的關(guān)閉按鈕示例詳解

    這篇文章主要為大家介紹了vue3封裝一個帶動畫的關(guān)閉按鈕示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • vue.js中使用微信掃一掃解決invalid signature問題(完美解決)

    vue.js中使用微信掃一掃解決invalid signature問題(完美解決)

    這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問題(推薦),本文通過實(shí)例代碼給出解決方法，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-04-04
  • 一文教會你vue中使用async和await

    一文教會你vue中使用async和await

    async和await作為異步函數(shù),語法很簡單,就是在函數(shù)前面加上async 關(guān)鍵字,來表示它是異步的,下面這篇文章主要給大家介紹了如何通過一文教會你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • Vue組件庫Element-常見組件表格示例代碼

    Vue組件庫Element-常見組件表格示例代碼

    對于Element組件的使用,最主要的就是明確自己想要達(dá)到的效果,從官網(wǎng)中將對應(yīng)代碼復(fù)制粘貼即可,最重要的是要讀懂不同組件官網(wǎng)中提供的文檔,以便實(shí)現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫Element-常見組件表格,感興趣的朋友一起看看吧
    2023-10-10
  • Vue中v-bind原理深入探究

    Vue中v-bind原理深入探究

    這篇文章主要給大家分享了 v-bind的使用和注意需要注意的點(diǎn)，下面文章圍繞 v-bind指令的相關(guān)資料展開內(nèi)容且附上詳細(xì)代碼 需要的小伙伴可以參考一下，希望對大家有所幫助
    2022-10-10
  • 通過實(shí)例講解vue組件之間的傳值

    通過實(shí)例講解vue組件之間的傳值

    通過Vuex共享數(shù)據(jù),官方給出的跨多組件傳遞數(shù)據(jù)的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue組件之間傳值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09

最新評論