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
终于写完了，希望对需要的人有一点点参考作用
