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

这篇具有很好参考价值的文章主要介绍了浏览器中把HTML转为PDF的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

打印

操作步骤

浏览器中把HTML转为PDF的几种方式,html,pdf,前端另存为pdf
浏览器中把HTML转为PDF的几种方式,html,pdf,前端

优点

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

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

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

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

链接可点击:
浏览器中把HTML转为PDF的几种方式,html,pdf,前端

缺点

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

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

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

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

转换工具 - 离线

比如使用:https://www.html-to-pdf.net/
浏览器中把HTML转为PDF的几种方式,html,pdf,前端下载下来找到对应exe文件,点开。

浏览器中把HTML转为PDF的几种方式,html,pdf,前端

操作步骤

复制url,点击Convert按钮
浏览器中把HTML转为PDF的几种方式,html,pdf,前端
效果如下:
浏览器中把HTML转为PDF的几种方式,html,pdf,前端

优点

无浏览器限制: 不受浏览器版本或类型的限制,因此更稳定和可靠。用户无需担心不同浏览器之间的兼容性问题。
链接可点击:
浏览器中把HTML转为PDF的几种方式,html,pdf,前端

缺点

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

在线转换工具

比如:https://avepdf.com/zh/html-to-pdf
浏览器中把HTML转为PDF的几种方式,html,pdf,前端浏览器中把HTML转为PDF的几种方式,html,pdf,前端

优点

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

体验好。

缺点

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

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

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

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

链接不能点击
浏览器中把HTML转为PDF的几种方式,html,pdf,前端

浏览器插件 - 推荐

比如:https://chrome.google.com/webstore/detail/print-edit-we/olnblpmehglpcallpnbgmikjblmkopia/related?hl=zh-CN
浏览器中把HTML转为PDF的几种方式,html,pdf,前端

使用步骤

右键
浏览器中把HTML转为PDF的几种方式,html,pdf,前端浏览器中把HTML转为PDF的几种方式,html,pdf,前端选择并隐藏或删除不需要的东西,选中之后点击hide或delete去删除不要的东西

浏览器中把HTML转为PDF的几种方式,html,pdf,前端点击Preview查看预览
浏览器中把HTML转为PDF的几种方式,html,pdf,前端可以看到我选中隐藏的元素看不到了
浏览器中把HTML转为PDF的几种方式,html,pdf,前端

点击Save As Pdf按钮,去保存为PDF,在火狐浏览器是有按钮可以直接转为pdf,在谷歌浏览器并没有这个按钮,可以先点击预览再打印。
浏览器中把HTML转为PDF的几种方式,html,pdf,前端

浏览器中把HTML转为PDF的几种方式,html,pdf,前端浏览器中把HTML转为PDF的几种方式,html,pdf,前端看下效果如何,下面是用谷歌浏览器的打印方法
浏览器中把HTML转为PDF的几种方式,html,pdf,前端浏览器中把HTML转为PDF的几种方式,html,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);

浏览器中把HTML转为PDF的几种方式,html,pdf,前端浏览器中把HTML转为PDF的几种方式,html,pdf,前端

优点

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

缺点

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

到了这里,关于浏览器中把HTML转为PDF的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Chrome(谷歌浏览器)强制将http转为https访问,最有效解决方法!

    第一种解决方案就是地址栏中输入【chrome://net-internals/#hsts】,在最下面的【Delete domain security policies】删除域名,如:hao123.com 有两种情况如下: 第一种,就是查无此根域名,就算删除到天荒地老也没有用! 第二种情况,就是有此根域名的信息,你删除才有效! 这个解决方案

    2024年02月04日
    浏览(52)
  • 浏览器预览pdf

    最近开发手机端的时候遇到安卓浏览器用a /标签href为pdf链接的时候 它不给我去预览pdf而是要我下载,这可离了大普. 我想到的最快的解决方案就是把pdf转换成html文件展示 PDF转换为HTML - 迅捷,在线,免费 - PDF24 Tools 将pdf文件转成html文件放在静态目录下 在用a标签跳转就行

    2024年01月24日
    浏览(52)
  • 【浏览器篇】记录下浏览器保存PDF文件不同方式的小区别

    以前不太注意这些,最近搞文档比较多才发现为何保存的一部分PDF文件里面字体可以复制可以搜索,一部分保存的PDF里面的字体却无法复制、无法搜索等,发现是不同保存方式得到的文档权限不一样,做个记录!—【蘇小沐】 1.实验环境 系统 版本 Windows 11 专业工作站版 22H

    2024年02月12日
    浏览(50)
  • 浏览器打开PDF标题乱码

    使用 itext5 用pdf模板生成预览pdf乱码问题 使用pdf编辑器打开之后,选择 文件 属性, 修改乱码的标题。

    2024年02月16日
    浏览(49)
  • 浏览器-错误 未能加载 PDF 文档

    **问题现象:**使用浏览器chrome / firefox等时打开pdf文档报错,但排查后端接口数据返回正常 日志:错误 未能加载 PDF 文档 二:问题原因 浏览器安全配置阻止了非信任网站的跳转和弹窗等行为,无法加载PDF文档。现可以配置解决 三、Chrome配置办法: 1、在浏览器中输入 2、隐私

    2024年02月17日
    浏览(63)
  • pdfjs解决ie浏览器预览pdf问题

    pdfjs是一个js库,可以将pdf文件用canvas重新绘制,从而无需借助pdf读取插件就可以直接预览。 目前chrome内核的浏览器已内置pdf读取插件,但ie浏览器还没有。而我们最近在做的一个项目使用对象是医院,使用的浏览器竟然还是ie。所以我们只能把项目用js重写(当然也可以用j

    2024年02月07日
    浏览(48)
  • 微信浏览器无法自动播放视频几种解决方式

    公司页面设计打开页面需要播放一个过场的MP4视频,在电脑上手机上都没啥事但是在手机微信浏览器里面视频是无法自动播放的。 网上教你的方式无非就是 还有什么页面window.onload的时候利用setInterval延时一小段时间的 但是这基本都是无效的 因为 微信官方已经声明了 靠谱的

    2024年02月11日
    浏览(143)
  • HTML浏览器的标准协议

    HTML (Host to Word Language)是 Web浏览器的标准协议,目前的网页浏览器基本都使用该协议。使用该协议的站点能够创建最广泛的用户界面,并提供可供访问的网站。HTML一般由32位到64位文字、符号和图形组成,其中文字部分主要用于显示信息,图形部分主要用于显示图片。它允许用

    2024年02月07日
    浏览(42)
  • 通过Blob流在浏览器中打开pdf文件

    ** **

    2024年02月09日
    浏览(46)
  • java实现pdf文件添加水印,下载到浏览器

    添加itextpdf依赖 根据需求,不需要指定路径可以删除对应的输出流 效果如下:代码中的相对路径在src平级目录下,test.pdf是PdfStamper里面fileOutputStream生成的,test1.pdf是fos生成的 浏览器下载的如下: 生成的pdf内容如下(红框里面是pdf原来的内容,可以自己调整代码中注释掉的设

    2024年02月05日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包