用的jsPDF插件
一种实现思路：
1.网页转换成图片;
http://blog.chinaunix.net/uid-29716718-id-5023724.html
2.图片保存成pdf.
index.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="utf-8">
-
<title>index</title>
-
</head>
-
-
<body>
-
<div id="cici" style="background:lightBlue; width:200px; height:200px;">
-
123456789
-
</div>
-
<image src="" id="cici2"/>
-
-
<div class="row-fluid">
-
<div id="editor" class="bypass" style="display:none;"></div>
-
<div class="controls">
-
<a href="#" class="run-code btn btn-success">保存PDF</a>
-
</div>
-
</div>
-
-
<script src="js/jquery-1.7.1.min.js"></script>
-
-
<script src="js/html2canvas.js"></script>
-
<!-- Code editor -->
-
<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
-
<!-- Scripts in development mode -->
-
<script type="text/javascript" src="js/jspdf.min.js"></script>
-
<!-- Editor -->
-
<script type="text/javascript" src="js/editor.js"></script>
-
</body>
-
</html>
editor.js
-
var jsPDFEditor = function() {
-
var aceEditor = function() {
-
editor = ace.edit("editor");
-
editor.setTheme("ace/theme/github");
-
editor.getSession().setMode("ace/mode/javascript");
-
-
var timeout;
-
editor.getSession().on('change', function() {
-
// Hacky workaround to disable auto refresh on user input
-
if ($('#auto-refresh').is(':checked') && $('#template').val() != 'user-input.js') {
-
if(timeout) clearTimeout(timeout);
-
timeout = setTimeout(function() {
-
jsPDFEditor.update();
-
}, 200);
-
}
-
});
-
};
-
-
var imgData;
-
var initAutoRefresh = function() {
-
$('.run-code').click(function() {
-
html2canvas(document.getElementById('cici'), {
-
onrendered: function(canvas){
-
var html_canvas = canvas.toDataURL();
-
$("#cici2").attr("src",html_canvas);
-
$("#cici2").hide();
-
imgData=html_canvas;
-
var source = "var doc = new jsPDF();\n";
-
source += "doc.setFontSize(40);\n";
-
source += "doc.text(35, 25, 'cicici');\n";
-
source += "doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);\n";
-
source += "doc.save();\n";
-
editor.setValue(source);
-
jsPDFEditor.update();
-
return false;
-
}
-
});
-
});
-
};
-
-
return {
-
init: function() {
-
-
// Init the ACE editor
-
aceEditor();
-
//loadSelectedFile();
-
initAutoRefresh();
-
},
-
-
update: function(skipEval) {
-
setTimeout(function() {
-
if (! skipEval) {
-
eval('try{' + editor.getValue() + '} catch(e) { console.error(e.message,e.stack,e); }');
-
}
-
if (typeof doc !== 'undefined') {
-
var string = doc.output('datauristring');
-
$('.preview-pane').attr('src', string);
-
}
-
}, 0);
-
}
-
};
-
-
}();
-
-
$(document).ready(function() {
-
jsPDFEditor.init();
-
});
阅读(933) | 评论(0) | 转发(0) |
