首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。...这个解决方案包含了两个步骤,将前端页面转化为PDF: 1. 遍历当前网页的DOM结构,收集所有DOM树上每个节点的元素信息及相应样式,渲染出canvas图像。...PDF的生成逻辑封装在脚本文件jsPdf.debug.js里。 看看如何在您的前端网页里使用这两个JavaScript文件。... 在您的前端页面里画一个按钮,用于触发将当前网页保存PDF文件的事件。...保存整个网页成PDF HTML转PDF的代码如下: [1240] 如果想下载可以复制粘贴的代码文本,可以到这个链接下载。

6.3K20

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

这个解决方案包含了两个步骤,将前端页面转化为PDF: 1. 遍历当前网页的DOM结构,收集所有DOM树上每个节点的元素信息及相应样式,渲染出canvas图像。...这个遍历和渲染操作封装在脚本文件html2canvas.js里。 2. 利用一个开源的JavaScript库,jsPDF,在浏览器端用JavaScript生成PDF文件。...PDF的生成逻辑封装在脚本文件jsPdf.debug.js里。 看看如何在您的前端网页里使用这两个JavaScript文件。...下面是网页内容: 在这里放一段很长很长的文件,能观察到最后生成的PDF会自动分页。。。。 在您的前端页面里画一个按钮,用于触发将当前网页保存PDF文件的事件。...保存整个网页成PDF HTML转PDF的代码如下: 下面可以看看这个解决方案的效果。 点这个按钮: ? 这是用JavaScript生成的PDF文件在本地打开的效果: ?

2.1K40
您找到你想要的搜索结果了吗?
是的
没有找到

如何交换PDF页面PDF文件的页面位置怎么交换

收到读者大大的回复,提到PDF文件交换页面,也不知道要干嘛用,但是既然读者大大提到了,肯定是在某个时刻需要这个操作,如何交换PDF页面?...PDF文件的页面位置怎么交换,小编这期决定出个教程,不喜勿喷,不要影响有这方面需求的小伙伴继续看。...电脑应用:迅捷PDF编辑器 1:交换页面PDF编辑器打开是关键,第一步我们就要先用工具打开一个PDF文件,两个文件其中的一个就可以了点击工具页面上的打开按钮选择文件打开。...2:为了使两文件中的页面互换位置,找到菜单栏的文档选项,点击文档栏目下的更多页面中的交换页面。...其实在PDF文件打开之后,在页面右边的缩略图中也能调整页面顺序,鼠标选择要调整的页面然后放到我们要调整的位置,页面的序列号也会根据我们的调整从新进行排序哦。

2.2K20

【说站】PDF文件太大如何变小?减少PDF文件大小方法

