在线预览多类型文件_全栈

目录

一、下载运行项目

二、项目功能

三、前端项目引用

四、文件预览样式更改


在做项目时经常用到在线预览文件,给大家介绍一个好用的在线预览文件项目。使用技术是后端Java,前端Freemarker模板。 FreeMarker 特别适应与 MVC 模式的 Web 应用,通常有 Java 程序准备要显示的数据,由 FreeMarker 模版引擎来生成页面,而 FreeMarker 模版则提供 页面布局 支持,从而能更好地规范 MVC 架构,保证视图逻辑和业务逻辑分离。

一、下载运行项目

首先下载项目,当前文章顶部就有项目压缩包,下载解压即可。(当前为windows版本)

准备工作要求Java: 1.8+。

下载java1.8+,相关配置查看这个文章:

java_JDK下载与环境变量配置icon-default.png?t=N7T8https://blog.csdn.net/zxy19931069161/article/details/139735388?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22139735388%22%2C%22source%22%3A%22zxy19931069161%22%7D下载项目解压压缩包之后,使用IntelliJ IDEA编辑器打开file-online-preview-master项目文件夹:

双击ServerMain文件,即可打开这个文件,然后运行这个方法

点击run,运行项目:


然后再浏览器输入 http://localhost:8012/  ,即可运行项目:

二、项目功能

这里可以预览线上文件:

这里是上传到项目file里进行预览:

文件被上传到项目里:

三、前端项目引用

首先下载 js-base64:

npm run js-base64

 项目引用:

import { Base64 } from "js-base64";let url = Base64.encode(encodeURIComponent(decodeURI(fileLink)));
state.currentUrl = "http://你的文件预览项目放置位置的域名/onlinePreview?url=" + url;

state.currentUrl ,就是当前项目链接,可以用iframe网页嵌入或者用window.open()新开页面。

展示效果:

pdf还可以和图片转换(点击右侧pdf标志):

中间是文件内容。

四、文件预览样式更改

这是前端项目存放位置,自行进行响应更改,更改后记得重新启动项目生效。

更多用法查看官网:

kkfileview官网icon-default.png?t=N7T8https://kkfileview.keking.cn/zh-cn/docs/home.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python --- 如何修改Jupyter Notebook保存文件的路径?

如何修改Jupyter Notebook在本地保存文件的默认路径? 一直以来都比较喜欢jupter notebook,自从用了以后就爱上了。平时用的时候,因为大多都是临时调用,每次在界面里直接new一个新的file就开干。 曾经也想过我创建的这些python文件…

MyBatis 源码分析-- getMapper(获取Mapper)

前言: 前面我们从源码层面梳理了 SqlSessionFactory、SqlSession 的创建过程,本篇我们继续分析一下 Mapper 的的获取过程。 初识 MyBatis 【MyBatis 核心概念】 MyBatis 源码分析–SqlSessionFactory MyBatis 源码分析–获取SqlSession 案例代码&am…

【arm扩容】新硬盘挂载操作说明

背景: 未经过扩容的arm设备不满足移植大镜像的条件。 需求: 我们要对arm设备扩容,现在要将一个500G的硬盘挂进去。而且要按照老arm设备的挂法,保持相同的目录结构。配置这台机器。 下面老arm设备的硬盘挂载相关信息。 lsblk …

【已解决】如何为qt表格设置复选框单击事件

本博文源于笔者正在处理的表格复选框的事件,这里遇到的问题是:想要为qt表格中每一行复选框设置单击事件,一开始不知道如何处理,后面研究学习了一下,故记录此博文。 问题原因 想要为qt表格中每一行复选框设置单击事件…

SSRF(2)

Gopher协议的利用 gopher协议是ssrf利用中最强大的协议 gopher协议支持发出GET、POST请求: 可以先截获get请求包和post请求包,再构成符合gopher协议的请求。 默认端口为70,一般需发送到80端口 如果发起post请求,回车换行需要使用%0D%0A&…

Java编程小练习题目

题目: 你和相亲对象正在餐厅里约会。键盘录入两个整数,用来分别表示你和对象的衣服的时髦度。(手动录入0-10之间的整数,不能录入其他的)。如果你的时髦度大于你对象的时髦度,相亲就成功,打印输出…

消息队列-概述-JMS和AMQP

JMS和AMQP JMS是什么 JMS(JAVA Message Service,java 消息服务)是 Java 的消息服务,JMS 的客户端之间可以通过 JMS 服务进行异步的消息传输。JMS(JAVA Message Service,Java 消息服务)API 是一个消息服务…

