vue开发网站--关于window.print()调取打印

1.vue点击按钮调取打印

点击按钮
在这里插入图片描述

调取打印该页面在这里插入图片描述

<div  @click="clickDown()">下载</div>methods: {//下载-调取打印clickDown() {window.print()},
}<style>/* 点击打印的样式 */@media print {.clickDown {display: none;}@page {size: portrait !important;/* 设置页面方向为纵向 */}}
</style>
分割线
分割线

2.el-radio单选回显,打印预览不显示

el-radio单选回显页面上是这样的:
在这里插入图片描述

打印预览是这样的:
在这里插入图片描述
解决方式:
不是代码的问题,打印预览时,需要在【选项】中选中【背景图形】的。
在这里插入图片描述

分割线
分割线

3.vue打印预览时,关于页眉页脚

3.1关于页面的页眉页脚,都可以在这里设置:

比较灵活一点,根据自己需求进行选择

在这里插入图片描述

3.2也可以在样式代码里单独设置:

代码设置之后,无论点不点击选项按钮,页眉页脚都会隐藏

/* 打印的样式 */@media print {/*去除页眉页脚*/@page {size: auto;margin: 10px;}html {background-color: #FFFFFF;margin: 0;}body {margin: 10px 15px;} /*去除页眉页脚*//*单独去掉页眉*/@page {size: auto;margin-top: 6mm;/* 去掉顶部标题 */size: portrait !important;/* 设置页面方向为纵向 */}}
分割线
分割线

4.用代码写了一页封面,将该代码设置为封面的第一页

window.print()方法会打印当前页面的全部内容,而不会自动分页或设置封面。
不过,您可以通过以下几种方法来模拟封面效果:

4.1第一种方式: 使用CSS媒体查询

<div class="cover"><h1>封面内容</h1><p>这是封面上的文本。</p>
</div>
<div class="content"><h1>正文内容</h1><p>这是正文内容。</p>
</div><style>@media print {   //打印时显示.cover {display: block;page-break-after: always; /* 确保封面在第一页 */}.content {display: block;}}
</style>

4.2第二种方式: 手动分页

如果需要更复杂的分页控制,可以手动在HTML中插入分页符。例如:

如果您需要更复杂的分页控制,可以手动在HTML中插入分页符。例如:

<div class="cover"><h1>封面内容</h1><p>这是封面上的文本。</p>
</div><div class="page-break"></div>   //手动分页符<div class="content"><h1>正文内容</h1><p>这是正文内容。</p>
</div><style>@media print {.page-break {display: block;page-break-before: always;  /*主要代码*/}}
</style>

效果展示:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/863077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐一款免费的GIF编辑器——【ScreenToGif编辑器】

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️木道寻的主页 文章目录 &#x1f525;前言&#x1f680;素材准备&#x1f680;逐帧制作&#x1f680;保存图片⭐️⭐️⭐️总结 &#…

Flask蓝图

Flask蓝图 蓝图&#xff08;Blueprint&#xff09;在 Flask 中是一个用于组织多个模块化子应用的强大工具。它允许开发者将不同的功能模块划分到不同的包或目录中&#xff0c;使得大型项目更加易于管理和维护。 一、不使用蓝图 在不使用蓝图的情况下&#xff0c;可能会将所有…

被淘汰的.NET技术概览

最近看到一篇文章&#xff0c;讲的时.NET被淘汰的技术&#xff0c;文章大体内容如下&#xff1a; 被淘汰的.NET技术概览 1.NET Framework 4.8之前的版本 微软已于2019年11月发布了.NET Framework的最后一个版本4.8&#xff0c;并宣布在2023年11月停止对之前版本提供支持。 …

java基础学习:Class类的isAssignableFrom方法

文章目录 一、介绍2、示例 一、介绍 在Java中&#xff0c;Class类有一个名为isAssignableFrom()的方法。这个方法用于判断一个类对象是否表示指定的类的类对象、接口、超类或超接口。换句话说&#xff0c;它用于检查一个类是否是另一个类的子类、接口实现或它们本身就是同一个…

【吊打面试官系列-MyBatis面试题】MyBatis 框架适用场合?

大家好&#xff0c;我是锋哥。今天分享关于 【MyBatis 框架适用场合 &#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; MyBatis 框架适用场合&#xff1f; 1、MyBatis 专注于 SQL 本身&#xff0c;是一个足够灵活的 DAO 层解决方案。 2、对性能的要求很高&#…

信息检索(58):Learning to Reweight Terms with Distributed Representations

Learning to Reweight Terms with Distributed Representations 摘要1 引言2 相关工作3 准备工作3.1 分布式词向量3.2 目标术语权重3.3 术语权重和检索模型3.3.1 概率语言模型3.3.2 BM25 4 使用分布式词向量进行词项权重学习5 实验方法6 实验结果6.1 语言模型的检索结果6.2 BM2…

Java | Leetcode Java题解之第191题位1的个数

题目&#xff1a; 题解&#xff1a; public class Solution {public int hammingWeight(int n) {int ret 0;while (n ! 0) {n & n - 1;ret;}return ret;} }

MySQL之如何分析慢查询

1、一个SQL语句执行很慢&#xff0c;如何分析&#xff1f; 可使用“explain”或者“desc”命令获取MySQL如何执行select语句的信息。 语法&#xff1a;直接在select语句前加关键字 explain或desc explain select job_desc from xxl_job_info where id 1; 2、执行计划中五个重…

基础位运算

基础知识点&#xff1a; 1.判断2的幂 n&&#xff08;n-1&#xff09;0 2.每次减一处理 n&(n-1) 3.判断出现1次次数的数 x^0x&#xff0c;x^x0&#xff0c;a^bc则ab^c&#xff0c;ba^c 力扣练习题&#xff1a; 136.只出现一次的数字 class Solution { public:int si…

【涵子来信】——社交宝典:克服你心中的内向,世界总有缺陷

内向&#xff0c;你是内向的吗&#xff1f;想必每个人不同&#xff0c;面对的情形也是不同的。 暑假是一个很好的机会&#xff0c;我是可以去多社交社交。但是&#xff0c;面对着CSDN上这么多技术人er&#xff0c;那么&#xff0c;我的宝典&#xff0c;对于大家&#xff0c;有…

操作系统期末复习(选择题(一))

单选题 1. 操作系统是一种。 A.应用软件 B.系统软件 C.通用软件 D.工具软件 2. 操作系统是对进行管理的软件。 A.软件 B.硬件 C.计算机资源 D.程序 3. 下列系统中&#xff0c;是实时系统。 A.激光照排系统 B.计算机辅助设计系统 C.办公自动化系统 D.航空定票…

HTTP3抛弃了经典的TCP,拥抱QUIC了!

核心内容概述 HTTP3与QUIC的关联TCP协议的局限性QUIC协议的设计优势QUIC与UDP的结合QUIC协议的特点未来互联网传输技术的展望 笔记 HTTP3与QUIC的关系 HTTP3是HTTP协议的3.0版本&#xff0c;使用QUIC作为其传输协议。QUIC最初被称为HTTP over QUIC&#xff0c;后更名为HTTP/3…

电脑文件夹里的表格删除了怎样恢复?别急,可这样做

在日常工作中&#xff0c;我们经常会使用到各种电子表格来记录、整理和分析数据。然而&#xff0c;有时由于操作失误或其他原因&#xff0c;我们可能会不小心将电脑文件夹中的重要表格删除。面对这种情况&#xff0c;许多人可能会感到惊慌失措&#xff0c;担心数据丢失会给工作…

db2主键自增、IDENTITY自增

db2设置主键自增 一、方式一&#xff1a;IDENTITY设置主键自增1.1、语法一&#xff1a;GENERATED BY DEFAULT AS IDENTITY1.1.1、使用1.1.2、注意事项或坑 1.2、语法二&#xff1a;GENERATED ALWAYS AS IDENTITY 二、方式二&#xff1a;Sequence(了解)2.1、insert时使用Sequenc…

网管平台配置步骤详解

网管平台是现代运维工作中不可或缺的工具&#xff0c;它能够帮助运维人员实时监控网络状态、管理网络设备、排查网络故障等。本文将参考运维行业的经验&#xff0c;详细介绍网管平台的配置步骤&#xff0c;以期为运维人员提供实用的操作指南。 一、明确需求和目标 在进行网管平…

计算机视觉全系列实战教程 (十二):图像分割(阈值分割threshold、分水岭算法watershed的使用步骤、洪水填充floodFill算法的使用)

1.图像分割概述 (1)What(什么是图像分割) 将图像划分为不同的子区域&#xff0c;使得同一子区域具有较高的相似性&#xff0c;不同的子区域具有明显的差异性 (2)Why(对图像进行分割有什么作用) 医学领域&#xff1a;将不同组织分割成不同区域帮助分析病情军事领域&#xff…

微信商家转账到零钱

1.发起商家转账 发起商家转账接口。商户可以通过该接口同时向多个用户微信零钱进行转账操作。请求消息中应包含商家批次单号、转账名称、appid、转账总金额、转账总笔数、转账openid、收款用户姓名等信息。注意受理成功将返回批次单号&#xff0c;此时并不代表转账成功&#x…

JVM性能监控工具:JMX与VisualVM高级用法

在Java应用的开发和维护过程中&#xff0c;性能监控是一个不可或缺的环节。Java Management Extensions&#xff08;JMX&#xff09;和VisualVM是两个强大的工具&#xff0c;它们可以帮助开发者监控和管理Java应用程序的性能。本文将详细介绍如何使用JMX和VisualVM进行高级性能…

第二十站:Java未来光谱——量子计算与新兴技术的展望(第二篇)

在探讨Java与量子计算的未来融合时&#xff0c;我们首先要理解量子计算的基本概念及其与传统计算的区别。量子计算利用量子力学原理&#xff0c;如量子比特&#xff08;qubit&#xff09;的叠加态和纠缠效应&#xff0c;能在理论上实现远超经典计算机的计算速度&#xff0c;尤其…

缓存、数据库、搜索引擎、消息队列

缓存、数据库、搜索引擎、消息队列这四者都是应用依赖的后端基础服务&#xff0c;他们的性能直接影响到了应用的整体性能&#xff0c;有时候你代码写的再好也许就是因为这些服务导致应用性能无法提升上去。 缓存: 缓存通常被用来解决热点数据的访问问题&#xff0c;是提高数据查…