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

vue前端实现打印功能并约束纸张大小---调用浏览器打印功能打印页面部分元素并固定纸张大小

news 2026/3/30 9:56:40

需求是打印指定div实现小票打印功能。调用浏览器的自带打印功能只能实现打印可视区域，所以这里采用截图+新窗口打开打印去实现此需求。

1.安装html2canvas库实现截图功能

npm install html2canvas --save

2.在需要进行截图和打印的组件中，引入html2canvas库

import html2canvas from 'html2canvas';

3.实现截图打印功能

  1. 需要给打印元素添加id为targetDiv
<div id="targetDiv"></div>
  1. 截图div获取base64图片
    // 打印当前sheetprintDiv() {const div = document.getElementById('targetDiv'); // 通过id获取目标divhtml2canvas(div).then((canvas) => {const base64 = canvas.toDataURL(); // 将canvas转换为base64图片this.printMethods(base64); // 调用打印方法});}
  1. 书写打印方法
printMethods(base64) {const printWindow = window.open('', '_blank'); // 打开一个新的空白窗口printWindow.document.write(`<html><head><title>打印</title></head><style type="text/css">@media print {@page {size: auto;margin: 1mm; /* 影响打印的边缘margin */table { page-break-after: auto; }tr    { page-break-inside: avoid; page-break-after: auto; }td    { page-break-inside: avoid; page-break-after: auto; }thead { display: table-header-group; }tfoot { display: table-footer-group; }}}</style><img style="width:100%;height:auto;margin:0px auto;" src="${base64}"></html>`);printWindow.document.close();printWindow.onload = function () {// 图片加载完成后触发打印操作printWindow.print(); // 打印新窗口中的内容printWindow.onafterprint = function () {// 打印完成后关闭新窗口printWindow.close();};};}

注意:

1.  <head><title>打印</title></head>这里是新窗口的页面标题
2.  @media print {@page {size: auto;margin: 1mm; /* 影响打印的边缘margin */table { page-break-after: auto; }tr    { page-break-inside: avoid; page-break-after: auto; }td    { page-break-inside: avoid; page-break-after: auto; }thead { display: table-header-group; }tfoot { display: table-footer-group; }}}这一块是设置打印纸的大小 我这里是根据我元素的大小来设置的，可跟具体需求改写

相关文章：

vue前端实现打印功能并约束纸张大小---调用浏览器打印功能打印页面部分元素并固定纸张大小

需求是打印指定div实现小票打印功能。调用浏览器的自带打印功能只能实现打印可视区域&#xff0c;所以这里采用截图新窗口打开打印去实现此需求。 1.安装html2canvas库实现截图功能 npm install html2canvas --save2.在需要进行截图和打印的组件中&#xff0c;引入html2canvas…...

编程日记 2023/10/19 0:33:31

音乐播放器蜂鸣器ROM存储歌曲verilog,代码/视频

名称&#xff1a;音乐播放器蜂鸣器ROM存储歌曲 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 设计音乐播放器&#xff0c;要求至少包含2首歌曲&#xff0c;使用按键切换歌曲&#xff0c;使用开发板的蜂鸣器播放音乐&#xff0c;使用Quartus内的RO…...

编程日记 2023/10/19 0:32:30

Arduino Nano 引脚复用分析

近期开发的项目为气体传感器采集仪&#xff0c;综合需求&#xff0c;选取NANO作为主控&#xff0c;附属设备有 oled、旋转编码器、H桥板、蠕动泵、开关、航插等&#xff0c;主要是用现有接口怎么合理配置实现功能。 不管stm32 还是 Arduino 都要看清引脚图 D2 D3 引脚是两个外…...

编程日记 2023/10/19 0:30:27

Go 函数多返回值错误处理与error 类型介绍

Go 函数多返回值错误处理与error 类型介绍 文章目录 Go 函数多返回值错误处理与error 类型介绍一、error 类型与错误值构造1.1 Error 接口介绍1.2 构造错误值的方法1.2.1 使用errors包1.2.2 自定义错误类型 二、error 类型的好处2.1 第一点&#xff1a;统一了错误类型2.2 第二点…...

编程日记 2023/10/19 0:29:26

数论分块

本质就是利用取整分数值的块状分布。 UVA11526 H(n) 题意&#xff1a; 求 ∑ i 1 n n i \sum_{i1}^{n} \frac {n}{i} ∑i1n​in​。 解析&#xff1a; ⌊ n i ⌋ \lfloor \frac{n}{i} \rfloor ⌊in​⌋ 只有 O ( n ) O(\sqrt n) O(n ​) 种取值&#xff0c;考虑将相同值同…...

编程日记 2023/10/19 0:28:26

宏任务与微任务，代码执行顺序

js引擎工作进程是同步的。事件循环机制&#xff0c;事件队列。 脚本代码执行顺序&#xff0c;是先执行同步代码&#xff0c;遇到微任务&#xff0c;就把它推进任务队列中。每个宏任务完成后&#xff0c;再执行下一个宏任务。 宏任务有哪些&#xff1a; i/o读写 定时器setTi…...

编程日记 2023/10/19 0:27:24

正方形（Squares, ACM/ICPC World Finals 1990, UVa201）rust解法

有n行n列&#xff08;2≤n≤9&#xff09;的小黑点&#xff0c;还有m条线段连接其中的一些黑点。统计这些线段连成了多少个正方形&#xff08;每种边长分别统计&#xff09;。 行从上到下编号为1&#xff5e;n&#xff0c;列从左到右编号为1&#xff5e;n。边用H i j和V i j表示…...

编程日记 2023/10/19 0:26:23

【算法设计与分析qwl】伪码——顺序检索，插入排序

伪代码&#xff1a; 例子&#xff1a; 改进的顺序检索 Search(L,x)输入&#xff1a;数组L[1...n]&#xff0c;元素从小到大排序&#xff0c;数x输出&#xff1a;若x在L中&#xff0c;输出x位置下标 j ,否则输出0 j <- 1 while j<n and x>L[j] do j <- j1 if x<…...

编程日记 2023/10/19 0:25:21

Uniapp路由拦截-自定义路由白名单

步骤一：新建routerIntercept.js文件 步骤二：routerIntercept文件中写入：（根据自己需要修改whiteList白名单中的页面路径和自己的逻辑处理） import Vue from vue // 白名单 const whiteList = [/pages/public/login,/pages/public/privacyAgreement, ]export default asy…...

编程日记 2023/10/19 0:24:21

在中国可以使用 HubSpot 吗？

当谈到市场营销和客户关系管理工具时&#xff0c;HubSpot通常是一家企业的首选。然而&#xff0c;对于许多中国的企业来说&#xff0c;一个重要的问题是&#xff1a;在中国可以使用HubSpot吗&#xff1f;这个问题涉及到不同的方面&#xff0c;包括政策法规、社交媒体平台、语言…...

编程日记 2023/10/19 0:23:18

Java的基础应用

Java是一种广泛应用于软件开发的编程语言&#xff0c;基础应用涵盖了很多方面。以下是Java的一些基础应用方面的介绍&#xff1a; 1. 控制流语句&#xff1a;Java中的程序流程控制语句分为选择语句和循环语句。选择语句包括if-else语句和switch语句&#xff0c;循环语句包括fo…...

编程日记 2023/10/19 0:22:17

【excel】列转行

列转行 工作中有一些数据是列表&#xff0c;现在需要转行 选表格内容&#xff1a;在excel表格中选中表格数据区域。点击复制&#xff1a;在选中表格区域处右击点击复制。点击选择性粘贴&#xff1a;在表格中鼠标右击点击选择性粘贴。勾选转置&#xff1a;在选择性粘勾选转置选…...

编程日记 2023/10/19 0:21:16

用Bing绘制「V我50」漫画；GPT-5业内交流笔记；LLM大佬的跳槽建议；Stable Diffusion生态全盘点第一课 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f525; 美国升级AI芯片出口禁令&#xff0c;13家中国GPU企业被列入实体清单 nytimes.com/2023/10/05/technology/chip-makers-china-lobbying…...

编程日记 2023/10/19 0:20:16

Java身份证实名认证-阿里云API 【姓名、身份证号】

1. 阿里云API市场 https://market.aliyun.com/products/57126001/cmapi00053442.html?spm5176.2020520132.101.3.a6217218nxxEiy#skuyuncode47442000022 购买对应套餐 2. 复制AppCode https://market.console.aliyun.com/imageconsole/index.htm#/?_kl85e10 云市场-已购买服…...

编程日记 2023/10/19 0:19:15

ND协议——无状态地址自动配置 (SLAAC)

参考学习&#xff1a;计算机网络 | 思科网络 | 无状态地址自动配置 (SLAAC) | 什么是SLAAC_瘦弱的皮卡丘的博客-CSDN博客 与 IPv4 类似&#xff0c;可以手动或动态配置 IPv6 全局单播地址。但是&#xff0c;动态分配 IPv6 全局单播地址有两种方法&#xff1a; 如图所示&#…...

编程日记 2023/10/19 0:18:12

iOS开发UITableView的使用，区别Plain模式和Grouped模式

简单赘述一下 的创建步骤 // 创建UITableView self.tableView [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain]; // 设置数据源和代理 self.tableView.dataSource self; self.tableView.delegate self; // 注册自定义UITableViewCe…...

编程日记 2023/10/19 0:17:11

css美化滚动条

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 8px; height: 8px; background-color: rgba(0,0,0,.2); } /*定义滚动条轨道 内阴影圆角*/ ::-webkit-scrollbar-track { -webkit-box…...

编程日记 2023/10/19 0:16:10

【CANoe】XML Test Module使用实例

文章目录 一、实操步骤1、增加XML Test Module节点2、配置XML Test Module节点3、XML Test Module节点增加CAPL脚本(.can文件)4、文件夹结构5、使用仿真节点开始测试6、测试结果与测试报告7、同理&#xff0c;在Test Setup也可如此操作 一、实操步骤 1、增加XML Test Module节…...

编程日记 2023/10/19 0:15:09

oracle的update语句where条件后的索引字段为空时不执行

问题描述&#xff1a; update 表名 set age ‘23’ where id1 and name‘lili’; 当在oracle执行以上sql时执行成功&#xff0c;但是当传入的name为null时&#xff0c;sql不成立。我的表中id和name是联合唯一索引&#xff0c;以为name不会为空&#xff0c;但实际上name可以为空…...

编程日记 2023/10/19 0:14:08

RabbitMQ的特点

RabbitMQ是一个开源的消息中间件&#xff0c;用于在不同的应用程序之间进行异步通信。它支持多种消息传递协议&#xff0c;如AMQP、MQTT、STOMP等。 RabbitMQ具有以下特点&#xff1a; 可扩展性&#xff1a;RabbitMQ可以通过添加更多的节点和队列来实现水平扩展。 可靠性&…...

编程日记 2023/10/19 0:13:07

Qwen3-TTS声音克隆入门指南：上传音频→选择语种→生成自然语音三步走

Qwen3-TTS声音克隆入门指南&#xff1a;上传音频→选择语种→生成自然语音三步走 想不想让AI用你自己的声音说话&#xff1f;或者&#xff0c;想不想用一段短短的录音&#xff0c;就克隆出能说十几种语言的“数字分身”&#xff1f;今天&#xff0c;我们就来手把手教你&#x…...

编程新知 2026/3/30 8:57:35

避坑指南：GD32F407移植FATFS到SD卡，这几个STM32老司机常踩的坑你别再跳了

GD32F407 FATFS移植避坑实战&#xff1a;STM32老手最容易忽略的5个硬件差异 从STM32切换到GD32F407的开发者&#xff0c;往往带着"Pin to Pin兼容"的预期开始SD卡文件系统移植&#xff0c;却在调试阶段遭遇各种诡异问题。上周一位资深工程师向我展示了他的调试记录&a…...

编程新知 2026/3/30 8:09:19

internlm2-chat-1.8b长文本处理实战：法律合同分析+关键条款提取教程

internlm2-chat-1.8b长文本处理实战&#xff1a;法律合同分析关键条款提取教程 你是不是也遇到过这样的烦恼&#xff1f;拿到一份几十页的法律合同&#xff0c;密密麻麻的文字看得人头晕眼花&#xff0c;想快速找到里面的关键条款&#xff0c;比如付款方式、违约责任、保密协议…...

编程新知 2026/3/30 7:59:10

**发散创新：策略即代码 —— 用 Rust实现动态权限控制引擎**在现代软件架构中，**权限管理不再是静态配

发散创新&#xff1a;策略即代码 —— 用 Rust 实现动态权限控制引擎 在现代软件架构中&#xff0c;权限管理不再是静态配置的附属品&#xff0c;而是核心业务逻辑的一部分。传统 RBAC&#xff08;基于角色的访问控制&#xff09;虽然成熟&#xff0c;但在微服务、多租户和复杂…...

编程新知 2026/3/30 7:25:03

Spring Boot项目实战：Flowable工作流引擎从入门到部署（附完整代码示例）

Spring Boot深度整合Flowable&#xff1a;企业级工作流开发实战与架构解析 从业务流程管理到技术实现&#xff1a;Flowable的核心价值 在数字化转型浪潮中&#xff0c;企业流程自动化已成为提升运营效率的关键。想象一下这样的场景&#xff1a;当员工提交报销申请后&#xff0c…...

编程新知 2026/3/30 6:56:55

圣女司幼幽-造相Z-Turbo多模态生成：从文本到视频脚本的连贯创作

圣女司幼幽-造相Z-Turbo多模态生成&#xff1a;从文本到视频脚本的连贯创作 最近在尝试一些新的内容创作工具&#xff0c;发现了一个挺有意思的现象&#xff1a;很多工具要么只能做图&#xff0c;要么只能写文案&#xff0c;想把它们串起来做个完整的视频&#xff0c;中间总得…...

编程新知 2026/3/30 6:24:51

英语从句全攻略：名词性、定语、副词性从句一网打尽（含易错点分析）

英语从句全攻略&#xff1a;名词性、定语、副词性从句一网打尽&#xff08;含易错点分析&#xff09; 当你读到一篇地道的英文文章时&#xff0c;是否曾被那些"套中套"的句子结构难住&#xff1f;从句就像英语语法中的俄罗斯套娃&#xff0c;层层嵌套却暗藏规律。作为…...

编程新知 2026/3/30 6:22:50

从聊天机器人到业务执行者：Agentic Orchestration 如何重构 Java 后端体系

引言 在 RAG 1.0 时代&#xff0c;我们费尽心思让 AI“说得对、答得准”&#xff1b; 而进入 2026 年的 Agentic Orchestration&#xff08;智能体编排&#xff09; 时代&#xff0c;我们的目标已经变成&#xff1a;让 AI 做得对、跑得稳、能闭环。 用户说“帮我把昨天买贵的衣…...

编程新知 2026/3/30 6:00:35

Vitis HLS避坑指南：hls::stream深度设置不当，你的FPGA设计可能卡死

Vitis HLS实战&#xff1a;如何避免hls::stream深度配置引发的硬件死锁 在FPGA加速器开发中&#xff0c;数据流设计是最常见的性能优化手段之一。Vitis HLS提供的hls::stream模板类&#xff0c;让C代码能够直接映射到高效的硬件数据流结构。但许多开发者都遇到过这样的困境&…...

编程新知 2026/3/30 5:54:34

IAR平台华大HC32F460工程搭建避坑指南：从零到调试成功的全流程解析

1. 从KEIL到IAR的转型背景 最近两年芯片市场的价格波动&#xff0c;让很多工程师不得不重新评估开发工具链的选择。我作为一个用了五年KEIL的老用户&#xff0c;最近也被迫开始学习IAR平台。原因很简单——当ST单片机价格涨到华大HC32F460的十倍时&#xff0c;任何成本敏感的项…...

编程新知 2026/3/30 4:01:21