vue局部打印多页面pdf
技术背景
- html打印程pdf,使用的官方提供的window.print()
- 打印的样式 @media print {}
方法一
const printContent = this.$refs.bodyright;var textInput = printContent.getElementsByTagName("input");for (var i = 0; i < textInput.length; i++) {textInput[i].setAttribute("value", textInput[i].value)}var textTextarea = printContent.getElementsByTagName("textarea");for (var i = 0; i < textTextarea.length; i++) {textTextarea[i].innerHTML = textTextarea[i].value}// 创建一个隐藏的iframeconst iframe = document.createElement('div');document.body.appendChild(iframe);iframe.innerHTML = printContent.innerHTMLiframe.setAttribute('style', 'position: fixed;left:0;top:0;width:100%;height:100vh;z-index:9999;background:#fff');window.print();document.body.removeChild(iframe);}
缺点: 只能打一个页面
有点:不会刷新
方法二
printContent{const printContent = this.$refs.bodyright;document.body.innerHTML=printContent.innerHTML;// 执行打印操作window.print();// 重新加载样式window.location.reload();}
缺点: 替换时页面会刷新,保存不了状态
有点:可以打印多页面
方法三
printContent{let str = [], s = [];const printContent = this.$refs.bodyright;var textInput = printContent.getElementsByTagName("input");for (var i = 0; i < textInput.length; i++) {textInput[i].setAttribute("value", textInput[i].value)}var textTextarea = printContent.getElementsByTagName("textarea");for (var i = 0; i < textTextarea.length; i++) {textTextarea[i].innerHTML = textTextarea[i].value}var textCheckbox = printContent.getElementsByTagName("checkbox");for (var i = 0; i < textCheckbox .length; i++) {if(textCheckbox [i].checked){textCheckbox [i].checked= textCheckbox [i].checked}}var textRadio = printContent.getElementsByTagName("radio");for (var i = 0; i < textRadio.length; i++) {if(textRadio[i].checked){textRadio[i].checked= textRadio[i].checked}}let sheets = document.styleSheets;for (let i = 0; i < sheets.length; i++) {let ruleList = sheets[i].cssRules;for (let j = 0; j < ruleList.length; j++) {s.push(ruleList[j].cssText)}}// ${s.join(' ')}console.log(s.join(' '), '=====>')const iframe = document.createElement('iframe');iframe.style.display = 'none';document.body.appendChild(iframe);const printDocument = iframe.contentWindow.document;printDocument.open();printDocument.write('<html><head><title>局部打印</title>');printDocument.write(`<style>@media print { body { visibility: hidden; } .print-content { visibility: visible; } ${s.join(' ')} }</style>`);printDocument.write('</head><body>');printDocument.write('<div class="print-content">');printDocument.write(printContent.innerHTML);printDocument.write('</div>');printDocument.write('</body></html>');printDocument.close();// 等待iframe内容加载完成后再执行打印iframe.onload = function () {iframe.contentWindow.print();document.body.removeChild(iframe);};}
缺点: 安排多余的页面
有点:可以打印多页面
方法四
全选复制 另存为print.js
// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {if (!(this instanceof Print)) return new Print(dom, options);this.options = this.extend({'noPrint': '.no-print'}, options);if ((typeof dom) === "string") {this.dom = document.querySelector(dom);} else {this.isDOM(dom)this.dom = this.isDOM(dom) ? dom : dom.$el;}this.init();};Print.prototype = {init: function () {var content = this.getStyle() + this.getHtml();this.writeIframe(content);},extend: function (obj, obj2) {for (var k in obj2) {obj[k] = obj2[k];}return obj;},getStyle: function () {var str = "",styles = document.querySelectorAll('style,link');for (var i = 0; i < styles.length; i++) {str += styles[i].outerHTML;}str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";return str;},getHtml: function () {var inputs = document.querySelectorAll('input');var textareas = document.querySelectorAll('textarea');var selects = document.querySelectorAll('select');for (var k = 0; k < inputs.length; k++) {if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {if (inputs[k].checked == true) {inputs[k].setAttribute('checked', "checked")} else {inputs[k].removeAttribute('checked')}} else if (inputs[k].type == "text") {inputs[k].setAttribute('value', inputs[k].value)} else {inputs[k].setAttribute('value', inputs[k].value)}}for (var k2 = 0; k2 < textareas.length; k2++) {if (textareas[k2].type == 'textarea') {textareas[k2].innerHTML = textareas[k2].value}}for (var k3 = 0; k3 < selects.length; k3++) {if (selects[k3].type == 'select-one') {var child = selects[k3].children;for (var i in child) {if (child[i].tagName == 'OPTION') {if (child[i].selected == true) {child[i].setAttribute('selected', "selected")} else {child[i].removeAttribute('selected')}}}}}return this.dom.outerHTML;},writeIframe: function (content) {var w, doc, iframe = document.createElement('iframe'),f = document.body.appendChild(iframe);iframe.id = "myIframe";//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');w = f.contentWindow || f.contentDocument;doc = f.contentDocument || f.contentWindow.document;doc.open();doc.write(content);doc.close();var _this = thisiframe.onload = function(){_this.toPrint(w);setTimeout(function () {document.body.removeChild(iframe)}, 100)}},toPrint: function (frameWindow) {try {setTimeout(function () {frameWindow.focus();try {if (!frameWindow.document.execCommand('print', false, null)) {frameWindow.print();}} catch (e) {frameWindow.print();}frameWindow.close();}, 10);} catch (err) {console.log('err', err);}},isDOM: (typeof HTMLElement === 'object') ?function (obj) {return obj instanceof HTMLElement;} :function (obj) {return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';}};const MyPlugin = {}MyPlugin.install = function (Vue, options) {// 4. 添加实例方法Vue.prototype.$print = Print}export default MyPlugin
main.js内挂载（注意引入路径是你刚刚保存的地址）
import print from '@/utils/print.js'
Vue.use(print);
二、使用
在你要打印的元素上 写上ref=“print”
<div class="box" ref="print">...</div><el-button type="primary" @click="print">打 印</el-button>
methods
methods:{print(){this.$print(this.$refs.print); // 使用}}
另外不需要打印的元素加上 no-print类名 即可不打印
<div class="no-print">不要打印我</div>
参考:https://blog.csdn.net/m0_60067716/article/details/121338755
相关文章：
vue局部打印多页面pdf
技术背景 html打印程pdf,使用的官方提供的window.print()打印的样式 media print {} 方法一 const printContent this.$refs.bodyright;var textInput printContent.getElementsByTagName("input");for (var i 0; i < textInput.length; i) {textInput[i].se…...
指定或降低Rust 工具链的版本
要更改 Rust 工具链的版本，您可以使用以下命令之一： rustup default stable：使用 stable 版本的 Rust 工具链作为默认版本。rustup default beta：使用 beta 版本的 Rust 工具链作为默认版本。rustup default nightly：使…...
数据驱动成功：商城小程序分析与改进
在当今数字化时代，商城小程序成为了企业与消费者之间互动的重要途径。然而，一个成功的商城小程序不仅仅是一个购物平台，更需要通过数据分析不断进行改进和优化，以提升用户体验和营销效果。本文将深入探讨如何利用数据驱动的方式进…...
基于GUI的卷积神经网络和长短期神经网络的语音识别系统，卷积神经网的原理，长短期神经网络的原理
目录 背影 卷积神经网络CNN的原理 卷积神经网络CNN的定义 卷积神经网络CNN的神经元 卷积神经网络CNN的激活函数 卷积神经网络CNN的传递函数 长短期神经网络的原理 基于GUI的卷积神经网络和长短期神经网络的语音识别系统 代码下载链接：基于MATLABGUI编程的卷积神经网络和长短期…...
Docker环境安装elasticsearch和kibana
一、安装elasticsearch 创建es-network，让es、kibana在同一个网段： docker network create --driverbridge --subnet192.168.1.10/24 es-network运行elasticsearch docker run -d \ --name elasticsearch \ # 容器名 --hostname elasticsearch # 主机…...
【剖析STL】vector
vector的介绍及使用 1.1 vector的介绍 cplusplus.com/reference/vector/vector/ vector是表示可变大小数组的序列容器。就像数组一样，vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素 进行访问，和数组一样高效。但是…...
Redis、Memcache和MongoDB的区别
>>Memcached Memcached的优点： Memcached可以利用多核优势，单实例吞吐量极高，可以达到几十万QPS（取决于key、value的字节大小以及服务器硬件性能，日常环境中QPS高峰大约在4-6w左右）。适用于最大程度…...
2023中大ACM游记
游记 中午快十二点时才到了广州六中，在附近吃了塔斯汀汉堡，味道还不错。 十二点半才卡点到了考场，本以为来晚了，但老师说比赛时间延迟，十二点五十才开场。 三个人用一台电脑，这种比赛方式还是第一次遇到…...
记一次线上OOM事故
OOM 问题 linux内核有个机制叫OOM killer(Out-Of-Memory killer)，当系统需要申请内存却申请不到时，OOM killer会检查当前进程中占用内存最大者，将其杀掉，腾出内存保障系统正常运行。 一般而言，一个应用的内存逐渐增加&…...
Learning to Super-resolve Dynamic Scenes for Neuromorphic Spike Camera论文笔记
摘要 脉冲相机使用了“integrate and fire”机制来生成连续的脉冲流，以极高的时间分辨率来记录动态光照强度。但是极高的时间分辨率导致了受限的空间分辨率，致使重建出的图像无法很好保留原始场景的细节。为了解决这个问题，这篇文章提出了Sp…...
怎么使用手机远程控制Win10电脑？
可以使用手机远程控制电脑吗？ “近期，我将出差一段时间。问题是，我希望能够从很远的地方浏览家里电脑上的一些东西，但我不会一直随身携带笨重的笔记本电脑。我可以手机远程访问Windows电脑吗？ ” 当然&am…...
W6100-EVB-PICO 做UDP Client 进行数据回环测试（八）
前言 上一章我们用开发板作为UDP Server进行数据回环测试，本章我们让我们的开发板作为UDP Client进行数据回环测试。 连接方式 使开发板和我们的电脑处于同一网段： 开发板通过交叉线直连主机开发板和主机都接在路由器LAN口 测试工具 网路调试工具&a…...
Typora 相对路径保存图片以及 Gitee 无法显示图片
目录 Typora 相对路径保存图片 Gitee 无法显示图片 Typora 相对路径保存图片 Step1：修改 Typora 的偏好设置 自动在当前目录创建名为 "./${filename}.assets" 的文件夹粘贴图片到 md 中时，图片会自动另存到 "./${filename}.assets&qu…...
深入探索：Kali Linux 网络安全之旅
目录 前言 访问官方网站 导航到下载页面 启动后界面操作 前言 "Kali" 可能指的是 Kali Linux，它是一种基于 Debian 的 Linux 发行版，专门用于渗透测试、网络安全评估、数字取证和相关的安全任务。Kali Linux 旨在提供一系列用于测试网络和…...
Python 实现语音转文本
Python 实现语音转文本 Python可以使用多种方式来实现语音转文本，下面介绍其中两种。 方法一：使用Google Speech API Google Speech API 是 Google 在 2012 年推出的一个 API，可以用于实现语音转文本。使用 Google Speech API 需要安装 Sp…...
使用DSA、ECDSA、Ed25519 和 rfc6979_rust实现高安全性的数字签名
第一部分：背景和DSA简介 在数字世界中，确保数据的真实性和完整性是至关重要的。一个有效的方法是使用数字签名。在这篇文章中，我们将探讨四种流行的加密签名算法：DSA、ECDSA、Ed25519 和 rfc6979_rust。我们将重点讲解它们的基础…...
“深入探索JVM内部机制：解密Java虚拟机的奥秘“
标题：深入探索JVM内部机制：解密Java虚拟机的奥秘 摘要：本文将深入探索Java虚拟机（JVM）的内部机制，介绍JVM的基本原理、运行时数据区域以及垃圾回收机制，并通过示例代码解释这些概念。 正文&am…...
css3新增属性
文章目录 css3新增属性box-shadowborder-radius设置椭圆 position: sticky;渐变背景线性渐变可重复的渐变背景 径向渐变可重复的渐变背景 过渡分属性 动画关键帧与transition的关系demo 变形平移使用 旋转使用 其他使用立体效果perspective元素位于3D空间还是平面中 缩放变形的…...
自动驾驶港口车辆故障及事故处理机制
1、传感器故障： （1）单一传感器数据异常处理。自动驾驶电动平板传感方案为冗余设置，有其他传感器能够覆盖故障传感器观测区域，感知/定位模块将数据异常情况发给到规划决策模块，由“大脑”向中控平台上报故障…...
【leetcode 力扣刷题】快乐数/可被k整除的最小整数（可能存在无限循环的技巧题）
可能存在无限循环的技巧题 202. 快乐数数学分析 1015. 可被k整除的最小整数数学分析 202. 快乐数 题目链接：202. 快乐数 题目内容： 理解题意，快乐数就是重复每位数的平方之和得到的新数的过程，最终这个数能变成1。变成1以后&…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
【生成模型】视频生成论文调研
工作清单 上游应用方向：控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...
解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...
离线语音识别方案分析
随着人工智能技术的不断发展，语音识别技术也得到了广泛的应用，从智能家居到车载系统，语音识别正在改变我们与设备的交互方式。尤其是离线语音识别，由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力，广…...