Vue中如何实现在线预览word文件、excel文件

目录
  • 实现效果
  • 一、查看word
    • 1.引用mammoth.js
    • 2. 页面布局
    • 3. 请求URL显示数据
  • 二、查看Excel
    • 1.引用sheetjs
    • 2.页面布局
    • 3.请求URL显示数据
  • 三、项目应用:根据详情后缀分情况显示word、excel
    • 1. 效果展示
    • 2. 页面布局
    • 3.调用函数展示数据

实现效果

一、查看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显示数据

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);
      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;
  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)

    目录 前言 一.预览word文件 1.安装 npm 依赖 2.预览在线地址文件 3.预览本地文件 二.预览excel表格 1.安装依赖 2.预览在线表格 三.pdf预览 1.安装依赖vue-pdf 2.在需要的页面注册 3.使用 4.加载本地pdf文件 5.解决pdf使用自定义字体预览和打印乱码问题:pdfjsWrapper.js 总结 前言 之前做PDF预览一直用的pdf.js,这次没有太多附加需求比较简单简,所以决定用vue-pdf这个组件,虽然说它没有原生那样强大,但已经满足常用的需求了,

  • vue预览 pdf、word、xls、ppt、txt文件的实现方法

    目录 说下方法 1. 在页面内加个 iframe 2. word.xls.ppt这些文件 3. 最终效果 首先说下为什么要分享:网上教的都是特么的啥玩意!!!真特么垃圾,各种方法说不到点子上!!!真是特么气死我了!还有那群只会复制粘贴的帖子!自己都不做测试就会复制粘贴别人的,然后就发出来误人子弟,我真是醉了! 说下方法 1. 在页面内加个 iframe src地址即为要展示的文件地址 这里我用的是 elementui ,你们如果用其他的也是用iframe就得了 2. word.xls.ppt这些

  • vue实现在线预览office文件的示例代码

    最近在做电子档案,后端提供了文件的华为云的oss链接.已经实现了点击下载文件的功能.但是呢,他们又希望常规的文件,可以直接点击预览,不需要下载. 按道理说,做文件的在线预览,买个第三方服务什么的,后端部署一下服务,前端对接一下,就通通搞定. 顶不住第三方基本上是要money的.那不想掏money,还有什么解决方法呢. 方法一 用微软的office online进行在线预览 https://view.officeapps.live.com/op/view.aspx?src=文件地址 例:https

  • vue使用Office Web实现线上文件预览

    目录 正文 什么是 Office Web 查看器? vue预览word,excel,pptx,pdf文件 正文 我们在浏览器阅读word,excel,pptx的offic文件,可以使用微软的开发接口,一个阅读器Office Web 什么是 Office Web 查看器? 它是一种创建 Office Web Viewer 链接的服务.Office Web Viewer 链接可在浏览器中打开 Word.PowerPoint 或 Excel 文件,否则这些文件将被下载.您可以轻松地将下载链接转换为 O

  • Vue中如何实现在线预览word文件、excel文件

    目录 实现效果 一.查看word 1.引用mammoth.js 2. 页面布局 3. 请求URL显示数据 二.查看Excel 1.引用sheetjs 2.页面布局 3.请求URL显示数据 三.项目应用:根据详情后缀分情况显示word.excel 1. 效果展示 2. 页面布局 3.调用函数展示数据 实现效果 一.查看word 1.引用mammoth.js (1)安装 npm install --save mammoth npm install --save mammoth (2)引入import

  • 直接在线预览Word、Excel、TXT文件之ASP.NET

    具体实现过程不多说了,直接贴代码了. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Microsoft.Office.Interop.Excel; using System.Diagnostics; using System.IO; using Microsoft.Office.Interop.Word; namesp

  • vue项目实现github在线预览功能

    最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好. 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,并且项目也已经上传到了 github 问题1 当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件 我们先尝试在浏

  • Asp.Net在线预览Word文档的解决方案与思路详解

    目录 项目特点 解决方案 大致思路:先将Word文档转换Html,再预览Html. 1.Word文档转Html 2.预览 前几天有个老项目找到我,有多老呢?比我工作年限都长,见到这个项目我还得叫一声前辈. 这个项目目前使用非常稳定,十多年了没怎么更新过,现在客户想加一个小功能:在线预览Word文档. 首先想到的是用第三方的服务,例如WPS的开放平台. 刚看完文档,客户来了句,要一次性的哦,后续再付费的通通不要. 得嘞,换其他方案吧. 项目特点 Asp.Net不带Core,.NET Framewo

  • Asp.net实现直接在浏览器预览Word、Excel、PDF、Txt文件(附源码)

    1.功能说明 输入文件路径,在浏览器输出文件预览信息,经测试360极速(Chrome).IE9/10.Firefox通过 2.分类文件及代码说明 DemoFiles 存放可测试文件 Default.aspx  启动页 ExcelPreview.cs  Excel预览类 public static void Priview(System.Web.UI.Page p, string inFilePath, string outDirPath = "") { Microsoft.Office

  • vue实现在线预览pdf文件和下载(pdf.js)

    最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径: pdf.js (2)将下载构建后的插件放到文件中public(vue/cli 3.0) (3)在vue文件中直接使用,贴上完整代码 <template> <div class="wrap"> <iframe :src=

  • Android实现pdf在线预览或本地预览的方法

    最近项目中需要使用在线预览pdf,并要能实现自动播放,我想这样的需求无论如何来说都是很操蛋的 由于本人水平有限,最后讨论将项目需求改成将pdf下载到本地再实现自动播放. 接下来总结下目前能够实现pdf阅读的方案,开发当中需要根据实际需求去选择相应的方案. 1.使用Google doc支持来展示word,excel,pdf,txt(WebView方式在线预览): <span style="font-size:18px;">WebView urlWebView = (WebVi

  • Vue-pdf实现在线预览PDF文件

    前言 在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现. 安装依赖 npm install --save vue-pdf 相关参数 参数介绍: url :pdf 文件的路径,可以是本地路径,也可以是在线路径. page: 当前显示的页数,比如第一页page=1 rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转. progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了. page-

  • asp.net实现word文档在线预览功能的方法

    本文实例讲述了asp.net实现word文档在线预览功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方式:office文档转html,再在浏览器里面在线浏览 1.首先引入com组件中office库,然后在程序集扩展中引入word的dll 2.将Microsoft.Office.Interop.Word的嵌入互操作类型设置为 false,如图 3.主要代码: 复制代码 代码如下: using System; using System.Collections.Generic; using

随机推荐

其他