html长图转换成pdf,将长 html 导入拆分 PDF

我的情况是:

单击按钮时,将 html 上的数据导入 PDF 文件。

由于此 PDF 必须具有一些复杂的必需样式,因此我的第一步是使用 html2canvas.js 将此页面转换为图像,然后使用 jsPDF.js 将此图像导入 PDF

当数据太大时,必须拆分 PDF 以保存所有数据,这样做,所以我在这里使用了代码:https://github.com/MrRio/jsPDF/pull/397

我的问题是:在 firefox 上显示第 2 页的 PDF 或 3...cannot 上的分割页面,它们完全是空白的。但在第 1 页它很好。 (这是为 firefox)

我测试了其他浏览器它们都很好。有人可以说明如何解决这个问题吗?

function initTemplate(){

datas=getData();

var templateData=_.template($('#tpl').html(), datas);

$('#tplW').html(templateData);

getPDF();

// $('#tplW').append(_.template($('#tpl').html(), datas));

// $('body').html( _.template($('#tpl').html(), datas));

}

function getData(){

var htmlData=$(".MsoNormalTable .inner").find("tr.tablerow");

var datas=[];

$.each(htmlData,function(i,v){

var d=[];

var tds=$(v).find("td");

$.each(tds,function(index,val){

d.push($(val).text());

});

datas.push(d);

});

return datas;

}

function getPDF() {

// initTemplate();

html2canvas($('#tplW')[0], {

onrendered: function(canvas){

canvasToImageSuccess(canvas);

}

});

function canvasToImage (canvas){

var img = new Image();

var dataURL = canvas.toDataURL('image/png');

img.src = dataURL;

return img;

};

function canvasShiftImage (oldCanvas,shiftAmt){

shiftAmt = parseInt(shiftAmt) || 0;

if(!shiftAmt){ return oldCanvas; }

var newCanvas = document.createElement('canvas');

newCanvas.height = oldCanvas.height - shiftAmt;

newCanvas.width = oldCanvas.width;

var ctx = newCanvas.getContext('2d');

var img = canvasToImage(oldCanvas);

ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

return newCanvas;

};

function canvasToImageSuccess (canvas){

var pdf = new jsPDF('l','px'),

pdfInternals = pdf.internal,

pdfPageSize = pdfInternals.pageSize,

pdfScaleFactor = pdfInternals.scaleFactor,

pdfPageWidth = pdfPageSize.width,

pdfPageHeight = pdfPageSize.height,

totalPdfHeight = 0,

htmlPageHeight = canvas.height,

htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),

safetyNet = 0;

while(totalPdfHeight < htmlPageHeight && safetyNet < 15){

var newCanvas = canvasShiftImage(canvas, totalPdfHeight);

pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');

totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

if(totalPdfHeight < htmlPageHeight){

pdf.addPage();

}

safetyNet++;

}

pdf.save('test.pdf');

};

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/499107.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 魔法方法常用_python 常用的魔法方法

