当前位置: 首页 > 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)
},

相关文章:

  • 【专业英语 复习】第10章 Information System
  • 奔驰EQS SUV升级原厂主动式氛围灯效果展示
  • Ruby 注释
  • AcWing 255. 第K小数
  • C++之std::queue::emplace
  • ArcGIS与Excel分区汇总统计三调各地类面积!数据透视表与汇总统计!
  • 在同一个 Blazor 应用中结合 SQL-DB 和 MongoDB
  • windows设置开机启动项
  • 如何卸载宝塔面板?
  • 代码随想三刷二叉树篇4
  • 外观模式(大话设计模式)C/C++版本
  • U-Net for Image Segmentation
  • 【系统架构设计师】二、操作系统知识(操作系统概述|进程管理)
  • 决策树学习
  • 非关系型数据库NoSQL数据层解决方案 之 Mongodb 简介 下载安装 springboot整合与读写操作
  • android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
  • Bootstrap JS插件Alert源码分析
  • ES6系统学习----从Apollo Client看解构赋值
  • Flannel解读
  • isset在php5.6-和php7.0+的一些差异
  • Joomla 2.x, 3.x useful code cheatsheet
  • MySQL Access denied for user 'root'@'localhost' 解决方法
  • nfs客户端进程变D,延伸linux的lock
  • Redis中的lru算法实现
  • select2 取值 遍历 设置默认值
  • SSH 免密登录
  • Web设计流程优化:网页效果图设计新思路
  • 百度贴吧爬虫node+vue baidu_tieba_crawler
  • 不上全站https的网站你们就等着被恶心死吧
  • 成为一名优秀的Developer的书单
  • 关于Java中分层中遇到的一些问题
  • 观察者模式实现非直接耦合
  • 京东美团研发面经
  • 排序(1):冒泡排序
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 突破自己的技术思维
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 文本多行溢出显示...之最后一行不到行尾的解决
  • 小程序开发之路(一)
  • 译米田引理
  • 赢得Docker挑战最佳实践
  • 再次简单明了总结flex布局,一看就懂...
  • 中文输入法与React文本输入框的问题与解决方案
  • scrapy中间件源码分析及常用中间件大全
  • ‌JavaScript 数据类型转换
  • #pragam once 和 #ifndef 预编译头
  • (11)MATLAB PCA+SVM 人脸识别
  • (33)STM32——485实验笔记
  • (function(){})()的分步解析
  • (pt可视化)利用torch的make_grid进行张量可视化
  • (vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束
  • (八)c52学习之旅-中断实验
  • (八)Docker网络跨主机通讯vxlan和vlan
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)