下载pdf分页和不分页代码

不分页代码，解决分页导致表或图显示不全

handleDownloadPDF = () => {const { startTime, endTime, type } = this.state;document.body.style.overflow = 'hidden'document.getElementById('reportBox').style.backgroundColor = '#FFFFFF';setTimeout(() => {const element = document.getElementById('reportBox'); // 这个dom元素是要导出pdf的div容器var width = element.offsetWidth; //dom宽var height = element.offsetHeight; //dom高var scale = 2; //放大倍数var opts = {dpi: window.devicePixelRatio * 2,scale: scale,width: width,height: height,useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题};html2canvas(element, opts).then((canvas) => {var contentWidth = canvas.width;var contentHeight = canvas.height;var pdfWidth = (contentWidth + 10) / 2 * 0.75;var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白var imgWidth = pdfWidth;var imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离var pageData = canvas.toDataURL('image/jpeg', 1.0);var pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight);pdf.save(`江苏省大数据管理中心数据质量${type === 0 ? '周报' : type === 1 ? '月报' : type === 2 ? '年报' : '报告'}(${startTime}~${endTime}).pdf`);element.style.backgroundColor = 'transparent';document.body.style.overflow = 'visible';});}, 3000)};

下载pdf分页代码

 handleDownloadPDF = () => {const { startTime, endTime, type } = this.state;document.body.style.overflow = 'hidden'document.getElementById('reportBox').style.backgroundColor = '#FFFFFF';setTimeout(() => {const element = document.getElementById('reportBox'); // 这个dom元素是要导出pdf的div容器const w = element.offsetWidth; // 获得该容器的宽const h = element.offsetWidth; // 获得该容器的高const { offsetTop } = element; // 获得该容器到文档顶部的距离const { offsetLeft } = element; // 获得该容器到文档最左的距离const canvas = document.createElement('canvas');let abs = 0;const win_i = document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）const win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）if (win_o > win_i) {abs = (win_o - win_i) / 2; // 获得滚动条长度的一半}canvas.width = w * 2; // 将画布宽&&高放大两倍canvas.height = h * 2;const context = canvas.getContext('2d');context.scale(2, 2);context.translate(-offsetLeft - abs, -offsetTop);// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此// translate的时候，要把这个差值去掉html2canvas(element, {allowTaint: true,scale: 2 // 提升画面质量，但是会增加文件大小}).then((canvas) => {const contentWidth = canvas.width;const contentHeight = canvas.height;// 一页pdf显示html页面生成的canvas高度;const pageHeight = contentWidth / 595.28 * 841.89;// 未生成pdf的html页面高度let leftHeight = contentHeight;// 页面偏移let position = 0;// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高const imgWidth = 595.28;const imgHeight = 595.28 / contentWidth * contentHeight;const pageData = canvas.toDataURL('image/jpeg', 1.0);const pdf = new jsPDF('', 'pt', 'a4');// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)// 当内容未超过pdf一页显示的范围，无需分页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(`江苏省大数据管理中心数据质量${type === 0 ? '周报' : type === 1 ? '月报' : type === 2 ? '年报' : '报告'}(${startTime}~${endTime}).pdf`);element.style.backgroundColor = 'transparent';document.body.style.overflow = 'visible';});}, 3000)};

本人项目中的应用，只要传入id值，自定义生产pdf。

//此函数为本人项目中的应用，面对不同项目进行修改。handleDownloadPDF = () => {const pdf = new jsPDF('', 'pt', 'a4');let flag = falselet page = 1document.body.style.overflow = 'hidden'document.getElementById('reportBox').style.backgroundColor = '#FFFFFF';document.getElementById("mapEcharts").style.marginTop = "500px";document.getElementById("getScore").style.marginTop = "150px";this.DownPDF(document.getElementById('top1'), flag, pdf,page)//由于echart2元素根据后台请求生成，所以做此判断，如果存在，即生成pdf。如果不存在则不生成pdf。if (document.getElementById("echart2") !== null) {document.getElementById("echart2").style.marginTop = "150px";this.DownPDF(document.getElementById('top2'), flag, pdf,page)document.getElementById("echart2").style.marginTop = "0";} else if (document.getElementById("echart2") === null) {this.DownPDF(document.getElementById('top2'), flag, pdf,page)}flag = truepage = 2this.DownPDF(document.getElementById('top3'), flag, pdf,page)document.getElementById("mapEcharts").style.marginTop = "20px";document.getElementById("getScore").style.marginTop = "0";};//封装下载pdf函数，传入多个节点元素进行拼接pdf。DownPDF = (element, flag, pdf, page) => {const { startTime, endTime, type } = this.state;const w = element.offsetWidth; // 获得该容器的宽const h = element.offsetWidth; // 获得该容器的高const { offsetTop } = element; // 获得该容器到文档顶部的距离const { offsetLeft } = element; // 获得该容器到文档最左的距离const canvas = document.createElement('canvas');let abs = 0;const win_i = document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）const win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）if (win_o > win_i) {abs = (win_o - win_i) / 2; // 获得滚动条长度的一半}canvas.width = w * 2; // 将画布宽&&高放大两倍canvas.height = h * 2;const context = canvas.getContext('2d');context.scale(2, 2);context.translate(-offsetLeft - abs, -offsetTop);// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此// translate的时候，要把这个差值去掉html2canvas(element, {allowTaint: true,scale: 2 // 提升画面质量，但是会增加文件大小}).then((canvas) => {const contentWidth = canvas.width;const contentHeight = canvas.height;// 一页pdf显示html页面生成的canvas高度;let pageHeight = contentWidth / 595.28 * 841.89;// 未生成pdf的html页面高度let leftHeight = contentHeight;// 页面偏移let position = 0;// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高const imgWidth = 595.28;const imgHeight = 595.28 / contentWidth * contentHeight;const pageData = canvas.toDataURL('image/jpeg', 1.0);// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)// 当内容未超过pdf一页显示的范围，无需分页if (document.getElementById("echart2") === null){pageHeight=3570}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();}}if (page===1) {pdf.addPage();}}if (flag) {pdf.save(`江苏省大数据管理中心数据质量${type === 0 ? '周报' : type === 1 ? '月报' : type === 2 ? '年报' : '报告'}(${startTime}~${endTime}).pdf`);element.style.backgroundColor = 'transparent';document.body.style.overflow = 'visible';}});}

下载pdf分页和不分页代码相关推荐

SpringBoot+FreeMarker+flying-saucer-pdf实现PDF预览、分页需求
文章目录 SpringBoot+FreeMarker+flying-saucer-pdf实现PDF预览.分页需求需求说明程序示例程序示例说明添加依赖包 FreeMarker模板文件编写工具类 ...
java ajax翻页_分页工具类前后台代码 Java JavaScript (ajax) 实现讲解
[博客园cnblogs笔者m-yb原创, 转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] htt ...
java分页代码思路,记录--java 分页思路 (hibernate关键代码)
有时会脑袋蒙圈,记录下分页的思路下面代码是hibernate的分页,其分页就是从第几条数据为起点,取几条数据.比如在mysql中的limit(5,10)取的就是第6条到第10条在下面代码中的pag ...
jquery 表格分页等操作实现代码(pagedown，pageup)
jquery 表格分页等操作实现代码(pagedown,pageup) 没什么技术含量,先上图: 思路: 1:获取按键 2:判断当前表格行的位置 HTML结构: 复制代码代码如下: <div ...
数据库分页数据被业务代码过滤后不足个数问题
数据库分页数据被业务代码过滤后不足个数问题在查询数据列表时,接收分页参数进行分页查询是必要的,所以利用mybayis的分页查询是很好的实现方法,但是再在前表pageNum和pageSize根据执行s ...
分页功能的实现代码与分页查询
数据库sql语句分页查询: 1. SELECT (列名) FROM (表名) LIMIT (当前页数 - 1)* 每页几条数据,每页几条数据列如:是第一页每显示 5条数据查询的表名 japan ...
实现iPhone电子书的分页显示功能（附代码）
实现iPhone电子书的分页显示功能(附代码) 2016-01-10 21:45 294人阅读评论(0) 收藏编辑删除最近我们介绍了几个iPhone开发的代码测试案例,今天我们将介绍 ...
php中分页公式,php分页函数完整实例代码
本文分享一例php分页函数完整实例代码,使用此函数实现分页效果很不错.分享给大家供大家参考. 具体功能代码如下: /* * Created on 2011-07-28 * 使用方法: require_ ...
Mybatis+springMVC+分页查询+前后端代码
Mybatis+springMVC+分页查询+前后端代码前言我们在公司中经常会用到分页查询,最近,我在做一个公司的任务的时候,调用外部系统时需要将结果封装成分页的数据,之前我们都是直接调用我们公司 ...
bootstraptable控制分页_bootstrap table分页（前后端两种方式实现）
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...

下载pdf分页和不分页代码

下载pdf分页和不分页代码相关推荐

最新文章

热门文章