资讯专栏INFORMATION COLUMN

使用canvas保存网页为pdf文件支持跨域

高璐 / 2948人阅读

摘要:前言之前上一篇随笔说了截图网页为图片,下来个新需求,把网页截图后保存为文件供用户下载。使用保存网页为文件支持跨域正文需求用户点击下载,将页面保存为文件并下载。思路继续使用截图后将画布内容转换为文件。

前言

之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载。

使用canvas保存网页为pdf文件支持跨域
正文

需求:用户点击下载,将页面保存为PDF文件并下载。

思路:继续使用Canvas截图后将画布内容转换为pdf文件。

首先我们需要引入js文件jspdf.debug.js 下载路径 https://github.com/MrRio/jsPDF

引入canvas的js文件,js文件获取地址官网主页:http://html2canvas.hertzen.com/




div按钮代码

 
导出为PDF按钮
需要获取为PDF的div

jsp代码

 

此次网页改为PDF,与上次截图网页为PNG,使用同一种技术,都是先使用Canvas截图画布后转格式。

同样也有偏移、模糊、跨域等问题,使用之前的代码来处理。

转换pdf会让背景色变为黑色使用css样式改一下背景色就可以了。

完美转换为pdf。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/48224.html

相关文章

  • 使用canvas保存网页pdf文件支持跨域

    摘要:前言之前上一篇随笔说了截图网页为图片,下来个新需求,把网页截图后保存为文件供用户下载。使用保存网页为文件支持跨域正文需求用户点击下载,将页面保存为文件并下载。思路继续使用截图后将画布内容转换为文件。 前言 之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载。 使用canvas保存网页为pdf文件支持跨域正文 需求:用户点击下载,将页面保存...

    Half 评论0 收藏0
  • 使用canvas保存网页pdf文件支持跨域

    摘要:前言之前上一篇随笔说了截图网页为图片,下来个新需求,把网页截图后保存为文件供用户下载。使用保存网页为文件支持跨域正文需求用户点击下载,将页面保存为文件并下载。思路继续使用截图后将画布内容转换为文件。 前言 之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载。 使用canvas保存网页为pdf文件支持跨域正文 需求:用户点击下载,将页面保存...

    developerworks 评论0 收藏0
  • 我还是踩上了网页截图的坑

    摘要:最近做了个实现网页缩略图的项目,其中不免需要用到网页截屏。选择好方案后还是踩了不少坑,第一个就是我得想办法让它和通信,不然我没法通过前端只传一个需要被截图的链接给就能实现截图。 最近做了个实现网页缩略图的项目,其中不免需要用到网页截屏。 一开始想的是看看能不能在前端直接实现截图,因为Web端的截图并生成图片并不算是一个高频的需求,网上资料自然也不算多,查来查去,发现JavaScript...

    jcc 评论0 收藏0
  • 使用JavaScript将当前页面保存PDF支持图片和文字的保存

    摘要:前端开发的朋友们可能会遇到这个需求将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个文件。在您的前端页面里画一个按钮,用于触发将当前网页保存成文件的事件。 前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容。 我在网上找了一段时间...

    animabear 评论0 收藏0
  • 网页保存图片及高清截图的优化 | canvas跨域图片配置

    摘要:本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。 本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图。 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界 将整个网页保存为图片是一个十分有趣的功能,常见于H5活动页的结尾页分享。以下则是项目中...

    zhaochunqi 评论0 收藏0

发表评论

0条评论

高璐

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<