Chinaunix首页 | 论坛 | 博客
  • 博客访问: 452258
  • 博文数量: 226
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2111
  • 用 户 组: 普通用户
  • 注册时间: 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文(226)

文章存档

2020年(2)

2019年(1)

2018年(3)

2017年(26)

2016年(57)

2015年(60)

2014年(77)

我的朋友

分类: Web开发

2015-05-12 15:03:23

用的jsPDF插件
    一种实现思路:    
    1.网页转换成图片;  
     http://blog.chinaunix.net/uid-29716718-id-5023724.html    

    2.图片保存成pdf.
    index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>index</title>
  6. </head>

  7. <body>
  8.     <div id="cici" style="background:lightBlue; width:200px; height:200px;">
  9.         123456789
  10.     </div>
  11.     <image src="" id="cici2"/>
  12.         
  13.     <div class="row-fluid">
  14.         <div id="editor" class="bypass" style="display:none;"></div>
  15.         <div class="controls">
  16.             <a href="#" class="run-code btn btn-success">保存PDF</a>
  17.         </div>
  18.     </div>

  19. <script src="js/jquery-1.7.1.min.js"></script>

  20. <script src="js/html2canvas.js"></script>
  21. <!-- Code editor -->
  22. <script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
  23. <!-- Scripts in development mode -->
  24. <script type="text/javascript" src="js/jspdf.min.js"></script>
  25. <!-- Editor -->
  26. <script type="text/javascript" src="js/editor.js"></script>
  27. </body>
  28. </html>
editor.js
  1. var jsPDFEditor = function() {
  2.     var aceEditor = function() {
  3.         editor = ace.edit("editor");
  4.         editor.setTheme("ace/theme/github");
  5.         editor.getSession().setMode("ace/mode/javascript");

  6.         var timeout;
  7.         editor.getSession().on('change', function() {
  8.             // Hacky workaround to disable auto refresh on user input
  9.             if ($('#auto-refresh').is(':checked') && $('#template').val() != 'user-input.js') {
  10.                 if(timeout) clearTimeout(timeout);
  11.                 timeout = setTimeout(function() {
  12.                     jsPDFEditor.update();
  13.                 }, 200);
  14.             }
  15.         });
  16.     };
  17.      
  18.      var imgData;
  19.     var initAutoRefresh = function() {
  20.         $('.run-code').click(function() {
  21.              html2canvas(document.getElementById('cici'), {
  22.                  onrendered: function(canvas){
  23.                      var html_canvas = canvas.toDataURL();                                 
  24.                          $("#cici2").attr("src",html_canvas);
  25.                          $("#cici2").hide();
  26.                         imgData=html_canvas;
  27.                         var source = "var doc = new jsPDF();\n";
  28.                         source += "doc.setFontSize(40);\n";
  29.                         source += "doc.text(35, 25, 'cicici');\n";
  30.                         source += "doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);\n";
  31.                         source += "doc.save();\n";    
  32.                         editor.setValue(source);
  33.                         jsPDFEditor.update();
  34.                         return false;
  35.                  }
  36.             });
  37.         });
  38.     };

  39.     return {
  40.         init: function() {

  41.             // Init the ACE editor
  42.             aceEditor();
  43.             //loadSelectedFile();    
  44.             initAutoRefresh();
  45.         },
  46.     
  47.         update: function(skipEval) {
  48.             setTimeout(function() {
  49.                 if (! skipEval) {
  50.                     eval('try{' + editor.getValue() + '} catch(e) { console.error(e.message,e.stack,e); }');
  51.                 }
  52.                 if (typeof doc !== 'undefined') {
  53.                     var string = doc.output('datauristring');
  54.                     $('.preview-pane').attr('src', string);
  55.                 }
  56.             }, 0);
  57.         }
  58.     };

  59. }();

  60. $(document).ready(function() {
  61.     jsPDFEditor.init();
  62. });




阅读(838) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~