网页打印与导出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:先记笔记,再“填笔记”! 记笔记就是一个框架,记录一个大概的东西。后面需要在笔记中࿰…...
实例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引擎原理 浏览器内核是由两部分组成的,以webkit为例: WebCore:负责HTML解析、布局、渲染等等相关的工作;JavaScriptCore:解析、执行JavaScript代码; 官方对V8引擎的定义࿱…...
Python识别二维码的两种方法(cv2)
在学习Python处理二维码的过程中,我们看到的大多是“用python生成酷炫二维码”、“用Python制作动图二维码”之类的文章。而关于使用Python批量识别二维码的教程,并不多见。所以今天我会给大家分享两种批量识别二维码的Python技巧!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…...
什么是跨域? 出现原因及解决方法
目录一、什么是跨域二、为什么有跨域问题?三、解决跨域问题的方案1.Jsonp2.nginx3.CORS3.1 什么是cors3.2 原理四、GateWay网关中实现跨域步骤一、什么是跨域 跨域:浏览器对于javascript的同源策略的限制 。 同源政策的目的,是为了保证用户…...
低代码系统能够解决哪些痛点?
低代码系统能够解决哪些痛点?如果用4句话去归纳,低代码开发可以解决以下问题—— 为企业提供更高的灵活性,用户可以突破代码的限制自主开发业务应用;通过减少对专业软件开发人员的依赖,公司可以快速响应市场上的新业务…...
造相-Z-Image实战案例:4步生成写实质感人像,RTX 4090低步高效实测
造相-Z-Image实战案例:4步生成写实质感人像,RTX 4090低步高效实测 1. 项目简介 造相-Z-Image是一个专门为RTX 4090显卡优化的本地文生图系统,基于通义千问官方的Z-Image模型打造。这个项目最大的特点就是完全针对个人显卡进行深度优化&…...
3分钟彻底解决Windows安装错误2502/2503:AtlasOS一键修复方案揭秘 [特殊字符]
3分钟彻底解决Windows安装错误2502/2503:AtlasOS一键修复方案揭秘 🚀 【免费下载链接】Atlas 🚀 An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.…...
三相逆变器LCL滤波设计实战:从建模到仿真避坑指南(附仿真文件)
三相逆变器LCL滤波设计实战:从建模到仿真避坑指南 在电力电子领域,三相逆变器的性能优化一直是工程师们关注的焦点。LCL滤波器作为逆变器与电网之间的关键接口,其设计质量直接影响系统稳定性、谐波抑制效果和电磁兼容性。本文将带您深入实战&…...
李慕婉-仙逆-造相Z-Turbo跨平台GUI开发:使用Qt构建模型调参与预览桌面应用
李慕婉-仙逆-造相Z-Turbo跨平台GUI开发:使用Qt构建模型调参与预览桌面应用 每次看到那些功能强大的AI模型,你是不是也心动过?但一打开命令行,面对密密麻麻的参数和代码,瞬间就觉得头大,只想关掉窗口。对于…...
手把手玩转Bagging分类——用Matlab实现工业故障检测
Bagging分类 Matlab代码 可用于故障检测等 基于集成算法Bagging的数据分类预测(可以更换为单、多变量时序预测/回归,前私我),Matlab代码,可直接运行,适合小白新手 [憨笑]程序已经调试好,无需更改代码替换数据集即可运行…...
AI皮衣设计新体验:The Leather Archive时尚杂志风界面实测
AI皮衣设计新体验:The Leather Archive时尚杂志风界面实测 1. 引言:当AI遇见时尚杂志 走进任何一家高端时尚杂志的编辑部,你会看到精心设计的版面、充满艺术感的排版和令人惊艳的视觉呈现。现在,这种专业级的时尚杂志体验被带入…...
STM32F407上LVGL内存爆了?别急着改.s文件,先学会用Keil的map文件精准定位(附FreeRTOS内存分配分析)
STM32F407上LVGL内存爆了?别急着改.s文件,先学会用Keil的map文件精准定位(附FreeRTOS内存分配分析) 在嵌入式开发中,内存管理就像是在玩一场高难度的俄罗斯方块游戏。特别是当我们尝试在STM32F407这样的资源受限MCU上运…...
OpenClaw定时任务:GLM-4.7-Flash实现自动化日报
OpenClaw定时任务:GLM-4.7-Flash实现自动化日报 1. 为什么需要自动化日报系统 每天下班前写日报这件事,我坚持了三年零四个月——直到上个月彻底放弃手工记录。不是因为懒,而是发现手工整理的日报存在三个致命问题: 第一是数据…...
揭秘LLM System Prompt的逆向工程:从API调试到Prompt Injection实战
1. 什么是System Prompt? 当你和ChatGPT聊天时,有没有好奇过它为什么总是用特定的语气回答?比如你问"今天天气怎么样",它可能会说"根据我的知识库,天气信息需要实时查询..."而不是直接报个假数据。…...
OpenClaw多模型混搭方案:百川2-13B-4bits与Qwen在自动化流程中的协同调用
OpenClaw多模型混搭方案:百川2-13B-4bits与Qwen在自动化流程中的协同调用 1. 为什么需要多模型混搭 去年冬天,当我第一次尝试用OpenClaw自动化处理周报时,发现一个尴尬的问题:用同一个模型处理文本润色和代码生成,效…...
