[TOC]
1.附件-预览（pdf,txt,docx）格式
<!--
* @description:文件预览-弹窗
* @author: 王浩
* @Date: 2022-06-15 15:19:11
* @Modified By:
* @version: 1.0.0
-->
<template>
<div class="Preview">
<ami-dialog width="960px" :titleIcon="true" :title="fileName" :visible.sync="visible" :before-close="handleCancel">
<!-- 视频格式预览 -->
<div v-if="videoType.includes(fileType)" style="width: 100%; height: 100%">
<ami-video ref="videoPlayer" style="width: 100%" :src="video_url"> </ami-video>
</div>
<div class="Preview-main" v-loading="loading" v-else>
<!-- xlsx预览 -->
<ami-online-excel
v-if="fileType === 'xlsx'"
style="height: 100%; width: 100%"
ref="online"
:id="id"
:file="file"
:allowEdit="allowEdit"
@get-data="getData"
>
</ami-online-excel>
<div v-else-if="fileType === 'txt'">{{ content }}</div>
<!-- 转成pdf预览 -->
<div v-else-if="fileType !== 'xlsx'" style="width: 100%; height: 100%">
<pdf ref="pdf" v-for="i in pages" :key="i" :src="files" :page="i"></pdf>
</div>
<!-- 文本格式 -->
</div>
</ami-dialog>
</div>
</template>
<script>
import pdf from "vue-pdf";
import { downLoadFile, onlinePreview, addOrUpdExcel } from "@/api/public/public";
const moduleId = require("../../../package.json").moduleId.toLowerCase();
export default {
name: "AMI-MA0103060-12",
props: {
/**
* fileName:文件名称
* @description: 文件名称
*/
fileName: {
type: String,
required: true,
},
/**
* fileId：文件id
* @description:文件id
*/
fileId: {
type: String,
required: true,
},
/**
* fileType
* @description:文件类型
*/
fileType: {
required: true,
type: String,
},
/**
* allowEdit：是否允许编辑
* @description:是否可编辑
*/
allowEdit: {
type: Boolean,
default: false,
},
/**
* 弹窗原生属性 必传
*/
visible: {
type: Boolean,
default: false,
},
},
components: {
pdf,
},
data() {
return {
id: moduleId + "-online-excel",
loading: false, //加载中
pdfDoc: null, //pdf文档
pages: 0, //页数
files: "", //文件地址
file: {}, //文件对象
content: "", //文本内容
video_url: "", //视频地址
// 视频格式
videoType: [
"video/mp4",
"video/3gp",
"video/webm",
"video/ogg",
"avi",
"wmv",
"mpeg",
"mp4",
"m4v",
"mov",
"asf",
"flv",
"f4v",
"rmvb",
"rm",
"3gp",
"vob",
],
};
},
computed: {
change() {
const { allowEdit, fileId } = this;
return {
allowEdit, //是否允许编辑
fileId, //文件id
};
},
},
watch: {
change() {
this.init();
},
},
methods: {
init() {
this.loading = true;
// 视频预览
if (this.videoType.includes(this.fileType)) {
const domian = window.location.origin;
// 视频地址
this.video_url = domian + "/ami/ma01-02-056/minio-file/previewVideo?fileId=" + this.fileId;
this.loading = false;
// xlsx预览
} else if (this.fileType === "xlsx") {
downLoadFile({
fileId: this.fileId,
fileName: this.fileName,
fileType: this.fileType,
})
.then((res) => {
this.loading = false;
const fileBlob = new Blob([res.data], { type: "application/xlsx" });
this.file.raw = window.URL.createObjectURL(fileBlob);
this.file.name = this.fileName + "." + this.fileType;
this.$nextTick(() => {
// 展现表格数据
this.$refs.online.onlineFilePreview();
});
})
.catch(() => {
this.$message({
message: "EXCEL数据加载失败",
type: "warning",
});
this.loading = false;
});
}
// txt预览
else if (this.fileType === "txt") {
downLoadFile({ fileId: this.fileId, fileName: this.fileName, fileType: this.fileType }).then((res) => {
this.loading = false;
var reader = new FileReader();
// 以文本的方式读取blob中的内容
reader.readAsText(res.data);
reader.onload = function (evt) {
//内容就在这里
this.content = evt.target.result;
}.bind(this);
});
} else {
// 除excel外的附件预览-转成pdf格式
onlinePreview({
fileIdVo: this.fileId,
fileType: this.fileType,
})
.then((res) => {
const fileBlob = new Blob([res.data], { type: "application/pdf" });
this.files = window.URL.createObjectURL(fileBlob);
this.loadFile(this.files);
})
.catch(() => {
this.$message({
message: "加载失败",
type: "warning",
});
this.loading = false;
});
}
},
// 加载文件
loadFile(url) {
let loadingTask = pdf.createLoadingTask(url);
loadingTask.promise
.then((pdf) => {
this.loading = false;
this.pages = pdf.numPages;
})
.catch(() => {
this.$message({
message: "加载失败",
type: "warning",
});
});
},
// 获取数据--excel 表格编辑
getData(val) {
let newFormData = new FormData();
newFormData.append("fileId", this.fileId);
newFormData.append("fileType", this.fileType);
newFormData.append("fileName", this.fileName + "." + this.fileType);
newFormData.append("wb", JSON.stringify(val));
addOrUpdExcel(newFormData)
.then(() => {
this.$message({
message: "数据保存成功！",
type: "success",
});
this.beforeClose();
})
.catch(() => {
this.$message({
message: "数据保存失败！",
type: "warning",
});
this.loading = false;
});
},
// 关闭弹窗
handleCancel() {
// 清空数据
this.video_url = "";
this.content = "";
this.files = "";
this.pages = 0;
if (this.videoType.includes(this.fileType)) {
// 关闭弹窗销毁组件
this.$refs.videoPlayer.$refs.videoPlayer.player.pause();
}
this.$emit("update:visible", false);
},
},
};
</script>
<style lang="scss" scoped>
.Preview {
width: 100%;
height: 100%;
.Preview-main {
height: 600px;
overflow-y: auto;
/deep/ .luckysheet-share-logo {
display: none;
}
}
}
</style>
2.小窗口-预览html格式（iframd展示）
小窗口
/** * 打开小窗口 */ export const openWindow = (url, title, w, h) => { // Fixes dual-screen position Most browsers Firefox const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left; const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top; const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; const left = width / 2 - w / 2 + dualScreenLeft; const top = height / 2 - h / 2 + dualScreenTop; const newWindow = window.open( url, title, "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=" + w + ", height=" + h + ", top=" + top + ", left=" + left, ); // Puts focus on the newWindow if (window.focus) { newWindow.focus(); } };iframd展示-html ```vue
<a name="YmY21"></a>
### 3.ami-table合并单元格式
```javascript
// 附件信息
Appendix(data) {
if (data === null) return; //如果为null的话直接停止
for (let i = 0; i < data.length; i++) {
// 判断attNo为null或者为空，为空的话将数组里面删除
if (data[i].attId === "" || data[i].attId == null || typeof data[i].attId === undefined) {
data.splice(i, 1);
i = i - 1;
} else if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].attTypeName === data[i - 1].attTypeName) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
// 合并单元格
objectSpanMethod({ rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
4.获取浏览器地址栏的URL
1、console.log(window.location.href); //获取浏览器地址栏的整个url
2、console.log(window.location.protocol); //获取浏览器地址栏url的协议部分:http
3、console.log(window.location.host); //获取浏览器地址栏url的端口部分:localhost:8080
4、console.log(window.location.pathname); //获取浏览器地址栏url的路径部分:/url
5、console.log(window.location.search); //获取浏览器地址栏url的路径后面的参数部分
6、console.log(window.location.hash); //获取浏览器地址栏锚点#包括后面的
若有收获，就点个赞吧
0 人点赞
