我的情况是:

单击按钮时,将 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相关推荐

  1. html长图转换成pdf,iOS将HTML页面转换成PDF文件保存到本地并分享传输文件

    第一次修改:2017.05.26 修改内容:之前的方法在转化带有图片的html页面时会出现图片缺失问题,由于之前我需要转换的html不包含图片,所以没有发现这一问题,现在增加一个直接将webView转 ...

  2. html长图转换成pdf,支持把各类文档转换成 HTML5(SVG)接口、长图片、PDF 。word转pdf、word转html5、pdf转网页html5、pdf转图片的接口...

    详情请到九云图官网了解一下.https://server.9yuntu.com/yuntu/resource/website/api.html 把 OFFICE / PDF / CAD 等文档转换成 ...

  3. php 长图切成多张图片,长图打印,图片平均切割

    图片.png 最近在知识星球学习,想要把星主分享的内容保存下来打印成纸质版方便学习.复制时提示星主开启了文件保护内容,用过知识星球的朋友应该都了解,这是为了保障星主的权益. 想要保存下来这些知识,只能 ...

  4. HDOJ---1431 素数回文[素数筛选+ltoa函数(将长整形转换成字符数组)+打表]

    素数回文 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. 小技巧!如何把小图拼接成长图,将长图切成小图

    作为电商来说,经常要将商品详情里的小图用短时间来拼接成一张大图,又要将一整张大图剪切成若干小图.如果这要用PS来拼切长短图,也是一个不小的麻烦事,关键是还不能一次性批量完成.今天小编要介绍一个可以快速 ...

  6. html视频怎么转换成图片,如何将小视频转换成GIF动图或将GIF动图转换成视频

    现在GIF动图是越来越流行了.在过去,它是我们在Web上唯一能展示动画图片的技术.这种技术非常的有用,因为,相对于Real Video Player, Windows Media等技术,都需要特殊的浏 ...

  7. matlab将图片转成eps,【MATLAB】论文图片处理(各种数据图转换成eps格式)

    最近跟eps图片杠上了..转载一个人人网上matlab到eps图片输出格式较好的方法 随着Latex在论文编辑和排版的日益普及,越来越多的人写文章都用Latex,数据图表作为论文不可缺少的一部分,如何 ...

  8. matlab eps格式,【MATLAB】论文图片处理(各种数据图转换成eps格式)

    最近跟eps图片杠上了..转载一个人人网上matlab到eps图片输出格式较好的方法 随着Latex在论文编辑和排版的日益普及,越来越多的人写文章都用Latex,数据图表作为论文不可缺少的一部分,如何 ...

  9. Intel Realsense D435 opencv 为什么将color图转换成灰度图后,再与depth图水平堆叠,其结果一片黑色?(数据未map到0-255)

    相关代码 # -*- coding: utf-8 -*- """ @File : obstacle_detection.py @Time : 2019/12/11 10: ...

最新文章

  1. python爬虫能干什么-爬虫可以做的事情非常多,Python的爬虫你又了解多少?
  2. python3.8.1安装教程-Linux安装Python3.8.1的教程详解
  3. centos nginx离线安装
  4. 怎么计算一组数据的波动_[理论+spss实战]一组数据的描述性统计分析
  5. python识别发票二维码_python如何实现二维码的生成和识别
  6. linux中安装samba的方法以及注意事项
  7. KubeSphere
  8. 刚刚创业的你 这几点让你的公司不断前进
  9. (原)数据结构之树状数组详解
  10. Mybatis-学习笔记(6)Mybatis的事务管理机制
  11. 掌握 需求过程阅读笔记02
  12. .NET Enterprise 4.1.5的工作流引擎
  13. dorado java_dorado事件
  14. 【java】模拟物流快递系统程序设计
  15. Android经典著名的百大框架源码解析(retrofit、Okhttp、Glide、Zxing、dagger等等)
  16. 2018-2019年世界将会出现一场经济危机,危机过后中国将会崛起!
  17. sed学习与实践1:sed基本指令
  18. 27计算机表演赛命题,(历史2)27届计算机表演赛命题搜索赛答案
  19. ByteBuf 读取字节数组数据
  20. Android基础篇 屏幕横竖屏切换(layout-land)下篇

热门文章

  1. 2 计算机网络性能指标
  2. 批量替换文件夹下所有文件的内容
  3. python---str和repr
  4. hibernate框架学习之使用SQLQuery查询数据
  5. 去月球“你知道戴维会变身成哪种动物吗?”
  6. 【译】Immutable.js : 操作 Set -8
  7. GIt 从入门到放弃
  8. Chapter2 MSP430硬件结构
  9. 012.对netmap API的解读
  10. centos 6.5 x64编译有python的vim7.4