前端导出pdf
html2canvas文档地址
http://html2canvas.hertzen.com/configuration
方式一：使用html2canvas和jspdf插件实现
该方式是通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下：
1,下载插件模块
npm install html2canvas jspdf --save
2,定义功能实现方法
在项目工具方法存放文件夹utils中创建htmlToPdf.js文件，代码如下：
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function () {
var title = this.htmlTitle
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}
3, 全局引入实现方法
import htmlToPdf from '@/components/utils/htmlToPdf'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)
4, 在相关要导出的页面中，点击时调用绑定在Vue原型上的getPdf方法，传入id即可
/html
这里模拟一个页面在sript标签中写
const html1=`<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是需要pdf导出的页面</title>
</head>
<style>
.lala{
width:300px;
height:300px;
background:pink;
color:red;
font-size:60px;
}
</style>
<body>
<div class="lala">我是有颜色的div</div>
</body>
</html>`
data
data(){
return {
htmlTitle: '页面导出PDF文件名',
pageData:html1
}
},
当然，如果是导出当前页面，就不用这么麻烦了，把最外成元素的id写成pdfDom就可以了
以上就是前端简单导出pdf
文章来源：
https://www.jianshu.com/p/56680ce1cc97
当然：为了减少，项目体积html2canvas.js可以用bootcdn引入，
首先在html页面用script标签引入html2canvas.js，在config.js中设置
externals: {
'html2canvas':'html2canvas'
}
这样就可以通过import在自己的js内引入html2canvas.js了，例如下面
import html2Canvas from 'html2canvas'
不过，用这种方式引入jspdf.js却没成功，或许是不知道jspdf.js全局变量，知道的大神可以留言
测试了下代码，bug来了！！！
当我把需要转化成cavas的html内容高度写的老高时，发现上述代码只生成了视口之内的内容，视口之外的内容没有生成到cavas上，调了老半天，在网上查了个方法试试，
就是，将要转化cavas的元素，用jquery的克隆方法克隆一份，然后添加到body内，再让html2canvas.js去按照这个克隆的元素，去生成cavas，然后就可以生成完整了，pdf保存之后，再将这个克隆的元素删除，修稿后的代码如下：
htmlToPdf.js：
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf' export default{
install (Vue, options) {
Vue.prototype.getPdf = function () {
var title = this.htmlTitle;
var targetDom = $("#pdfDom");
let copyDom = targetDom.clone();
$('body').append(copyDom);
html2Canvas(copyDom, {
allowTaint: true,
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf');
copyDom.remove();
}
)
}
}
}
哦了，但是有一点，我点击生成的时候，页面会闪出来一下那个克隆的元素，又消失，感觉不大好，继续解决
前端导出pdf的更多相关文章
- 纯前端导出pdf文件
纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...
- html/jsp导出pdf格式的几种方法（jsPDF，iText，wkhtmltopdf）
在许多生成报表的时候需要我们后台作出动态的数据,并渲染到前端生成pdf格式,Excel格式的各种报表,但是浏览器自带的生成pdf功能,windows系统的ctrl+p键就能完全搞定这一需求,但对客户来 ...
- java利用itext导出pdf
项目中有一功能是导出历史记录,可以导出pdf和excel,这里先说导出pdf.在网上查可以用那些方式导出pdf,用itext比较多广泛. 导出pdf可以使用两种方式,一是可以根据已有的pdf模板,进行 ...
- java根据模板导出PDF详细教程
原文:https://blog.csdn.net/pengyufight/article/details/75305128 题记:由于业务的需要,需要根据模板定制pdf文档,经测试根据模板导出word ...
- 使用 puppeteer 创建一个自动化导出 PDF 的服务
最近在基于 RAP2 做内网的一个 API 管理平台,涉及到与外部人员进行协议交换,需要提供 PDF 文档. 在设置完成 CSS 后已经可以使用浏览器的打印功能实现导出 PDF,但全手动,总是觉得不爽 ...
- JSP页面导出PDF格式文件
JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/ ...
- 前端生成PDF，让后端刮目相看
PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨率.设备等因素没有关系,不论是在Windows,Unix还是在苹果公 ...
- .Net导出pdf文件,C#实现pdf导出
最近碰见个需求需要实现导出pdf文件,上网查了下代码资料总结了以下代码.可以成功的实现导出pdf文件. 在编码前需要在网上下载个itextsharp.dll,此程序集是必备的.楼主下载的是5.0版本, ...
- 前端导出Excel兼容写法
今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...
随机推荐
- python基础（十三）--os和sys模块
os模块 os.getpwd():获取当前工作目录(windows下没有) os.listdir(path):列出目录下的文件 os.remove(path):删出文件 (不能是目录,即文件夹) os ...
- S02_CH10_ User GPIO实验
S02_CH10_ User GPIO实验 在之前的第四章课程中,我们详细的讲解了如何在VIVADO软件下封装一个简单的流水灯程序.在ZYNQ开发过程中,有时候我们可能会需要与ARM硬核进行通信,在这 ...
- 美团CodeM初赛B轮 合并字符串的价值 (线段树,分类讨论)
输入两个字符串a和b,合并成一个串c,属于a或b的字符在c中顺序保持不变.如"ACG"和"UT"可以被组合成"AUCTG"或"AC ...
- 怎样获取不同环境下的document对象
1. 在一般的网页文档中, 可通过: document 或 window.document 获取; 2. 在iframe框架中, 可通过iframe节点的属性: contentDocument 获取; ...
- Java多线程（九）：生产者消费者模型
生产者消费者模型 生产者:生产任务的个体: 消费者:消费任务的个体: 缓冲区:是生产者和消费者之间的媒介,对生产者和消费者解耦. 当 缓冲区元素为满,生产者无法生产,消费者继续消费: 缓冲区元素为空, ...
- Redission
https://github.com/redisson/redisson/wiki/6.-%E5%88%86%E5%B8%83%E5%BC%8F%E5%AF%B9%E8%B1%A1#61-%E9%80 ...
- Git详细操作
Git详细操作 一.本地配置 1公钥钥配置 1.参考帮助文档:https://gitee.com/help/ 仓库管理 =公钥管理 =生成/添加SSH公钥 ssh-keygen -t rsa -C & ...
- Ubuntu12.04 root登陆方法【保证有效】
su -取得root权限后,gedit /etc/lightdm/lightdm.conf ,里面的内容全部改为 [SeatDefaults] greeter-session=unity-greete ...
- js中数组方法及分类
数组的方法有很多,这里简单整理下常用的21种方法,并且根据它们的作用分了类,便于记忆和理解. 根据是否改变原数组,可以分为两大类,两大类又根据不同功能分为几个小类 一.操作使原数组改变 1.数组的 ...
- 使用百度地图API自动获取地址和经纬度
先上效果图,这是直接点击获取经纬度和地址的.没有做搜索的功能. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...