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

最新推荐文章于 2024-05-15 19:30:08 发布

2401_84092903

最新推荐文章于 2024-05-15 19:30:08 发布

阅读量973

点赞数 19

分类专栏：程序员文章标签： vue.js word excel

本文链接：https://blog.csdn.net/2401_84092903/article/details/138518618

版权

程序员专栏收录该内容

275 篇文章 0 订阅

订阅专栏

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 :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>




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\. 效果展示

========



![](https://img-blog.csdnimg.cn/76734443fb9c42f4a8b5ab824109a036.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP55m9UmFjaGVs,size_20,color_FFFFFF,t_70,g_se,x_16)



场景说明： 点击查看按钮，吊起弹框展示数据



2\. 页面布局

--------

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




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

          vm.$nextTick(() => {

            // document.querySelector("#wordView").innerHTML =

            //   resultObject.value;

            vm.vHtml = resultObject.value;

          });

        });

    }

  };

  xhr.send();

},

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-kI3cTto3-1715042802759)]

[外链图片转存中…(img-AL59iOHM-1715042802760)]

[外链图片转存中…(img-q59chJ5Z-1715042802760)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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

2401_84092903

关注

19
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【Vue项目实践】实现在线预览word文件、excel文件(1)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