ofd文件预览

文件列表

<template><div><div class='file' v-if='$myUtils.coll.isNotEmpty(filesList)'><div class='file-view'><div class='file-view-item' :style='{justifyContent: align }' v-for='(item, index) in filesList' :key='index'><img class='file-view-item-icon' alt='':src='require(`@/assets/file/${getFileSuffix(item.fileSuffix)}.png`)' /><template v-if='isShowQuery(item)'><div class='file-view-item-info file-view-item-infoHover' @click='previewFile(item)'><a-tooltip placement='topLeft' :title='item.fileName + item.fileSuffix'>{{ item.fileName }}.{{ item.fileSuffix }}</a-tooltip></div></template><template v-else><div class='file-view-item-info'><a-tooltip placement='top' :title='item.fileName + item.fileSuffix'>{{ item.fileName }}.{{ item.fileSuffix }}</a-tooltip></div></template><img class='file-view-item-icon mr-5' alt='' @click="downloadFile(item)":src='require(`@/assets/file/down.png`)' /></div></div></div><div v-else class='not-file'>暂无文件</div><my-a ref='myA'></my-a></div>
</template><script>
import { filesApiGetListByIds, getPreviewFileUrl, getDownLoadFileUrl } from '@/api/system/files'
import MyA from '@/components/My/MyA'let fileMap = {image: ['png', 'jpeg', 'jpg'],word: ['doc', 'docx', 'wps'],pdf: ['pdf'],ofd: ['ofd'],excel: ['xls', 'xlsx'],zip: ['zip', 'rar'],pptx: ['ppt', 'pptx'],bin: ['bin'],txt: ['txt'],deb: ['deb']
}export default {name: 'MyFileListMinor',components: {MyA},props: {filesIds: [String, Array],emptyText: {type: String,default: '暂无文件'},align: {type: String,default: 'left'}},filters: {toKB(val) {return (Number(val) / 1024).toFixed(0)}},watch: {filesIds: {handler: function(filesIds) {if (filesIds != null&& (this.$myUtils.str.isNotEmpty(filesIds)|| this.$myUtils.coll.isNotEmpty(filesIds))) {this.getFilesList(filesIds)} else {this.filesList = []}},immediate: true}},data() {return {filesList: []}},methods: {getFileSuffix(suffix) {let result = ''if (fileMap.word.indexOf(suffix) !== -1) {result = 'word'} else if (fileMap.pdf.indexOf(suffix) !== -1) {result = 'pdf'} else if (fileMap.ofd.indexOf(suffix) !== -1) {result = 'ofd'} else if (fileMap.excel.indexOf(suffix) !== -1) {result = 'xlsx'} else if (fileMap.image.indexOf(suffix) !== -1) {result = 'image'} else if (fileMap.zip.indexOf(suffix) !== -1) {result = 'zip'} else if (fileMap.pptx.indexOf(suffix) !== -1) {result = 'ppt'} else if (fileMap.bin.indexOf(suffix) !== -1) {result = 'bin'} else if (fileMap.txt.indexOf(suffix) !== -1) {result = 'txt'} else {result = 'other'}return result},/*** 是否显示查看按钮* @param item* @returns {boolean}*/isShowQuery(item) {let show = falseif (item) {switch (item.fileSuffix) {case 'pdf':case 'doc':case 'docx':case 'ofd':case 'jpg':case 'png':case 'jpeg':show = true}}return show},/*** 文件预览* @param {*} files*/previewFile(files) {if ('ofd' === files.fileSuffix) {const routeData = this.$router.resolve({path: '/ofd/preview',query: {id: files.fileId}});window.open(routeData.href, "_blank");} else {const url = getPreviewFileUrl(files.fileId)this.$refs.myA.target(url)}},/*** 文件下载* @param {*} files*/downloadFile(files) {const url = getDownLoadFileUrl(files.fileId)this.$refs.myA.target(url)},getFilesList(filesIds) {let ids = ''if (filesIds.constructor == String) {ids = filesIds} else {ids = filesIds.join()}filesApiGetListByIds(ids).then(res => {this.filesList = res.data})}}
}
</script><style lang='less' scoped>
@themeColor: #409eff;.file {width: 100%;height: 100%;&-view {width: 100%;&-item {width: 100%;height: 100%;display: flex;align-items: center;box-sizing: border-box;&:not(:last-child) {margin-bottom: 3px;}&-icon {width: 20px;height: 20px;object-fit: cover;cursor: pointer;}&-info {font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;font-size: 14px;text-align: left;margin-left: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;}&-infoHover {color: @themeColor;&:hover {text-decoration: underline;}}}}
}.mr-5 {margin-left: 5px;
}.not-file {font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;font-size: 14px;
}
</style>

