转

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <button id="exportToPdf">导出为PDF</button>
  11. <div id="export_content">
  12.      <div>
  13.          sdsf
  14.  
  15.      </div>
  16.      <div style="color: red">
  17.         sdsf
  18.         1231313
  19.     </div>
  20. </div>
  21. </body>
  22. <script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script>
  23. <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
  24. <script type="text/javascript">
  25.     var downPdf = document.getElementById("exportToPdf");
  26.     downPdf.onclick = function () {
  27.         html2canvas(
  28.                 document.getElementById("export_content"),
  29.                 {
  30.                     dpi: 172,//导出pdf清晰度
  31.                     onrendered: function (canvas) {
  32.                         var contentWidth = canvas.width;
  33.                         var contentHeight = canvas.height;
  34.  
  35.                         //一页pdf显示html页面生成的canvas高度;
  36.                         var pageHeight = contentWidth / 592.28 * 841.89;
  37.                         //未生成pdf的html页面高度
  38.                         var leftHeight = contentHeight;
  39.                         //pdf页面偏移
  40.                         var position = 0;
  41.                         //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
  42.                         var imgWidth = 595.28;
  43.                         var imgHeight = 592.28 / contentWidth * contentHeight;
  44.  
  45.                         var pageData = canvas.toDataURL('image/jpeg', 1.0);
  46.                         var pdf = new jsPDF('', 'pt', 'a4');
  47.  
  48.                         //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
  49.                         //当内容未超过pdf一页显示的范围，无需分页
  50.                         if (leftHeight < pageHeight) {
  51.                             pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
  52.                         } else {
  53.                             while (leftHeight > 0) {
  54.                                 pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
  55.                                 leftHeight -= pageHeight;
  56.                                 position -= 841.89;
  57.                                 //避免添加空白页
  58.                                 if (leftHeight > 0) {
  59.                                     pdf.addPage();
  60.                                 }
  61.                             }
  62.                         }
  63.                         pdf.save('content.pdf');
  64.                     },
  65.                     //背景设为白色（默认为黑色）
  66.                     background: "#fff"
  67.                 })
  68.     }
  69. </script>
  70.  
  71. </html>

如果是vue版本的  注意一定要用 cnpm下载，用npm是下载不过来的

  1. cnpm install vue-pdf --save-dev

前端html转pdf的更多相关文章

  1. 前端vue实现pdf文件的在线预览

    3.前端vue实现pdf文件的在线预览 我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...

  2. layui.js---layer;;前端预览pdf

    layui.js---layer;;前端预览pdf 1.必须引入layui.js 2.uul是pdf文件地址 3.触发function函数:小于号button onclick="pdfsee ...

  3. base64编码后的pdf文件前端页面展示--pdf.js的应用

    最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...

  4. 前端 / JavaScript 导出PDF的实践

    1.库:jspdf,自己定义一个高宽,如A4的210mm×297mm 2.让设计给背景图(包括:页眉页脚),水印图(背景透明,高宽和你的PDF单页一致)以及很多,能设计给的设计要给,因为在pdf上,排 ...

  5. 纯前端导出pdf文件

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

  6. java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）

    背景 之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大 ...

  7. 前端导出pdf

    html2canvas文档地址 http://html2canvas.hertzen.com/configuration 方式一:使用html2canvas和jspdf插件实现 该方式是通过html2 ...

  8. 前端实现html转pdf方法总结

    最近要搞前端html转pdf的功能.折腾了两天,略有所收,踩了一些坑,所以做些记录,为后来的兄弟做些提示,也算是回馈社区.经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式,各有各 ...

  9. 在Vue&Element前端项目中，使用FastReport + pdf.js生成并展示自定义报表

    在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...

随机推荐

  1. paint之文字示例

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...

  2. QML渐变色

    Rectangle { id: tab_btn width: height: parent.height color: "black" gradient: Gradient { G ...

  3. python中计算上个月和下个月的第一天的方法

    闹腾,一个简单的东西复杂化了,记录下吧: import datetime,time def get_1st_of_last_month(): """ 获取上个月第一天的日 ...

  4. shell数组编程

    .数组定义 [chengmo@centos5 ~]$ a=( ) [chengmo@centos5 ~]$ echo $a 一对括号表示是数组,数组元素用“空格”符号分割开. .数组读取与赋值 得到长 ...

  5. 树莓派连接显示器后设置ssh服务开机自动开启

    进入命令行,然后执行: cd /boot sudo touch ssh sudo restart -r now 然后就重新启动了,重启好了会有依据提示. 然后可以输入ssh localhost进行一下 ...

  6. Python的发展历史及其前景

    Python的发展历史 1989年,吉姆·范罗苏姆为打发时间,决定为当时正构思的一个新的脚本语言编写一个解释器.作为派森的狂热粉丝,他以Python命名该项目,使用C进行开发. 1991年发布Pyth ...

  7. ML.Net Model Builder

    ML.Net Model Builder ML.NET技术研究系列1-入门篇   近期团队在研究机器学习,希望通过机器学习实现补丁发布评估,系统异常检测.业务场景归纳一下: 收集整理数据(发布相关的异 ...

  8. DMSETUP命令

    dmsetup命令是用来与Device Mapper沟通的命令行封装器(wrapper).可使用dmsetup命令的info,ls,status和deps查看LVM设备的常规信息,如以下小结所述 dm ...

  9. extentreports报告插件与testng集成

    前段时间在群里有人说了下用这个插件来生成测试报告,发现生成的报告非常不错.就下来学习了一下,并集成到了testng上,下面来分享一下: ExtentReports (by Anshoo Arora) ...

  10. 说一说Unsafe魔法类

    这篇算是对 Unsafe 的一个总体概况,由于内容实在太多,后续会分开几篇文章对里面内容展开细讲 前言 Unsafe可以说是java的后门,类似西游记中的如来佛祖法力无边,Unsafe主要提供一些用于 ...