【解决】jsPDF之长图片生成PDF（分页，失真）

为了减轻后端压力，尽量在前端页面实现，同时减轻服务器负载。
上接：http://blog.csdn.net/zt_fucker/article/details/76583032

版本：jsPDF.js 1.3.2

在获取到页面截取的base64位的长长图片之后，添加到pdf中。

        $("#downpdf").on("click", function() {//获取节点高度，后面为克隆节点设置高度。var height = $(TargetNode).height()//克隆节点，默认为false，不复制方法属性，为true是全部复制。var cloneDom = $(TargetNode).clone(true);//设置克隆节点的css属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。cloneDom.css({"background-color": "white","position": "absolute","top": "0px","z-index": "-1","height": height});//将克隆节点动态追加到body后面。$("body").append(cloneDom);//插件生成base64img图片。html2canvas(cloneDom, {//Whether to allow cross-origin images to taint the canvasallowTaint: true,//Whether to test each image if it taints the canvas before drawing themtaintTest: false,onrendered: function(canvas) {var contentWidth = canvas.width;var contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89;//未生成pdf的html页面高度var leftHeight = contentHeight;//页面偏移var position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高var imgWidth = 595.28;var imgHeight = 592.28 / contentWidth * contentHeight;var pageData = canvas.toDataURL('image/jpeg', 1.0);//注①var 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) {//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度pdf.addImage(pageData, 'JPEG', 0, position,imgWidth, imgHeight)leftHeight -= pageHeight;position -= 841.89;//避免添加空白页if(leftHeight > 0) {//注②pdf.addPage();}}}pdf.save('name_hos.pdf');}});})

注①new jsPDF(orientation, unit, format) → {jsPDF}

Name	Description
orientation	One of “portrait” or “landscape” (or shortcuts “p” (Default), “l”)
unit	Measurement unit to be used when coordinates are specified. One of “pt” (points), “mm” (Default), “cm”, “in”
format	One of ‘pageFormats’ as shown below, default: a4

注②addPage() → {jsPDF}

  /*** Adds (and transfers the focus to) new page to the PDF document.* @function* @returns {jsPDF}** @methodOf jsPDF#* @name addPage*/API.addPage = function() {_addPage.apply(this, arguments);return this;};

注③各种型号纸张大小

 pageFormats = { // Size in pt of various paper formats'a0': [2383.94, 3370.39],'a1': [1683.78, 2383.94],'a2': [1190.55, 1683.78],'a3': [841.89, 1190.55],'a4': [595.28, 841.89],'a5': [419.53, 595.28],'a6': [297.64, 419.53],'a7': [209.76, 297.64],'a8': [147.40, 209.76],'a9': [104.88, 147.40],'a10': [73.70, 104.88],'b0': [2834.65, 4008.19],'b1': [2004.09, 2834.65],'b2': [1417.32, 2004.09],'b3': [1000.63, 1417.32],'b4': [708.66, 1000.63],'b5': [498.90, 708.66],'b6': [354.33, 498.90],'b7': [249.45, 354.33],'b8': [175.75, 249.45],'b9': [124.72, 175.75],'b10': [87.87, 124.72],'c0': [2599.37, 3676.54],'c1': [1836.85, 2599.37],'c2': [1298.27, 1836.85],'c3': [918.43, 1298.27],'c4': [649.13, 918.43],'c5': [459.21, 649.13],'c6': [323.15, 459.21],'c7': [229.61, 323.15],'c8': [161.57, 229.61],'c9': [113.39, 161.57],'c10': [79.37, 113.39],'dl': [311.81, 623.62],'letter': [612, 792],'government-letter': [576, 756],'legal': [612, 1008],'junior-legal': [576, 360],'ledger': [1224, 792],'tabloid': [792, 1224],'credit-card': [153, 243]};

更多JSPDF示例demo请点击：https://segmentfault.com/a/1190000009211079

【解决】jsPDF之长图片生成PDF（分页，失真）相关推荐

长内容生成pdf 防止内容pdf分页隔断
本案例是根据HTML内容文本先转换成图片,再把图片生成pdf,不一定适合所有项目,只是项目工作中的记录生成pdf import html2canvas from 'html2canvas' impo ...
批量图片生成pdf C#源码
下载链接:图片生成pdf C#源码把批量图片生成pdf 批量选择改变图片顺序图片的缩小预览自定义要生成的pdf 可以按原始尺寸可以按长.宽的指定大小按比例绽放或者按照指定的尺寸如800*6 ...
android pdfjet_GitHub - lnj721/PdfBuilder: Android端使用图片生成PDF文件
PdfBuilder Android端使用图片生成PDF文件一.应用场景从本地选择图片生成pdf文件,由于Android本身并没有对pdf的支持,这里选择使用一个第三方的库来达成需求. 二.库的选 ...
将图片生成PDF的项目，要求每张图片生成一页，并且页面与图片尺寸大小相同
将图片生成PDF的项目,要求每张图片生成一页,并且页面与图片尺寸大小相同最近公司做项目碰到pdf生成,需要把填充的图片宽高平铺到每张页面上面,在百度搜了好久都没有朋友遇到,所以自己试了好多终于给搞定 ...
iText的使用（1）-- 组合图片生成PDF
使用iText组合图片生成PDF文件关于iText的介绍不必说了,简单用它的功能合并若干图片到一个PDF中,目前iText支持的图像格式有:GIF, Jpeg, PNG, wmf等格式. 代码如下: ...
如何利用手机实现图片生成PDF格式，这个方法超实用！
说到图片,不管是男孩子还是女孩子都喜欢拍照,想必大家的手机相册中都用很多美照吧,不知道大家是否有遇到这样的情况,在有的地方,我们需要将图片的格式进行转换,那你是否找到了方法了?若是没有那就赶紧来看看这 ...
html长图转换成pdf,支持把各类文档转换成 HTML5(SVG)接口、长图片、PDF 。word转pdf、word转html5、pdf转网页html5、pdf转图片的接口...
详情请到九云图官网了解一下.https://server.9yuntu.com/yuntu/resource/website/api.html 把 OFFICE / PDF / CAD 等文档转换成 ...
jpg图片转为pdf？图片生成pdf的步骤？图片转pdf格式怎么转简单的教程方法？
有时候我们需要把图片转成pdf.可能还有些小伙伴不知道怎么去完成这项转换的,图片转pdf其实很简单,下面给大家分享一个超级简单的pdf转图片方法: 搜索一下:~~~~~~轻云pdf编辑压缩官网打开网 ...
matlab图片在word/wps中模糊解决方法，matlab图片转pdf后信息丢失解决方法
在写论文的时候,不免需要把matlab的仿真图片贴在论文里,但是matlab图片另存为后就会降低像素,变得模糊,怎么才能让图片清晰呢? 可以按下面步骤试试: (1)matlab跑出仿真图后,在菜单栏依 ...
Java 图片生成PDF
public static void main(String[] args){String imageFolderPath = "E:\\Tencet\\图片\\test\\";t ...

【解决】jsPDF之长图片生成PDF（分页，失真）

【解决】jsPDF之长图片生成PDF（分页，失真）相关推荐

最新文章

热门文章