网站制作与建设书籍,asp网站加速,建设云企业服务平台,深圳网站开发哪个好kkFileView - 在线文件预览kkFileView官网 - kkFileView使用Spring Boot搭建#xff0c;易上手和部署#xff0c;基本支持主流办公文档的在线预览#xff0c;如doc,docx,Excel,pdf,txt,zip,rar,图片等等https://kkfileview.keking.cn/zh-cn/docs/usage.html业务场景#xf… kkFileView - 在线文件预览kkFileView官网 - kkFileView使用Spring Boot搭建易上手和部署基本支持主流办公文档的在线预览如doc,docx,Excel,pdf,txt,zip,rar,图片等等https://kkfileview.keking.cn/zh-cn/docs/usage.html业务场景需要点击按钮弹出弹框预览pdf文件 这里使用的是3.x.x 版本需要下载base64 3.x.x 版本 # 示例 script typetext/javascript srchttps://cdn.jsdelivr.net/npm/js-base643.6.0/base64.min.js/scriptvar originUrl http://127.0.0.1:8080/filedownload?fileId1; //要预览文件的访问地址
var previewUrl originUrl fullfilenametest.txt
window.open(http://127.0.0.1:8012/onlinePreview?urlencodeURIComponent(Base64.encode(previewUrl))); 配置baseUrl如果是生产环境走 location.origin 浏览器的当前地址它包含了协议、域名和端口号否则走项目配置中设置的环境变量 VITE_APP_API_URL 的值。 替换示例的文件地址打开弹窗时把地址传给弹窗弹窗里使用iframe // 预览const handleClickOpenPreview (row) {if (row.fileState 无) returnconst baseUrl import.meta.env.PROD ? location.origin : import.meta.env.VITE_APP_API_URL// const originUrl baseUrl /hs/document/downloadWord ?fileName010001_20231015_1697332623776.docx// const previewUrl originUrl fullfilename010001_20231015_1697332623776.docx// window.open(http://100.100.120.147:8012/preview/onlinePreview?url encodeURIComponent(Base64.encode(previewUrl)));// window.open(baseUrl /preview/onlinePreview?url encodeURIComponent(Base64.encode(previewUrl)));const originUrl baseUrl /hs/document/downloadWord ?fileName${row.fileName}const previewUrl originUrl fullfilename${row.fileName}const url baseUrl /preview/onlinePreview?url encodeURIComponent(Base64.encode(previewUrl))state.PreViewFileDialogRef.open(row, url) // 把url传给弹窗} 弹窗页 templatePatrolDialog :showshow closeshow false DeleteFooterBtn width1370px top5vhtemplate #titlediv classdialog-titleimg :srcweatherStationIcon /预览/div/templatediv classformPartel-dropdown triggerclick commandhandleClickExport sizesmallspan classel-dropdown-linki classicon iconfont icon-daochu stylecolor: var(--gdky-primary-color);/i/spantemplate #dropdownel-dropdown-menuel-dropdown-item commandwordword/el-dropdown-itemel-dropdown-item commandpdfpdf/el-dropdown-item/el-dropdown-menu/template/el-dropdown!-- 在弹窗中显示的内容 --iframe :srcpageUrl width100% height800px classfile/iframe/div/PatrolDialog
/templatescript
import { reactive, toRefs, computed, watch } from vue
import PatrolDialog from /views/Components/PatrolDialog.vue
import weatherStationIcon from /assets/imgs/title_img.png
import { exportWord, exportPdf } from /api/PlatTool/CustomModules/HeatSourceDispatch/indexexport default {components: {PatrolDialog},setup(_, { emit }) {const state reactive({show: false,weatherStationIcon, // iconcurRow: null,pageUrl: ,})const methods {// 打开弹窗async open(curRow, url) {state.show true;state.curRow curRow;state.pageUrl url},// 导出handleClickExport(command) {if (command word) {exportWord({ fileName: state.curRow.fileName })} else {exportPdf({ fileName: state.curRow.pdfFileName })}}}return {...toRefs(state),...methods,}}
}
/script
style langless scoped
.dialog-title {display: flex;font-size: 16px;font-family: MicrosoftYaHeiSemibold;color: var(--gdky-main-content-color);line-height: 24px;padding-bottom: var(--base-padding);img {margin-right: 8px;}
}.formPart {display: flex;flex-direction: column;flex: 1;height: 100%;.file {display: flex;justify-content: center;align-items: center;margin-left: -15px;position: relative;}.el-dropdown-link {position: absolute;top: 5px;right: 88px;z-index: 999;}
}
/stylestyle langless
.g-dark {.formPart {.el-dropdown-link {}}
}
/style
