转自-----出道诗人

var downPdf = document.getElementById("exportToPdf");
downPdf.onclick = function() {
html2canvas(
document.getElementById("export_content"), {
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('content.pdf');
},
//背景设为白色(默认为黑色)
background: "#fff"
})
}

网页导出PDF文件的更多相关文章

  1. js_网页导出pdf文件

    打印当前页面,一开始我认为是需要输出pdf的,后来了解的需求是能够打印就可以了.需求既然都研究了,记录下. 更好的打印方式,window.print();会弹出打印对话框,打印的是window.doc ...

  2. asp.net2.0导出pdf文件完美解决方案【转载】

    asp.net2.0导出pdf文件完美解决方案 作者:清清月儿 PDF简介:PDF(Portable Document Format)文件格式是Adobe公司开发的电子文件格式.这种文件格式与操作系统 ...

  3. .Net导出pdf文件,C#实现pdf导出

    最近碰见个需求需要实现导出pdf文件,上网查了下代码资料总结了以下代码.可以成功的实现导出pdf文件. 在编码前需要在网上下载个itextsharp.dll,此程序集是必备的.楼主下载的是5.0版本, ...

  4. 利用ITextSharp导出PDF文件

    最近项目中需要到处PDF文件,最后上网搜索了一下,发现ITextSharp比较好用,所以做了一个例子: public string ExportPDF() { //ITextSharp Usage / ...

  5. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

  6. 史上最全的springboot导出pdf文件

    最近项目有一个导出报表文件的需求,我脑中闪过第一念头就是导出pdf(产品经理没有硬性规定导出excel还是pdf文件),于是赶紧上网查看相关的资料,直到踩了无数的坑把功能做出来了才知道其实导出exce ...

  7. .Net导出pdf文件,C#实现pdf导出 转载 http://www.cnblogs.com/hmYao/p/5842958.html

    导出pdf文件. 在编码前需要在网上下载个itextsharp.dll,此程序集是必备的.楼主下载的是5.0版本,之前下了个5.4的似乎不好用. 下载之后直接添加引用. <%@ Page Lan ...

  8. C# 利用ITextSharp导出PDF文件

    最近项目中需要导出PDF文件,最后上网搜索了一下,发现ITextSharp比较好用,所以做了一个例子: public string ExportPDF() { //ITextSharp Usage / ...

  9. Java导出pdf文件数据

    提示:导出pdf文件,需要3个jar包iText-2.1.5.jar,iTextAsian.jar,iText-rtf-2.1.4.jar. public boolean outputPdfJhsy( ...

随机推荐

  1. Python使用MySQL数据库(新)(转)

    http://www.cnblogs.com/fnng/p/3565912.html 一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安装文件,双击安装文件一步一步 ...

  2. Windows下dos命令行

    Dos命令--基本命令 1.求助命令 例如:del /? rd /? 2.基本常用命令 例如:dir :列出当前目录下的文件以及文件夹,后面可以接其他路径 md:创建目录(mkdir),一次创建多级目 ...

  3. Qml和C++开发的学生信息管理软件一

    一个月前接触到了Qml,也做过一些练习,但只能实现动画和简单的布局功能,逻辑部分和数据处理很难上手,看到许多人将C++和结合起来,Qml负责界面设计,C++实现逻辑处理,但将C++注册到 Qml中一直 ...

  4. JS中的一等公民:函数

    在JavaScript中,函数可以 作为值赋给一个变量 作为参数传递给另一个函数 作为另一个函数的返回值 所以我们说JavaScript的函数是“一等公民”. 赋值: var foo = functi ...

  5. My First Linux Module

    My First Linux Module Today, I successfully build my first linux hello module. First of all add a di ...

  6. NotePad++配置使之支持jquery、html、css、javascript、php提示

    1.将以下文件复制到Notepad++\plugins\apis覆盖之前的xml文件 javascript.xml html.xml css.xml   2.打开notepad++设置>首选项& ...

  7. python3+requests:接口自动化测试(二)

    转载请注明出处:https://www.cnblogs.com/shapeL/p/9188495.html 前言:上篇文章python3+requests+unittest:接口自动化测试(一):ht ...

  8. python 前端 html

    web 服务本质: 浏览器发出请求--HTTP协议--服务端接收信息----服务端返回响应---服务端把HTML文件发给浏览器--浏览器渲染页面. HTML: 超文本标记语言是一种用于创建网页的标记语 ...

  9. 用CSS3制作尖角标签按钮样式

    如图的效果.标签有背景色,且左侧有一个三角形,三角形中间有个白色的圆圈. 你一定在想这个效果是背景图切出来的吧——答案是没有用到任何图片 那你会不会在想这个效果的html结构很复杂呢——答案是最简单的 ...

  10. alpha冲刺(5/10)

    前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 博客撰写 问题困扰: 我想尝试让他们自己安排明天的任务,不知道是否可行. 心得体会: 一 ...