Vue做docx/pdf/excle 文件预览

最忆是

16126人浏览 · 2023-11-09 18:17:18

最忆是 · 2023-11-09 18:17:18 发布

1. excle预览

方法一：使用xlsx插件

① 引入xlsx

npm install xlsx

页面引用依赖


import * as XLSX from 'xlsx'

使用这种引用可以解决import XLSX from 'xlsx' 这种引入方式中版本不一致的问题。

②代码

查看的excle表

获取表格中的内容

//调用事件
clickView(val) {
      this.excelURL = val.tablebudget;
      this.readWorkbookFromRemoteFile(this.excelURL);
    },
    // 在线查看excel文件
    readWorkbookFromRemoteFile(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" });
          var sheetNames = workbook.SheetNames; // 工作表名称集合
          _this.workbook = workbook;
          _this.getTable(sheetNames[0]);
        }
      };
      xhr.send();
    },
    getTable(sheetName) {
      var worksheet = this.workbook.Sheets[sheetName];
      this.excelData = XLSX.utils.sheet_to_json(worksheet);
      console.log(2222, this.excelData);
      this.oopen = true;
    },

取到表格中的内容

重新生成excle表

<el-dialog title="预览" append-to-body :visible.sync="oopen">
      <el-table
        :data="excelData"
        border
        stripe
        :header-cell-style="{ background: '#F5F4F7' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60"
          :resizable="false"
          align="center"
        />
        <el-table-column
          v-for="(value, key, index) in excelData[0]"
          :key="index"
          :prop="key"
          :label="key"
        />
      </el-table>
    </el-dialog>

这个是重新生成的表

这个代码我使用了本地的excle表，成功了，但是可以看到去表中的数据只取了第一个sheet中的内容，其他得到表的内容没有取到。

如果使用的excle表只有一个sheet的话可以使用这个方法，但感觉日常使用场景下的excle应该集成了好几个表格，可以使用，但是有限制。应该有解决方法，我没有去尝试。

方法二：1. 使用iframe 组件和微软官方的预览地址

2. 使用XDOC文档预览服务

1. 使用iframe 组件和微软官方的预览地址

弹窗

<el-dialog
      :close-on-click-modal="true"
      title="文件预览"
      type="primary"
      :visible.sync="previewDialog"
      width="80%"
      left
    >
      <iframe
        :src="attachmentSrc"
        frameborder="0"
        width="100%"
        height="800"
      ></iframe>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-on:click="previewDialog = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>

方法

clickView(val) {
      this.attachment = val.tablebudget;
      console.log("this.attachment  :>> ", this.attachment);
      this.previewFile(this.attachment);
    },
    previewFile(attachment) {
      // 根据文件格式显示预览内容
      const fileExtension = attachment.split(".").pop().toLowerCase();
      console.log("object :>> ", fileExtension);
      if (fileExtension === "xlsx" || fileExtension === "docx") {
        this.attachmentSrc =
          "https://view.officeapps.live.com/op/view.aspx?src=" + attachment;

        console.log("this.attachmentSrc :>> ", this.attachmentSrc);
      } else {
        this.attachmentSrc = attachment;
      }
      this.previewDialog = true;
    },

获取文件类型

const fileExtension = attachment.split(".").pop().toLowerCase();

当是xlsx文件或者docx文件时，

微软解析地址：https://view.officeapps.live.com/op/view.aspx?src= 要预览的文件地址

pdf或者txt就直接打开

文件预览情况

使用 https://view.officeapps.live.com/op/view.aspx?src= 后面加文件地址，可以在浏览器直接打开，谷歌、360、搜狐、Edge都是支持的

问题在于：

1. 必须使用域名地址，IP地址不支持

2. 文件名不能有汉字，必须进行处理。

3. 文件是可下载的

2. 使用XDOC文档预览服务（XDOC文档预览服务）

使用XDOC文档预览服务和使用微软解析地址的方法一样，就是前面的地址不一样

