需要做一个导出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. 使用electron开发桌面级小程序自动部署系统

    那一天我二十一岁,在我一生的黄金时代,我有好多奢望.我想爱,想吃,还想在一瞬间变成天上半明半暗的云,后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消逝,最后变得像挨了锤的牛一样. ...

  2. nginx 日志打印响应时间 request_time 和 upstream_response_time

    设置log_format,添加request_time,$upstream_response_time,位置随意 og_format  main  '"$request_time" ...

  3. Java多次启动相同jar程序

    背景 现在很多软件都支持集群部署,但是测试环境通常资源有限,所以一般通过单台机器模拟集群部署(使用不同端口,运行相同jar包),本文的目的就是通过多种方式实现此需求. 两个程序 1.jar程序 ① s ...

  4. error: dereferencing pointer to incomplete type

    /******************************************************************************* * error: dereferenc ...

  5. bitcoinjs-lib 哈希交易之多笔交易合并。

    转账的时候需要手动寻找每一笔未花费记录实在太费时. 比特币转账需要提取或合并所有未花费的交易中的比特币,才能实现交易. import * as bitcoin from 'bitcoinjs-lib' ...

  6. [zhuan]SQLSERVER 数据库性能的基本

    SQLSERVER 数据库性能的基本 很久没有写文章了,在系统正式上线之前,DBA一般都要测试一下服务器的性能 比如你有很多的服务器,有些做web服务器,有些做缓存服务器,有些做文件服务器,有些做数据 ...

  7. Python3基础 from...import...as 解决局部导入时的函数名重复问题

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  8. socket 发送字符串0x00时被截断

    发送数据如下: aa 02 02 00 00 00 6f 6b 02 00 00 00 55 数据是以字符数组的形式(char msg[])存储发送的,send时发送长度填写的strlen(msg), ...

  9. 【PHP】两个时间段间隔30分钟的所有时间

    运用场景: 比如在进行配送时候,需要让用户选择 送达时间, 平台只需要设置每天的营业时间.比如:08:00 到  22:30. 前台在展示时候: 就需要处理成各个时间段来展示: 代码实现: <? ...

  10. 关于在windows平台下将应用制作成windows服务及服务依赖的感想

    在某些情况下,应用需要部署在windows平台下,单纯的手动点击exe执行文件或java -jar xxx.jar在实际生产环境中不是最佳实践(制作成bat启动文件置于启动项里,服务器启动后,需要人工 ...