HTML页面导出PDF——高清版
需要做一个导出PDF的功能,网上找有很多,但是一般导出来的都是比较模糊的那种,下面这个是高清版的,导出的PDF都是几M,跟正常手动导出的差不多,很清晰。
首先用到的JS有:
<script type="text/javascript" charset="utf-8" src="js/html2canvas.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jsPdf.debug.js"></script>
<script type="text/javascript" charset="utf-8" src="js/canvas2image.js"></script>
代码:
<script>
function exportReportTemplet() {
var element = $("#print"); // 这个dom元素是要导出pdf的div容器
var w = element.width(); // 获得该容器的宽
var h = element.height(); // 获得该容器的高
var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
var canvas = document.createElement("canvas");
canvas.width = w * 2; // 将画布宽&&高放大两倍
canvas.height = h * 2;
var context = canvas.getContext("2d");
var scale = 2;
context.scale(2, 2);
// context.translate(-offsetLeft - abs, -offsetTop); var opts = {
scale: scale,
canvas: canvas,
width: w,
height: h,
useCORS: true,
background: '#FFF'
} html2canvas(element, opts).then(function (canvas) {
allowTaint: false;
taintTest: false;
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0);
// var oCanvas = document.getElementById("print");
// Canvas2Image.saveAsJPEG(oCanvas);
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');
}) }
</script>
HTML页面导出PDF——高清版的更多相关文章
- 电脑报2014年第43期 pdf高清版
电脑报2014年第43期 pdf高清版
- 大话数据结构pdf高清版下载
大话数据结构PDF下载 不得不说严老师版的虽然比较经典,但是真的有点难理解啊,而大话数据结构这本书还是比较不错的,通俗易懂,反正我个人觉得很不错,希望对诸位有帮助. 链接:点击打开 密码:xovz p ...
- 笨办法学python 第四版 中文pdf高清版|网盘下载内附提取码
笨办法学 Python是Zed Shaw 编写的一本Python入门书籍.适合对计算机了解不多,没有学过编程,但对编程感兴趣的朋友学习使用.这本书以习题的方式引导读者一步一步学习编 程,从简单的打印一 ...
- 流程的python PDF高清版
免费下载链接:https://pan.baidu.com/s/1qcPjLlFXhVXosIGBKHVVXQ 提取码:qfiz
- 正则指引 pdf 高清版
链接:https://pan.baidu.com/s/1Xeuma4toE_L-MxROvTGBxw 提取码:nqyj
- Python编程:从入门到项目实践高清版附PDF百度网盘免费下载|Python入门编程免费领取
百度网盘:Python编程:从入门到项目实践高清版附PDF免费下载 提取码:oh2g 第一部分 基础知识第1章 起步 21.1 搭建编程环境 21.1.1 Python 2和Python 3 21 ...
- 分享《Python 游戏编程快速上手(第3版)》高清中文版PDF+高清英文版PDF+源代码
通过编写一个个小巧.有趣的游戏来学习Python,通过实例来解释编程的原理的方式.14个游戏程序和示例,介绍了Python基础知识.数据类型.函数.流程控制.程序调试.流程图设计.字符串操作.列表和字 ...
- 《最优化导论第4版》高清中文版PDF+高清英文版PDF+习题题解
<最优化导论第4版>高清中文版PDF+高清英文版PDF+习题题解 存放在语雀 凸优化 · 语雀
- Java编程思想第四版完整中文高清版.pdf
Java编程思想第四版完整中文高清版.pdf 链接: https://pan.baidu.com/s/1vV5BHF3L-bnaG6WGurdJ_A 提取码: vigy 复制这段内容后打开百度网盘手机 ...
随机推荐
- 20190815网络与信息安全领域专项赛线上赛misc WriteUp
目录 签到题 题目内容 使用工具 解题步骤 七代目 题目下载地址 使用工具 解题步骤 亚萨西 题目下载链接 使用工具 解题步骤 24word 题目下载链接 使用工具 解题步骤 感想 几星期前报了名却完 ...
- 6条shell小技巧,让脚本显得不再业余【转】
如何能让自己的shell显得不那么业余?下面6点实践一定有用. 画外音:本篇文章源自Google的一篇实践,抽取了部分1分钟能读完的内容,加入了一些分析. 一.以下面的语句开场 set -o noun ...
- C++11原子操作与无锁编程(转)
不讲语言特性,只从工程角度出发,个人觉得C++标准委员会在C++11中对多线程库的引入是有史以来做得最人道的一件事:今天我将就C++11多线程中的atomic原子操作展开讨论:比较互斥锁,自旋锁(sp ...
- Cookie的Secure属性和HttpOnly属性
基于安全的考虑,需要给cookie加上Secure和HttpOnly属性,HttpOnly比较好理解,设置HttpOnly=true的cookie不能被js获取到,无法用document.cookie ...
- 【转载】 tf.ConfigProto和tf.GPUOptions用法总结
原文地址: https://blog.csdn.net/C_chuxin/article/details/84990176 -------------------------------------- ...
- 关于Oracle to_date函数的高级用法
由于种种原因,在我们的系统中,账套期间(PERIOD_NAME)由于格式设置的原因,数据库层存储的格式如下 Mar-19,而不是常规的2019-03. 我们无法更改数据库,涉及到的点太多. 但是期间数 ...
- 字节顺序&字节对齐
一.字节顺序的产生 在计算机中,数据是以字节为单位存放的,而c语言中只有char才是一个字节,其他如int,float都是大于一个字节,所以就存在将数据按怎样的顺序存放的问题.一般有大端序和小端序两种 ...
- windows中设置php环境变量
1.我的电脑->右键(选择我的属性) 2.点击高级设置 3.点击环境变量 4.在系统变量中找到Path 点击 5.找到php.exe的文件目录,添加到path中 6.php -v 显示版本,表示 ...
- Python实用日期时间处理方法汇总
这篇文章主要介绍了Python实用日期时间处理方法汇总,本文讲解了获取当前datetime.获取当天date.获取明天/前N天.获取当天开始和结束时间(00:00:00 23:59:59).获取两个d ...
- 配置Pods和containers--为Containers和Pods分配内存资源
指定内存请求和内存限制 要为容器指定内存请求,在容器的资源清单中使用resources:requests字段.要指定内存限制,使用resources:limits. memory-request-li ...