正常用法
引入jspdf.min.js
var doc = new jsPDF()doc.text('Hello world!', 10, 10)doc.save('a4.pdf') api可查看官方说明
根据不同需求，使用中并没有想象中那么容易。
问题1：输入中文时，生成的pdf内容变成乱码
解决方法：
引入jspdf.customfonts.min.js 和 default_vfs.js
var doc = new jsPDF();doc.addFont('NotoSansCJKjp-Regular.ttf', 'NotoSansCJKjp', 'normal');doc.setFont('NotoSansCJKjp');doc.text(15, 30, 'こんにちは。はじめまして。');//multi-lines Testvar paragraph = '相次いで廃止された寝台列車に代わり、いまや夜間の移動手段として主力になりつつある夜行バス。「安い」「寝ながら移動できる」などのメリットを生かすため、運行ダイヤはどのように組まれているのでしょうか。夜遅く出て、朝早く着くというメリット夜行バスを使うメリットといえば、各種アンケートでもいちばん多い回答の「安い」以外に、';var lines = doc.splitTextToSize(paragraph, 150);doc.text(15, 60, lines);doc.save('custom_fonts.pdf'); 参考
问题2：如何给文字添加超链接
解决方法：
pdf.textWithLink('下载', 30, 40, { url: 'https://www.google.com/' }); 问题3：导出后的pdf黑黑的一片
解决方法：
由于html内容过长，图片较多较长的时候。jsPDF无法导出，可以对页面进行分步截取，然后进行拼接，还可以进行更好的分页
pdf.addPage();
问题4：分步导出后的pdf还是黑黑的一片
解决方法：
导出PDF时，先只显示第一步需要导出的内容，导出完毕后，隐藏导出的页面内容，显示下一步需要导出的页面内容。
以下为部分函数源码，可作为参考
var exporting = false; var progressLen = $('.cut-box').length; var resultBoxLength = $('.result-box').length; $('.export-pdf').click(function(){ if(exporting){ return false; } exporting = true; console.log('export-pdf') // 保存时先显示所有测试图片，隐藏按钮 var imglen = $('img.lazy').length; for(var i=0;i ' }); pdf.textWithLink('导导导导', 500, 40, { url: ' ' }); $('.export-pdf').css('display','inline-block'); setProgress(progressIndex); newHtmlCanvas(pdf,resultBoxIndex,progressIndex); }, //背景设为白色（默认为黑色） background: "#fff", useCORS:true }) }) //pdf 要输入的pdf，boxLength循环长度，h当前截取的位置 function newHtmlCanvas(pdf,resultBoxIndex,progressIndex){ console.log('resultBoxIndex:'+resultBoxIndex); console.log($('.result-box:eq('+resultBoxIndex+') .cut-box:eq(0)').offset().top) var cutBoxLen = $('.result-box:eq('+resultBoxIndex+') .cut-box').length; var cutBoxIndex = 1; if(resultBoxIndex!=0){ pdf.addPage(); } var firstSub = 0; if(resultBoxIndex==0){ firstSub = 120; } html2canvas( $('.result-box:eq('+resultBoxIndex+')'), { dpi: 172,//导出pdf清晰度 height:$('.result-box:eq('+resultBoxIndex+') .cut-box:eq(0)').offset().top+$('.result-box:eq('+resultBoxIndex+') .cut-box:eq(0)').innerHeight()-firstSub, onrendered: function (canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; // if(pageHeight>2000){ // pageHeight = 2000 // } //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 20; //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]） var imgWidth = 555.28; var imgHeight = 555.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if(resultBoxIndex==0){ position=80; // pageHeight = pageHeight -position; } if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if (leftHeight > 0) { pdf.addPage(); } } } if(cutBoxLen>cutBoxIndex){ console.log('有1个以上的子cut-box'); $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+(cutBoxIndex-1)+')').css('display','none'); $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+(cutBoxIndex)+')').css('display','inline-block'); pdf.addPage(); progressIndex++; setProgress(progressIndex); connectHtmlCanvas(pdf,resultBoxIndex,cutBoxLen,cutBoxIndex,progressIndex); }else{ console.log('只有1个子cut-box'); if(resultBoxIndex==resultBoxLength-1){ console.log('当前为最后一个resultbox'); console.log('endPage') pdf.save('content.pdf'); $("#pdfContent").removeClass('exporting'); $('.containte_edit .export-pdf span').html('生成PDF'); $('.result-box').show(); $('.result-box .cut-box').show(); $('body').css({'height':'auto','overflow':'auto'}); exporting = false; setProgress(0); }else{ console.log('addPage'); console.log('当前不是最后一个resultbox'); pdf.addPage(); $('.result-box:eq('+(resultBoxIndex+1)+')').show().siblings('.result-box').hide(); resultBoxIndex++; progressIndex++; setProgress(progressIndex); newHtmlCanvas(pdf,resultBoxIndex,progressIndex); } } }, //背景设为白色（默认为黑色） background: "#fff", useCORS:true } ) } function connectHtmlCanvas(pdf,resultBoxIndex,cutBoxLen,cutBoxIndex,progressIndex){ console.log('cutBoxLen:'+cutBoxLen+'cutBoxIndex:'+cutBoxIndex); html2canvas( $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+cutBoxIndex+')'), { dpi: 172,//导出pdf清晰度 onrendered: function (canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; // if(pageHeight>2000){ // pageHeight = 2000 // } //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 20; //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]） var imgWidth = 555.28; var imgHeight = 555.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 20, 30, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if (leftHeight > 0) { pdf.addPage(); } } } if(cutBoxIndex==cutBoxLen-1){ console.log('当前为父div里最后一个cut-box'); if(resultBoxIndex==resultBoxLength-1){ console.log('当前为最后一个result-box'); pdf.save('content.pdf'); $("#pdfContent").removeClass('exporting'); $('.containte_edit .export-pdf span').html('生成PDF'); $('body').css({'height':'auto','overflow':'auto'}); $('.result-box').show(); $('.result-box .cut-box').show(); exporting = false; setProgress(0); }else{ console.log('当前不是最后一个result-box'); $('.result-box:eq('+(resultBoxIndex+1)+')').show().siblings('.result-box').hide(); resultBoxIndex++; progressIndex++; setProgress(progressIndex); newHtmlCanvas(pdf,resultBoxIndex,progressIndex); } }else{ console.log('当前不是父div里最后一个cut-box'); $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+cutBoxIndex+')').css('display','none'); $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+(cutBoxIndex+1)+')').css('display','inline-block'); cutBoxIndex++; pdf.addPage(); progressIndex++; setProgress(progressIndex); connectHtmlCanvas(pdf,resultBoxIndex,cutBoxLen,cutBoxIndex,progressIndex) } }, //背景设为白色（默认为黑色） background: "#fff", useCORS:true } ) } // 设置进度条 function setProgress(progressIndex){ var progress = Math.round((progressIndex/progressLen)*100) +'%'; $('.containte_edit .export-pdf i').css('width',progress); }