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

developerworks 发布于2019-08-26 13:26 / 2708人阅读

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

前言

之前上一篇随笔说了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。

云服务器 GPU云服务器 asp保存网页为图片保存为文件 webrtc 保存为文件 php文件保存为中文

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

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

我还是踩上了网页截图的坑

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

jcc 2019-08-20 19:06 评论0 收藏0
使用JavaScript将当前页面保存成PDF，支持图片和文字的保存

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

animabear 2019-08-23 12:32 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

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

zhaochunqi 2019-08-01 17:43 评论0 收藏0