话不多说好吧, 直接上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. PHP pdf转png linux版本

    linux下 安装 ImageMagick 及其 php imagick扩展 PHP版本 7.1.29 : ImageMagick版本 ImageMagick-7.0.8-68: PHP扩展imagi ...

  2. VuePress 博客优化之增加 Vssue 评论功能

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  3. cve-2018-12613-PhpMyadmin后台文件包含漏洞

    前言 刚开始复现这个漏洞的时候是在自己的本机上然后跟着大佬的复现步骤可是没有预期的结果最后看了另一篇文章 当时整个人都麻了            首先何为phpMyAdmin 根据官方的说明phpMy ...

  4. 创造性解决arch/manjaro官方aur源下载慢办法

    今天想用yay下载steam++加速github网页时发现yay下载一段时间后速度变为零,想到应该是aur源的问题,但是aur修改成国内源后发现没有用,于是想到可以手动修改PKGBUILD文件的sou ...

  5. 学习HashMap源码

    HashMap简介 ​ HashMap是一种存储K-V类型的容器,HashMap底层数据结构为数组+链表+红黑树(jdk 1.8新增),它根据键的HashCode值存储数据,获取元素的时间复杂度为O( ...

  6. K8S原来如此简单（八）ServiceAccount+RBAC

    ServiceAccount ServiceAccount是给运行在Pod的程序使用的身份认证,Pod容器的进程需要访问API Server时用的就是ServiceAccount账户. Service ...

  7. HMS Core机器学习服务图像超分能力，基于深度学习提升新闻阅读体验

    在移动端阅读资讯时,人们对高分辨率.高质量的图像要求越来越高.但受限于网络流量.存储.图片源等诸多因素,用户无法便捷获得高质量图片.移动端显示设备的高分辨率图片获得问题亟待解决.不久前,HMS Cor ...

  8. mysql 客户无感知迁移_亿级账户数据迁移，不用数据库工具还能怎么搞？

    原标题:亿级账户数据迁移,不用数据库工具还能怎么搞? 背景 在阿里巴巴内部"大中台,小前台"的组织和业务体制,使前线业务更加敏捷,赋能业务积极迎接未来挑战和机遇,在阿里大中台能力建 ...

  9. Nginx(一) 反向代理为何叫反向代理？

    与正向代理比起来,反向代理是什么东西反向了? 正向代理 A同学在大众创业.万众创新的大时代背景下开启他的创业之路,目前他遇到的最大的一个问题就是启动资金,于是他决定去找马云爸爸借钱,可想而知,最后碰一 ...

  10. TCP和UDP协议?

    TCP(Transmission Control Protocol:传输控制协议:面向连接,可靠传输 UDP(User Datagram Protocol):用户数据报协议:面向无连接,不可靠传输