1950 Springboot汽修技能点评系统idea开发mysql数据库APP应用java编程计算机网页源码maven项目

一、源码特点 springboot 汽修技能点评系统是一套完善的信息系统,结合springboot框架和bootstrap完成本系统,对理解JSP java编程开发语言有帮助系统采用springboot框架(MVC模式开发),系统 具有完整的源代码和数据库&…

N32G031 I2C使用说明

目录 功能说明 使用指导 应用场景 总结 N32G031微控制器的I2C(Inter-Integrated Circuit)输出功能是一个重要的数字通信接口,用于与其他设备进行数据交换。以下是关于N32G031 I2C输出功能的完整说明和使用指导: 功能说明 接…

CGFloat转NSString保持原有的精度,末尾不添加0

问题阐述: 我们进行CGFloat转NSString可能会遇到一个问题 例如有一个CGFloat的值为2.1,转化成NSString后显示2.1000... 解决办法: 方法一: 如何解决呢,可以使用%g格式符,可以保证传入的不管是2还是2.1…

了解预防中间人攻击

什么是中间人(MITM)攻击? 中间人(MITM)攻击是一种网络安全威胁,其中攻击者设法在两个通信实体之间插入自己,从而能够拦截、篡改或转发这两个实体之间的通信。由于攻击者能够同时与双方进行通信…

提高开关电源效率一般做法

提高开关电源效率一般做法 开关电源的功耗包括由半导体开关、磁性元件和布线等的寄生电阻所产生的固定损耗以及进行开关操作时的开关损耗。对于固定损耗,由于它主要取决于元件自身的特性,因此需要通过元件技术的改进来予以抑制。在磁性元件方面,对于兼顾了集肤效应和…

第12天:前端集成与交互

第12天:前端集成与交互 目标 将前端框架与Django后端集成,实现前后端分离。 任务概览 选择一个前端框架并创建基础页面。使用AJAX或Fetch API与后端API交互。 详细步骤 1. 选择前端框架 选择一个适合项目的前端框架,如React、Vue.js或…

Google Adsense----Wordpress插入谷歌广告

1.搭建个人博客,绑定谷歌search consol,注册adsense 详细可以参考这个视频b站视频 2.将个人博客网站关联到Adsense 在adsense里新加网站,输入你的博客网址,双击网站 将这段代码复制到header.php的里面 在wordpress仪表盘的外观-主题文件编辑器,找到header.php将代码复制,…

如何在 Ubuntu 14.04 上使用 Iptables 实现基本防火墙模板

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 简介 实施防火墙是保护服务器的重要步骤。其中很大一部分是决定强制执行对网络流量的限制的个别规则和策略。像 iptables 这样的防火墙…

HTTP/2 的 ALPN(应用层协议协商)

文章目录 HTTP/2 的 ALPN(应用层协议协商)详解什么是 ALPN?ALPN 的工作原理为什么使用 ALPN?ALPN 的优势示例 HTTP/2 的 ALPN(应用层协议协商)详解 什么是 ALPN? ALPN(Application…

全网最全!25届最近5年上海理工大学自动化考研院校分析

上海理工大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、历年真题PDF 七、初试大纲复试大纲 八、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、考试…

获取时间戳是使用System.currentTimeMillis()还是使用new Date().getTime()(阿里开发规范)?

1.阿里规范 在阿里的Java开发手册中强制要求使用System.currentTimeMillis() 2.为什么(源码详解) new Date().getTime()它实际上也是调用的System.currentTimeMillis(),源码分析。 这个fastTime是它的成员变量,在new Date()的时候就被赋值了。 扩展一…

CentOS 7 安装部署Cassandra4.1.5

一、Cassandra的介绍 Cassandra是一套开源分布式NoSQL数据库系统。它最初由Facebook开发,用于储存收件箱等简单格式数据,集GoogleBigTable的数据模型与Amazon Dynamo的完全分布式的架构于一身Facebook于2008将 Cassandra 开源,此后&#xff0…

算法设计与分析:分治法求最近点对问题

目录 一、实验目的 二、实验内容 三、算法思想 四、实验步骤 1、蛮力法 2、分治法 2.1 先用快速排序SortX(A,1,n)将所有点按x坐标升序排序 2.2 点数n<3时直接计算&#xff0c;时间复杂度为O(1) 2.3 点数n>3时 五、实验结果和分析 一、实验目的 1. 掌握分治法思…