话不多说好吧, 直接上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 自定命令以及生成文件

    以创建service层为例子 1.执行命令 php artisan make:command ServiceMakeCommand 2.在app\Console\Commands 下就会多出一个 Se ...

  2. ESXI 虚拟化误删除管理端口Management Network (vmk0)，导致无法访问后台解决方案

    按F2开启控制台shell,启用后返回.按Alt+F1打开终端. 输入 esxcfg-vmknic -a -i 192.168.1.10 -n 255.255.255.0 "Manageme ...

  3. [源码解析] TensorFlow 分布式环境(1) --- 总体架构

    [源码解析] TensorFlow 分布式环境(1) --- 总体架构 目录 [源码解析] TensorFlow 分布式环境(1) --- 总体架构 1. 总体架构 1.1 集群角度 1.1.1 概念 ...

  4. LintCode 练习题

    /** * 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = 2 输 ...

  5. Java案例——冒泡排序

    排序:将一组数据按照固定的规则进行排列 冒泡排序:一种排序方式,对将要排序的相邻的数据进行两两比较,将较大的放在后面,依次对所有的数据进行操作,直到所有的数据按要求完成排序 冒泡排序原理: 1.如果有 ...

  6. java-Markdown学习

    Markdown学习 标题 三级标题 四级标题 字体 Hello world! Hello world! Hello world! Hello world! 引用 L-1906 分割线 图片 超链接 ...

  7. MySQL数据库阶段学习目录

    MySQL数据库学习目录 MySQL数据库初识 MySQL的库表详细操作 MySQL行(记录)的详细操作 快捷使用数据库.表.表内容增删改查 MySQL之单表查询 MySQL之多表查询 Navicat ...

  8. 4月10日 python学习总结 模块和面向对象

    1.hashlib  1.什么叫hash:hash是一种算法,该算法接受传入的内容,经过运算得到一串hash值 2.hash值的特点是:2.1 只要传入的内容一样,得到的hash值必然一样=====& ...

  9. Delaunay三角剖分及MATLAB实例

    https://blog.csdn.net/piaoxuezhong/article/details/68065170 一.原理部分 点集的三角剖分(Triangulation),对数值分析(如有限元 ...

  10. 【算法】两个list合并

    转载博客地址 http://blog.sina.com.cn/s/blog_5da93c8f0101fdrp.html 有两个ArrayList,分别为list1和list2,分析这两个list后生成 ...