vue实现pdf预览功能
背景:材料上传之后点击预览实现在浏览器上预览的效果
效果如下:

实现代码如下:
//预览和下载操作
<el-table-column fixed="right" label="操作" width="210"><template #default="scope"><span@click="handleRowClick(scope.row)"class="table-btn btn-handle"><i class="ri-eye-line"></i>预览</span><span@click="handleDownLoadClick(scope.row)"class="table-btn btn-handle"><i class="ri-download-2-line"></i>下载</span></template></el-table-column>
// 材料预览
export function materialPreview(data) {return Http.request({url: '/file/preview',method: 'get',responseType: 'blob',data: data});}//预览弹窗<el-dialogtitle="预览":visible.sync="PreviewDialogVisible"append-to-bodywidth="70%"center><div><iframe :src="pdfSrc" width="100%" height="800px"></iframe></div></el-dialog>//data中定义的变量data() {return {pdfSrc: "",downloadUrl: "http://10.110.96.76/",PreviewDialogVisible: false,}}//预览代码handleRowClick(row) {materialPreview({fileName:row.fileName,realFileName:row.fileName,}).then((res) => {console.log(res);const blob = new Blob([res.data], { type: "application/pdf" });this.pdfSrc = window.URL.createObjectURL(blob);this.$nextTick(() => {this.PreviewDialogVisible = true;});console.log(this.pdfSrc);//window.open(this.pdfSrc) //新窗口打开,借用浏览器去打印});}//下载代码handleDownLoadClick(data) {if (data.downloadUrl != null) {window.open(this.downloadUrl + data.downloadUrl);}},
后台返回的流文件格式

