在编写代码时,可能会有这个一个需求,上传文件,但是不能下载,只可以预览,怎么弄?
KKFileView
KKFileView是一个文件文档在线预览项目解决方案,需要后台进行配合设置,
前端只需要动态设置文件的URL地址
在公共文件 util.js 内编写
VUE_APP_FILE_PREVIEW_URL=http://xxxxxxxx:8012
export function filePreview(url) {
window.open(`${process.env.VUE_APP_FILE_PREVIEW_URL}/onlinePreview?url=` + encodeURIComponent(url))
}
在展示已上传的文件列表内 点击文件名称,获取文件的URL地址
<a-col class="aRow" :span="16">
<a-icon class="aFontSize" type="file-jpg" />
<a @click="handlePreviewFile(items)">{{ items.originalName }}</a>
</a-col>
methods: {
handlePreviewFile(previewUrl) {
this.$log.debug('预览')
filePreview(previewUrl.url)
}
}
KKFileView地址:https://kkfileview.keking.cn/zh-cn/docs/home.html