当前位置: 首页 > news >正文

Vue3使用kkFileView预览文件pdf

kkFileView - 在线文件预览kkFileView官网 - kkFileView使用Spring Boot搭建,易上手和部署,基本支持主流办公文档的在线预览,如doc,docx,Excel,pdf,txt,zip,rar,图片等等icon-default.png?t=N7T8https://kkfileview.keking.cn/zh-cn/docs/usage.html业务场景:需要点击按钮,弹出弹框预览pdf文件

这里使用的是3.x.x 版本,需要下载base64

3.x.x 版本 # 示例

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>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 === '无') returnconst 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传给弹窗}

 弹窗页

<template><PatrolDialog :show="show" @close="show = false" DeleteFooterBtn width="1370px" top="5vh"><template #title><div class="dialog-title"><img :src="weatherStationIcon" />预览</div></template><div class="formPart"><el-dropdown trigger="click" @command="handleClickExport" size="small"><span class="el-dropdown-link"><i class="icon iconfont icon-daochu" style="color: var(--gdky-primary-color);"></i></span><template #dropdown><el-dropdown-menu><el-dropdown-item command="word">word</el-dropdown-item><el-dropdown-item command="pdf">pdf</el-dropdown-item></el-dropdown-menu></template></el-dropdown><!-- 在弹窗中显示的内容 --><iframe :src="pageUrl" width="100%" height="800px" class="file"></iframe></div></PatrolDialog>
</template><script>
import { reactive, toRefs, computed, watch } from 'vue'
import PatrolDialog from '@/views/Components/PatrolDialog.vue'
import weatherStationIcon from '@/assets/imgs/title_img.png'
import { exportWord, exportPdf } from '@/api/PlatTool/CustomModules/HeatSourceDispatch/index'export default {components: {PatrolDialog},setup(_, { emit }) {const state = reactive({show: false,weatherStationIcon, // iconcurRow: null,pageUrl: "",})const methods = {// 打开弹窗async open(curRow, url) {state.show = true;state.curRow = curRow;state.pageUrl = url},// 导出handleClickExport(command) {if (command === "word") {exportWord({ fileName: state.curRow.fileName })} else {exportPdf({ fileName: state.curRow.pdfFileName })}}}return {...toRefs(state),...methods,}}
}
</script>
<style lang='less' scoped>
.dialog-title {display: flex;font-size: 16px;font-family: MicrosoftYaHeiSemibold;color: var(--gdky-main-content-color);line-height: 24px;padding-bottom: var(--base-padding);img {margin-right: 8px;}
}.formPart {display: flex;flex-direction: column;flex: 1;height: 100%;.file {display: flex;justify-content: center;align-items: center;margin-left: -15px;position: relative;}.el-dropdown-link {position: absolute;top: 5px;right: 88px;z-index: 999;}
}
</style><style lang="less">
.g-dark {.formPart {.el-dropdown-link {}}
}
</style>

相关文章:

Vue3使用kkFileView预览文件pdf

kkFileView - 在线文件预览kkFileView官网 - kkFileView使用Spring Boot搭建&#xff0c;易上手和部署&#xff0c;基本支持主流办公文档的在线预览&#xff0c;如doc,docx,Excel,pdf,txt,zip,rar,图片等等https://kkfileview.keking.cn/zh-cn/docs/usage.html业务场景&#xf…...

建造者模式-C语言实现

UML类图&#xff1a; 代码实现&#xff1a; #include <stdio.h> #include <stdlib.h>// 产品类 typedef struct {char* part1;char* part2;char* part3; } Product;// 抽象建造者类 typedef struct {void (*buildPart1)(void*, const char*);void (*buildPart2)(v…...

Jmeter+influxdb+grafana监控平台在windows环境的搭建

原理&#xff1a;Jmeter采集的数据存储在infuxdb数据库中&#xff0c;grafana将数据库中的数据在界面上进行展示 一、grafana下载安装 Download Grafana | Grafana Labs 直接选择zip包下载&#xff0c;下载后解压即可&#xff0c;我之前下载过比较老的版本&#xff0c;这里就…...

关注这两点 或能避开一些现货黄金交易的陷阱

在现货黄金投资中&#xff0c;交易机会是处处都有&#xff0c;但是亏损的情况也可能出现。投资者要在陷阱处处的市场中获得稳定盈利&#xff0c;就需要懂得如何规避现货黄金投资的陷阱。下面我们就来介绍两个很常用的避开陷阱的方法。 看交易的活跃度。交易越活跃&#xff0c;市…...

Python 文件读写

Python 文件读写笔记整理 参数说明 open(path, flag[, encoding][,errors]) path:要打开文件的路径 flag:打开方式 encoding:编码方式 errors:错误处理 Flag打开方式表 模式 描述 r 以只读方式打开文件。文件的指针将会放在文件的开头。这是默认模式。 rb 以二进制格…...

线性分组码的奇偶校验矩阵均匀性分析

回顾信道编解码知识&#xff0c;我们知道信道编码要求编码具有检纠错能力&#xff0c;作为FEC&#xff08;forward error correction&#xff09;前向纠错编码的一类&#xff0c;线性分组码表示校验位与信息位的关系能够线性表示。 在这篇文章中&#xff0c;并不是要讨论信道编…...

leetcode算法之链表

目录 1.两数相加2.两两交换链表中的节点3.重排链表4.合并K个升序链表5.K个一组翻转链表 1.两数相加 两数相加 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(…...

2023.11.27 滴滴P0级故障或为k8s升级造成

滴滴11.27 P0级故障|打车|宕机|网约车|出租车|滴滴出行|系统故障_网易订阅 (163.com) 如何看待滴滴11月27日故障&#xff0c;对日常生产生活有哪些影响&#xff1f; - 知乎 (zhihu.com) 最新消息滴滴P0故障原因&#xff0c;是由于k8s集群升级导致的&#xff0c;后面又进行版本…...

Ubuntu16.04.4系统本地提权实验

目录 1.介绍&#xff1a; 2.实验&#xff1a; 3.总结&#xff1a; 1.介绍&#xff1a; 1.1&#xff1a;eBPF简介&#xff1a;eBPF(extendedBerkeleyPacketFilter)是内核源自于BPF的一套包过滤机制&#xff0c;BPF可以理解成用户与内核之间的一条通道&#xff0c;有非常强大的…...

Vue中使用正则表达式进行文本匹配和处理的方法

1. 正则表达式基础 正则表达式是一种用来匹配字符串的模式。它由普通字符&#xff08;例如字符 a 到 z&#xff09;和特殊字符&#xff08;称为"元字符"&#xff09;组成。以下是一些基本的正则表达式示例&#xff1a; 匹配邮箱的正则表达式&#xff1a; /^[\w-](\…...

php许愿墙代码包括前端和后端部分

以下是一个简单的PHP许愿墙代码示例&#xff0c;包括前端和后端部分&#xff1a; 前端HTML代码&#xff08;index.html&#xff09;&#xff1a; <!DOCTYPE html> <html> <head><title>许愿墙</title> </head> <body><h1>许…...

PHP 刷新缓存区的问题!

PHP流式输出&#xff0c;在Nginx下可以正常刷新缓存区 &#xff0c; 但是在Apache下会等待循环全部执行完&#xff0c;才会刷新&#xff01;有怎么解决&#xff1f; header(X-Accel-Buffering: no); // Nginx情况下必须加这一行header(Content-type: text/event-stream);header…...

Android Studio Giraffe-2022.3.1-Patch-3安装注意事项

准备工作&#xff1a; android studio下载地址&#xff1a;https://developer.android.google.cn/studio/releases?hlzh-cn gradle下载地址&#xff1a;https://services.gradle.org/distributions/ 比较稳定的网络环境&#xff08;比较android studio相关的依赖需要从谷歌那边…...

【古月居《ros入门21讲》学习笔记】14_参数的使用与编程方法

目录 说明&#xff1a; 1. 参数模型&#xff08;全局字典&#xff09; 2. 实现过程&#xff08;C&#xff09; 创建功能包 参数命令行的使用 YAML参数文件 rosparam命令 使用示例 编程方法&#xff08;C&#xff09; 配置代码编译规则 编译并运行 编译 运行 3. 实…...

Webpack 懒加载

文章目录 前言懒加载示例后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;webpack &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&#xff0c;感谢大家指出…...

深度遍历DFS(括号生成,二叉树所有路径)

正整数 n 代表生成括号的对数&#xff0c;请设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()","()(())","()()(…...

Rational Arithmetic

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 ☁️有理数运算 实现对两个有理数的…...

文心一言4.0(ERNIE-Bot-4)申请方法及简单调用代码示例

10月17日过后&#xff0c;估计很多人会看到类似的新闻&#xff0c;如图&#xff1a; 我看到这则新闻也是觉得非常感兴趣&#xff0c;于是本着“百闻不如一见”的实事求是的态度检索如何申请&#xff0c;没想到还真找到了ERNIE-Bot-4&#xff08;俗称&#xff1a;文心一言4.0&a…...

年终好价节买什么好?这些数码好物闭眼入

大家是不是都没听说过好价节&#xff1f;直截了当地说&#xff0c;这其实就是原先的双十二购物狂欢节&#xff0c;只不过给它起了个新名字。不过&#xff0c;今年毕竟是首次改名&#xff0c;因此淘宝年终好价节的各种优惠&#xff0c;仍然是我们值得期待的&#xff01;作为年前…...

webpack对项目进行优化

对项目进行优化是提高性能和效率的关键&#xff0c;以下是一些实用的Webpack优化技巧&#xff1a; 代码拆分&#xff08;Code Splitting&#xff09;&#xff1a;将代码拆分为多个小块&#xff0c;按需加载。通过配置splitChunks插件&#xff0c;可以将公共代码提取到单独的文件…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

PostgreSQL 与 SQL 基础:为 Fast API 打下数据基础

在构建任何动态、数据驱动的Web API时&#xff0c;一个稳定高效的数据存储方案是不可或缺的。对于使用Python FastAPI的开发者来说&#xff0c;深入理解关系型数据库的工作原理、掌握SQL这门与数据库“对话”的语言&#xff0c;以及学会如何在Python中操作数据库&#xff0c;是…...

AI书签管理工具开发全记录(十八):书签导入导出

文章目录 AI书签管理工具开发全记录&#xff08;十八&#xff09;&#xff1a;书签导入导出1.前言 &#x1f4dd;2.书签结构分析 &#x1f4d6;3.书签示例 &#x1f4d1;4.书签文件结构定义描述 &#x1f523;4.1. ​整体文档结构​​4.2. ​核心元素类型​​4.3. ​层级关系4.…...

Python_day48随机函数与广播机制

在继续讲解模块消融前&#xff0c;先补充几个之前没提的基础概念 尤其需要搞懂张量的维度、以及计算后的维度&#xff0c;这对于你未来理解复杂的网络至关重要 一、 随机张量的生成 在深度学习中经常需要随机生成一些张量&#xff0c;比如权重的初始化&#xff0c;或者计算输入…...