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

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预览功能

背景&#xff1a;材料上传之后点击预览实现在浏览器上预览的效果 效果如下&#xff1a; 实现代码如下&#xff1a; //预览和下载操作 <el-table-column fixed"right" label"操作" width"210"><template #default"scope">…...

(原创)Flutter与Native页面互相跳转

前言 实际开发混合项目时&#xff0c;常常会有页面跳转的需求 如果是原生界面和flutter界面需要互相跳转 这种情况应该怎么处理呢&#xff1f; 今天这篇博客主要就来介绍下这个情况 其实想一下&#xff0c;这个问题可以拆成四个小的问题来分析&#xff1a; 1&#xff1a;原生界…...

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 非常适合精密电机控制&#xff0c;在这个项目中&#xff0c;我们将创建一个简单的电机控制程序&#xff0c;在此基础上可以构建更复杂的应用。 需要的硬件 Digilent Pmod HB3 介绍 我们可以用一个简单的 8 位微控制器来控制电机&#xff0c;输出一个简单的脉宽调制波形。然…...

STM32F429IGT6使用CubeMX配置IIC通信(AT2402芯片)

1、硬件电路 写地址&#xff1a;0xA0 读地址&#xff1a;0xA1 存储容量&#xff1a;256Byte 2、设置RCC&#xff0c;选择高速外部时钟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) 学习模板&#xff0c;更好的阅读 STL 源码&#xff0c;毕竟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;//创建空字符串&#xff0c;调用无参构造函数cout << "str1 " << s1 << endl;//什么都不输出const char* str "…...

SSH无法连接kali,拒绝密码

1&#xff0c;cd /etc/ssh 2,systemctl start ssh.server 3,vim /etc/ssh/sshd_config 将黄色文字改成这样 4&#xff0c;systemctl restart ssh 然后去连接就好了...

竞赛项目 深度学习的口罩佩戴检测 - opencv 卷积神经网络 机器视觉 深度学习

文章目录 0 简介1 课题背景&#x1f6a9; 2 口罩佩戴算法实现2.1 YOLO 模型概览2.2 YOLOv32.3 YOLO 口罩佩戴检测实现数据集 2.4 实现代码2.5 检测效果 3 口罩佩戴检测算法评价指标3.1 准确率&#xff08;Accuracy&#xff09;3.2 精确率(Precision)和召回率(Recall)3.3 平均精…...

redis 数据结构(一)

Redis 为什么那么快 redis是一种内存数据库&#xff0c;所有的操作都是在内存中进行的&#xff0c;还有一种重要原因是&#xff1a;它的数据结构的设计对数据进行增删查改操作很高效。 redis的数据结构是什么 redis数据结构是对redis键值对值的数据类型的底层的实现&#xff0c…...

【高频面试题】JVM篇

文章目录 一、JVM组成1.什么是程序计数器2.什么是Java堆&#xff1f;3.能不能介绍一下方法区(元空间&#xff09;4.你听过直接内存吗5.什么是虚拟机栈6.垃圾回收是否涉及栈内存&#xff1f;7.栈内存分配越大越好吗&#xff1f;8.方法内的局部变量是否线程安全&#xff1f;9.什么…...

第十三次CCF计算机软件能力认证

第一题&#xff1a;跳一跳 近来&#xff0c;跳一跳这款小游戏风靡全国&#xff0c;受到不少玩家的喜爱。 简化后的跳一跳规则如下&#xff1a;玩家每次从当前方块跳到下一个方块&#xff0c;如果没有跳到下一个方块上则游戏结束。 如果跳到了方块上&#xff0c;但没有跳到方块的…...

无人驾驶实战-第十二课(强化学习自动驾驶系统)(完)

在七月算法上报了《无人驾驶实战》课程&#xff0c;老师讲的真好。好记性不如烂笔头&#xff0c;记录一下学习内容。 课程入口&#xff0c;感兴趣的也可以跟着学一下。 ————————————————————————————————————————— 强化学习&#xff…...

【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&#xff0c;里面自带visual assist配色&#xff0c;配色截图如下&#xff1a; 直接在plugins里面进行搜索或者在插件home page下载后进行安装均可。 总算找到一统vscode 和goland二者优势的插件了。...

人工智能面试常识-10

目录 1. 人工智能的常见用途和应用有哪些? 2. 什么是智能代理,它们如何在人工智能中使用?...

Android JNI开发从0到1,java调C,C调Java,保姆级教程详解

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 第一步首先配置Android studio的NDK开发环境&#xff0c;首先在Android studio中下载NDK…...

STM32基于CubeIDE和HAL库 基础入门学习笔记:功能驱动与应用

文章目录&#xff1a; 一&#xff1a;LED与按键驱动程序 main.c 1.闪灯 led.h led.c 2.按键控制LED亮灭 key.h key.c 二&#xff1a;蜂鸣器与继电器驱动程序 main.c 1.蜂鸣器 buzzer.h buzzer.c delay.h delay.c 2.继电器 relay.h relay.c 三&#xff1…...

创建型模式 (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…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...