Vue中如何實現(xiàn)在線預(yù)覽word文件、excel文件
更新時間：2022年07月21日 10:27:35 作者：普通網(wǎng)友
這篇文章主要介紹了Vue中如何實現(xiàn)在線預(yù)覽word文件、excel文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
實現(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);
},
}
三、項目應(yīng)用：根據(jù)詳情后綴分情況顯示word、excel
1. 效果展示
場景說明： 點擊查看按鈕，吊起彈框展示數(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue中如何實現(xiàn)pdf文件預(yù)覽的方法
- vue實現(xiàn)在線預(yù)覽pdf文件和下載（pdf.js）
- vue使用pdf.js預(yù)覽pdf文件的方法
- vue3如何實現(xiàn)PDF文件在線預(yù)覽功能
- vue預(yù)覽 pdf、word、xls、ppt、txt文件的實現(xiàn)方法
- Vue3 + Vue-PDF 實現(xiàn)PDF 文件在線預(yù)覽實戰(zhàn)
- Vue實現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
- Vue實現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
- vue3中各種類型文件進(jìn)行預(yù)覽功能實例
- vue中實現(xiàn)支持txt,docx,xlsx,mp4格式文件預(yù)覽功能(純前端)
相關(guān)文章
vuejs+element UI table表格中實現(xiàn)禁用部分復(fù)選框的方法
今天小編就為大家分享一篇vuejs+element UI table表格中實現(xiàn)禁用部分復(fù)選框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
vue3鼠標(biāo)經(jīng)過顯示按鈕功能的實現(xiàn)
本篇文章介紹了如何使用 Vue3 實現(xiàn)一個鼠標(biāo)經(jīng)過顯示按鈕的效果,我們使用了 Vue3 的 Composition API 來創(chuàng)建響應(yīng)式的數(shù)據(jù),并使用了?@mouseover?和?@mouseleave?事件來監(jiān)聽鼠標(biāo)的移入和移出事件,感興趣的朋友一起看看吧2024-04-04
今天小編就為大家分享一篇vue二級菜單導(dǎo)航點擊選中事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3的ref,computed,reactive和toRefs你都了解嗎
這篇文章主要為大家詳細(xì)介紹了vue3的ref,computed,reactive和toRefs，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析
這篇文章主要為大家介紹了vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vuex是一個專門為vue.js設(shè)計的狀態(tài)管理模式，并且也可以使用devtools進(jìn)行調(diào)試。2017-05-05
這篇文章主要為大家詳細(xì)介紹了vue+el-menu實現(xiàn)菜單欄無限多層級分類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了詳解vuejs之v-for列表渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
在vue2中提供了.sync修飾符,但是在vue3中不再支持.sync,取而代之的是v-model,本文給大家介紹在Vue2中v-model和.sync區(qū)別,感興趣的朋友一起看看吧2023-10-10