当前位置: 首页 > 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;公司可以快速响应市场上的新业务…...

Qwen3-VL-8B-Instruct-GGUF效果分享:100张用户实测图平均响应时间<1.8s(A10 GPU)

Qwen3-VL-8B-Instruct-GGUF效果分享&#xff1a;100张用户实测图平均响应时间<1.8s&#xff08;A10 GPU&#xff09; 1. 模型效果实测&#xff1a;速度与精度的双重惊喜 当我第一次看到Qwen3-VL-8B-Instruct-GGUF的测试结果时&#xff0c;确实被惊艳到了。这个模型在A10 G…...

Llama-3.2V-11B-cot多场景:科研论文插图理解、工程图纸解析、UI截图分析

Llama-3.2V-11B-cot多场景应用&#xff1a;科研论文插图理解、工程图纸解析、UI截图分析 1. 模型概述 Llama-3.2V-11B-cot是一款基于LLaVA-CoT论文实现的视觉语言模型&#xff0c;具备强大的图像理解和系统性推理能力。该模型采用MllamaForConditionalGeneration架构&#xf…...

Emu3.5 视觉 tokenizer 及其 decoder 的训练过程

下面我把 Emu3.5 视觉 tokenizer 及其 decoder 的训练完整过程,按照“论文明确写到的部分”“公开代码能对上的部分”“需要用开源近似路线复现的部分”三层重新整理。先给结论: 结论:Emu3.5 的视觉部分其实不是“一次性训练完一个模块”,而是至少分成两条链路: 第一条是…...

Photon OS 监控与运维:7个必备工具和最佳实践

Photon OS 监控与运维&#xff1a;7个必备工具和最佳实践 【免费下载链接】photon Minimal Linux container host 项目地址: https://gitcode.com/gh_mirrors/phot/photon Photon OS 作为一款轻量级 Linux 容器主机&#xff0c;高效的监控与运维是保障其稳定运行的关键。…...

告别DLSS版本迷宫:DLSS Swapper如何实现3步智能优化

告别DLSS版本迷宫&#xff1a;DLSS Swapper如何实现3步智能优化 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 核心价值&#xff1a;解决三大核心矛盾&#xff0c;让DLSS管理化繁为简 您是否曾遇到这样的场景&#x…...

从‘Hello World’到物联网:用Hi3861点灯程序,带你理解鸿蒙轻量级设备开发的核心流程

从‘Hello World’到物联网&#xff1a;用Hi3861点灯程序&#xff0c;带你理解鸿蒙轻量级设备开发的核心流程 在物联网设备开发领域&#xff0c;鸿蒙系统&#xff08;OpenHarmony&#xff09;正以其轻量级、高并发的特性吸引着越来越多的开发者。对于初学者而言&#xff0c;一个…...

隐式建模的革新:GemPy如何重新定义三维地质结构可视化

隐式建模的革新&#xff1a;GemPy如何重新定义三维地质结构可视化 【免费下载链接】gempy GemPy is an open-source, Python-based 3-D structural geological modeling software, which allows the implicit (i.e. automatic) creation of complex geological models from int…...

Mastering Text Tokenization for Large Language Models: From Words to Embeddings

1. 文本标记化的核心概念 你可能已经听说过ChatGPT这类大语言模型的神奇能力&#xff0c;但你知道它们是如何"读懂"人类文字的吗&#xff1f;秘密就藏在文本标记化&#xff08;Tokenization&#xff09;这个关键步骤里。想象一下&#xff0c;我们要教一个完全不懂中…...

微机原理实验一代码逐行精讲:从‘Hello World’到ASCII转换的底层逻辑

微机原理实验一代码逐行精讲&#xff1a;从‘Hello World’到ASCII转换的底层逻辑 当屏幕上跳出"Hello World!"时&#xff0c;很少有人思考这行文字背后究竟发生了什么。这段经典的汇编代码就像一扇门&#xff0c;推开它你将看到CPU如何与内存对话、中断服务程序如何…...

保姆级教程:在Ubuntu 20.04上用Docker搞定GPUStack,让Atlas 300I Duo推理卡跑通LLM

保姆级教程&#xff1a;Ubuntu 20.04Docker部署GPUStack全流程指南&#xff08;Atlas 300I Duo专版&#xff09; 最近在折腾Atlas 300I Duo这块推理卡的朋友应该都深有体会——虽然硬件性能强悍&#xff0c;但要让它在Ubuntu系统上顺利跑起大语言模型&#xff0c;光驱动和依赖就…...