3. 请求URL显示数据
data() {
return {
vHtml: "",
wordURL:'' //文件地址,看你对应怎末获取、赋值
};
},
created() {
// 具体函数调用位置根据情况而定
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显示数据
data() {
return {
excelData: [],
workbook: {},
excelURL: "", //文件地址,看你对应怎末获取、赋值
};
},
created() {
// 具体函数调用位置根据情况而定
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);
},
}
三、项目应用:根据详情后缀分情况显示word、excel
============================
1. 效果展示
========
场景说明: 点击查看按钮,吊起弹框展示数据
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.调用函数展示数据
根据row中文件后缀判断使用哪种形式
data() {
return {
// 显示word excel
vHtml: "",
wordURL: "",
isWord: "",
fileType: "", // 1 word(.docx .doc) 2 excel(.xlsx .xsl) 3 其他()
excelData: [],
workbook: {},
excelURL: "", //文件地址,看你对应怎末获取、赋值
};
},
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);
# 最后
**自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**
**深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。**
**因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/7afacfa25220618581daaa7e7c1cbb71.jpeg)
![](https://img-blog.csdnimg.cn/img_convert/0d06f982b06d404b93c36b193dfc2198.png)
![](https://img-blog.csdnimg.cn/img_convert/e8110cea98aa951fe7847af8380e5c96.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**
[**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!**](https://bbs.csdn.net/topics/618191877)
**由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!**
升又不知道该从何学起的朋友,同时减轻大家的负担。**
[外链图片转存中...(img-kLgr8CTT-1715772596099)]
[外链图片转存中...(img-Wo7N4SQD-1715772596099)]
[外链图片转存中...(img-iGxGY99E-1715772596100)]
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**
[**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!**](https://bbs.csdn.net/topics/618191877)
**由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!**