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文件格式应该不可以，我打开是空白的）
word
终于写完了，希望对需要的人有一点点参考作用
