话不多说好吧, 直接上demo图:

直接上代码好吧:(要引入的两个js  链接我放最后)

<!DOCTYPE html>

<html>

    <head>

      <meta charset="UTF-8">

          <title>大熊博客园谢谢关注</title>

          <meta name="keywords" content="" />

          <meta name="description" content="" />

          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

          <style>

              /* 设置背景为白色 */

              .wrap { background: #fff; width: 1100px; padding: 50px; margin: 0 auto;}

              .header { text-align: center; border-bottom: 1px solid #797979; margin-bottom: 10px; padding-bottom: 30px;}

              .h1Title { text-align: center; font-size: 32px; line-height: 40px; margin-bottom: 10px; font-weight: normal;}

              .container {border-top: 1px solid #797979; padding-top: 36px;}

              .contain_info_box { font-size: 16px; line-height: 40px; margin-bottom: 40px;}

              .table_box { border: 1px solid #797979; width: 100%; margin-bottom: 10px;}

            #exportBtn{background: pink;width: 100px;line-height: 40px;text-align: center;border-radius: 20px;cursor: pointer;}

          </style>

     </head>

 <body>

     <div id="exportBtn"">导出</div>

     <div id="wrap" class="wrap">

         <div class="header">

             <h1 class="h1Title">大熊js转pdf</h1>

             <p>2020年3月2号  舔狗日记</p>

         </div>

         <div class="container">

             <div class="contain_info_box">

                 <h2 class="h2Title">测试数据</h2>

                 <p>大熊js转pdf</p>

             </div>

             <div class="table_list_box">

                 <table class="table_box" border="1" cellspacing="0" cellpadding="0">

                     <tr>

                         <th>111</th>

                         <th>222</th>

                         <th>333</th>

                     </tr>

                     <tr>

                         <td>哈哈</td>

                         <td>哈哈哈哈哈哈</td>

                         <td>哈哈哈哈哈哈哈哈</td>

                     </tr>

                     <tr>

                         <td>4</td>

                         <td>5</td>

                         <td>6</td>

                     </tr>

                 </table>

             </div>

         </div>

     </div>

     <script src="js/jquery.min.js"></script>

     <script src="js/html2canvas.js"></script>

    <script src="js/jspdf.min.js"></script>

    <script type="text/javascript">

    $(function(){

        $(document).on('click','#exportBtn',function(){

            var pdf = new jsPDF('p','pt','a4');

            pdf.internal.scaleFactor = 1;  //可以调整缩放比例

            var options = {

                //pagesplit: true //分页

                pagesplit: false//不分页

            };

            pdf.addHTML($('.wrap').get(0),0,0,options,function() {

                // 用.h1Title 标签的名字命名  pdf

                pdf.save($('.header .h1Title').text()+'.pdf');

            });

        })

    })

    </script>

 </body>

</html>

两个js链接:   https://github.com/Clearlovesky/-js-jq-/blob/master/html2canvas.js

https://github.com/Clearlovesky/-js-jq-/blob/master/jspdf.min.js

关于前端js转pdf更多参考链接:  https://www.cnblogs.com/waitingbar/p/6524808.html

js 生成 pdf 文件的更多相关文章

  1. JS生成PDF文件

    代码: var pdf = new jsPDF('p','pt','a4'); pdf.internal.scaleFactor = 1; //可以调整缩放比例 var options = { //p ...

  2. 前端生成pdf文件之pdfmake.js

    转载:点击查看原文 pdfmake.js是一个简单的生成pdf文件的插件. pdfmake.js     https://files.cnblogs.com/files/s313139232/pdfm ...

  3. 在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all

    在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all 前天来了个新需求, 有一个授权书的文件要点击下载, 需要在前端生成, ...

  4. 根据PDF模板生成PDF文件(基于iTextSharp)

    根据PDF模板生成PDF文件,这里主要借助iTextSharp工具来完成.场景是这样的,假如要做一个电子协议,用过通过在线填写表单数据,然后系统根据用户填写的数据,生成电子档的协议.原理很简单,但是每 ...

  5. 在C#.NET中，如何生成PDF文件？主要有以下几个途径

    1．使用.NET文件流技术:若通过.NET的文件流技术生成PDF文件,必须对PDF文件的语法很清楚,例如BT表示实体内容开始:ET表示实体内容结束:TD表示换行等等.我们可以从Adobe的官方网站上下 ...

  6. linux下编译bib、tex生成pdf文件

    实验: 在linux环境下,编译(英文)*.bib和*.tex文件,生成pdf文件. 环境: fedora 20(uname -a : Linux localhost.localdomain 3.19 ...

  7. ThinkPHP3.2.3扩展之生成PDF文件（MPDF）

    目前是PHP生成PDF文件最好的插件了,今天介绍下在ThinkPHP3.2.3里如何使用. 先安照路径放好如图. 下面是使用方法 public function pdf(){ //引入类库 Vendo ...

  8. [轉載]史上最强php生成pdf文件,html转pdf文件方法

    之前有个客户需要把一些html页面生成pdf文件,然后我就找一些用php把html页面围成pdf文件的类.方法是可谓是找了很多很多,什么html2pdf,pdflib,FPDF这些都试过了,但是都没有 ...

  9. asp.net生成PDF文件 (1)

    asp.net生成PDF文件 (1) 这个是例子是网上淘来的,哈哈,很有用的! 首先要到网上下载itextsharp.dll,然后添加引用,主程序如下: 1 2 3 4 5 6 7 8 9 10 11 ...

随机推荐

  1. tensorflow源码解析之framework-allocator

    目录 什么是allocator 内存分配器的管理 内存分配追踪 其它结构 关系图 涉及的文件 迭代记录 1. 什么是allocator Allocator是所有内存分配器的基类,它定义了内存分配器需要 ...

  2. 《shader入门精要》13.2再谈运动模糊中片元着色器的世界坐标的计算

    具体在书p275页 这里为啥需要除D.w呢. 首先我们得到的NDC的坐标是已经归一化的,但是CurrenViewProjectionMatrix的作用,是把世界空间转化为尚未归一化的裁剪空间. 这里看 ...

  3. 除非Windows Activation Service (WAS)和万维网发布服务(W3SVC)均处于运行状态，否则无法启动网站。

    解决办法: 打开WINDOWS服务管理方法: 进入服务有二种方法: 1.开始-控制面板-管理工具单击,找到"服务"双击打开 在WINDOWS服务管理里 启动 World Wide ...

  4. Div+CSS 定位 Position

    position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). position: static;HTML 元素默认情况下的定 ...

  5. 基于long pull实现简易的消息系统参考

    我们都用过消息中间件,它的作用自不必多说.但对于消费者却一直有一些权衡,就是使用push,还是pull模式的问题,这当然是各有优劣.当然,这并不是本文想讨论的问题.我们想在不使用长连接的情意下,如何实 ...

  6. 西门子S7-1200PLC不让下载一直报“模块具有激活的测试和调试功能，防止下载到设备”解决方法

    错误如图 这是因为PLC被强制了,导致下载会报这类错误.取消强制就可以下载. 或者将cpu重置为出厂设置,也能再次下载. 参考:https://www.ad.siemens.com.cn/servic ...

  7. 基于MRS-ClickHouse构建用户画像系统方案介绍

    业务场景 用户画像是对用户信息的标签化.用户画像系统通过对收集的各维度数据,进行深度的分析和挖掘,给不同的用户打上不同的标签,从而刻画出客户的全貌.通过用户画像系统,可以对各个用户进行精准定位,从而将 ...

  8. C# 操作ie网页，注入JavaScript等操作

    之前做过一个录制鼠标键盘并回放的功能,使用的关键技术是钩子程序.在实现针对指定页面进行录制的过程中,发现C#操作网页的功能. https://www.cnblogs.com/wangchuang/ar ...

  9. switch语句能否作用在byte上，能否作用在long上，能否作用在String上?

    在Java 7以前,在switch(expr1)中,expr1只能是一个整数表达式(但不包括long和Long)或者枚举常量,整数表达式可以是int基本类型或Integer包装类型,byte.shor ...

  10. 一个Spring的应用看起来象什么？

    一个定义了一些功能的接口. 这实现包括属性,它的Setter , getter 方法和函数等. Spring AOP. Spring 的XML 配置文件. 使用以上功能的客户端程序.