话不多说好吧, 直接上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. laravel redis操作大全

    字符串操作 普通得set/get操作,set操作,如果键名存在,则会覆盖原有得值 $redis = app("redis.connection"); $redis->set( ...

  2. 微信小程序码生成及canvas绘制

    吐槽:某厂的开发文档写的跟屎一样 1.后台返回accessToken,小程序请求获取小程序码 uni.request({ url: 'https://api.weixin.qq.com/wxa/get ...

  3. linux下编译安装php5.6出现　configure: error: Cannot find MySQL header files under /usr/local/mysql.

    #yum install gcc gcc-c++ libxml2 libxml2-devel libjpeg-devel libpng-devel freetype-devel openssl-dev ...

  4. Python selenium 三种等待方式解读

    1. 强制等待第一种也是最简单粗暴的一种办法就是强制等待sleep(xx),强制让闪电侠等xx时间,不管凹凸曼能不能跟上速度,还是已经提前到了,都必须等xx时间.看代码: # -*- coding: ...

  5. 利用Redis对批量数据实现分布式锁

    需求背景 在开发的收入结转平台界面上有一个归集按钮,可以实现抓取结转表里面的多条数据进行归集操作.为了防止多人多电脑同时操作一条数据,我们自己开发了一个简单的基于Redis实现的分布式锁. 代码实现 ...

  6. SpringMVC 和SpringBoot中的注解是如何起作用的，如何实现的

    SpringMVC源码解读 - HandlerMapping - RequestMappingHandlerMapping初始化   https://www.cnblogs.com/leftthen/ ...

  7. Redis的删除机制

    Redis的删除机制 Redis的使用分两点: 性能如下图所示,我们在碰到需要执行耗时特别久,且结果不频繁变动的SQL,就特别适合将运行结果放入缓存.这样,后面的请求就去缓存中读取,使得请求能够迅速响 ...

  8. java反射 java动态代理和cglib动态代理的区别

    java反射      https://blog.csdn.net/f2764052703/article/details/89311013 java 动态代理   https://blog.csdn ...

  9. AQS分析笔记

    1 介绍 AQS: AbstractQueuedSynchronizer,即队列同步器.是构建锁或者其他同步组件的基础框架.它维护了一个volatile int state(代表共享资源)和一个FIF ...

  10. Axure在Chrome浏览解决方案

    AXURE RP EXTENSION FOR CHROME Google Chrome浏览器需要扩展程序才能查看本地存储的项目.或者,将您的RP文件上传到Axure Cloud或使用其他浏览器.您也可 ...