SpringBoot+Vue+kkFielView实现文件预览时提示:Illegal base64 character 3a以及Vue中安装Base64编码url解决

场景

kkFileView

kkFileView - 在线文件预览

kkFileView为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，

基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等。

gitee地址：

kkFileView: 使用spring boot打造文件文档在线预览项目解决方案，支持doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3以及众多类文本如txt、html、xml、java、properties、sql、js、md、json、conf、ini、vue、php、py、bat、gitignore等文件在线预览

在接入并进行预览时提示

Whitelabel Error Page

找到kkFileView目录下log下kkFileView.log文件查看具体报错

Illegal base64 character 3a

这是因为一开始没将预览文件url进行Base64编码导致。

实现

Vue中使用Base64编码

安装依赖

npm install --save js-base64

引入依赖

import { Base64 } from "js-base64";

调用编码方法

Base64.encodeURI(fileUrl)

前端点击预览的点击事件

    // 预览
    handlePreview(row) {
      var previewServerUrl = row.previewServerUrl;
      var fileUrl = row.fileUrl;
      //分别获取预览服务地址和预览参数的地址然后拼接
      //预览文件url地址需要使用Base64编码URL
      let url =
        previewServerUrl + encodeURIComponent(Base64.encodeURI(fileUrl));
      window.open(url);
    },

注意这里获取预览服务地址和预览参数文件url,这里需要将文件url进行Base64编码

previewServerUrl为http://127.0.0.1:8012/onlinePreview?url=

文件预览url为调用kkFileView预览时传递的参数，比如

http://127.0.0.1:9090/profile/upload/2022/12/10/a28ffa19-9982-42d2-8766-1feb274c5bb7.doc