浏览器中把HTML转为PDF的几种方式

news2024/11/16 23:33:07

浏览器中把HTML转为PDF的几种方式

打印

操作步骤

在这里插入图片描述另存为pdf
在这里插入图片描述

优点

简便易用: 浏览器自带的打印功能通常是用户界面友好的,不需要额外的插件或工具,用户只需点击几下即可完成转换。

跨平台支持: 大多数现代浏览器都支持这种方式,而且通常在不同操作系统上表现一致,从而实现跨平台的HTML到PDF的转换。

无需安装插件: 由于是浏览器自带功能,不需要用户安装任何额外的插件或软件,减少了使用的复杂性。

实时预览: 在打印设置中,用户通常可以实时预览PDF的生成效果,从而可以进行调整和确认。

链接可点击:
在这里插入图片描述

缺点

限制样式和布局: 浏览器打印功能转换的PDF可能对一些特殊样式和布局支持不够好,导致最终的PDF与原HTML在外观上有一些差异。

有限定制选项: 浏览器自带的打印功能提供的选项相对有限,用户不能太灵活地定制生成的PDF,特定的需求可能无法满足。

依赖浏览器版本: 不同浏览器版本的打印功能可能存在一些差异,用户需要确保使用的浏览器版本支持所需的功能。

性能: 对于大型或复杂的HTML页面,使用浏览器自带的打印功能可能会导致性能问题,生成PDF的过程可能较慢。

转换工具 - 离线

比如使用:https://www.html-to-pdf.net/
在这里插入图片描述下载下来找到对应exe文件,点开。

在这里插入图片描述

操作步骤

复制url,点击Convert按钮
在这里插入图片描述
效果如下:
在这里插入图片描述

优点

无浏览器限制: 不受浏览器版本或类型的限制,因此更稳定和可靠。用户无需担心不同浏览器之间的兼容性问题。
链接可点击:
在这里插入图片描述

缺点

学习曲线: 一些工具可能具有更复杂的界面和更多的设置选项,需要用户花一些时间来学习和熟悉操作。
难用,体验查。

在线转换工具

比如:https://avepdf.com/zh/html-to-pdf
在这里插入图片描述在这里插入图片描述

优点

高度定制: 转换工具通常提供更丰富的选项和定制功能,允许用户更精确地控制PDF的生成,包括页面尺寸、分辨率、压缩级别等。
无浏览器限制: 不受浏览器版本或类型的限制,因此更稳定和可靠。用户无需担心不同浏览器之间的兼容性问题。

体验好。

缺点

付费服务: 大多数专业的HTML到PDF转换工具可能是付费的,尤其是对于一些高级功能和服务,可能需要订阅或购买许可证。

学习曲线: 一些工具可能具有更复杂的界面和更多的设置选项,需要用户花一些时间来学习和熟悉操作。

依赖于服务可用性: 如果使用在线服务,转换工具的可用性可能受到服务提供商的影响,如果服务出现故障或维护,用户可能暂时无法进行转换。

可能涉及隐私问题: 对于包含敏感信息的HTML内容,使用在线转换服务可能涉及隐私问题,用户需要确保选择的服务提供了适当的安全措施。

链接不能点击
在这里插入图片描述

浏览器插件 - 推荐

比如:https://chrome.google.com/webstore/detail/print-edit-we/olnblpmehglpcallpnbgmikjblmkopia/related?hl=zh-CN
在这里插入图片描述

使用步骤

右键
在这里插入图片描述在这里插入图片描述选择并隐藏或删除不需要的东西,选中之后点击hide或delete去删除不要的东西

在这里插入图片描述点击Preview查看预览
在这里插入图片描述可以看到我选中隐藏的元素看不到了
在这里插入图片描述

点击Save As Pdf按钮,去保存为PDF,在火狐浏览器是有按钮可以直接转为pdf,在谷歌浏览器并没有这个按钮,可以先点击预览再打印。
在这里插入图片描述

在这里插入图片描述在这里插入图片描述看下效果如何,下面是用谷歌浏览器的打印方法
在这里插入图片描述在这里插入图片描述

优点

方便性: 安装插件后,转换过程通常是简单直观的,用户可以通过浏览器直接执行操作。
本地转换: 转换过程在用户本地进行,无需上传敏感信息到在线服务,有更好的隐私控制。
自定义选项: 一些插件提供丰富的自定义选项,用户可以根据需要调整生成的PDF。

缺点

局限性: 插件功能可能受限于浏览器的能力,不同浏览器插件的功能差异可能较大。
依赖浏览器: 用户需要使用支持插件的浏览器进行操作,可能不适用于所有平台。
性能: 处理大型或复杂的网页可能导致性能问题。

