需要做一个导出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——高清版的更多相关文章

  1. 电脑报2014年第43期 pdf高清版

    电脑报2014年第43期 pdf高清版

  2. 大话数据结构pdf高清版下载

    大话数据结构PDF下载 不得不说严老师版的虽然比较经典,但是真的有点难理解啊,而大话数据结构这本书还是比较不错的,通俗易懂,反正我个人觉得很不错,希望对诸位有帮助. 链接:点击打开 密码:xovz p ...

  3. 笨办法学python 第四版 中文pdf高清版|网盘下载内附提取码

    笨办法学 Python是Zed Shaw 编写的一本Python入门书籍.适合对计算机了解不多,没有学过编程,但对编程感兴趣的朋友学习使用.这本书以习题的方式引导读者一步一步学习编 程,从简单的打印一 ...

  4. 流程的python PDF高清版

    免费下载链接:https://pan.baidu.com/s/1qcPjLlFXhVXosIGBKHVVXQ 提取码:qfiz

  5. 正则指引 pdf 高清版

    链接:https://pan.baidu.com/s/1Xeuma4toE_L-MxROvTGBxw 提取码:nqyj

  6. Python编程:从入门到项目实践高清版附PDF百度网盘免费下载|Python入门编程免费领取

    百度网盘:Python编程:从入门到项目实践高清版附PDF免费下载 提取码:oh2g   第一部分 基础知识第1章 起步 21.1 搭建编程环境 21.1.1 Python 2和Python 3 21 ...

  7. 分享《Python 游戏编程快速上手(第3版)》高清中文版PDF+高清英文版PDF+源代码

    通过编写一个个小巧.有趣的游戏来学习Python,通过实例来解释编程的原理的方式.14个游戏程序和示例,介绍了Python基础知识.数据类型.函数.流程控制.程序调试.流程图设计.字符串操作.列表和字 ...

  8. 《最优化导论第4版》高清中文版PDF+高清英文版PDF+习题题解

    <最优化导论第4版>高清中文版PDF+高清英文版PDF+习题题解 存放在语雀 凸优化 · 语雀

  9. Java编程思想第四版完整中文高清版.pdf

    Java编程思想第四版完整中文高清版.pdf 链接: https://pan.baidu.com/s/1vV5BHF3L-bnaG6WGurdJ_A 提取码: vigy 复制这段内容后打开百度网盘手机 ...

随机推荐

  1. 20190815网络与信息安全领域专项赛线上赛misc WriteUp

    目录 签到题 题目内容 使用工具 解题步骤 七代目 题目下载地址 使用工具 解题步骤 亚萨西 题目下载链接 使用工具 解题步骤 24word 题目下载链接 使用工具 解题步骤 感想 几星期前报了名却完 ...

  2. 6条shell小技巧,让脚本显得不再业余【转】

    如何能让自己的shell显得不那么业余?下面6点实践一定有用. 画外音:本篇文章源自Google的一篇实践,抽取了部分1分钟能读完的内容,加入了一些分析. 一.以下面的语句开场 set -o noun ...

  3. C++11原子操作与无锁编程(转)

    不讲语言特性,只从工程角度出发,个人觉得C++标准委员会在C++11中对多线程库的引入是有史以来做得最人道的一件事:今天我将就C++11多线程中的atomic原子操作展开讨论:比较互斥锁,自旋锁(sp ...

  4. Cookie的Secure属性和HttpOnly属性

    基于安全的考虑,需要给cookie加上Secure和HttpOnly属性,HttpOnly比较好理解,设置HttpOnly=true的cookie不能被js获取到,无法用document.cookie ...

  5. 【转载】 tf.ConfigProto和tf.GPUOptions用法总结

    原文地址: https://blog.csdn.net/C_chuxin/article/details/84990176 -------------------------------------- ...

  6. 关于Oracle to_date函数的高级用法

    由于种种原因,在我们的系统中,账套期间(PERIOD_NAME)由于格式设置的原因,数据库层存储的格式如下 Mar-19,而不是常规的2019-03. 我们无法更改数据库,涉及到的点太多. 但是期间数 ...

  7. 字节顺序&字节对齐

    一.字节顺序的产生 在计算机中,数据是以字节为单位存放的,而c语言中只有char才是一个字节,其他如int,float都是大于一个字节,所以就存在将数据按怎样的顺序存放的问题.一般有大端序和小端序两种 ...

  8. windows中设置php环境变量

    1.我的电脑->右键(选择我的属性) 2.点击高级设置 3.点击环境变量 4.在系统变量中找到Path 点击 5.找到php.exe的文件目录,添加到path中 6.php -v 显示版本,表示 ...

  9. Python实用日期时间处理方法汇总

    这篇文章主要介绍了Python实用日期时间处理方法汇总,本文讲解了获取当前datetime.获取当天date.获取明天/前N天.获取当天开始和结束时间(00:00:00 23:59:59).获取两个d ...

  10. 配置Pods和containers--为Containers和Pods分配内存资源

    指定内存请求和内存限制 要为容器指定内存请求,在容器的资源清单中使用resources:requests字段.要指定内存限制,使用resources:limits. memory-request-li ...