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

网页打印与导出word实现在A4纸上相同效果

在工作中遇到这样一个需求,客户要求: 1、实现在浏览器中打印和导出到word中,要求浏览器打印出来的效果和word中打印的效果基本一致。2、打印的内容要自动分页,第一页的顶部有文件头,最后一页的底部有页尾。

这里记录一下实现的步骤:
首先明确几件事:

  • 1英寸=25.4毫米 即1厘米=1/2.54英寸
  • 分辨率是指是一英寸面积内像素的个数
  • 在Windows系统的网页打印中默认采用的是96dpi,Mac系统中默认的是72dpi。
  • A4纸规格尺寸为210mm×297mm

通过以上计算后可得A4纸96dpi下的分辨率约为793.7px×1122.5px,向下取整为宽793像素和高1122像素,这是我们在制作网页的时候需要的像素。
假设word中取边距为上下2.54cm,左右3.18cm,即向下边距1英寸,左右边距约1.25英寸,按96pdi计算,上下边距96px,左右边距约为120px。
宽793像素和高1122像素去掉边距,在网页中要打印的内容应为 553px* 930px。
更简单的方法,使用类似photoshop的工具新建文件,直接能够得出以上答案。
在这里插入图片描述
在这里插入图片描述
二、
浏览器打印机和导出word支持的样式,由于网页
使用媒体查询针对打印样式设置,要针对差异设置打印的样式覆盖掉之前的默认样式。
设置纸张、方向、页边距

@media print {@page {size: A4 portrait; margin: 2.54cm 3.18cm;}
}

未完待续…

相关文章:

网页打印与导出word实现在A4纸上相同效果

在工作中遇到这样一个需求,客户要求: 1、实现在浏览器中打印和导出到word中,要求浏览器打印出来的效果和word中打印的效果基本一致。2、打印的内容要自动分页,第一页的顶部有文件头,最后一页的底部有页尾。 这里记录一…...

备战英语6级——记录复习进度

开始记录—— 学习:如何记录笔记? 1:首先我认为:电脑打字比较适合我! 2:先记笔记,再“填笔记”! 记笔记就是一个框架,记录一个大概的东西。后面需要在笔记中&#xff0…...

实例10:四足机器人运动学逆解可视化与实践

实例10: 四足机器人运动学逆解单腿可视化 实验目的 了解逆运动学的有无解、有无多解情况。了解运动学逆解的求解。熟悉逆运动学中求解的几何法和代数法。熟悉单腿舵机的简单校准。掌握可视化逆向运动学计算结果的方法。 实验要求 拼装一条mini pupper的腿部。运…...

Elasticsearch7.8.0版本优化——路由选择

目录一、Elasticsearch 如何知道一个文档存放在哪个分片二、不带 routing 查询三、带 routing 查询一、Elasticsearch 如何知道一个文档存放在哪个分片 其实是通过这个公式来计算出来:shard hash(routing) % number_of_primary_shardsrouting 默认值是文档的 id&a…...

Go常量的定义和使用const,const特性“隐式重复前一个表达式”,以及iota枚举常量的使用

Go常量的定义和使用const,以及iota枚举常量的使用Go常量constGo中常量的定义和使用Go特性const,"隐式重复前一个表达式"iota 实现枚举常量Go常量const Go语言中的const整合了C语言中的宏定义常量,const只读变量枚举变量 绝大多数情况下,Go常…...

Git学习(1)pro git阅读

目录 目录: 1. 起步 2. Git 基础 3. Git 分支 4. 服务器上的 Git 5. 分布式 Git 第一章 1.3 Git是什么 1.6运行git前的配置 该开源图书网站 Git - Book (git-scm.com) 目录: 1. 起步 1.1 关于版本控制1.2 Git 简史1.3 Git 是什么?1…...

PHY自协商

1. 自协商定义 自动协商模式是端口根据另一端设备的连接速度和双工模式,自动把它的速度调节到最高的公共水平,即线路两端能具有的最快速度和双工模式。 自协商功能允许一个网络设备能够将自己所支持的工作模式信息传达给网络上的对端,并接受对…...

【大数据离线开发】8.2 Hive的安装和配置

8.3 Hive的安装和配置 安装模式: 嵌入模式 :不需要使用MySQL,需要Hive自带的一个关系型数据库:Derby本地模式、远程模式 ----> 需要MySQL数据库的支持 安装 hive 安装包 1、解压tar -zxvf apache-hive-2.3.0-bin.tar.gz -C…...

