标签：Vue SpringBoot 预览 url Illegal Base64 base64 kkFileView

场景

kkFileView

https://kkfileview.keking.cn/zh-cn/index.html

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

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

gitee地址：

https://gitee.com/kekingcn/file-online-preview

在接入并进行预览时提示

Whitelabel Error Page

 

 

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

Illegal base64 character 3a

 

 

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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

标签：Vue,SpringBoot,预览,url,Illegal,Base64,base64,kkFileView
From： https://www.cnblogs.com/badaoliumangqizhi/p/16975536.html