话不多说好吧, 直接上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. MySQL-DB-封装-入门版

    <?php class MysqlDb{ public $host = "127.0.0.1"; public $user = "root"; publi ...

  2. BBS项目分布搭建三(个人站点时间归档补充，实现侧边栏跳转、无线级分类、实现文章详情页展示功能)

    BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans ...

  3. CF1483F口胡

    <线 性 做 法> 首先我们对所有串建立 ACAM,不难发现对于一个 \(i\),可能的 \(j\) 一定是 \(i\) 所有后缀节点在 fail 树上第一个被打标记的祖先. 但是这些祖先 ...

  4. LGP3790题解

    建议改为 省 选 原 题 题意:求所有生成树的边权 \(\gcd\) 之和. 看到 \(\gcd\) 立刻想反演. \[\sum_T\gcd_{e \in T}e_v \] 这里设 \(E=e_v(e ...

  5. Linux指令_入门基础

    一.基础指令语法 1.ls指令: 用法1:#ls 含义:列出当前工作目录下的所有文件/文件夹的名称. 用法2:#ls 路径 含义:列出指定路径下的所有文件/文件夹的名称 用法3:#ls 选项 路径 含 ...

  6. 想让DBA瞬间崩溃，那就让他去做SQL性能优化

    摘要:很多大数据计算都是用 SQL 实现的,跑得慢时就要去优化 SQL,但常常碰到让人干瞪眼的情况. 本文分享自华为云社区<做 SQL 性能优化真是让人干瞪眼>,作者: 石臻臻的杂货铺 . ...

  7. MySQL知识补充（表字段操作、视图、触发器、事物、存储过程、内置函数、流程控制、索引、慢查询）

    今日内容概要 表字段操作补充(掌握) 视图(了解) 触发器(了解) 事务(掌握) 存储过程(了解) 内置函数(了解) 流程控制(了解) 索引(熟悉) 内容详细 1.表字段操作补充 # 1.添加表字段 ...

  8. 74CMS 3.0 CSRF漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2．因为74CMS3.0源代码编辑使用GBK编 ...

  9. select 中的timeout

    1. select 相关man 资料 /* According to POSIX.1-2001 */ #include <sys/select.h> /* According to ear ...

  10. 大咖说｜网易数帆论道 PolarDB 数据库开源 & 存储生态

    开源技术如何商业化?将遇到什么问题?有哪些可行的解决办法?本期大咖说,阿里云数据库开源战役负责人曲山将携手网易副总裁汪源与你分享关于开源商业化的思考. 嘉宾简介 网易副总裁.杭州研究院执行院长.网易数 ...