vue 实现自定义分页打印 window.print

news2024/10/11 10:24:40

首先这里是我自定义了打印界面才实现的效果,如果不用自定义界面实现,应该是一样的吧。具体可能需要自己去试试看

我的需求是界面有两个表格,点击全部打印,我需要把第一表格在打印是第1页,第二个表格是第二页
如图:
在这里插入图片描述

在网上找了很多办法,有一些需要应用其他插件实现。最终在菜鸟教程看到page-break-after 属性

这里需要注意的是这个样式需要写在行内样式里才生效。(已经踩过坑了)

自定义打印界面

<section v-for="ite in 2" :key="ite" style="page-break-after: always">
<h3>打印单{{item}}</h3>
      <table
          style="
            width: 100%;
            border-color: #ccc;
            border-collapse: collapse;
            color: #7b7d80;
            text-align: center;
          "
          border="1"
          cellspacing="0"
          cellpadding="0"
          class="table"
        >
        这里是自定义表格内容
        </table>
</section>

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

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

相关文章

二十二、软考-系统架构设计师笔记-真题解析-2018年真题

软考-系统架构设计师-2018年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.在磁盘调度管理中&#xff0c;应先进行移臂调度&#xff0c;再进行旋转调度。假设磁盘移动臂位于21号柱面上&#xff0c;进程的请求序列如下表所示。如果采用最短移臂调度算法&#xff0c;那么系统…

ensp中pc机访问不同网络的服务器

拓扑图如下&#xff0c;资源已上传 说明&#xff1a;pc通过2个路由访问server服务器 三条线路分别是192.168.1.0网段&#xff0c;192.168.2.0网段和192.168.3.0网段&#xff0c;在未配置的情况下&#xff0c;pc设备是访问不到server的 具体操作流程 第一&#xff1b;pc设备…

C# 操作 Word 全域查找且替换(含图片对象)

目录 关于全域查找且替换 Word应用样本 SqlServer数据表部分设计样本 范例运行环境 配置Office DCOM 设计实现 组件库引入 实现原理 查找且替换的核心代码 窗格内容 页眉内容 页脚内容 形状内容 小结 关于全域查找且替换 C#全域操作 Word 查找且替换主要包括如下…

CSGO赛事管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. 系…

QT数据类型和容器用法

Qt库提供了基于通用模板的容器类, 这些类可用于存储指定类型的数据项&#xff0c;Qt中这些容器类的设计比STL容器更轻&#xff0c;更安全且更易于使用。容器类也都是隐式共的&#xff0c;它们是可重入的&#xff0c;并且已针对速度/低内存消耗和最小的内联代码扩展进行了优化&a…

RabbitMQ基础笔记

视频链接&#xff1a;【黑马程序员RabbitMQ入门到实战教程】 文章目录 1.初识MQ1.1.同步调用1.2.异步调用1.3.技术选型 2.RabbitMQ2.1.安装2.1.1 Docker2.1.1 Linux2.1.1 Windows 2.2.收发消息2.2.1.交换机2.2.2.队列2.2.3.绑定关系2.2.4.发送消息 2.3.数据隔离2.3.1.用户管理2…

Elasticsearch:语义搜索即服务处于卓越搜索的中心

作者&#xff1a;来自 Elastic Sherry Ger, Stephen Brown 对于许多企业来说&#xff0c;搜索卓越中心&#xff08;center of excellence - COE&#xff09;向其用户提供搜索服务&#xff0c;从不同的数据源中整理知识&#xff0c;并将搜索功能集成到其内部和外部应用程序中。…

神策数据参与制定首份 SDK 网络安全国家标准

国家市场监督管理总局、国家标准化管理委员会发布中华人民共和国国家标准公告&#xff08;2023 年第 13 号&#xff09;&#xff0c;全国信息安全标准化技术委员会归口的 3 项国家标准正式发布。其中&#xff0c;首份 SDK 国家标准《信息安全技术 移动互联网应用程序&#xff0…

如何配置本地ssh连接远程Linux服务器

1.条件 本地操作系统Ubuntu远程服务器&#xff08;Linux都可以&#xff09; 本地如果是Window,其实也一样&#xff0c;但是需要先下载ssh和putty工具&#xff0c;然后操作步骤是一样的 2.生成ssh公私钥对 # 在本地重新生成SSH公私钥对非常简单&#xff0c;在你的命令行终端&a…