1. 构造方法 __new__(cls,[...) 对象实例化时第一个调用的方法&#xff0c;它只取下 cls 参数&#xff0c;并把其他参数传给 __init__ 。 __init__(self,[...]) 使用传入的参数来初始化实例&#xff0c;不能返回除了None的任何值。 __del__(self) 定义了当对象被垃圾回收时的行…

c# 从地址拷贝byte_面试必备的 “零拷贝” 问题!从头给你说!

本文作者&#xff1a;ksfzhaohui来源&#xff1a;juejin.im/post/5cad6f1ef265da039f0ef5df前言I/O概念1.缓冲区2.虚拟内存3.mmapwrite方式4.sendfile方式Java零拷贝1.MappedByteBuffer2.DirectByteBuffer3.Channel-to-Channel传输Netty零拷贝其他零拷贝总结前言从字面意思理解…

html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面

【实例简介】基于HTML5cssJS的精美登陆注册界面-------------------------------【实例截图】【核心代码】login4├── index.html├── resources│ ├── images│ │ ├── arrow.png│ │ ├── arrow-p.png│ │ ├── bg.png│ │ ├── btn.pn…

lda 可以处理中文_中文分词(jieba)和语料库制作(gensim)

本文的内容为以下两个部分&#xff1a;文本分词&#xff08;jieba&#xff09;语料库制作&#xff08;gensim&#xff09;结巴&#xff08;jieba&#xff09;分词在自然语言处理领域中&#xff0c;分词和提取关键词都是对文本处理时通常要进行的步骤。用Python语言对英文文本进…

js时间搓化为今天明天_秋冬国产搓背神器!360°无死角,让你搓背不求人,太舒服了...

秋冬国产搓背神器&#xff01;360无死角&#xff0c;让你搓背不求人&#xff0c;太舒服了&#xff01;夏季悄然离去&#xff0c;秋季快步走来&#xff0c;距离冬季也不远了~天气变冷以后&#xff0c;下班、放学回家了最惬意不过的就是洗个澡&#xff0c;如果泡完澡再搓个背&…

用html制作广告图片切换效果,基于jquery实现图片广告轮换效果代码

效果图:实现代码:hotmarquee*{margin: 0;padding: 0;}body{font: 12px;padding-top: 50px;padding-right: 200px;padding-bottom: 100px;padding-left: 200px;}ul{list-style: none;}img{padding: 2px;border: 1px solid #eee;}a{outline: none;}#imgs{width: 410px;margin-rig…

matplotlib柱状图上方显示数据_Python数据分析matplotlib可视化之绘图!

Matplotlib是一个基于python的2D画图库&#xff0c;能够用python脚本方便的画出折线图&#xff0c;直方图&#xff0c;功率谱图&#xff0c;散点图等常用图表&#xff0c;而且语法简单。Python中通过matplotlib模块的pyplot子库来完成绘图。Matplotlib可用于创建高质量的图表和…

应付账款账龄分析模板_企业财务报表分析论文应如何着手?

首先是企业的选择&#xff0c;最好选取上市公司进行分析&#xff0c;上市公司的财务数据比较透明&#xff0c;完全可以从新浪财经、中国证券网等平台获得详尽的报表数据资料&#xff0c;一般选取近三到五个年度。有了数据就可以着手分析了&#xff0c;我们可以从下面几个方法入…

dbeaver导入excel文件_PyQT5练习:制作Excel文件导入MySQL窗口

本文环境配置&#xff1a;系统>windows10&#xff1a;64位工具>PyCharm&#xff1a;2018.3.1语言>Python&#xff1a;3.7.1第三方库PyQT5&#xff1a;5.11.3pyqt5-tools&#xff1a;5.11.3.1.4PyMySQL&#xff1a;0.9.3openpyxl&#xff1a;2.5.12练手&#xff1a;制作…

编程中的蛇形填空问题_PCB—蛇形线的作用,这次真的是把你搞懂了

经常能看到论坛里有人在问蛇形线的问题。平时我们能看到蛇形线的地方大都是一些高速高密度板&#xff0c;好像带有蛇形线的板子就更高级&#xff0c;会画蛇形线就是高手了。网上关于蛇形线的文章也有很多&#xff0c;总感觉有些帖子的内容会误导新手&#xff0c;给人们带来困扰…

html5控制gif速度,gif加速软件 教你加快GIF图片的播放速度

一位狸友在编辑GIF动态图片时碰到了一个问题&#xff0c;就是不知怎么把GIF动画的播放速度加快(或减慢)。如果你也正巧碰到此类疑问或想知道GIF加速的方法&#xff0c;可以接着往下看哦。其实先理解了GIF动画的原理&#xff0c;并找对合适的gif编辑软件&#xff0c;解决这问题并…

html文本弹性,HTML5 很有趣的文本蹦床/弹性弯曲动效

CSS语言&#xff1a;CSSSCSS确定import url(http://fonts.googleapis.com/css?familyOpenSans:400,800,300);html,body {height: 100%;}body {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-cont…

android studio mvvm模板生成_使用Vue快速生成shape背景图

写在前面在日常的Android开发之中&#xff0c;我们通常都会根据UI图去手动创建shape或者selector背景图&#xff0c;虽说创建起来很简单&#xff0c;但是未免也会感到繁琐&#xff0c;因此也研究了一些这方面的知识&#xff0c;包括自定义shapedrawable、dataBinding&#xff0…

python 句子中没有中文_人生感悟经典句子,生活中可以没有诗歌,但不能没有诗意...

也曾有过一些热忱和勇气&#xff0c;为了自以为的命中注定颠沛流离&#xff0c;本想有一段花好月圆&#xff0c;却未曾想过就此天各一方。不是不爱&#xff0c;不是不会爱&#xff0c;只是少了坚持走下去的勇气。想必这是很多人的心声。错过抑或过错&#xff0c;都是爱情里常有…

计算机用户删除 cmd,命令提示符下怎么新建用户和删除用户

在日常管理电脑中的用户时&#xff0c;我们都是通过控制面板和计算机管理的用户帐户来管理进行用户添加和用户删除的&#xff0c;有一种更快捷的方法就是使用命令对用户帐户进行管理&#xff0c;NET USER 用于创建和修改计算机上的用户帐户&#xff0c;如&#xff1a;新建&…

图像迁移风格保存模型_图像风格迁移也有框架了:使用Python编写,与PyTorch完美兼容,外行也能用...

原标题&#xff1a;图像风格迁移也有框架了&#xff1a;使用Python编写&#xff0c;与PyTorch完美兼容&#xff0c;外行也能用选自Medium作者&#xff1a;Philip Meier 机器之心编译 编辑&#xff1a;陈萍 易于使用的神经风格迁移框架 pystiche。 将内容图片与艺术风格图片进行…

vivo设置全屏后状态栏黑色_vivo手机用2年内存占满,是这3个功能捣乱,一键按下全部释放...

vivo手机用2年内存占满&#xff0c;是这3个功能"捣乱"&#xff0c;一键按下全部释放经常使用手机如果没有清理习惯&#xff0c;那么应用一多&#xff0c;产生的文件就会变多&#xff0c;这样手机就会没用2年就出现卡顿的现象。今天来教大家怎样一键释放vivo手机内存。…

学计算机之路写一篇作文,我的学习之路作文(2篇)

我的学习之路作文(2篇)在我们平凡的日常里&#xff0c;大家对作文都再熟悉不过了吧&#xff0c;作文根据写作时限的不同可以分为限时作文和非限时作文。那要怎么写好作文呢&#xff1f;以下是小编整理的我的学习之路作文&#xff0c;仅供参考&#xff0c;欢迎大家阅读。我的学习…

js生日计算年龄_你知道用EXCEL可以从身份证中提取生日、性别、年龄、生肖吗?...

首先我们先了解下中国身份证号码的编排规则&#xff0c;中国公民身份证共18位&#xff0c;1~6位为省份地区信息码&#xff1b;7~14位为出生日期码&#xff1b;15~16位数字表示所在地的派出所的代码&#xff1b;第17位数字表示性别(奇数表示男性&#xff0c;偶数表示女性)&#…

docker 修改阿里镜像源_国内部署kubernetes集群的最佳实践(一)—官方教程+阿里镜像源

项目github地址&#xff1a;https://github.com/usualheart/install_k8s_official在国内环境下&#xff0c;借助阿里镜像源&#xff0c;按照官方的指导&#xff0c;使用脚本一步一步安装kubernetes。参考教程【官方】在ubuntu上安装dockerhttps://docs.docker.com/engine/insta…