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');
};
}
html长图转换成pdf,将长 html 导入拆分 PDF相关推荐
- html长图转换成pdf,iOS将HTML页面转换成PDF文件保存到本地并分享传输文件
第一次修改:2017.05.26 修改内容:之前的方法在转化带有图片的html页面时会出现图片缺失问题,由于之前我需要转换的html不包含图片,所以没有发现这一问题,现在增加一个直接将webView转 ...
- html长图转换成pdf,支持把各类文档转换成 HTML5(SVG)接口、长图片、PDF 。word转pdf、word转html5、pdf转网页html5、pdf转图片的接口...
详情请到九云图官网了解一下.https://server.9yuntu.com/yuntu/resource/website/api.html 把 OFFICE / PDF / CAD 等文档转换成 ...
- php 长图切成多张图片,长图打印,图片平均切割
图片.png 最近在知识星球学习,想要把星主分享的内容保存下来打印成纸质版方便学习.复制时提示星主开启了文件保护内容,用过知识星球的朋友应该都了解,这是为了保障星主的权益. 想要保存下来这些知识,只能 ...
- HDOJ---1431 素数回文[素数筛选+ltoa函数(将长整形转换成字符数组)+打表]
素数回文 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- 小技巧!如何把小图拼接成长图,将长图切成小图
作为电商来说,经常要将商品详情里的小图用短时间来拼接成一张大图,又要将一整张大图剪切成若干小图.如果这要用PS来拼切长短图,也是一个不小的麻烦事,关键是还不能一次性批量完成.今天小编要介绍一个可以快速 ...
- html视频怎么转换成图片,如何将小视频转换成GIF动图或将GIF动图转换成视频
现在GIF动图是越来越流行了.在过去,它是我们在Web上唯一能展示动画图片的技术.这种技术非常的有用,因为,相对于Real Video Player, Windows Media等技术,都需要特殊的浏 ...
- matlab将图片转成eps,【MATLAB】论文图片处理(各种数据图转换成eps格式)
最近跟eps图片杠上了..转载一个人人网上matlab到eps图片输出格式较好的方法 随着Latex在论文编辑和排版的日益普及,越来越多的人写文章都用Latex,数据图表作为论文不可缺少的一部分,如何 ...
- matlab eps格式,【MATLAB】论文图片处理(各种数据图转换成eps格式)
最近跟eps图片杠上了..转载一个人人网上matlab到eps图片输出格式较好的方法 随着Latex在论文编辑和排版的日益普及,越来越多的人写文章都用Latex,数据图表作为论文不可缺少的一部分,如何 ...
- Intel Realsense D435 opencv 为什么将color图转换成灰度图后,再与depth图水平堆叠,其结果一片黑色?(数据未map到0-255)
相关代码 # -*- coding: utf-8 -*- """ @File : obstacle_detection.py @Time : 2019/12/11 10: ...
最新文章
- python爬虫能干什么-爬虫可以做的事情非常多,Python的爬虫你又了解多少?
- python3.8.1安装教程-Linux安装Python3.8.1的教程详解
- centos nginx离线安装
- 怎么计算一组数据的波动_[理论+spss实战]一组数据的描述性统计分析
- python识别发票二维码_python如何实现二维码的生成和识别
- linux中安装samba的方法以及注意事项
- KubeSphere
- 刚刚创业的你 这几点让你的公司不断前进
- (原)数据结构之树状数组详解
- Mybatis-学习笔记(6)Mybatis的事务管理机制
- 掌握 需求过程阅读笔记02
- .NET Enterprise 4.1.5的工作流引擎
- dorado java_dorado事件
- 【java】模拟物流快递系统程序设计
- Android经典著名的百大框架源码解析(retrofit、Okhttp、Glide、Zxing、dagger等等)
- 2018-2019年世界将会出现一场经济危机,危机过后中国将会崛起!
- sed学习与实践1:sed基本指令
- 27计算机表演赛命题,(历史2)27届计算机表演赛命题搜索赛答案
- ByteBuf 读取字节数组数据
- Android基础篇 屏幕横竖屏切换(layout-land)下篇