解决kkFileView4.4.0版本pdf、word不能预览问题

这里使用的是http下载流url预览,遇到的问题。

官方使用指南:kkFileView - 在线文件预览

1 前端测试代码

1.1 官方示例代码

1.2 本人测试代码

注意:要给预览文件的url进行编码encodeURIComponent(Base64.encode(previewUrl))。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h2>在线预览</h2>
<button type="button" onclick="kkFileView()">点击在线预览</button>
</body>
</html>
<script>
    var Base64 = {

        // private property
        _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

        //从普通字符串转换成Base64字符串的函数
        encode : function (input) {
            var output = "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i = 0;
            input = Base64._utf8_encode(input);
            while (i < input.length) {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);
                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;
                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }
                output = output +
                    Base64._keyStr.charAt(enc1) + Base64._keyStr.charAt(enc2) +
                    Base64._keyStr.charAt(enc3) + Base64._keyStr.charAt(enc4);
            }
            return output;
        },

        //从Base64字符串转换成普通字符串的函数
        decode : function (input) {
            var output = "";
            var chr1, chr2, chr3;
            var enc1, enc2, enc3, enc4;
            var i = 0;
            input = input.replace(/[^A-Za-z0-9+/=]/g, "");
            while (i < input.length) {
                enc1 = Base64._keyStr.indexOf(input.charAt(i++));
                enc2 = Base64._keyStr.indexOf(input.charAt(i++));
                enc3 = Base64._keyStr.indexOf(input.charAt(i++));
                enc4 = Base64._keyStr.indexOf(input.charAt(i++));
                chr1 = (enc1 << 2) | (enc2 >> 4);
                chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                chr3 = ((enc3 & 3) << 6) | enc4;
                output = output + String.fromCharCode(chr1);
                if (enc3 != 64) {
                    output = output + String.fromCharCode(chr2);
                }
                if (enc4 != 64) {
                    output = output + String.fromCharCode(chr3);
                }
            }
            output = Base64._utf8_decode(output);
            return output;
        },

        //将普通字符串转换成UTF8编码的函数
        _utf8_encode : function (string) {
            string = string.replace(/\r\n/g,"\n");
            var utftext = "";
            for (var n = 0; n < string.length; n++) {
                var c = string.charCodeAt(n);
                if (c < 128) {
                    utftext += String.fromCharCode(c);
                }
                else if((c > 127) && (c < 2048)) {
                    utftext += String.fromCharCode((c >> 6) | 192);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
                else {
                    utftext += String.fromCharCode((c >> 12) | 224);
                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
            }
            return utftext;
        },

        //将UTF8编码的字符串转换成普通字符串的函数
        _utf8_decode : function (utftext) {
            var string = "";
            var i = 0;
            var c = c1 = c2 = 0;
            while ( i < utftext.length ) {
                c = utftext.charCodeAt(i);
                if (c < 128) {
                    string += String.fromCharCode(c);
                    i++;
                }
                else if((c > 191) && (c < 224)) {
                    c2 = utftext.charCodeAt(i+1);
                    string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                    i += 2;
                }
                else {
                    c2 = utftext.charCodeAt(i+1);
                    c3 = utftext.charCodeAt(i+2);
                    string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                    i += 3;
                }
            }
            return string;
        }
    }

  function kkFileView(){
    // pdf的文件流
    var originUrl  = 'http://192.168.1.58:8080/getFile?s/lV3bcibQiz34TStDR0NJ3tYfr1fqIvKRrtvEOy5ATi3a7u18wax87gN4DWjch/hcpeqQS8mQMoAYMDIXRzEpqtYk0H7DV/+pmYS/KtdPpk0tQrLSnT5OK8ND6QQgaTypPSswbJNvwhs+l5fE4GHLnvBX+kD9J42YAKO6VzAdzFmyonGjiAbegeLD4QspUcXXsdNSzz/7fDeRjDzc0M+HlMMS8/CiuMUmHqL4ErjuNF4Mn3s42UveYOHlukb0p4PCIJlhZeRBx4zXlTOcLlXItZKVb6gBVHVBH9e6ZpfTuIQJ4VRSN3twEOuIsBZ83w3SIepUH9oaA=';
    // 使用fullfilename=xxx给文件指定名称
    var previewUrl = originUrl + '&fullfilename=1.pdf';
    window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)))
  }