JS代码

比如以下的代码,在浏览器控制台执行

var script = document.createElement('script');
script.src = "https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js";

// 设置 onload 事件处理程序
script.onload = function() {
 // 脚本加载完成后执行以下代码
 // 获取要转换为 PDF 的 HTML 元素 (使用 XPath)
 const elementXPath = "//div[@class='column is-auto padding-none padding-sm-tablet position-relative-tablet']"; // 替换为你的 XPath 表达式
 const element = document.evaluate(elementXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
 // 设置自定义的 PDF 名称
 const pdfOptions = {
  filename: '刚刚下载的pdf文件名.pdf', // 替换为你的自定义名称
 };

 // 使用 html2pdf 将 HTML 元素转换为 PDF
 html2pdf(element, pdfOptions);

 // 将 referrerPolicy 设置回 origin
 script.referrerPolicy = 'origin';
};

// 设置初始 referrerPolicy 为 no-referrer
script.referrerPolicy = 'no-referrer';

document.getElementsByTagName('head')[0].appendChild(script);

在这里插入图片描述在这里插入图片描述

优点

自定义性: 通过代码实现,你可以更灵活地自定义转换过程,包括选择要转换的元素、设置PDF选项等。
独立性: 不依赖于特定的浏览器插件或平台,适用于各种环境和应用场景。
集成性: 可以轻松集成到Web应用程序中,通过脚本控制转换过程。

缺点

开发复杂性: 实现HTML转PDF的代码可能相对复杂,特别是对于处理复杂页面、样式和布局的情况。
性能问题: 处理大型或复杂的HTML页面可能导致性能问题,尤其是在客户端设备上。
维护问题: 需要定期更新和维护代码以适应可能发生的浏览器变化和新技术。

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

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

相关文章

Baumer工业相机堡盟工业相机如何联合NEOAPI SDK和OpenCV实现Mono12和Mono16位深度的图像保存(C++)

Baumer工业相机堡盟工业相机如何联合BGAPI SDK和OpenCVSharp实现Mono12和Mono16位深度的图像保存(C#) Baumer工业相机Baumer工业相机保存位深度12/16位图像的技术背景代码案例分享1:引用合适的类文件2:NEOAPI SDK联合OpenCV进行图…

Asynchronous FIFO and synchronous FIFO-翻译自外网

Synchronous FIFO 先进先出 (FIFO) 是一种非常流行且有用的设计块,用于模块之间的同步和握手机制。 FIFO 的深度: FIFO 中的槽数或行数称为 FIFO 的深度。 FIFO 的宽度:每个槽或行中可以存储的位数称为 FIFO 的宽度。 在同步 FIFO 中&…

大屏项目:react中实现3d效果的环形图包括指引线

参考链接3d环形图 3d效果的环形图 项目需求实现方式指引线(线的样式字体颜色) 项目需求 需要在大屏上实现一个3d的环形图,并且自带指引线,指引线的颜色和每段数据的颜色一样,文本内容变成白色,数字内容变…

投标文件组成分析

标注组成: 标书内容: 一、前面内容 1、投标首页(正本/副本)/ 2、评分索引表(来源于“招标文件的评分细则表”,一般在原有的“评分细则表”的后面添加一列“所在页码”,里面填写得分对应“页…

CentOS stream 9最小化安装说明

Server with GUI:An integrated , easy-to-manage server with a graphical interface. 带有图形用户界面的服务器:集成、易于管理的服务器,带有图形界面。Server:An integrated , easy-to-manage server. 服务器:集成…

服务器 conda update 失败解决方法

1. 强制 conda update 租借一台服务器,发现 conda 版本是4.10.3,需要升级,使用了如下命令都没有效果,仍然是一样的版本 conda update conda update --all conda update -n base -c defaults conda最后强制用conda-forge通道更新…

工作再忙,这个门禁管理小技巧也要学!

在现代社会,随着城市化和科技的迅猛发展,安全管理已经成为社会的一项首要任务。在这个背景下,门禁监控系统作为一种高效、先进的安全管理工具,逐渐成为各类场所、机构和企业的不可或缺的一部分。 客户案例 医疗机构 湖南某大型医…

2.IHRM人力资源 - 登录

一、登录页结构与表单开发 我们要实现的登录界面 目前的登录界面 1.1 登录页结构 复制下面的代码到views/login/index.vue页面下 <template><div class"login-container"><div class"logo"/><div class"form"><h1&…

【计算机二级考试C语言】C常量

C 常量 常量是固定值&#xff0c;在程序执行期间不会改变。这些固定的值&#xff0c;又叫做字面量。 常量可以是任何的基本数据类型&#xff0c;比如整数常量、浮点常量、字符常量&#xff0c;或字符串字面值&#xff0c;也有枚举常量。 常量就像是常规的变量&#xff0c;只…

反序列化提升刷题

例题&#xff1a; <?php //flag is in flag.php highlight_file(__FILE__); error_reporting(0); class Modifier { private $var; public function append($value) { include($value); echo $flag; } public function __invoke(){ …

Vue中keep-alive缓存的详解(深度理解)

文章目录 一、Keep-alive 是什么二、使用场景三、原理分析四、思考题&#xff1a;缓存后如何获取数据beforeRouteEnteractived 参考文献 一、Keep-alive 是什么 keep-alive是vue中的内置组件&#xff0c;能在组件切换过程中将状态保留在内存中&#xff0c;防止重复渲染DOM ke…

吉祥物如何解锁虚拟主持人身份,赋能品牌营销?

在互联网突破时空的整体语境下&#xff0c;一个吉祥物可以解锁虚拟主持人身份&#xff0c;结合动作捕捉技术&#xff0c;活跃于品牌线上线下营销活动场景&#xff0c;让吉祥物虚拟主持人凭借其“萌”、的特征&#xff0c;带给用户亲近感&#xff0c;快速拉近品牌与用户的距离&a…

对Transformer的理解。

要理解Transformer&#xff0c;需要先理解注意力机制&#xff0c;下面大部分内容来自台大教授李宏毅老师讲课资料。 注意力机制 之前使用的MLP&#xff0c;CNN&#xff0c;RNN模型可以解决一些简单序列问题&#xff0c;但当序列长度太长容易失去效果&#xff0c;原因是看了新…

怎样获取power shell 的全部可用命令?2/5(篇幅有点长,分成5份)

在power shell 窗口中&#xff0c;有一个获取全部可用命令的命令&#xff1a;get-command&#xff0c;获取到的命令有1640多个&#xff0c;够学习了吧&#xff1f;那么&#xff0c;power shell 命令有哪些类别呢&#xff1f; PowerShell命令可以分为以下几类&#xff1a; Cmdl…

统一存储双控NAS同步备份应用方案

随着业务量的增加&#xff0c;企业必须找到一种有效的解决方案保护数据安全&#xff0c;防止不可预测的存储系统故障。传统的数据备份往往是专用的数据格式&#xff0c;不能保留完整的用户目录信息。因此&#xff0c;IT 人员必须在数据恢复后重新配置才可重新恢复业务。为了解决…

Java零基础教学文档servlet(1)

【Web开发和HTTP协议】 1. Web开发概述 1.1 web概述 万维网&#xff08;英语&#xff1a;World Wide Web&#xff09;亦作WWW、Web、全球广域网&#xff0c;是一个透过互联网访问的&#xff0c;由许多互相链接的超文本组成的信息系统。英国科学家蒂姆伯纳斯-李于1989年发明了…

推荐一款通过ssh连接linux服务的开源工具WindTerm

文章目录 前言WindTerm介绍WindTerm使用主密码和锁屏总结 前言 工作一入门便是游戏服务器开发&#xff0c;所以常常有连接Linux服务器的需求&#xff0c;之前用的最多的是Xshell&#xff0c;最近这个软件个人版只能免费使用一个月了&#xff0c;超过时间会提示更新无法正常使用…

FX110网:保加利亚外汇牌照FSC,进入欧盟市场的另一扇大门

汇市经纪商们对欧盟金融工具市场法规&#xff08;MiFID&#xff09;都不会陌生。通过MiFID体系&#xff0c;欧盟所有国家的监管机构连成了一张网络。因此&#xff0c;任何想要进入欧洲市场的汇商&#xff0c;都希望获得加入MiFID监管机构的牌照&#xff0c;其中最受欢迎的莫过于…

什么是充放电振子理论?

CHAT回复&#xff1a;充放电振子模型&#xff08;Charging-Reversal Oscillator Model&#xff09;是一种解释ENSO现象的理论模型&#xff0c;这个模型把ENSO现象比喻成一个“热力学振荡系统”。 在这个模型中&#xff0c;ENSO现象由三个组成部分&#xff1a;充电&#xff08;C…

web开发学习笔记(2.js)

1.引入 2.js的两种引入方式 3.输出语句 4.全等运算符 5.定义函数 6.数组 7.数组属性 8.字符串对象的对应方法 9.自定义对象 10.json对象 11.bom属性 12.window属性 13.定时刷新时间 14.跳转网址 15.DOM文档对象模型 16.获取DOM对象&#xff0c;根据DOM对象来操作网页 如下图…