企业级-pdf预览-前后端
作者:fyupeng
技术专栏:☞ https://github.com/fyupeng
项目地址:☞ https://github.com/fyupeng/distributed-blog-system-api
留给读者
本文
一、介绍
对于PDF预览,有很多开发者都遇到过头疼的难题,今天给大家介绍一个比较成熟的浏览器直接提供的预览嵌入Vue组件。
二、代码
- 快速使用:
html渲染:
<el-dialog:lock-scroll="false"custom-class="imgPreview_dia":show-close="true"top="5vh"width="90vw"v-model="dialogVisible"><filePreview :fileUrl="fileUrl" width="90vw" height="90vh"></filePreview></el-dialog>
css样式:
.imgPreview_dia {border-radius: 0 !important;margin: 0;left: 5vw;
}
js 处理:
const dialogVisible = ref(false);const fileUrl = ref("");const handleYulan = (index: number, row: object) => {fileUrl.value =// showDocFile() +"http://localhost:8086/machine/commonFile/notice/showDocFile" +"?fileId=" +row.fileId +"&pripid=" +props.initData?.pripid +"&time=" +new Date().getTime();// fileUrl.value =// showDocFile() +// "?docId=2516&gid=4055fb556a9c440590464017f28aae0e&time=1691460960121";dialogVisible.value = true;
};
- 模板:
后端处理:
public Boolean showNoticeDocFile(String fileId, HttpServletResponse response) {FileInputStream input = null;OutputStream output = null;try {File file = getNoticeDocRowFile(fileId);if (file == null || !file.exists()) {return false;}input = new FileInputStream(file);int i = input.available(); // 得到文件大小byte[] data = new byte[i];input.read(data); // 读数据response.setContentType("application/pdf"); // 设置返回的文件类型response.addHeader("Content-Length", String.valueOf(data.length)); //文件大小output = response.getOutputStream(); // 得到向客户端输出二进制数据的对象output.write(data); // 输出数据output.flush();file.delete();return true;} catch (Exception e) {logger.error("==showFile==文件信息回显失败!fileId:{}", fileId, e);return false;} finally {try {if (input != null)input.close();if (output != null)output.close();} catch (IOException e) {logger.error(e.getMessage(), e);}}}
前端处理:
filePreview.vue
<template><div class="wrap" v-loading="isLoading"><div class="pdf-container"><iframeid="doc-iframe":src="url":style="{ width: prop.width, height: prop.height, background: '#fff' }"class="parintDetailDoc"ref="iframeRef"></iframe></div></div>
</template><script lang="ts" setup>
import { ref, reactive, watch, defineProps, defineEmits, onMounted } from "vue";
import { ElMessage } from "element-plus";
const emits = defineEmits(["loaded"]);
const prop = defineProps({fileUrl: {type: String,default: "",},width: {type: String,default: "800px",},height: {type: String,default: "800px",},
});
const isLoading = ref(true);
const url = ref("");watch(() => prop.fileUrl,() => {url.value = prop.fileUrl;console.log("--------prop.fileUrl", prop.fileUrl);},{ immediate: true }
);
onMounted(() => {let iframeDom = document.getElementById("doc-iframe") || {};iframeDom.onload = function () {isLoading.value = false;emits("loaded");};
});
</script><style scoped>
.parintDetailDoc::-webkit-scrollbar {display: none;
}
.parintDetailDoc {border: none;max-width: 100%;
}
</style>
三、总结
简洁、高效、实用!
相关文章:
企业级-pdf预览-前后端
作者:fyupeng 技术专栏:☞ https://github.com/fyupeng 项目地址:☞ https://github.com/fyupeng/distributed-blog-system-api 留给读者 本文 一、介绍 对于PDF预览,有很多开发者都遇到过头疼的难题,今天给大家介绍…...
为什么 qt 成为 c++ 界面编程的第一选择?
一、前言 为什么现在QT越来越成为界面编程的第一选择,笔者从事qt界面编程已经有接近8年,在这之前我做C界面都是基于MFC,也做过5年左右。当时为什么会从MFC转到QT,主要原因是MFC开发界面想做得好看一些十分困难,引用第…...
Day1-顺序表
1. 数据结构-基本概念 数据之间的相互关系,包括三种关系:逻辑结构:表示数据元素之间的抽象关系(如邻接关系、从属关系等)。有四种基本的逻辑结构:集合结构、线性结构、树形结构、图状结构存储结构:数据的逻辑结构在计算…...
PostgreSQL - pgvector 插件构建向量数据库并进行相似度查询
在现代的机器学习和人工智能应用中,向量相似度检索是一个非常重要的技术,尤其是在文本、图像或其他类型的嵌入向量的操作中。本文将介绍如何在 PostgreSQL 中安装 pgvector 插件,用于存储和检索向量数据,并展示如何通过 Python 脚…...
UR机器人坐标系转化
UR机器人读取上来的坐标系是旋转矢量,每次都要查一下怎么转换,在这里记录以下...
【每日一题】LeetCode 2306.公司命名(位运算、数组、哈希表、字符串、枚举)
【每日一题】LeetCode 2306.公司命名(位运算、数组、哈希表、字符串、枚举) 题目描述 给定一个字符串数组 ideas,表示在公司命名过程中使用的名字列表。我们需要从 ideas 中选择两个不同的名字,称为 ideaA 和 ideaB。然后交换 i…...
240922-chromadb的基本使用
A. 背景介绍 ChromaDB 是一个较新的开源向量数据库,专为高效的嵌入存储和检索而设计。与其他向量数据库相比,ChromaDB 更加专注于轻量化、简单性和与机器学习模型的无缝集成。它的核心目标是帮助开发者轻松管理和使用高维嵌入向量,特别是与生…...
工厂模式和抽象工厂模式的实验报告
1. 实验结果: 记录并附上不同模型对象(例如:士兵、机器人、骑士)的展示效果截图。 2. 性能分析: 记录并比较抽象工厂模式与直接实例化的性能测试结果,分析它们在不同数量级对象创建时的开销与效益。 2.1…...
C标准库<string.h>-str、strn开头的函数
char *strcat(char *dest, const char *src) 函数功能 strcat 函数用于将一个字符串追加到另一个字符串的尾部。 参数解释 dest:指向目标字符串的指针,这个字符串的尾部将被追加 src 字符串的内容。src:指向源字符串的指针,其…...
Anaconda/Miniconda的删除和安装
要在 MacBook 上删除 Anaconda 或 Miniconda,并重新安装它,您可以按照以下步骤进行操作。 删除 Anaconda/Miniconda 1. 删除 Anaconda/Miniconda 文件和目录 打开 终端 并运行以下命令来删除安装目录。 对于 Anaconda,通常安装在 ~/anaconda3: rm -rf ~/anaconda3对于…...
【Harmony】轮播图特效,持续更新中。。。。
效果预览 swiper官网例子 Swiper 高度可变化 两边等长露出,跟随手指滑动 Swiper 指示器导航点位于 Swiper 下方 卡片楼层层叠一 一、官网 例子 参考代码: // xxx.ets class MyDataSource implements IDataSource {private list: number[] []cons…...
Go 并发模式:管道的妙用
解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在编写程序时,我们通常不会一口气写出一个冗长的函数。相反,我们通过构建函数、结构体和方法等抽象来简化代码。这不仅有助于隐藏不重要的细节,还使我们能够专注于某一部分代码,而不必担心影响其他部分。然而…...
CAN通信详解
1、CAN介绍 1.1、什么是CAN? CAN(Controller Area Network) 即控制器局域网,是ISO国际标准化的串行通信协议。 开发目的:为了满足汽车产业的“减少线束的数量”、“通过多个LAN,进行大量数据的高速通信”…...
52 文本预处理_by《李沐:动手学深度学习v2》pytorch版
系列文章目录 例如:第一章 Python 机器学习入门之pandas的使用 文章目录 系列文章目录一、理论部分二、代码读取数据集词元化词表整合所有功能小结练习 一、理论部分 对于序列数据处理问题,我们在序列处理中评估了所需的统计工具和预测时面临的挑战。 …...
【python】字符串扩展-格式化的精度控制
字符串扩展 字符串的三种定义方式字符串拼接字符串格式化格式化的精度控制字符串格式化方式2对表达式进行格式化 学习目标 掌握格式化字符串的过程中做数字的精度控制 字符串格式化 name "小明" set_up_year 2006 stock_price 19.99 message "我是&…...
C++第一次练习
题目1 class Solution { public:bool isletter(char s){if(s<z&&s>a)return true;if(s>A&&s<Z)return true;return false;}string reverseOnlyLetters(string s) {if(s.empty()){return s;}int left,right;left0;rights.size()-1;while(left<ri…...
计算机毕业设计 基于Python的医疗预约与诊断系统 Django+Vue 前后端分离 附源码 讲解 文档
🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…...
JAVA基础:正则表达式,String的intern方法,StringBuilder可变字符串特点与应用,+连接字符串特点
1 String中的常用方法2 1.1 split方法 将字符串按照指定的内容进行分割,将分割成的每一个子部分组成一个数组 分割内容不会出现在数组中 实际上该方法不是按照指定的简单的符号进行分割的,而是按照正则表达式进行分割 1.2 正则表达式 用简单的符号组合…...
前端接口报错302 [已解决]
前端接口报错302 [已解决] 在前端开发中,与后端接口的交互是项目成功的关键。然而,遇到如302这样的状态码报错时,可能会让开发者感到困惑。本文将通过详细解析和多个代码案例,帮助你深入理解前端接口报错302,并提供有效…...
【网络安全】利用未授权API接口实现创建Support Ticket
未经许可,不得转载。 文章目录 正文目标为一个技术平台,客户可以通过该平台预订不同类型的服务。 正文 redacted.com 是主域,但所有流量都通过 api.redacted.com。我过去曾使用该公司预订了一些服务,因此我的帐户中有预订历史。 我对我的订单开具了 Support Ticket,此时…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