https://view.xdocin.com/view?src= 要预览的文件地址

clickView(val) {
      this.attachment = val.tablebudget;
      console.log("this.attachment  :>> ", this.attachment);
      this.previewFile(this.attachment);
    },
    previewFile(attachment) {
        // XDOC文档预览服务
        this.attachmentSrc = "https://view.xdocin.com/view?src=" + attachment;

      this.previewDialog = true;
    },

弹窗

<el-dialog
      :close-on-click-modal="true"
      title="文件预览"
      type="primary"
      :visible.sync="previewDialog"
      width="80%"
      left
    >
      <iframe
        :src="attachmentSrc"
        frameborder="0"
        width="100%"
        height="800"
      ></iframe>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-on:click="previewDialog = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>

打开情况

excle

word

这个方法真的很不错的，各种格式都支持，对于文件的地址不做要求，文件名称也没有要求，很实用。（还是被pass掉了，担心后期的支持，是否收费什么的）

方法三：使用vue-office组件

安装插件

npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi

//docx文档预览组件
npm install @vue-office/docx vue-demi

//excel文档预览组件
npm install @vue-office/excel vue-demi

//pdf文档预览组件
npm install @vue-office/pdf vue-demi

vue的版本是2.6的还需要安装

@vue/composition-api

我昨天做的功能，后面做成了组件，我把组件的代码放这吧

里面的做法是父组件传了文件的uuid，在组件内接受uuid，并调用接口，获取文件的路径，在获取文件格式，通过文件格式来判断调用的接口。

接受文件id，通过id调接口获取路径这一步是不需要的，我需要这么使用。可以参考一下，这部分正常使用可以去掉。

<template>
  <div class="app-container-temp">
    <div style="width: 100%; height: 840px; overflow: hidden">
      <vue-office-docx
        v-if="isdocx"
        :src="url"
        @rendered="rendered"
        style="width: 100%; height: 100%"
      />
      <vue-office-excel
        v-if="isexcel"
        :src="url"
        @rendered="rendered"
        style="width: 100%; height: 100%"
      />
      <vue-office-pdf
        v-if="ispdf"
        :src="url"
        @rendered="rendered"
        style="width: 100%; height: 100%"
      />
    </div>
  </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf";

import { getPathByIds } from "@/api/system/user";

export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf,
  },
  props: {
    // 文件uuid
    fileUuid: {
      type: String,
    },
  },
  data() {
    return {
      url: "",
      isdocx: false,
      isexcel: false,
      ispdf: false,
    };
  },
  mounted() {
    console.log("this.fileUuid00000 :>> ", this.fileUuid);
    var _this = this;
    this.url = "";
    if (this.fileUuid && this.fileUuid != "") {
      const list = [this.fileUuid];
      getPathByIds(list).then((res) => {
        if (res.data.length) {
          this.url = res.data[0].filePath;
          this.previewFile(this.url);
        }
      });
    }
  },
  methods: {
    rendered() {
      console.log("渲染完成");
    },
    previewFile(url) {
      // 根据文件格式显示预览内容
      const fileExtension = url.split(".").pop().toLowerCase();
      if (fileExtension === "xlsx") {
        this.isexcel = true;
      }
      if (fileExtension === "docx") {
        this.isdocx = true;
      }
      if (fileExtension === "pdf" || "PDF") {
        this.ispdf = true;
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>

父组件弹窗

<el-dialog
      title="预览"
      append-to-body
      :visible.sync="oopen"
      modal-append-to-body
      :width="'1200px'"
    >
      <Preview :fileUuid="fileUuid" v-if="oopen"> </Preview>
    </el-dialog>

clickView(val) {
      this.fileUuid = "";
      this.fileUuid = val.tablebudget;
      console.log('this.fileUuid :>> ', this.fileUuid);
      this.oopen = true;
    },

如果使用的地方多，记得在man.js中记得全局引用

实现效果

excle（刚刚试了一下xls文件格式应该不可以，我打开是空白的）