Vue3使用kkFileView预览文件pdf

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 版本 # 示例

var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址
var previewUrl = originUrl + '&fullfilename=test.txt'
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));

 

 

配置baseUrl，如果是生产环境，走 location.origin 浏览器的当前地址，它包含了协议、域名和端口号，否则走项目配置中设置的环境变量 VITE_APP_API_URL  的值。

替换示例的文件地址，打开弹窗时把地址传给弹窗，弹窗里使用iframe

// 预览
    const handleClickOpenPreview = (row) => {
      if (row.fileState === '无') return
      const baseUrl = import.meta.env.PROD ? location.origin : import.meta.env.VITE_APP_API_URL
      
      // const originUrl = baseUrl + '/hs/document/downloadWord' + '?fileName=010001_20231015_1697332623776.docx'
      // const previewUrl = originUrl + '&fullfilename=010001_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传给弹窗
    }

 弹窗页