相关文章:
vue实现pdf预览功能
背景:材料上传之后点击预览实现在浏览器上预览的效果 效果如下: 实现代码如下: //预览和下载操作 <el-table-column fixed"right" label"操作" width"210"><template #default"scope">…...
(原创)Flutter与Native页面互相跳转
前言 实际开发混合项目时,常常会有页面跳转的需求 如果是原生界面和flutter界面需要互相跳转 这种情况应该怎么处理呢? 今天这篇博客主要就来介绍下这个情况 其实想一下,这个问题可以拆成四个小的问题来分析: 1:原生界…...
web集群学习--基于CentOS构建LVS-DR集群、配置nginx负载均衡
基于CentOS构建LVS-DR集群 环境准备 主机名 ip地址 node1 192.168.1.140 client node2 192.168.1.141 LVS node3 192.168.1.142 RS1 node4 192.168.1.143 RS2配置 1.关闭防火墙和SELinux [rootclient~]# systemctl stop firewalld [rootclient~]# systemctl disabl…...
基于 FPGA 的电机控制
FPGA 非常适合精密电机控制,在这个项目中,我们将创建一个简单的电机控制程序,在此基础上可以构建更复杂的应用。 需要的硬件 Digilent Pmod HB3 介绍 我们可以用一个简单的 8 位微控制器来控制电机,输出一个简单的脉宽调制波形。然…...
STM32F429IGT6使用CubeMX配置IIC通信(AT2402芯片)
1、硬件电路 写地址:0xA0 读地址:0xA1 存储容量:256Byte 2、设置RCC,选择高速外部时钟HSE,时钟设置为180MHz 3、配置IIC 4、生成工程配置 5、部分代码 #define IIC_WRITE_ADDR 0xA0 // IIC写地址 #define IIC_READ_ADDR 0xA1 …...
JS逆向系列之猿人学爬虫第14题-备而后动-勿使有变
文章目录 题目地址参数分析参考jspython 调用往期逆向文章推荐题目地址 https://match.yuanrenxue.cn/match/14题目难度标的是困难,主要难在js混淆部分。 参数分析 初始抓包有无限debugger反调试,可以直接hook 函数构造器过掉无限debugger Function.prototype.__construc…...
学cpp看的那点书
C C Primer 语言基础学习 C Templates The Complete Guide (2nd Edition) 学习模板,更好的阅读 STL 源码,毕竟C 标准库大部分是模板。 The C Standard Library 全称 The C Standard Library A Tutorial and Reference Second Edition简单的了解标…...
【C++】常用容器-string容器
1.string基本概念 2.string构造函数 #include <iostream> using namespace std;//string容器 void test01() {string s1;//创建空字符串,调用无参构造函数cout << "str1 " << s1 << endl;//什么都不输出const char* str "…...
SSH无法连接kali,拒绝密码
1,cd /etc/ssh 2,systemctl start ssh.server 3,vim /etc/ssh/sshd_config 将黄色文字改成这样 4,systemctl restart ssh 然后去连接就好了...
竞赛项目 深度学习的口罩佩戴检测 - opencv 卷积神经网络 机器视觉 深度学习
文章目录 0 简介1 课题背景🚩 2 口罩佩戴算法实现2.1 YOLO 模型概览2.2 YOLOv32.3 YOLO 口罩佩戴检测实现数据集 2.4 实现代码2.5 检测效果 3 口罩佩戴检测算法评价指标3.1 准确率(Accuracy)3.2 精确率(Precision)和召回率(Recall)3.3 平均精…...
redis 数据结构(一)
Redis 为什么那么快 redis是一种内存数据库,所有的操作都是在内存中进行的,还有一种重要原因是:它的数据结构的设计对数据进行增删查改操作很高效。 redis的数据结构是什么 redis数据结构是对redis键值对值的数据类型的底层的实现,…...
【高频面试题】JVM篇
文章目录 一、JVM组成1.什么是程序计数器2.什么是Java堆?3.能不能介绍一下方法区(元空间)4.你听过直接内存吗5.什么是虚拟机栈6.垃圾回收是否涉及栈内存?7.栈内存分配越大越好吗?8.方法内的局部变量是否线程安全?9.什么…...
第十三次CCF计算机软件能力认证
第一题:跳一跳 近来,跳一跳这款小游戏风靡全国,受到不少玩家的喜爱。 简化后的跳一跳规则如下:玩家每次从当前方块跳到下一个方块,如果没有跳到下一个方块上则游戏结束。 如果跳到了方块上,但没有跳到方块的…...
无人驾驶实战-第十二课(强化学习自动驾驶系统)(完)
在七月算法上报了《无人驾驶实战》课程,老师讲的真好。好记性不如烂笔头,记录一下学习内容。 课程入口,感兴趣的也可以跟着学一下。 ————————————————————————————————————————— 强化学习ÿ…...
【flask sqlalchmey】一次性将返回的列表对象或者 一行数据对象转成dict---flask-sqlalchemy输出json格式数据
def model_to_dict(object):return {c.name: getattr(object, c.name) for c in object.__table__.columns}#将一组数据转为list def scalars_to_list(object):return [model_to_dict(c) for c in object]class Sysdict(Base,SerializerMixin):__bind_key__ forest_fire_contr…...
goland插件推荐Rider UI Theme Pack
推荐一个goland配色插件Rider UI Theme Pack,里面自带visual assist配色,配色截图如下: 直接在plugins里面进行搜索或者在插件home page下载后进行安装均可。 总算找到一统vscode 和goland二者优势的插件了。...
人工智能面试常识-10
目录 1. 人工智能的常见用途和应用有哪些? 2. 什么是智能代理,它们如何在人工智能中使用?...
Android JNI开发从0到1,java调C,C调Java,保姆级教程详解
前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂,风趣幽默",感觉非常有意思,忍不住分享一下给大家。 👉点击跳转到教程 第一步首先配置Android studio的NDK开发环境,首先在Android studio中下载NDK…...
STM32基于CubeIDE和HAL库 基础入门学习笔记:功能驱动与应用
文章目录: 一:LED与按键驱动程序 main.c 1.闪灯 led.h led.c 2.按键控制LED亮灭 key.h key.c 二:蜂鸣器与继电器驱动程序 main.c 1.蜂鸣器 buzzer.h buzzer.c delay.h delay.c 2.继电器 relay.h relay.c 三࿱…...
创建型模式 (Creational Patterns) 玄子Share 设计模式 GOF 全23种 + 七大设计原则
玄子Share 设计模式 GOF 全23种 七大设计原则 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NWLAOFtO-1691793071647)(./assets/%E7%8E%84%E5%AD%90Share%20%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%20GOF%20%E5%85%A823%E7%A7%8D%20%20%E4%B8%83%E…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...
