将HTML页面转换为PDF文件并导出
目前,在大多数的管理系统中,都会有这样一个功能:根据相关的条件查询相应的数据,并生成可视化报表,然后可导出为PDF文件。本文只展现生成可视化报表之后导出PDF文件的过程,生成可视化的报表可使用Echarts,D3js等框架。
1.需要引入的文件
html2canvas.js(根据实际情况选择相应的版本)
jspdf.min.js(根据实际情况选择相应的版本)
2.实现思路
(1)在body中将需要生成PDF的HTML复制一份,切记:如果元素中含有ID,则必须重新给定
(2)将新的元素设置为position:absolute; 脱离文档流,因为处于文档流中被浏览器遮挡的部分不会生成PDF。
(3)利用html2canvas.js将新的元素生成图片
(4)利用jspdf.min.js将图片生成PDF文件并保存到本地。
3.实现代码
(1)HTML代码
/*将要生成PDF的HTML代码*/
<div id="pdf">
………………………………
</div>
(2)JS代码
/*复制元素,注意ID*/
$("body").append('<div id="pdf1">…………………………………………………………</div>');
/*设置新元素样式*/
$("#pdf1").css({
"background-color": "#fff",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": $("#pdf").height()
});
/*html2canvas生成图片,jspdf生成PDF文件*/
html2canvas($("#pdf1"), {
background: "#fff",
allowTaint: true,
taintTest: false,
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var pageHeight = contentWidth / 592.28 * 841.89;
var leftHeight = contentHeight;
var position = 0;
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var img = new Image();
img.src = pageData;
var pdf = new jsPDF('p', 'pt', 'a4');
img.onload = function() {
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('report_pdf_' + new Date().getTime() + '.pdf');
$("#pdf1").remove();
}
},
})
以上为笔者在项目中的部分核心代码,如有问题,欢迎指正。
将HTML页面转换为PDF文件并导出的更多相关文章
- Office系列---将Office文件(Word、PPT、Excel)转换为PDF文件,提取Office文件(Word、PPT)中的所有图片
将Office文件转换为PDF文件,提取Office文件中的所有图片 1.Office系列---将Office文件(Word.PPT.Excel)转换为PDF文件 1.1 基于Office实现的解决方 ...
- Office系列(1)---将Office文件(Word、PPT、Excel)转换为PDF文件
需求: 将Office文件作为文章并在网页上预览,主要为(Word.PPT.Excel)3种类型文件. 研究了一下,找到了两种解决方案 直接调用微软的在线预览功能实现(预览前提:预览资源必须可以直接通 ...
- vue实现word,pdf文件的导出功能
vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get( ...
- vue项目中使用Lodop实现批量打印html页面和pdf文件
1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...
- 如何将知网下载的caj文件转换为pdf文件
一.问题描述: 最近在知网搜索论文的时候,经常遇到有的论文没有pdf文件的情况,但不得不吐槽我觉得知网做的阅读器确实是有点烂.所以想将caj文件转化为pdf文件,找到了一个比较好的方法,所以希望记录一 ...
- Java 使用 jacob 将 word 文档转换为 pdf 文件
网上查询了许许多多的博客,说利用 poi.iText.Jsoup.jdoctopdf.使用 jodconverter 来调用 openOffice 的服务来转换等等,我尝试了很多种,但要么显示不完全, ...
- openoffice启动服务并将office文件转换为pdf文件
1.首先下载最新版的openoffice工具,安装完成之后安装服务,, win+r打开命令提示符 输入cmd,cd C:\Program Files (x86)\OpenOffice 4\progra ...
- JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
1.资源文件或依赖 <script type="text/javascript" src="./js/canvg2.js"></script& ...
- DEV word文档转换为pdf文件
引用aspose.net控件2.0. docement doc=new document(文件路径和名称); doc.save(输出路径\file.pdf);
随机推荐
- Liunxa安装Nignx,Git
Linux安装Nignx 1.安装依赖 执行语句 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel open ...
- Mysql高级操作学习笔记:索引结构、树的区别、索引优缺点、创建索引原则(我们对哪种数据创建索引)、索引分类、Sql性能分析、索引使用、索引失效、索引设计原则
Mysql高级操作 索引概述: 索引是高效获取数据的数据结构 索引结构: B+Tree() Hash(不支持范围查询,精准匹配效率极高) 树的区别: 二叉树:可能产生不平衡,顺序数据可能会出现链表结构 ...
- Spring源码之九finishRefresh详解
Spring源码之九finishRefresh详解 公众号搜索[程序员田同学],专职程序员兼业余写手,生活不止于写代码 Spring IoC 的核心内容要收尾了,本文将对最后一个方法 finishRe ...
- SETTLE约束算法的批量化处理
技术背景 在上一篇文章中,我们介绍了在分子动力学模拟中SETTLE约束算法的实现与应用,其中更多的是针对于单个的水分子.但由于相关代码是通过jax这一框架来实现的,因此对于多分子的体系,可以采用jax ...
- GAN实战笔记——第七章半监督生成对抗网络(SGAN)
半监督生成对抗网络 一.SGAN简介 半监督学习(semi-supervised learning)是GAN在实际应用中最有前途的领域之一,与监督学习(数据集中的每个样本有一个标签)和无监督学习(不使 ...
- php 手动创建分页
- tensorflow源码解析之framework拾遗
把framework中剩余的内容,按照文件名进行了简单解析.时间原因写的很仓促,算是占个坑,后面有了新的理解再来补充. allocation_description.proto 一个对单次内存分配结果 ...
- AC+AP组网无线WiFi网速超慢延迟卡顿问题解决
AP是什么? AP是Access Point的简称,即无线接入点,其作用是把局域网里通过双绞线传输的有线信号(即电信号)经过编译,转换成无线电信号传递给电脑.手机等无线终端,与此同时,又把这些无线终端 ...
- 神奇的 CSS,让文字智能适配背景颜色
最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看 ...
- Linux指令入门-系统管理(云小宝码上送祝福,免费抽iphone13任务)
码上送祝福,带云小宝回家 做任务免费抽iphone13,还可得阿里云新春限量手办 日期:2021.12.27-2022.1.16 云小宝地址:https://developer.aliyun.com/ ...