将Chrome调试器里的JavaScript变量保存成本地JSON文件

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

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

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

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

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

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

<script type="text/javascript" src="html2pdf/html2canvas.js"></script>

<script type="text/javascript" src="html2pdf/jsPdf.debug.js"></script>

下面是网页内容:

<html>

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

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

<button id="renderPdf">保存整个网页成PDF</button>

HTML转PDF的代码如下:

如果想下载可以复制粘贴的代码文本,可以到这个链接下载。https://github.com/linwalker/render-html-to-pdf

下面可以看看这个解决方案的效果。

点这个按钮:

这是用JavaScript生成的PDF文件在本地打开的效果:

可以看到PDF中的翻页没有任何问题。

大家如果想自己体验一下通过JavaScript进行HTML转PDF的效果,可以试试我的demo:http://i042416.github.io/FioriODataTestTool2014/WebContent/092_html2pdf.html

这个解决方案最初是一位叫linwalker的程序员设计的,下面是他的github链接:

https://github.com/linwalker/render-html-to-pdf

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享

Chrome开发,debug的使用方法。

怎样打开Chrome的开发者工具? 你可以直接在页面上点击右键,然后选择审查元素: ? 或者在Chrome的工具中找到: ? 或者,你直接记住这个快捷方式: C...

21710
来自专栏ytkah

小程序提升界面使用体验 丰富了内容展示组件

  昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验、丰富内容展示组件、完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上...

4248
来自专栏守候书阁

vue插件开发练习--实用弹窗

上回说了组件(vue组件开发练习--焦点图切换)的一个练习项目,这次换下口味,说下vue的插件练手的项目。相对于现在之前的焦点图切换的组件,这个可能就更简单了,...

1382
来自专栏Maroon1105

WordPress之去掉顶部工具栏

用WP搭建自己博客的人都会发现网站上面有一个黑色的工具栏,影响网站美观度,那么怎么去掉顶部工具栏呐?

4930
来自专栏河湾欢儿的专栏

wx 小程序

1.首先我们拿到一个新的框架(我感觉wx小程序和框架差不多),先分析里面的东西 例如这个微信小程序 我们先看下面的四个文件[图片上传失败...(image-...

1523
来自专栏数据小魔方

excel中的超链接函数

今天跟大家分享在excel中超链接函数的用法! ▼ 其实excel中想要达到超链接效果有很多种方法:直接手工设置、超链接函数、开发工具、VBA等都可以实现。但是...

4639
来自专栏每日一篇技术文章

weex-06-程序的入口文件app.js

app.js 这个是我们打包时的入口文件,为什么这样说呢?我们看一下打包配置文件webpack.config.json中的部分内容

2982
来自专栏python学习指南

Python爬虫(十九)_动态HTML介绍

JavaScript JavaScript是网络上最常用也是支持者对多的客户端脚本语言。它可以收集用户的跟踪数据,不需要重载页面直接提交表单,在页面嵌入多媒体文...

2015
来自专栏Ken的杂谈

JS/Jquery解决回车键触发表单提交问题

因为现在大多数浏览器,当表单中的文本框或其他可提交元素为当前焦点时,敲回车键就会触发表单提交。

1312
来自专栏iKcamp

微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具

第二章:小程序中级实战教程之预备篇    项目结构设计 教学视频地址:https://v.qq.com/x/page/q05544lzelw.html ...

2177

扫码关注云+社区

领取腾讯云代金券