Capture Modules:车载网络报文捕获模块

(以下所有图片均来源于Technica官网) Technica Engineering的新一代硬件设备,即Capture Modules,提供了五种变体以涵盖不同带宽的车载以太网(100BASE-T1和1000BASE-T1)以及常见的IVN技术(CAN、C…...

数据结构与算法系列之时间与空间复杂度

这里写目录标题算法的复杂度大O的渐进表示法实例分析空间复杂度每日一题算法的复杂度 衡量一个算法的好坏,一般 是从时间和空间两个维度来衡量的, 即时间复杂度和空间复杂度。 时间复杂度主要衡量一个算法的运行快慢, 空间复杂度主要衡量一个…...

Python代码使用PyQt5制作界面并封装

目录参考链接续:https://blog.csdn.net/yulinxx/article/details/93344163 若要对此程序进行封装,加个界面,然后制作成 EXE, 使用 PyQt5 制作界面,PyInstaller 进行封装成 EXE 可参考: Python制作小软件…...

【Node.js】MySQL数据库的第三方模块(mysql)

mysql安装操作MySQL数据库的第三方模块(mysql)通过第三方模块(mysql2)连接到MySQL数据库mysql插入数据mysql插入数据的便捷方式mysql更新数据mysql更新数据的便捷方式mysql删除数据安装操作MySQL数据库的第三方模块(my…...

Docker中安装并配置单机版redis

1、使用docker安装redis 搜索Reis镜像,这里展示的是官方最新的镜像docker search redis 使用官方dockerhub搜索redis 2、选用常用的redis5.0作为安装的版本docker pull redis:5.0 3、运行redis容器的两种方式 3.1 不映射外部配置文件直接运行redis5.0镜像docker …...

模拟微信聊天-课后程序(JAVA基础案例教程-黑马程序员编著-第八章-课后作业)

【案例9-1】 模拟微信聊天 【案例介绍】 1.案例描述 在如今,微信聊天已经人们生活中必不可少的重要组成部分,人们的交流很多都是通过微信来进行的。本案例要求:将多线程与UDP通信相关知识结合,模拟实现微信聊天小程序。通过监…...

html2canvas将页面dom元素内容渲染成图片保存至本地

html2canvas:https://html2canvas.hertzen.com/configuration/ github:https://github.com/niklasvh/html2canvas 效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compa…...

前端进阶JS运行原理

JS运行原理 深入了解V8引擎原理 浏览器内核是由两部分组成的&#xff0c;以webkit为例&#xff1a; WebCore&#xff1a;负责HTML解析、布局、渲染等等相关的工作&#xff1b;JavaScriptCore&#xff1a;解析、执行JavaScript代码&#xff1b; 官方对V8引擎的定义&#xff1…...

Python识别二维码的两种方法(cv2)

在学习Python处理二维码的过程中&#xff0c;我们看到的大多是“用python生成酷炫二维码”、“用Python制作动图二维码”之类的文章。而关于使用Python批量识别二维码的教程&#xff0c;并不多见。所以今天我会给大家分享两种批量识别二维码的Python技巧&#xff01;pyzbar PI…...

用一个例子告诉你 怎样使用Spark中RDD的算子

目录 1. 前言 1.1 操作分类 1.2 语法知识 2. transformations 2.1 map 2.2 mapPartitions 2.3 flatMap 2.4 glom 2.5 groupBy 2.6 filter 2.7 sample 2.8 distinct 2.9 coalesce 2.10 repartition 2.11 sortBy 2.12 partitionBy 2.13 reduceByKey 2.14 gro…...

什么是跨域? 出现原因及解决方法

目录一、什么是跨域二、为什么有跨域问题&#xff1f;三、解决跨域问题的方案1.Jsonp2.nginx3.CORS3.1 什么是cors3.2 原理四、GateWay网关中实现跨域步骤一、什么是跨域 跨域&#xff1a;浏览器对于javascript的同源策略的限制 。 同源政策的目的&#xff0c;是为了保证用户…...

低代码系统能够解决哪些痛点?

低代码系统能够解决哪些痛点&#xff1f;如果用4句话去归纳&#xff0c;低代码开发可以解决以下问题—— 为企业提供更高的灵活性&#xff0c;用户可以突破代码的限制自主开发业务应用&#xff1b;通过减少对专业软件开发人员的依赖&#xff0c;公司可以快速响应市场上的新业务…...

Java后端工程师必备:系统学习大模型应用开发(收藏版)

本文深入探讨了Java后端工程师如何系统性地学习AI应用开发&#xff0c;从基础的CRUD操作到大模型的集成&#xff0c;包括RAG、Tool Calling、MCP、Agent等关键技术。文章强调了AI应用开发不仅是调用大模型接口&#xff0c;而是将大模型能力融入真实业务系统&#xff0c;实现理解…...

从Processing到Arduino IDE:一个让硬件编程变简单的GUI故事(附STM32兼容板配置避坑)

从Processing到Arduino IDE&#xff1a;硬件编程的平民化革命与STM32实战指南 2005年&#xff0c;当Massimo Banzi在意大利伊夫雷亚交互设计学院第一次向学生们展示那块蓝色电路板时&#xff0c;他可能没想到这个简单的教学工具会彻底改变嵌入式开发的世界。Arduino IDE的诞生并…...

基于MCP协议构建AI记忆管理服务:原理、实现与应用实践

1. 项目概述&#xff1a;一个为AI应用量身定制的记忆管理工具最近在折腾AI应用开发&#xff0c;特别是那些需要长期对话或上下文关联的场景时&#xff0c;一个绕不开的痛点就是“记忆”问题。模型本身是健忘的&#xff0c;每次对话都是全新的开始。为了让AI能记住用户偏好、历史…...

STM32多任务处理实战:从裸机调度到FreeRTOS应用详解

1. 项目概述与核心需求解析在嵌入式开发领域&#xff0c;尤其是基于STM32这类资源受限但功能强大的微控制器时&#xff0c;我们常常会遇到一个核心矛盾&#xff1a;硬件只有一个CPU核心&#xff0c;但软件功能却要求它“同时”处理多个任务。比如&#xff0c;一个智能温控器需要…...

1 个开发技巧,餐饮小程序加载速度飙升 70%

对于餐饮小程序而言&#xff0c;加载速度直接决定用户留存——据调研&#xff0c;用户打开小程序后&#xff0c;若加载时间超过3秒&#xff0c;流失率会高达80%。很多餐饮门店的小程序&#xff0c;明明功能完善、设计美观&#xff0c;却因为加载缓慢&#xff0c;导致用户刚打开…...

GitHub星标6.6k+的WindTerm,除了快还有这些隐藏技巧:自动补全、锁屏密码重置、主题切换

GitHub星标6.6k的WindTerm高阶技巧&#xff1a;解锁专业级终端体验 当大多数用户还在用默认配置与终端工具"和平共处"时&#xff0c;真正的效率追求者早已开始挖掘那些藏在菜单深处的生产力加速器。作为GitHub上获得6.6k星标的现象级终端工具&#xff0c;WindTerm的…...

Spek音频频谱分析器:从声音可视化到音频质量检测的完整指南

Spek音频频谱分析器&#xff1a;从声音可视化到音频质量检测的完整指南 【免费下载链接】spek Acoustic spectrum analyser 项目地址: https://gitcode.com/gh_mirrors/sp/spek 当你打开一个音频文件&#xff0c;听到杂音或失真时&#xff0c;是否想过如何精确诊断问题所…...

如何用memtest_vulkan快速检测GPU显存稳定性:终极免费测试指南

如何用memtest_vulkan快速检测GPU显存稳定性&#xff1a;终极免费测试指南 【免费下载链接】memtest_vulkan Vulkan compute tool for testing video memory stability 项目地址: https://gitcode.com/gh_mirrors/me/memtest_vulkan 当你的游戏突然崩溃、AI训练意外中断…...

别再傻傻分不清!RV、RVV、RVVP这些电工字母到底啥意思?一张图帮你搞定家庭布线选线

家庭电工实战指南&#xff1a;RV/RVV/RVVP线材选型与避坑手册 刚打开装修材料清单时&#xff0c;那些密密麻麻的字母组合让人瞬间头大——RV、RVV、RVVP、AVVR...这些看似天书的代号&#xff0c;直接决定了你家插座能否承载大功率电器、智能窗帘会不会信号中断&#xff0c;甚至…...

Cursor AI编程助手优化:成本控制与效率提升实战指南

1. 项目概述&#xff1a;一个为开发者“减负”的智能工具最近在GitHub上看到一个挺有意思的项目&#xff0c;叫vlinr/cursor-freeload。光看名字&#xff0c;可能很多朋友会心一笑&#xff0c;尤其是那些深度依赖AI编程助手的朋友。没错&#xff0c;这个项目就是围绕当下非常流…...