我们经常会碰到一个pdf文件容量太大了的问题,pdf文件太大占用空间,打开进行浏览也会很卡。...本文方法用于单个PDF文件变小的操作,要对大量PDF文件进行批量减小请参考本站另外一篇文章的方法(批量减少PDF文件的大小,PDF文件太大如何批量减少)。...2、打开“优化PDF”这个工具以后,会看到工具栏上面出现如下界面,有“减少文件大小”、“高级优化”和“优化扫描的页面”三个工具。...3、一般来说我们用“减少文件大小”这个工具就可以正常压缩pdf文件的大小了,点击“减少文件大小”会出现以下对话框,我们一般选择“保留当前压缩”(保留当前的 PDF 版本,或选择一个 Acrobat 版本...以上就是用Adobe Acrobat DC软件减少压缩pdf文件大小的具体方法。 收藏 | 0点赞 | 0打赏

4.4K20

怎样压缩PDF文件大小?简单的步骤是什么?

PDF文件传输的时候经常因为PDF文件太大无法进行传输,遇到这样的情况我们应该怎样将其进行压缩呢?...其实很简单,我们可以借助来进行实现,下面将PDF文件压缩的方法分享给大家,希望可以帮助到有需要的朋友!...首图.png   操作步骤:   第一步:打开压缩工具,在跳转的页面有五个功能选项,点击选择PDF压缩; 1.png   第二步:进入压缩界面,通过添加文件将需要进行压缩的文件进行上传; 2.png...,点击添加文件或添加文件夹即可; 3.png   第四步:在上传文件下方通用设置中可以对一些基本的设置根据自己的需要进行操作; 4.png   第五步:在开始压缩之前,有一个很重要的步骤就是将保存的路径进行更改...选择自己需要的路径即可; 5.png   第六步:以上步骤完成之后,点击开始压缩,工具将自动会对上传的文件进行压缩; 6.png   第七步:当状态一栏显示输出完成,点击打开文件夹或者回到自己保存的路径进行查看即可

1.3K40

【说站】PDF如何更改页面尺寸大小,QI插件改变PDF页面大小

前不久碰到个问题,需要改变pdf页面的尺寸大小,需要用到的工具: 1、Adobe Acrobat Pro DC简体中文永久版下载 2、Quite Imposing plus3 PDF拼版插件中文汉化破解版...(Acrobat Pro DC的QI插件) 如何查看pdf页面尺寸大小 我们首先要会看PDF页面尺寸,一般来说用Acrobat Pro DC打开pdf文件以后,在底部的状态栏左下角就可以看到当前页面的尺寸...PDF如何改变页面尺寸大小 第一步、安装好软件以后,在主菜单栏上找到“增效工具”》Quite Imposing Plus 3》控制面板,打开Quite Imposing Plus的控制面板: 第二步、...设置完成以后,点击“确定”进行更改页面尺寸大小。 最后,我们可以按照前面所说的方法查看页面左下角的状态栏,查看更改尺寸以后的pdf页面的尺寸大小是否符合我们的要求。...以上就是PDF如何改变页面尺寸大小,QI插件改变PDF页面尺寸大小的所有内容。 收藏 | 0点赞 | 0打赏

2.5K10

PDF.js专题

PDF.js是什么     PDF.js is a Portable Document Format(PDF) viewer that is built with HTML5.PDF.js is community-driven...,页面参数包括加载的PDF文件路径都在这里设置 2.2 我想只要满足下面两个要求就算大家可以用了 1.打开任意想打开的pdf文件(这就是github上的FAQ的第一个问题) 2.能够通过.net后台动态的控制与打开.../doc/ 09.pdf'; 第二个问题: viewer.html可以通过页面参数传值的方式加载pdf文件,比如我们想打开09.pdf文件的话,只需要这样: 先把viewer.js中的参数修改为空: var...多点两下就会出现页面未响应,但是一般情况下是假死,等几秒就会活过来,我试了很多次还没有遇到真死的情况。     ...通常情况下, PDF文件以更小的文件大小将变得更快,这取决于单页(数据量?)有多大。

20.8K112

C# iText 7 切分PDF,处理PDF页面大小

一、itext 我要使用itext做一个pdf页面大小一致性处理,然后再根据数据切分出需要的pdf. iText的官网有关于它的介绍,https://itextpdf.com/ 然后在官网可以查找api...二、处理PDF页面大小一致 由于原始PDF 是扫描图片合成来的,有些页面扫描的图片规格不一致,导致pdf阅读性很差。...页码,将原来的PDF页码对象拷贝PdfFormXObject到要生成的PDF文档中,首先要copy页面对象才能使用,不然直接获取的page对象是原来文档的,我们无法操作。...var formXObject = page.CopyAsFormXObject(outPDfDoc); 然后对页面进行缩放计算,我们新的PDF默认设置成A3大小,通过计算原始页面和新页面宽高比例进行缩放...处理后的PDF: 三、切分PDF 切分PDF 就比较简单了,直接从原始文件中拷贝页面到新PDF文档中就行了。

1.1K40
领券