企业级-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,此时…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要: 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式(自动驾驶、人工驾驶、远程驾驶、主动安全),并通过实时消息推送更新车…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...
6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙
Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...
HTTPS证书一年多少钱?
HTTPS证书作为保障网站数据传输安全的重要工具,成为众多网站运营者的必备选择。然而,面对市场上种类繁多的HTTPS证书,其一年费用究竟是多少,又受哪些因素影响呢? 首先,HTTPS证书通常在PinTrust这样的专业平…...
LangChain【6】之输出解析器:结构化LLM响应的关键工具
文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器?1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...
CppCon 2015 学习:Simple, Extensible Pattern Matching in C++14
什么是 Pattern Matching(模式匹配) ❝ 模式匹配就是一种“描述式”的写法,不需要你手动判断、提取数据,而是直接描述你希望的数据结构是什么样子,系统自动判断并提取。❞ 你给的定义拆解: ✴ Instead of …...
新版NANO下载烧录过程
一、序言 搭建 Jetson 系列产品烧录系统的环境需要在电脑主机上安装 Ubuntu 系统。此处使用 18.04 LTS。 二、环境搭建 1、安装库 $ sudo apt-get install qemu-user-static$ sudo apt-get install python 搭建环境的过程需要这个应用库来将某些 NVIDIA 软件组件安装到 Je…...
