js 生成 pdf 文件
话不多说好吧, 直接上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 文件的更多相关文章
- JS生成PDF文件
代码: var pdf = new jsPDF('p','pt','a4'); pdf.internal.scaleFactor = 1; //可以调整缩放比例 var options = { //p ...
- 前端生成pdf文件之pdfmake.js
转载:点击查看原文 pdfmake.js是一个简单的生成pdf文件的插件. pdfmake.js https://files.cnblogs.com/files/s313139232/pdfm ...
- 在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all
在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all 前天来了个新需求, 有一个授权书的文件要点击下载, 需要在前端生成, ...
- 根据PDF模板生成PDF文件(基于iTextSharp)
根据PDF模板生成PDF文件,这里主要借助iTextSharp工具来完成.场景是这样的,假如要做一个电子协议,用过通过在线填写表单数据,然后系统根据用户填写的数据,生成电子档的协议.原理很简单,但是每 ...
- 在C#.NET中,如何生成PDF文件?主要有以下几个途径
1.使用.NET文件流技术:若通过.NET的文件流技术生成PDF文件,必须对PDF文件的语法很清楚,例如BT表示实体内容开始:ET表示实体内容结束:TD表示换行等等.我们可以从Adobe的官方网站上下 ...
- linux下编译bib、tex生成pdf文件
实验: 在linux环境下,编译(英文)*.bib和*.tex文件,生成pdf文件. 环境: fedora 20(uname -a : Linux localhost.localdomain 3.19 ...
- ThinkPHP3.2.3扩展之生成PDF文件(MPDF)
目前是PHP生成PDF文件最好的插件了,今天介绍下在ThinkPHP3.2.3里如何使用. 先安照路径放好如图. 下面是使用方法 public function pdf(){ //引入类库 Vendo ...
- [轉載]史上最强php生成pdf文件,html转pdf文件方法
之前有个客户需要把一些html页面生成pdf文件,然后我就找一些用php把html页面围成pdf文件的类.方法是可谓是找了很多很多,什么html2pdf,pdflib,FPDF这些都试过了,但是都没有 ...
- asp.net生成PDF文件 (1)
asp.net生成PDF文件 (1) 这个是例子是网上淘来的,哈哈,很有用的! 首先要到网上下载itextsharp.dll,然后添加引用,主程序如下: 1 2 3 4 5 6 7 8 9 10 11 ...
随机推荐
- 【爬虫】让我沉醉的python爬虫技术
今天终于有机会好好学习我一直梦寐以求想掌握的爬虫技术,其实爬虫技术涉及的面不多,我力求做到精通写在简历上. 1.工程分析流程 (1)需求分析 ①目标网站:②抓取内容:③存储格式. (2)项目实施 分析 ...
- laravel7 百度智能云检测图片是否合规
APP 文件下建一个Libs目录建一个BaiduService文件,需要检测引入进行调用即可 BaiduService文件内容如下 <?php namespace App\Libs; use A ...
- nginx lua模块常用的指令
lua_code_cache 语法:lua_code_cache on | off 默认: on 适用上下文:http.server.location.location if 这个指令是指定是否开启l ...
- tensorflow源码解析之distributed_runtime
本篇主要介绍TF的分布式运行时的基本概念.为了对TF的分布式运行机制有一个大致的了解,我们先结合/tensorflow/core/protobuf中的文件给出对TF分布式集群的初步理解,然后介绍/te ...
- MySQL 查询处理
当腰删除或者更新数据时,首先要雪薰出这些记录,然后再对其进行相应的 操作. 每一个操作都会产生一个虚拟表,该虚拟表作为处理的输入,这些虚拟表对用户的透明的,只有最后一步生成的虚拟表才会返回给用户.
- Java程序员必备的工具和框架
最近几年,Java 的技术栈发展的非常快,成百上千的技术工具正不断地涌出来,这也造成了一个问题: 我们作为开发者,到底应该选哪些工具搭建出最合适的技术栈呢? 今天我就推荐一波我常用的.我了解的工具和框 ...
- 使用gdb
1.设置断点,在源程序第16 行处 (gdb)break 16 Breakpoint 1 at 0x8048496: file tst.c, line 16. 2.设置断点,在函数func()入口处. ...
- 什么是B+树??
上一篇中,我们了解了B树,辣么..B+树又是什么呢?? 一:定义:B+树是基于B树的,是B树的变形,也是一种多路搜索树.查询性能更加出色. 1.每个父节点元素出现在子节点中,是子节点的最大或最小元素. ...
- zk 节点宕机如何处理?
Zookeeper 本身也是集群,推荐配置不少于 3 个服务器.Zookeeper 自身也要保 证当一个节点宕机时,其他节点会继续提供服务. 如果是一个 Follower 宕机,还有 2 台服务器提供 ...
- Spring容器 从XML 文件中读取bean的定义,并实例化bean?
解释Spring框架中bean的生命周期. Spring根据bean的定义填充所有的属性. 如果bean实现了BeanNameAware 接口,Spring 传递bean 的ID 到 setBeanN ...