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


Posted in HTML / CSS onNovember 23, 2018

前言

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

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

正文

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

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

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

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

<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript" src="js/jspdf.debug.js"></script>

div按钮代码

<div id="down_pdf">导出为PDF按钮</div>
 <div class="sta-main">需要获取为PDF的div</div>

jsp代码

<script type="text/javascript">
/* var downPdf = document.getElementById("down_pdf"); */
var downPdf = document.getElementById("down_pdf");
$("#down_pdf").on("click", function() {
 var canvas2 = document.createElement("canvas");
 let _canvas = document.querySelector('.sta-main');
 //获取宽高
 var w = parseInt(window.getComputedStyle(_canvas).width);
 var h = parseInt(window.getComputedStyle(_canvas) .height);
 //将canvas画布放大2倍,然后盛放在小的容器内,处理模糊
 canvas2.width = w * 2;
 canvas2.height = h * 2;
 canvas2.style.width = w + "px";
 canvas2.style.height = h + "px";
 var context = canvas2.getContext("2d");
 //处理偏移
 context.scale(1.5, 1.5);
 //修改背景颜色,默认是黑色
 $('.sta-main').css("background", "#fff")
 html2canvas( _canvas, {
 //处理pdf跨域获取不到跨域信息问题
 taintTest : false,
 useCORS : true,
 allowTaint : false, 
 canvas : canvas2,
 dpi: 172,//导出pdf清晰度
 onrendered: function (canvas) {
 var contentWidth = canvas.width;
 var contentHeight = canvas.height;
 //一页pdf显示html页面生成的canvas高度;
 var pageHeight = contentWidth / 592.28 * 841.89;
 //未生成pdf的html页面高度
 var leftHeight = contentHeight;
 //pdf页面偏移
 var position = 0;
 //html页面生成的canvas在pdf中图片的宽高(a4纸的尺寸[595.28,841.89])
 var imgWidth = 595.28;
 var imgHeight = 592.28 / contentWidth * contentHeight;
 var pageData = canvas.toDataURL('image/jpeg', 1.0);
 var pdf = new jsPDF('', 'pt', 'a4');
 //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
 //当内容未超过pdf一页显示的范围,无需分页
 if (leftHeight < pageHeight) {
 pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
 } else {
 while (leftHeight > 0) {
 pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
 leftHeight -= pageHeight;
 position -= 841.89;
 //避免添加空白页
 if (leftHeight > 0) {
 pdf.addPage();
 }
 }
 }
 pdf.save('PDF的名字.pdf');
 }
 })
 $('.sta-main').css("background", "")
})
</script>

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

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

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

完美转换为pdf。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 简写animation
May 10 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 #HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 #HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 #HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 #HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 #HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 #HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 #HTML / CSS
You might like
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php基础教程
2015/08/26 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python数据结构之单链表详解
2017/09/12 Python
Django实现分页显示效果
2019/10/31 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
python 检测图片是否有马赛克
2020/12/01 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
怎样自定义一个异常类
2016/09/27 面试题
中药专业大学生医药工作求职信
2013/10/25 职场文书
英语课外活动总结
2014/08/27 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
社区文明倡议书
2015/04/28 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