</script>

2 测试

点击在线预览按钮出现以下情况:

3 解决下载失败报错 

3.1 报错信息 

下载失败:org.springframework.web.client.HttpServerErrorException$InternalServerError: 500 Internal Server Error: [<!DOCTYPE html><html><head><title>Apache Tomcat/8.0.30 - Error report</title><style type="text/css">H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {fo... (1984 bytes)]

3.2 解决方案

修改DownloadUtils工具类中的download(fileAttribute,filename)方法,如下:

修改前:

修改后: 

3.3 修改后测试

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/396632.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

面试redis篇-03缓存击穿

原理 缓存击穿&#xff1a;给某一个key设置了过期时间&#xff0c;当key过期的时候&#xff0c;恰好这时间点对这个key有大量的并发请求过来&#xff0c;这些并发的请求可能会瞬间把DB压垮 解决方案一&#xff1a;互斥锁 解决方案二&#xff1a;逻辑过期 提问与回答 面试官 &a…

滤波电阻器:用于能源系统和工业的高精度解决方案(1)?

滤波电阻器用于防止能源系统中的电源反馈。铝厂或钢铁厂中的大型感应冶炼厂会产生与电源频率的谐波。必须不惜一切代价让这些远离电网。过滤器&#xff0c;通常以 T 或 L 元素的形式用于此目的。中压电源输入端的吸收电路由电容和电感的串联连接组成&#xff0c;对谐波进行负载…

[ansible] playbook运用

一、复习playbook剧本 --- - name: first play for install nginx #设置play的名称gather_facts: false #设置不收集facts信息hosts: webservers:dbservers #指定执行此play的远程主机组remote_user: root #指定执行此play的用…

PCIe学习笔记(2)错误处理和AER/DPC功能

文章目录 PCIe ErrorAER (Advanced Error Reporting)DPC (Downstream Port Containment) 处理器上错误通常可分为detected和undetected error。Undetected errors可能变得良性(benign)&#xff0c;也可能导致系统故障如silent data corruptions (SDC)。Detected errors则又可分…

自养号测评低成本高效率推广,安全可控

测评的作用在于让用户更真实、清晰、快捷地了解产品以及产品的使用方法和体验。通过买家对产品的测评&#xff0c;也可以帮助厂商和卖家优化产品缺陷&#xff0c;提高用户的使用体验。这进而帮助他们获得更好的销量&#xff0c;并更深入地了解市场需求。因此&#xff0c;测评在…

Java 学习和实践笔记(14)

OOP :面向对象编程&#xff0c;object oriented programming. 用表格就可以很好地理解类、对象、属性、以及动作这些概念。 一个表&#xff08;结构&#xff09;就对应一个类&#xff08;结构&#xff09;。所以凡叫什么类&#xff0c;自己就在心里把它叫什么表。反过来&…

消息队列-RabbitMQ:MQ作用分类、RabbitMQ核心概念及消息生产消费调试

1、MQ 的相关概念 1&#xff09;什么是 MQ MQ (message queue)&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO 先入先出&#xff0c;只不过队列中存放的内容是 message 而已&#xff0c;还是一种跨进程的通信机制&#xff0c;用于上下游传递消息。在互…

【数据结构】每天五分钟,快速入门数据结构(二)——链表

目录 一 构建一个单向链表 二 特点 三 时间复杂度 四 相关算法 1.判断链表是否成环及成环位置 2.链表反转 五 Java中的LinkedList 类 1.使用 2.LinkedList 方法 一 构建一个单向链表 // 设计链表结构class ListNode {int val;ListNode next;ListNode(){}ListNode(int…

Laravel01 课程介绍以及Laravel环境搭建

Laravel01 课程介绍 1. Laravel2. mac开发环境搭建(通过Homebrew)3. 创建一个项目 1. Laravel 公司中面临着PHP项目与Java项目并行&#xff0c;所以需要我写PHP的项目&#xff0c;公司用的框架就是Laravel&#xff0c;所以在B站上找了一门课学习。 课程地址 2. mac开发环境搭…

人工智能_PIP3安装使用国内镜像源_安装GIT_普通服务器CPU_安装清华开源人工智能AI大模型ChatGlm-6B_002---人工智能工作笔记0097

接着上一节来看,可以看到,这里 创建软连接以后 [root@localhost Python-3.10.8]# ln -s /usr/local/python3/bin/python3 /usr/bin/python3 [root@localhost Python-3.10.8]# python3 -V Python 3.10.8 [root@localhost Python-3.10.8]# pwd /usr/local/Python-3.10.8 [root@…

vue封装el-table表格组件

先上效果图&#xff1a; 本文包含了具名插槽、作用域插槽、jsx语法三种&#xff1a; Render.vue&#xff08;很重要&#xff0c;必须有&#xff09;: <script> export default {name: "FreeRender",functional: true,props: {scope:Object,render: Functio…

Leetcode-590. N 叉树的后序遍历

题目&#xff1a; 给定一个 n 叉树的根节点 root &#xff0c;返回 其节点值的 后序遍历 。 n 叉树 在输入中按层序遍历进行序列化表示&#xff0c;每组子节点由空值 null 分隔&#xff08;请参见示例&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [1,null,3,2,4,n…

Kernelized Correlation Filters KCF算法原理详解(阅读笔记)(待补充)

KCF 目录 KCF预备知识1. 岭回归2. 循环移位和循环矩阵3. 傅里叶对角化4. 方向梯度直方图&#xff08;HOG&#xff09; 正文1. 线性回归1.1. 岭回归1.2. 基于循环矩阵获取正负样本1.3. 基于傅里叶对角化的求解 2. 使用非线性回归对模型进行训练2.1. 应用kernel-trick的非线性模型…

解决npm淘宝镜像到期问题

1 背景 由于node安装插件是从国外服务器下载&#xff0c;如果没有“特殊手法”&#xff0c;就可能会遇到下载速度慢、或其它异常问题。 所以如果npm的服务器在中国就好了&#xff0c;于是我们乐于分享的淘宝团队干了这事。你可以用此只读的淘宝服务代替官方版本&#xff0c;且…

更改WordPress作者存档链接author和用户名插件Change Author Link Structure

WordPress作者存档链接默认情况为/author/Administrator&#xff08;用户名&#xff09;&#xff0c;为了防止用户名泄露&#xff0c;我们可以将其改为/author/1&#xff08;用户ID&#xff09;&#xff0c;具体操作可参考『如何将WordPress作者存档链接中的用户名改为昵称或ID…

Hadoop-Yarn-调度器总结

一、Yarn有哪些调度器 在cdh中Yarn组件中查看配置如下&#xff1a; 可以看到Yarn有三种调度器&#xff0c;分别是FairScheduler、FifoScheduler、CapacityScheduler&#xff0c;它们都是Hadoop的一个可插入调度器。 cdh默认的调度器是FairScheduler&#xff0c;hadoop默认的调…

Android内存分析

1.分析某个进程的内存情况 1.1 生成.hprof文件 可以在运行的设备上&#xff0c;使用adb命令生成 .hprof文件&#xff0c;表示在执行命令的那一刻&#xff0c;该进程的内存情况。如下&#xff1a; am dumpheap com.example.demo /data/local/tmp/demo.hprof这里就是对包名为c…

咖啡机缺水保护功能如何实现

在现代生活中&#xff0c;咖啡机已成为许多家庭和办公室不可或缺的设备。然而&#xff0c;咖啡机在使用过程中可能会面临缺水的风险&#xff0c;这不仅会影响到咖啡的制作质量&#xff0c;还可能对机器本身造成损害。为了解决这一问题&#xff0c;一种高效的解决方案是在咖啡机…

数据库:信息存储与管理的关键

数据库&#xff1a;信息存储与管理的关键 数据库是现代信息系统中不可或缺的组成部分&#xff0c;它承担着存储、管理和检索数据的重要任务。本文将详细介绍数据库的定义、分类、作用以及特点。 1. 数据库的介绍 数据库是一个有组织的数据集合&#xff0c;用于存储和管理大量…

RabbitMQ的安装与使用

RabbitMQ的安装与使用 介绍一、RabbitMQ的安装1 查找镜像2 拉取镜像3 查看镜像4 创建容器5 查看容器6 访问测试 二、RabbitMQ的使用1 创建项目2 配置文件3 队列配置文件4 消费者5 生产者6 测试 三、交换器四、普通队列Demo五、死信队列Demo1 介绍2 示例2.1 配置2.2 生产者2.3 消…
最新文章