@@ -229,183 +229,6 @@ <h2><a href="#">Font-metrics-based line sizing and split</a></h2>
229
229
< a href ="javascript:demoStringSplitting() " class ="button "> Run Code</ a > </ p >
230
230
</ div >
231
231
232
- < h2 > < a href ="# "> fromHTML plugin</ a > </ h2 >
233
- < div class ="to_pdf ">
234
- < div >
235
- < p > This (BETA level. API is subject to change!) plugin allows one to scrape formatted text from an HTML
236
- fragment into PDF. Font size, styles are copied. The long-running text is split to stated content width.
237
- </ p >
238
- </ div >
239
- < div style ="border-width: 2px; border-style: dotted; padding: 1em; font-size:120%;line-height: 1.5em; "
240
- id ="fromHTMLtestdiv ">
241
- < h2 style ="font-size:120% "> Header Two</ h2 >
242
- < strong > < em > Double style span</ em > </ strong >
243
- < span style ="font-family:monospace "> Monotype span with
244
- carriage return. </ span > < span style ="font-size:300% "> a humongous font size span.</ span >
245
- Followed by long parent-less text node. asdf qwer asdf zxcv qsasfd qwer qwasfd zcxv sdf qwer qwe sdf wer
246
- qwer asdf zxv.
247
- < div < span style ="font-family:serif "> Serif Inner DIV (bad markup, but testing block detection)</ div > < span
248
- style ="font-family:sans-serif "> Sans-serif span with extra spaces </ span >
249
- Followed by text node without any wrapping element. < span > And some long long text span attached at the end
250
- to test line wrap. qwer asdf qwer lkjh asdf zxvc safd qwer
251
- wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
252
- qewr asdf zxcv.</ span >
253
- < p style ="font-size:120% "> This is a < em style ="font-size:120% "> new</ em > paragraph.</ p >
254
- This is more wrapping-less text.
255
- < p id ="bypassme " style ="font-size:120% "> This paragraph will < strong style ="font-size:120% "> NOT</ strong > be
256
- on resulting PDF because a special attached element handler will be looking for the ID - 'bypassme' - and
257
- should bypass rendering it.</ p >
258
- < p style ="font-size:120%;text-align:center "> This is < strong style ="font-size:120% "> another</ strong >
259
- paragraph.</ p >
260
- < p > I want to hide this particular < span class ="hide "> word</ span > </ p >
261
- < p style ="text-align:justify ">
262
- Integer dignissim urna tortor? Cum rhoncus, a lacus ultricies tincidunt, tristique lundium enim urna,
263
- magna? Sed, enim penatibus? Lacus pellentesque integer et pulvinar tortor? Dapibus in arcu arcu, vut
264
- dolor? Et! Placerat pulvinar cursus, urna ultrices arcu nunc, a ultrices dictumst elementum? Magnis
265
- rhoncus pellentesque, egestas enim purus, augue et nascetur sociis enim rhoncus. Adipiscing augue placerat
266
- tincidunt pulvinar ridiculus. Porta in sociis arcu et placerat augue sit enim nec hac massa, turpis
267
- ridiculus nunc phasellus pulvinar proin sit pulvinar, ultrices aliquet placerat amet? Lorem nunc porttitor
268
- etiam risus tempor placerat amet non hac, nunc sed odio augue? Turpis, magnis. Lorem pid, a porttitor
269
- tincidunt adipiscing sagittis pellentesque, mattis amet, duis proin, penatibus lectus lorem eros, nisi,
270
- tempor phasellus, elit.
271
- </ p >
272
- < h2 > Image Support</ h2 >
273
- < p >
274
- NOTES: the img src must be on the same domain or the external domain should allow Cross-origin.
275
- </ p >
276
- < img
277
- src ="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=400x300&scale=1&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false "
278
- width ="400 " height ="300 ">
279
- <!-- ADD_PAGE -->
280
- < h2 > New page added with html comment: ADD_PAGE</ h2 >
281
- < h2 > </ h2 >
282
- < p > HTML Table:</ p >
283
- < p >
284
- NOTES: Must set the COLGROUP tag with "with" on each COL tag as %, inspect the table. BTW the css does not
285
- have a good style to render the table on the html :P, feel free to the add the CSS.
286
- </ p >
287
- < table >
288
- < colgroup >
289
- < col width ="60% ">
290
- < col width ="40% ">
291
- </ colgroup >
292
- < thead >
293
- < tr >
294
- < th >
295
- Heading1
296
- </ th >
297
- < th >
298
- Heading2
299
- </ th >
300
- </ tr >
301
- </ thead >
302
- < tbody >
303
- < tr >
304
- < td >
305
- cell 1,1
306
- </ td >
307
- < td >
308
- cell 1,2
309
- </ td >
310
- </ tr >
311
- < tr >
312
- < td >
313
- cell 2,1
314
- </ td >
315
- < td >
316
- cell 2,2
317
- </ td >
318
- </ tr >
319
- < tr >
320
- < td >
321
- cell 3,1
322
- </ td >
323
- < td >
324
- cell 3,2
325
- </ td >
326
- </ tr >
327
- < tr >
328
- < td >
329
- cell 4,1
330
- </ td >
331
- < td >
332
- cell 4,2
333
- </ td >
334
- </ tr >
335
- </ tbody >
336
- </ table >
337
- < h2 > </ h2 >
338
- < h2 > </ h2 >
339
- < p > HTML Lists:</ p >
340
- < div style ="margin-left:20px ">
341
- < ul >
342
- < li > Lorem Ipsum</ li >
343
- < li > Dolor Sit amen</ li >
344
- < li > Lorem Ipsum</ li >
345
- < li > Dolor Sit amen</ li >
346
- </ ul >
347
- < ol >
348
- < li > Lorem Ipsum</ li >
349
- < li > Dolor Sit amen</ li >
350
- < li > Lorem Ipsum</ li >
351
- < li > Dolor Sit amen</ li >
352
- </ ol >
353
- </ div >
354
- </ div >
355
- < div >
356
- < p >
357
- < pre > var pdf = new jsPDF('p', 'pt', 'letter')
358
-
359
- // source can be HTML-formatted string, or a reference
360
- // to an actual DOM element from which the text will be scraped.
361
- , source = $('#fromHTMLtestdiv')[0]
362
-
363
- // we support special element handlers. Register them with jQuery-style
364
- // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
365
- // There is no support for any other type of selectors
366
- // (class, of compound) at this time.
367
- , specialElementHandlers = {
368
- // element with id of "bypass" - jQuery style selector
369
- '#bypassme': function(element, renderer){
370
- // true = "handled elsewhere, bypass text extraction"
371
- return true
372
- },
373
- '.hide': function(element, renderer){
374
- // true = "handled elsewhere, bypass text extraction"
375
- return true
376
- }
377
- }
378
-
379
- margins = {
380
- top: 80,
381
- bottom: 60,
382
- left: 40,
383
- width: 522
384
- };
385
- // all coords and widths are in jsPDF instance's declared units
386
- // 'inches' in this case
387
- pdf.fromHTML(
388
- source // HTML string or DOM elem ref.
389
- , margins.left // x coord
390
- , margins.top // y coord
391
- , {
392
- 'width': margins.width // max width of content on PDF
393
- , 'elementHandlers': specialElementHandlers
394
- },
395
- function (dispose) {
396
- // dispose: object with X, Y of the last line add to the PDF
397
- // this allow the insertion of new lines after html
398
- pdf.save('Test.pdf');
399
- },
400
- margins
401
- )
402
-
403
- </ pre >
404
- < button onclick ="javascript:demoFromHTML() " class ="button "> Run Code</ button > </ p >
405
- </ div >
406
- </ div >
407
-
408
-
409
232
< h2 > < a href ="# "> Text alignment</ a > </ h2 >
410
233
< div >
411
234
< p >
0 commit comments