效果:
代码:
弹窗
<div class="viewBox">
<a-modal
class="modalBox"
v-model:visible="visible"
:title="title"
@ok="handleOk"
:bodyStyle="bodyStyle"
:width="1300"
:maskClosable="false"
:destroyOnClose="true"
:footer="null"
@cancel="handleCancel"
:maskStyle="{}"
:dialogStyle="{}"
>
<vue-office-docx :src="docSrc" v-if="docSrc" />
<div v-if="pdfSrc" style="width: 100%; height: 100%">
<iframe :src="pdfUrl" style="width: 100%; height: 100%"></iframe>
</div>
<!-- <vue-office-pdf :src="pdfSrc" v-if="pdfSrc" /> -->
</a-modal>
</div>
let docSrc = ref("");
let pdfSrc = ref("");
const bodyStyle = {
height: `700px`,
// marginTop: '-40px'
// padding: '0 24px'
};
let pdfUrl = ref("");
const preview = (record) => {
visible.value = true;
title.value = "预览";
if (isPdf(record.FilePath[0].DisPlayName)) {
return new Promise((resolve, reject) => {
let blob = null;
let xhr = new XMLHttpRequest();
xhr.open(
"GET",
window.defaultconfig.fileUrl +
"/api/FileManage/Download" +
`?Id=${record.FilePath[0].FileId}`
);
xhr.responseType = "blob";
xhr.onload = () => {
blob = xhr.response;
const blobob = new Blob([blob], {
type: "application/pdf;charset=utf-8",
});
const href = window.URL.createObjectURL(blobob);
pdfUrl.value = href;
pdfSrc.value = "true";
// window.open(href);
// resolve(file);
};
xhr.onerror = (e) => {
reject(e);
};
xhr.send();
});
}
if (isDoc(record.FilePath[0].DisPlayName)) {
axios
.get(
window.defaultconfig.fileUrl +
"/api/FileManage/Download" +
`?Id=${record.FilePath[0].FileId}`,
{ responseType: "arraybuffer" }
)
.then((res) => {
const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
let fileReader = new FileReader();
fileReader.readAsArrayBuffer(blob);
fileReader.onload = () => {
docSrc.value = fileReader.result;
};
});
}
};
function isPdf(file) {
var fileExtension = file.split(".").pop().toLowerCase();
return fileExtension === "pdf";
}
function isDoc(file) {
var fileExtension = file.split(".").pop().toLowerCase();
return fileExtension === "docx";
}
const handleOk = () => {
visible.value = false;
docSrc.value = "";
pdfSrc.value = "";
};
const handleCancel = () => {
visible.value = false;
docSrc.value = "";
pdfSrc.value = "";
};