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

vue实现不预览PDF的情况下打印pdf文件

前景:默认情况,实现打印需要根据预览的内容进行打印。
但是当只有打印按钮存在,不预览文件内容的情况下,实现打印的话,可以通过后端接口返回服务器上PDF的地址,前端通过隐藏的iframe标签中src可实现预览功能
主要是根据pdf的链接地址实现打印pdf

实现方式1:通过fetch()将PDF地址转化为blob

	print(row) {let contractUrl = "http://xxxxxx.pdf"fetch(contractUrl).then(res => {return res.blob() //将url地址转化为blob}).then(res => {var iframe = document.createElement('iframe')iframe.style.frameborder = 'no'iframe.style.display = 'none'iframe.style.pageBreakBefore = 'always'iframe.setAttribute('id', `printPdf${row.pk}`) //id要是唯一的,不然会获取到上一个PDF文件的内容iframe.setAttribute('name', `printPdf${row.pk}`)iframe.src = window.URL.createObjectURL(res) //创建一个包含指定对象的URLdocument.body.appendChild(iframe)this.doPrint(`printPdf${row.pk}`)window.URL.revokeObjectURL(iframe.src) //释放url})},doPrint(val) {var ordonnance = document.getElementById(val).contentWindowsetTimeout(() => {ordonnance.print()}, 500)},

实现方式2:采用文档流的形式解决跨域的问题

print() {// res为接口获取到的pdf文档流数据const blob = new Blob([res], {type: 'application/pdf'})var iframe = document.createElement('iframe')iframe.style.frameborder = 'no'iframe.style.display = 'none'iframe.style.pageBreakBefore = 'always'iframe.setAttribute('id', 'printPdf')iframe.setAttribute('name', 'printPdf')iframe.src = window.URL.createObjectURL(blob) //创建一个包含指定对象的URLdocument.body.appendChild(iframe)this.doPrint('printPdf')window.URL.revokeObjectURL(iframe.src) //释放url},
doPrint(val) {var ordonnance = document.getElementById(val).contentWindowsetTimeout(() => {ordonnance.print()}, 500)
},

相关文章:

vue实现不预览PDF的情况下打印pdf文件

前景:默认情况,实现打印需要根据预览的内容进行打印。 但是当只有打印按钮存在,不预览文件内容的情况下,实现打印的话,可以通过后端接口返回服务器上PDF的地址,前端通过隐藏的iframe标签中src可实现预览功能 主要是根据…...

C++ | Leetcode C++题解之第199题二叉树的右视图

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> rightSideView(TreeNode* root) {unordered_map<int, int> rightmostValueAtDepth;int max_depth -1;stack<TreeNode*> nodeStack;stack<int> depthStack;nodeStack.push(ro…...

[leetcode]圆圈中最后剩下的数字/ 破冰游戏

. - 力扣&#xff08;LeetCode&#xff09; class Solution {int f(int num, int target) {if (num 1) {return 0;}int x f(num - 1, target);return (target x) % num;} public:int iceBreakingGame(int num, int target) {return f(num, target);} };...

mysql数据库的管理

目录 一、常用的数据类型 二、MySQ数据库基础操作 1、登录数据库 2、查看当前的 MySQL 版本信息及连接用户名 3、查看当前服务器中的数据库 4&#xff0e;查看数据库中包含的表 5&#xff0e;查看表的结构&#xff08;字段&#xff09; 6、MySQL的6大约束属性 三、SQL…...

Java项目分层(持续更新中)

第一次更新时间2024.6.26 分包 实体类 功能类 工具类 分层 实体类层 我们要操作的对象&#xff0c;Book,Student... 控制层 控制请求转发 业务层 处理业务 数据层 连接数据库 处理数据 工具类层 JDBC等工具类 测试层 最终启动项目 明确我们所要做的业务之后&a…...

2024年软件测试面试题大全【答案+文档】

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、面试基础题 简述测试流程&#xff1a; 1、阅读相关技术文档&#xff08;如产品PRD、UI设计…...

数据赋能(131)——体系:数据转换——概述、关注焦点

概述 数据转换是指将数据从一种格式、结构或类型转换为另一种格式、结构或类型的过程。 数据转换操作属于数据整理过程。 它通常涉及数据清洗、数据映射、数据合并、数据拆分等操作&#xff0c;以确保数据的正确性和一致性。 数据转换的目的在于将原始数据转换为更易于处理…...

【自然语言处理系列】掌握jieba分词器:从基础到实战,深入文本分析与词云图展示

本文旨在全面介绍jieba分词器的功能与应用&#xff0c;从分词器的基本情况入手&#xff0c;逐步解析全模式与精确模式的不同应用场景。文章进一步指导读者如何通过添加自定义词典优化分词效果&#xff0c;以及如何利用jieba分词器进行关键词抽取和词性标注&#xff0c;为后续的…...

TikTok短视频矩阵系统

随着数字化时代的到来&#xff0c;短视频已成为人们获取信息、娱乐消遣的重要渠道。TikTok&#xff0c;作为全球最受欢迎的短视频平台之一&#xff0c;其背后的短视频矩阵系统是支撑其成功的关键因素。本文将深入探讨TikTok短视频矩阵系统的构成、功能以及它在新媒体时代中的影…...

码题杯:我会修改图

原题链接&#xff1a;码题集OJ-我会修改图​​​​​​ 题目大意&#xff1a;给你一张n个点&#xff08;编号为1∼n&#xff09;&#xff0c;m条边&#xff08;编号为1∼m&#xff09;的无向图&#xff0c;图上每个点都有一个点权&#xff0c;权值分别为a1​,a2​,…,an​&…...

MongoDB Map-Reduce 简介

MongoDB Map-Reduce 简介 MongoDB 是一个流行的 NoSQL 数据库&#xff0c;它使用文档存储数据&#xff0c;这些数据以 JSON 格式存储。MongoDB 提供了多种数据处理方法&#xff0c;其中 Map-Reduce 是一种用于批量处理和聚合数据的功能强大的工具。Map-Reduce 允许用户对大量数…...

某平台小程序逆向思路整理

一、下载软件 devtools 二、强制打开控制台 根据返回的数据我们得知数据被加密了 找到这个加密的js 发现加密的位置 打断点进入这个加密的方法 之后自定义js。python调用解密即可。...

黑马苍穹外卖6 清理redis缓存+Spring Cache+购物车的增删改查

缓存菜品 后端服务都去查询数据库&#xff0c;对数据库访问压力增大。 解决方式&#xff1a;使用redis来缓存菜品&#xff0c;用内存比磁盘性能更高。 key :dish_分类id String key “dish_” categoryId; RestController("userDishController") RequestMapping…...

鸿蒙开发系统基础能力:【@ohos.systemTime (设置系统时间)】

设置系统时间 本模块用来设置、获取当前系统时间&#xff0c;设置、获取当前系统日期和设置、获取当前系统时区。 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import systemTime …...

CVE-2020-26048(文件上传+SQL注入)

简介 CuppaCMS是一套内容管理系统&#xff08;CMS&#xff09;。 CuppaCMS 2019-11-12之前版本存在安全漏洞&#xff0c;攻击者可利用该漏洞在图像扩展内上传恶意文件&#xff0c;通过使用文件管理器提供的重命名函数的自定义请求&#xff0c;可以将图像扩展修改为PHP&#xf…...

【面试题】信息系统安全运维要做什么

信息系统安全运维是确保信息系统稳定、可靠、安全运行的一系列活动和措施。 其主要包括以下几个方面&#xff1a; 1.系统监控&#xff1a; 实时监测信息系统的运行状态&#xff0c;如服务器的性能指标、网络流量、应用程序的运行情况等。通过监控工具&#xff0c;及时发现系统…...

引导过程与服务器控制

一、引导过程 1.开机自检 服务器主机开机以后&#xff0c;将根据主板 BIOS 中的设置对 CPU&#xff08;Central Processing Unit&#xff0c; 中央处理器&#xff09;、内存、显卡、键盘等设备进行初步检测&#xff0c;检测成功后根据预设的启动顺序移 交系统控制权&#xff0c…...

前置章节-熟悉Python、Numpy、SciPy和matplotlib

目录 一、编程环境-使用jupyter notebook 1.下载homebrew包管理工具 2.安装Python环境 3.安装jupyter 4.下载Anaconda使用conda 5.使用conda设置虚拟环境 二、学习Python基础 1.快排的Python实现 (1)列表推导-一种创建列表的简洁方式 (2)列表相加 2.基本数据类型及运…...

在Ubuntu上安装和配置配置服务器防火墙(CSF)的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 Config Server Firewall&#xff08;CSF&#xff09;是大多数 Linux 发行版和基于 Linux 的 VPS 的免费高级防火墙。除了基本的防…...

Python-井字棋

井字棋 1.设计登录界面1.1导入需要的工具包1.2窗口显示1.3登录界面图片显示1.6标签按钮输入框显示 2.登录功能实现2.1用户数据存储 2.2登录和注册2.2.1登录功能实现2.2.2注册功能实现 3.井字棋游戏3.1 导入需要的工具包3.2 窗口显示3.2 按钮标签显示3.3 棋盘设置初始状态3.4 游…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...