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. 重新学习Servlet二

    重新学习Servlet public abstract class HttpServlet extends GenericServlet package com.xh.test.api; import ...

  2. V4L2应用程序框架【转】

    转自:https://www.cnblogs.com/hzhida/archive/2012/05/29/2524397.html V4L2是V4L的升级版本,linux下视频设备程序提供了一套接口规 ...

  3. find结合rm删除或mv移动文件的方法

    删除过期的备份文件,多用find结合rm方法,可以使用-exec或xargs -exec rm -rf {} \; 或 find /home/mysqlbackup -name "*$thi ...

  4. css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动

    老话长谈,css的不固定适应布局   不管是面试还是在平时的工作中,这样的布局形式一直都在用着,很常见,所以今天我就拿出来在唠叨一下, 既是给自己一个备忘存储,也是一个学习巩固的参考,知道大家都会,还 ...

  5. 单点登录SSO+鉴权

    一.单点登录原理 1.登录 2.注销 --------------------------------------------------------------------------------- ...

  6. 错误代码 1045 Access denied for user 'root'@'localhost' (using password:YES)

    1 前言 现象是用MySQL 5.7 Command Line Client可以使用root账号进入,但是其它navicat,phpsqladmin,mysql workbench,heidisql用 ...

  7. windows下升级node&npm

    一.升级npm npm install -g npm 二.升级node 1.查询node的安装目录 where node 2.在官网下载最新的安装包,直接覆盖安装即可. https://nodejs. ...

  8. SeaJS入门教程系列之使用SeaJS(二)

    SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...

  9. MFC单文档

    一.创建并运行MFC单文档程序 1.创建单文档程序 这里使用的是VS2017.首先,打开VS2017,选择文件->新建->项目,然后选择Visual C++ -> MFC /ATL& ...

  10. poj3579 二分套二分

    和poj3685类似,都是二分答案然后在判断时再二分 这题的内层二分可以用stl代替 /* 二分套二分,思路:升序排序数据,先二分答案x进行判断,判断时枚举每个元素,二分找到和其之差小于等于x的所有值 ...