<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

  <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

</head>

<body>

  <div>

      jspdf 的使用

  </div>

<div class="right-aside">

   JSPDF的使用

</div>

<script>

  fn()

  function fn() {

    var target = document.getElementsByClassName("right-aside")[0];

    target.style.background = "#FFFFFF";

    html2canvas(target, {

      onrendered:function(canvas) {

          console.log(12)

        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 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");

          // 转base64

        var datauri = pdf.output('dataurlstring')

          var base64 = datauri.substring(28);

        console.log(base64)

      }

    })

  }

</script>

</body>

</html>

　　

jsPDF的更多相关文章

  1. 赞！jsPDF – 基于 HTML5 的强大 PDF 生成工具

    jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档.使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了.浏览器兼容性: IE 10, Firefo ...

  2. 一个在浏览器端将html 转为pdf 的js 插件 jsPDF

    <!DOCTYPE html> <html> <head> <title>test</title> <meta http-equiv= ...

  3. jspdf生成pdf并在页面展示

    jspdf调用ouput即可 https://blog.csdn.net/dragonzoebai/article/details/18243823 获取页面生成pdf:jspdf+html2canv ...

  4. html/jsp导出pdf格式的几种方法（jsPDF，iText，wkhtmltopdf）

    在许多生成报表的时候需要我们后台作出动态的数据,并渲染到前端生成pdf格式,Excel格式的各种报表,但是浏览器自带的生成pdf功能,windows系统的ctrl+p键就能完全搞定这一需求,但对客户来 ...

  5. npm jspdf报错

    137073 warn optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules\chokidar\node_modul ...

  6. jspdf简单使用

    安装 npm install jspdf --save 英文输出 import jsPDF from 'jspdf-customfonts' let doc = new jsPDF() doc.tex ...

  7. 利用jsPDF有效减轻报表型应用服务器的IO负载

    1.利用jsPDF在客户端浏览器上生成pdf文档 使用这种方法可以有效减轻服务器的压力,但是对于国际化,此库任然存在的问题:该库不支持unicode,生成中文文档会乱码,官方也有描述这个问题,详情请参 ...

  8. 分享一个 jsPDF的简单使用以及中文编码问题的解决

    后台一个下载文件中内容国际化问题的坑甩到了前端 前端自己匹配,自己处理国际化,生成文件下载 jsPDF-AutoTable    挺靠谱 中文乱码, 还是好人多啊 解决方式如下文章 jsPDF的简单使 ...

  9. 【jsPDF】jsPDF插件实现将html页面转换成PDF，并下载，支持分页

    1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...

  10. Javascript将html转成pdf,下载（html2canvas 和 jsPDF）

    最近碰到个需求,需要把当前页面生成pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/render-h ...

随机推荐

  1. c#学习笔记06——XML

    XML概述:eXtensible Markup Language,可扩展标记语言.网络应用开发的一项新技术.同HTML一样是一种标记语言,但是数据描述能力要强很多.XML具有描述所有已知未知数据的能力 ...

  2. node 第三方库总结

    app.post("/todo/add", (request, response) => { request.body //如何拿到前端ajax传来的JSON数据 }) 需要 ...

  3. python-day4爬虫基础之正则表达式

    正则表达式:(字符串匹配) 使用单个字符串来描述匹配一系列符合某个句法规则的字符串 是对字符串操作的一种逻辑公式 应用场景:处理文本和数据 正则表达式过程:依次拿出表达式和文本中的字符比较,如果每一个 ...

  4. fiddler抓包可以抓到电脑数据抓不到手机上的数据------防火墙问题

    1.确保手机与电脑处于同一局域网,网络没问题,手机代理设置无误 2.确保fiddler设置没有任何问题 3.如果此时还是无法抓包,请打开控制面板----Windows防火墙------允许程序通过Wi ...

  5. Django整体架构

    Django整体架构 用户能够访问到的所有的资源 都是程序员提前暴露好的, 如果没有暴露 用户就永远访问不了 用户能够访问到的所有的资源 都是程序员提前暴露好的, 如果没有暴露 用户就永远访问不了 一 ...

  6. Microsoft.Office.Inter.Excel.dll在調用時可能會出現如下錯誤

    Microsoft.Office.Inter.Excel.dll在調用時可能會出現如下錯誤,具體解決方案如下: 1. 錯誤資訊:檢索 COM 類工廠中 CLSID 為{00024500-0000-00 ...

  7. BSC交流

    深圳建筑科学研究院 IT规划咨询项目 1999-2000年 平衡计分卡项目少 绩效管理 财务指标 考核 定量 考核国企 客户 产品 双重 市场 路径.方向的设计战略地图的工具,思维地图是怎么, 战略解 ...

  8. E. Delete a Segment（删除一个区间，让并区间最多）

    题:https://codeforces.com/contest/1285/problem/E 题意:给定n个区间,最多删除一个区间,让最后的并区间个数最大 #include<bits/stdc ...

  9. php对比二个不同的二维数组

    $diff_data = array_filter($data1, function($v) use ($data2) { return ! in_array($v, $data2);});

  10. Linux inode的正确理解

    一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统 ...