html页面导出pdf截断问题,前端导出pdf以及导出内容截断的解决办法
$("#downpdf").on("click", function () {
document.body.scrollTop=document.documentElement.scrollTop=0
var id=‘task_report‘;
html2canvas($("#"+id), {
scale:2,
background: "#FFFFFF",//如果指定的div没有设置背景色会默认成黑色,这里是个坑
onrendered:function(canvas) {
//未生成pdf的html页面高度
var leftHeight = canvas.height;
var a4Width = 190
var a4Height = 277 //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
//一页pdf显示html页面生成的canvas高度;
var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);
//pdf页面偏移
var position = 0;
var pageData = canvas.toDataURL(‘image/jpeg‘, 1.0);
var pdf = new jsPDF(‘p‘, ‘mm‘, ‘a4‘); //A4纸,纵向
var index = 1,
canvas1 = document.createElement(‘canvas‘),
height;
pdf.setDisplayMode(‘fullwidth‘, ‘continuous‘, ‘FullScreen‘);
var pdfName=‘TriButte漏洞管理平台扫描报告‘;
function createImpl(canvas) {
console.log(leftHeight,a4HeightRef)
if (leftHeight > 0) {
index++;
var checkCount = 0;
if (leftHeight > a4HeightRef) {
var i = position + a4HeightRef;
for (i = position + a4HeightRef; i >= position; i--) {
var isWrite = true
for (var j = 0; j < canvas.width; j++) {
var c = canvas.getContext(‘2d‘).getImageData(j, i, 1, 1).data
if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
isWrite = false
break
}
}
if (isWrite) {
checkCount++
if (checkCount >= 10) {
break
}
} else {
checkCount = 0
}
}
height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
if(height<=0){
height = a4HeightRef;
}
} else {
height = leftHeight;
}
canvas1.width = canvas.width;
canvas1.height = height;
console.log(index, ‘height:‘, height, ‘pos‘, position);
var ctx = canvas1.getContext(‘2d‘);
ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);
var pageHeight = Math.round(a4Width / canvas.width * height);
// pdf.setPageSize(null, pageHeight)
if(position != 0){
pdf.addPage();
}
pdf.addImage(canvas1.toDataURL(‘image/jpeg‘, 1.0), ‘JPEG‘, 10, 10, a4Width, a4Width / canvas1.width * height);
leftHeight -= height;
position += height;
if (leftHeight > 0) {
setTimeout(createImpl, 500, canvas);
} else {
pdf.save(pdfName + ‘.pdf‘);
}
}
}
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < a4HeightRef) {
pdf.addImage(pageData, ‘JPEG‘, 0, 0, a4Width, a4Width / canvas.width * leftHeight);
pdf.save(pdfName + ‘.pdf‘)
} else {
try {
pdf.deletePage(0);
setTimeout(createImpl, 500, canvas);
} catch (err) {
// console.log(err);
}
}
}
})
});
原文:https://www.cnblogs.com/ellisonzhang/p/12851068.html
html页面导出pdf截断问题,前端导出pdf以及导出内容截断的解决办法相关推荐
- word中acrobat转Pdf文件标签丢失COM加载项被卸载的解决办法
常将Office文档转换成PDF,保证页面所见即所得,Acrobat在Office中的转换工具非常方便好用.将Word文档转换成PDF文档,使用的是Acrobat 9.0在Word 2007中的加载项 ...
- 前端盒模型的概念和文本溢出解决办法
前端开发中盒模型是所有元素的基础,如果弄不懂盒模型的概念就很难开发出好的页面,下面小千就来给大家介绍一下盒模型和解决前端文本溢出的代码. 盒模型 盒模型是css布局的基石,它规定了网页元素如何显示以及 ...
- 360浏览器,qq浏览器等登录页输入账号密码,在页面内再次遇见有密码框的地方会自动填充的解决办法。
在360浏览器,qq浏览器等登录页输入账号密码,在页面内再次遇见有密码框的地方会自动填充,在网上没有找到合适的解决办法,然后自己琢磨了一个,仅供参考. 登录页的账号密码输入框不需要做任何变化. 我们可 ...
- uniapp页面使用web-view加载网络url,导致底部组件被覆盖解决办法
<script>var wv;//计划创建的webviewexport default {onReady() {var px = uni.upx2px(120)var currentWeb ...
- java 前端导出exvel_使用纯前端做的Excel导出了解一下
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 这是我改造的前端Excel导出,需要引入jQuery插件[复制粘贴即可使用],各位不懂可以试一下.纯属练习 使用JS标签方式将页面数据信息导出xlsx文件 ...
- js导出变量 vue_vue.js前端实现excel表格导出和获取headers里的信息
前段时间写过一篇文章基于element实现后台管理系统,并提到excel表格导出功能,可能描述不是很详细,现在单独整理列出. 后端提供的接口: // 下载分拣列表 export function ge ...
- AD导出PDF内容显示不全解决办法
DXP->Preferneces->Schematic->General下 取消Render Text with GDI+
- PHPEXCEL导出excel表格中长数字文本自动转为科学计数法的解决办法
转:https://www.cnblogs.com/fps2tao/p/9714041.html 方法一:前面加空格 $objActSheet->setCellValue('A1', ' '.' ...
- 前端开发——移动端及响应式布局解决办法总结(适配)
问题分析:前端开发一个产品(网站.系统.APP等)会遇到的一个难点就是适配问题,比如开发一个网站,你在一个页面开发的时候从视觉看起来没什么异样,换个不同分别率的设备,电脑,手机等,发现样式全乱了,这个 ...
- PDF为什么不能编辑?总结三种原因,附解决办法~
PDF文件不能编辑,有以下几种原因: 原因一: PDF文件其实是扫描文件,也就是说PDF文件里面其实是图片,这种情况下,肯定是不能编辑的,我们需要使用编辑软件中的扫描功能,也就是OCR,将扫描文件中的 ...
最新文章
- hadoop2.2.0 集群安装配置
- 可测试性如何帮助团队提升效率
- ubuntu更新rtl8192cu驱动
- 学习旧岛小程序 (2) 自定义组件
- Python爬虫遍历文档树
- 解题报告——例题5-5 集合栈计算机 UVa12096
- 阻止事件冒泡——商品编辑
- 二级vb笔试题库__全国计算机等级考试,2012年9月全国计算机二级VB笔试标准预测试卷试题六...
- Tampermonkey笔记-脚本的搭建和基本使用
- 颜色模型和颜色应用---颜色选择及其应用
- WebSocket使用80端口的方法
- Data Exfiltration via Blind OS Command Injection
- Unity3D基础1:进入Unity3D
- 计算机网路网络层之IP协议(4)——有类IP地址
- com.android.phone lg g3,详细的lg g3 root教程与方法
- [从零开始学习FPGA编程-10]:快速入门篇 - 操作步骤2-2- Verilog HDL语言Module与硬件电路对应关系快速概览
- linux怎么安装台式无线网卡,linux下安装无线网卡
- c++直角空心三角形_压轴题中对三角形中位线的另类诠释
- pdf转化为图片显示知多少
- STM32日历读取,设置和输出
热门文章
- MSSQL数据库快捷键大全
- 单片机两大延时方法总结
- c++: Logger日志信息
- 学生表、班级表、成绩表
- java编程cpu选i5还是i7,i5处理器和i7哪个好_i5和i7怎么选择-系统城
- 判断ip是内网还是外网, 判断请求来之pc还是mobile
- AHB2APB桥接器设计(2)——同步桥设计的介绍
- 通过wifi对手机进行adb连接debug调试 adb connect ip_address:5555
- 文字细化算法matlab,[转载](转)二值图像的细化算法和源程序代码(Matlab)
- dtypes.py:526: FutureWarning: Passing (type, 1) or '1type' as a synonym of type is deprecated; in a