Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
166 views
in Technique[技术] by (71.8m points)

javascript - 如何正确使用jsPDF库(How to properly use jsPDF library)

I want to convert some of my divs into PDF and I've tried jsPDF library but with no success.(我想将某些div转换为PDF,并且尝试了jsPDF库,但没有成功。)

It seems I can't understand what I need to import to make the library work.(看来我不明白我需要导入什么才能使库正常工作。) I've been through the examples and I still can't figure it out.(我已经看过这些示例,但仍然无法弄清楚。) I've tried the following:(我尝试了以下方法:) <script type="text/javascript" src="js/jspdf.min.js"></script> After jQuery and:(在jQuery之后:) $("#html2pdf").on('click', function(){ var doc = new jsPDF(); doc.fromHTML($('body').get(0), 15, 15, { 'width': 170 }); console.log(doc); }); for testing purposes but I receive:(出于测试目的,但我收到:) "Cannot read property '#smdadminbar' of undefined" where #smdadminbar is the first div from the body.(其中#smdadminbar#smdadminbar的第一个div。)   ask by Daniela costina Vaduva translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

you can use pdf from html as follows,(您可以按如下方式使用html中的pdf,)

Step 1: Add the following script to the header(步骤1:将以下脚本添加到标题) <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> or download locally(或本地下载) Step 2: Add HTML script to execute jsPDF code(步骤2:添加HTML脚本以执行jsPDF代码) Customize this to pass the identifier or just change #content to be the identifier you need.(对此进行自定义以传递标识符,或者只是将#content更改为所需的标识符。) <script> function demoFromHTML() { var pdf = new jsPDF('p', 'pt', 'letter'); // source can be HTML-formatted string, or a reference // to an actual DOM element from which the text will be scraped. source = $('#content')[0]; // we support special element handlers. Register them with jQuery-style // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) // There is no support for any other type of selectors // (class, of compound) at this time. specialElementHandlers = { // element with id of "bypass" - jQuery style selector '#bypassme': function (element, renderer) { // true = "handled elsewhere, bypass text extraction" return true } }; margins = { top: 80, bottom: 60, left: 40, width: 522 }; // all coords and widths are in jsPDF instance's declared units // 'inches' in this case pdf.fromHTML( source, // HTML string or DOM elem ref. margins.left, // x coord margins.top, { // y coord 'width': margins.width, // max width of content on PDF 'elementHandlers': specialElementHandlers }, function (dispose) { // dispose: object with X, Y of the last line add to the PDF // this allow the insertion of new lines after html pdf.save('Test.pdf'); }, margins ); } </script> Step 3: Add your body content(步骤3:添加身体内容) <a href="javascript:demoFromHTML()" class="button">Run Code</a> <div id="content"> <h1> We support special element handlers. Register them with jQuery-style. </h1> </div> Refer to the original tutorial(参考原始教程) See a working fiddle(看到一个小提琴)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...