【Vue项目实践】实现在线预览word文件、excel文件

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.页面布局

---

<el-table-column

v-for=“(value, key, index) in excelData[2]”

:key=“index”

:prop=“key”

:label=“key”

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. 页面布局

---

<el-table-column

v-for=“(value, key, index) in excelData[2]”

:key=“index”

:prop=“key”

:label=“key”

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”>查看

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) {

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

篇幅有限，仅展示部分内容

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

篇幅有限，仅展示部分内容

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-CwIKsply-1712878043115)]