使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

简介: 使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容。


我在网上找了一段时间,搜集到了一些解决方案,在这里分享给广大程序员。


这个解决方案包含了两个步骤,将前端页面转化为PDF:

1. 遍历当前网页的DOM结构,收集所有DOM树上每个节点的元素信息及相应样式,渲染出canvas图像。这个遍历和渲染操作封装在脚本文件html2canvas.js里。


2. 利用一个开源的JavaScript库,jsPDF,在浏览器端用JavaScript生成PDF文件。PDF的生成逻辑封装在脚本文件jsPdf.debug.js里。


看看如何在您的前端网页里使用这两个JavaScript文件。


下面是网页内容:


在这里放一段很长很长的文件,能观察到最后生成的PDF会自动分页。。。。


在您的前端页面里画一个按钮,用于触发将当前网页保存成PDF文件的事件。


保存整个网页成PDF


HTML转PDF的代码如下:

image.pngimage.pngimage.pngimage.pngimage.png

目录
相关文章
|
7天前
|
Python
Python办公自动化:删除任意页数pdf页面
Python办公自动化:删除任意页数pdf页面
19 1
Python办公自动化:删除任意页数pdf页面
|
10天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
15 2
前端JS读取文件内容并展示到页面上
|
11天前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
22 1
|
25天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
7天前
|
JavaScript 前端开发
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
|
8天前
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。
|
2月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
2月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
148 0
|
7天前
|
Python
Python办公自动化:提取pdf文件中的图片
Python办公自动化:提取pdf文件中的图片
10 0
|
2月前
|
Linux Python Windows
Python PDF文件转Word格式,只需要3秒(附打包)
Python PDF文件转Word格式,只需要3秒(附打包)
63 3
Python PDF文件转Word格式,只需要3秒(附打包)
下一篇
无影云桌面