文件预览为ofd时走ofd预览，否则走正常的预览文件接口

previewFile(files) {if ('ofd' === files.fileSuffix) {const routeData = this.$router.resolve({path: '/ofd/preview',query: {id: files.fileId}});window.open(routeData.href, "_blank");} else {const url = getPreviewFileUrl(files.fileId)this.$refs.myA.target(url)}},

ofd文件预览组件

<template><div class="main-section" id="content" ref="contentDiv" @mousewheel="scrool"></div>
</template><script>
import {parseOfdDocument, renderOfd, digestCheck, getPageScale} from '@/utils/ofd/ofd';
import {getPreviewFileUrl} from "@/api/system/files";
import axios from 'axios';export default {name: 'preview',data() {return {docleft: 0,//公章距离左侧文档边缘的距离leftMenu_width: 0,//左侧菜单宽度ofdBase64: null,loading: false,pageIndex: 1,pageCount: 0,scale: 0,ofdObj: null,screenWidth: document.body.clientWidth,}},mounted() {this.screenWidth = document.body.clientWidth - this.leftMenu_width;this.$refs.contentDiv.addEventListener('scroll', this.scrool);this.getOfd(this.$route.query.id)},methods: {getOfd(id) {axios({url: getPreviewFileUrl(id),responseType: 'blob'}).then(res => {const files = new window.File([res.data], "ofd", {type: 'application/ofd'});this.getOfdDocumentObj(files, this.screenWidth);})},scrool() {let scrolled = this.$refs.contentDiv.firstElementChild?.getBoundingClientRect()?.top - 60;let top = 0let index = 0;for (let i = 0; i < this.$refs.contentDiv.childElementCount; i++) {top += (Math.abs(this.$refs.contentDiv.children.item(i)?.style.height.replace('px', '')) + Math.abs(this.$refs.contentDiv.children.item(i)?.style.marginBottom.replace('px', '')));if (Math.abs(scrolled) < top) {index = i;break;}}this.pageIndex = index + 1;},getOfdDocumentObj(file, screenWidth) {let that = this;this.loading = true;parseOfdDocument({ofd: file,success(res) {that.ofdObj = res[0];that.pageCount = res[0].pages.length;const divs = renderOfd(screenWidth, res[0]);that.displayOfdDiv(divs);that.loading = false;},fail(error) {that.loading = false;that.$alert('OFD打开失败', error, {confirmButtonText: '确定',callback: action => {this.$message({type: 'info',message: `action: ${action}`});}});}});},displayOfdDiv(divs) {this.scale = getPageScale();let contentDiv = document.getElementById('content');contentDiv.innerHTML = '';for (const div of divs) {contentDiv.appendChild(div)}for (let ele of document.getElementsByName('seal_img_div')) {this.addEventOnSealDiv(ele, JSON.parse(ele.dataset.sesSignature), JSON.parse(ele.dataset.signedInfo));}},addEventOnSealDiv(div, SES_Signature, signedInfo) {try {global.HashRet = null;global.VerifyRet = signedInfo.VerifyRet;div.addEventListener("click", function () {document.getElementById('sealInfoDiv').hidden = false;document.getElementById('sealInfoDiv').setAttribute('style', 'display:flex;align-items: center;justify-content: center;');if (SES_Signature.realVersion < 4) {document.getElementById('spSigner').innerText = SES_Signature.toSign.cert['commonName'];document.getElementById('spProvider').innerText = signedInfo.Provider['@_ProviderName'];document.getElementById('spHashedValue').innerText = SES_Signature.toSign.dataHash.replace(/\n/g, '');document.getElementById('spSignedValue').innerText = SES_Signature.signature.replace(/\n/g, '');document.getElementById('spSignMethod').innerText = SES_Signature.toSign.signatureAlgorithm.replace(/\n/g, '');document.getElementById('spSealID').innerText = SES_Signature.toSign.eseal.esealInfo.esID;document.getElementById('spSealName').innerText = SES_Signature.toSign.eseal.esealInfo.property.name;document.getElementById('spSealType').innerText = SES_Signature.toSign.eseal.esealInfo.property.type;document.getElementById('spSealAuthTime').innerText = "从 " + SES_Signature.toSign.eseal.esealInfo.property.validStart + " 到 " + SES_Signature.toSign.eseal.esealInfo.property.validEnd;document.getElementById('spSealMakeTime').innerText = SES_Signature.toSign.eseal.esealInfo.property.createDate;document.getElementById('spSealVersion').innerText = SES_Signature.toSign.eseal.esealInfo.header.version;} else {document.getElementById('spSigner').innerText = SES_Signature.cert['commonName'];document.getElementById('spProvider').innerText = signedInfo.Provider['@_ProviderName'];document.getElementById('spHashedValue').innerText = SES_Signature.toSign.dataHash.replace(/\n/g, '');document.getElementById('spSignedValue').innerText = SES_Signature.signature.replace(/\n/g, '');document.getElementById('spSignMethod').innerText = SES_Signature.signatureAlgID.replace(/\n/g, '');document.getElementById('spSealID').innerText = SES_Signature.toSign.eseal.esealInfo.esID;document.getElementById('spSealName').innerText = SES_Signature.toSign.eseal.esealInfo.property.name;document.getElementById('spSealType').innerText = SES_Signature.toSign.eseal.esealInfo.property.type;document.getElementById('spSealAuthTime').innerText = "从 " + SES_Signature.toSign.eseal.esealInfo.property.validStart + " 到 " + SES_Signature.toSign.eseal.esealInfo.property.validEnd;document.getElementById('spSealMakeTime').innerText = SES_Signature.toSign.eseal.esealInfo.property.createDate;document.getElementById('spSealVersion').innerText = SES_Signature.toSign.eseal.esealInfo.header.version;}document.getElementById('spVersion').innerText = SES_Signature.toSign.version;document.getElementById('VerifyRet').innerText = "文件摘要值后台验证中，请稍等... " + (global.VerifyRet ? "签名值验证成功" : "签名值验证失败");if (global.HashRet == null || global.HashRet == undefined || Object.keys(global.HashRet).length <= 0) {setTimeout(function () {const signRetStr = global.VerifyRet ? "签名值验证成功" : "签名值验证失败";global.HashRet = digestCheck(global.toBeChecked.get(signedInfo.signatureID));const hashRetStr = global.HashRet ? "文件摘要值验证成功" : "文件摘要值验证失败";document.getElementById('VerifyRet').innerText = hashRetStr + " " + signRetStr;}, 1000);}});} catch (e) {console.log(e);}if (!global.VerifyRet) {div.setAttribute('class', 'gray');}}}
}
</script><style scoped>
.main-section {display: flex;flex-direction: column;align-items: center;justify-content: center;overflow: hidden;position: relative;margin: 10px auto 0;border: 1px solid #f7f7f7;box-shadow: 0 3px 10px 0 rgba(76, 101, 123, 0.12);
}
</style>

将文件引入到src下
资源在笔记里面找一下