词令关键词口令直达工具:打开「词令」输入关键词直达口令怎么使用?

词令是一款关键词口令直达工具&#xff1b;使用词令关键词口令直达工具&#xff0c;输入指定的词令关键词直达口令&#xff0c;搜索直达该词令关联的网站、页面、程序、应用、服务或功能等等&#xff0c;实现一键直达目标&#xff0c;避免繁琐的查找点击行为&#xff0c;提高用…

报错 /core/library/think/cache/driver/File.php 第 126 行左右(已解决)

报错 /core/library/think/cache/driver/File.php 第 126 行左右 解决方法&#xff1a; 网站后台版本低于v1.5.2出现的缓存问题&#xff0c;如果无法登录后台了&#xff0c;就通过FTP&#xff0c;把 /data/runtime 里的都删掉&#xff0c;然后进后台升级到最新版 一、进入宝…

初步了解JavaSE

目录 前言&#xff1a; 一、Java SE主要包含模块&#xff1a; 二、JavaSE的环境搭建 三、JavaSE简单入门 1&#xff09;文件名称不对&#xff0c;如果有一个叫 helloworld.java&#xff0c;但是class命名为HelloWord. 2&#xff09;如果希望我们文件名称和类名不一致&…

光耦合器电路基本概述

在当今快速发展的技术环境中&#xff0c;光耦合器电路在确保电信号跨隔离电路的无缝传输方面发挥着关键作用。这些半导体器件通常被称为光电隔离器&#xff0c;具有许多优点&#xff0c;包括电路隔离、信号传输和精确的电路控制。然而&#xff0c;如果不全面了解市场上各种光耦…

【漏洞复现】通天星CMSV6 admin 弱口令漏洞(CVE-2024-29666)

0x01 产品简介 CMSV6平台是基于车辆位置信息服务和实时视频传输服务的创新技术和开放运营理念。为GPS运营商车辆硬件设备制造商、车队管理企业等车辆运营相关企业提供核心基础数据服务。 0x02 漏洞概述 CMSV6 7.31.0.2、7.32.0.3版本中存在弱密码漏洞&#xff0c;未授权的攻…

俄罗斯深陷芯片自主困境,良率仅5成 |百能云芯

俄罗斯的芯片产业一直以来都面临着诸多挑战&#xff0c;尤其是在当前的国际形势下&#xff0c;这些挑战更加凸显。随着俄乌冲突的爆发&#xff0c;西方国家对俄罗斯实施了一系列经济制裁&#xff0c;导致俄罗斯科技产业受到了严重影响。据了解&#xff0c;俄国最大的本土芯片厂…

GooglePlay无法下载应用问题

问题如下 解决方法 1、实际上是因为google尚未添加apk downloader扩展程序 2、添加该扩展程序后&#xff0c;在应用中搜索应用名即可 欧克&#xff01;下载完成

KSD测试系统使用方法和注意事项

①下载链接在最顶部&#xff1b; ②安装方法&#xff1a;应该先将测试设备绑定在假人身上&#xff0c;测试设备不能过度往下拉&#xff0c;传感器绑在脖子上&#xff0c;切记最后才开传感器开关&#xff01;&#xff01;&#xff01;开传感器后3秒内不要碰测试设备衣服&#x…

2024年电商圈大地震!腾讯带着视频号小店,杀进电商市场了!

大家好&#xff0c;我是电商糖果 今年的电商圈真的是热闹非凡&#xff0c;各个平台之间硝烟四起。 当几大平台打的火热的时候&#xff0c;腾讯却偷偷的推出了视频号小店&#xff0c;想要加入混战&#xff0c;吃到电商这盘大蛋糕。 可能大部分人都不知道什么是视频号小店&…

C++从入门到精通——函数重载

函数重载 前言一、函数重载概念二、函数重载的分类参数类型不同的函数重载参数个数不同的函数重载参数类型顺序不同的函数重载 三、函数重载的具体代码展示main.cpp 四、为什么为什么C支持函数重载&#xff0c;而C语言不支持函数重载呢 前言 函数重载是指在同一个作用域内&…

芯片测试介绍

一、芯片测试的目的 芯片测试的目的就两个&#xff1a; 1、确认芯片与产品手册上写的内容一致&#xff0c;就是看做出来的芯片跟设计的是不是一致的&#xff1b; 2、把芯片的边界条件测出来&#xff0c;就是看芯片有多耐操。 二、芯片测试分类 大家听到最多的测试可能就是…