html 页面转成 pdf,直接看代码;

参考地址: https://github.com/linwalker/render-html-to-pdf

给出代码 方便粘贴:

var downPdf = document.getElementById("pdfDownLoad"); // 点击的按钮
var pdfDom = document.getElementById('tableInfoShow') // 生成 pdf 的区域
downPdf.onclick = function () {
  html2canvas(pdfDom, {
  onrendered: function (canvas) {
    var contentWidth = canvas.width
    var contentHeight = canvas.height
    var pageHeight = contentWidth / 592.28 * 841.89
    var leftHeight = contentHeight
    var position = 0
 
    // var imgWidth = 595.28
    var imgWidth = 900
    var imgHeight = 900 / contentWidth * contentHeight
    var pageData2 = canvas.toDataURL('image/jpeg', 1.0)
    var PDF = new jsPDF('', 'pt', 'a4')
    //PDF.addImage(pageData2, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData2, 'JPEG', -150, -5, imgWidth, imgHeight)
      // PDF.addImage(pageData2, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
    while (leftHeight > 0) {
      PDF.addImage(pageData2, 'JPEG', 0, position, imgWidth, imgHeight)
      leftHeight -= pageHeight
      position -= 841.89
 
      //position -= 851
      if (leftHeight > 0) {
        PDF.addPage()
      }
    }
  }
    PDF.save('研究生考核表' + '.pdf');
    }
  })
}

html 转成 pdf 进行预览、下载、打印的更多相关文章

  1. java 文件转成pdf文件 预览

    一.前端代码 //预览功能 preview: function () { //判断选中状态 var ids =""; var num = 0; $(".checkbox& ...

  2. C#调用WPS将文档转换成pdf进行预览

    引用:https://www.jianshu.com/p/445996126c75 vs启动项目可以生成wps实例 本地iis部署的站点却不行 原因是vs是管理员权限,而iis没有权限 解决方法 启动 ...

  3. java原装代码完成pdf在线预览和pdf打印及下载

    这是我在工作中,遇到这样需求,完成需求后,总结的成果,就当做是工作笔记,以免日后忘记,当然,能帮助到别人是最好的啦! 下面进入正题: 前提准备: 1. 项目中至少需要引入的jar包,注意版本: a)  ...

  4. 实战动态PDF在线预览及带签名的PDF文件转换

    开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...

  5. 动态PDF在线预览

    实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...

  6. Office在线预览及PDF在线预览的实现方式史上最全大集合

    Office在线预览及PDF在线预览的实现方式大集合 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPD ...

  7. Aspose office (Excel,Word,PPT),PDF 在线预览

    前文: 做个备份,拿的是试用版的 Aspose,功能见标题 代码: /// <summary> /// Aspose office (Excel,Word,PPT),PDF 在线预览 // ...

  8. 网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)

    JS实现打印功能(包括打印预览.打印设置等) 绪 最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打 ...

  9. PDF文件预览和下载

    背景:项目中实现pdf文件的预览以及下载 环境:jdk1.8.SpringBoot2.0.Maven    PDF.js下载地址将下载的源码拷入项目中    修改viewer.js: 将default ...

随机推荐

  1. SpringBoot扩展SpringMVC自动配置

    SpringBoot中自动配置了 ViewResolver(视图解析器) ContentNegotiatingViewResolver(组合所有的视图解析器) 自动配置了静态资源文件夹.静态首页.fa ...

  2. C++学习8-面向对象编程基础(模板)

    模板 模板是一种工具,模板可以使程序员能建立具有通用类型的函数库与类库: 模板具有两种不同的形式: 函数模板 类模板 函数模板 当一个add()函数接收两个参数,因为某种特定情况,所传入的实参数据类型 ...

  3. 【转】CString与string、char*的区别和转换

    我们在C++的开发中经常会碰到string.char*以及CString,这三种都表示字符串类型,有很多相似又不同的地方,常常让人混淆.下面详细介绍这三者的区别.联系和转换: 各自的区别 char*: ...

  4. MyBatis返回Map键值对数据

    List<Map<String, String>> getMtypeList(); <select id="getMtypeList" resultT ...

  5. Web 中调用FreeSWITCH的Portal GUI配置记录

    具体设定步骤: ①加载 mod_xml_rpc 模块:load mod_xml_rpc 若想让该模块在FreeSWITCH启动时而自动加载,在conf/autoload_configs/modules ...

  6. Spring Boot学习笔记 - 整合Swagger2自动生成RESTful API文档

    1.添加Swagger2依赖 在pom.xml中加入Swagger2的依赖 <!--swagger2--> <dependency> <groupId>io.spr ...

  7. 11:django 模板 内建标签

    django 内建标签 autoescape 控制当前自动转义的行为,有on和off两个选项 {% autoescape on %} {{ body }} {% endautoescape %} bl ...

  8. 使用JSONP实现跨域通信

    引语 Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.由于受到浏览器的限制,该方法不允许 ...

  9. Twitter开源的Heron快速安装部署教程

    什么是Heron? Twitter使用Storm实时分析海量数据已经有好几年了,并在2011年将其开源.该项目稍后开始在Apache基金会孵化,并在2015年秋天成为顶级项目.Storm以季度为发布周 ...

  10. 使用mybatis-spring-boot-starter如何打印sql语句

    只需要将接口文件的日志设置为debug即可. 例如你的mapper接口所在的文件夹是 com.demo.mapper 那么在application.properties配置文件中添加 logging. ...