-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdocx-editor.html
105 lines (96 loc) · 3.74 KB
/
docx-editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>browser-tools - DOCX viewer, convert to PDF/PNG/JPEG</title>
<meta name="description" content="View, edit, convert to PDF/PNG/JPEG images docx word files online in your browser">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/docx-file.png">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/trumbowyg/trumbowyg.min.css">
<link rel="stylesheet" href="style/trumbowyg/trumbowyg.colors.min.css">
</head>
<body>
<a id="home" href="index.html">Home</a>
<!-- docx2html -->
<input class="btn" type="file" onchange="generate(this)">
<button class="btn" data-clipboard-target="#content"><img class="mini-icon" src="img/clipboard-icon.svg">Copy to clipboard</button>
<button id="cmd" class="btn">generate PDF</button>
<input id="btn-Preview-Image" class="btn" type="button" value="Create image">
<span id="dl-image"></span>
<br>
<i>local images won't be exported</i>
<div id="previewImage"></div>
<div id="trumbowyg"><div id="content"></div></div>
<a href="about.html" alt="About" id="about">?</a>
<!-- docx2html scripts -->
<script src="js/docx2html.min.js"></script>
<script src="js/jquery.min.js"></script>
<!-- Trumbowyg editor -->
<script src="js/trumbowyg/trumbowyg.min.js"></script>
<script src="js/trumbowyg/trumbowyg.base64.min.js"></script>
<script src="js/trumbowyg/trumbowyg.colors.min.js"></script>
<script src="js/trumbowyg/trumbowyg.noembed.min.js"></script>
<script src="js/trumbowyg/trumbowyg.pasteimage.min.js"></script>
<script src="js/trumbowyg/trumbowyg.preformatted.min.js"></script>
<script src="js/trumbowyg/main.js"></script>
<!-- Generate the HTML from the docx file and then scale the the editor with the content -->
<script>
function generate(input){
require("docx2html")(input.files[0], {container:document.getElementById('content')}).then(function(converted){
jQuery("#trumbowyg").css({'height':(jQuery("#content").height()+'px')});
})
}
</script>
<!-- PDF exporter -->
<script src="js/jspdf.min.js"></script>
<script>
jQuery('#cmd').click(function () {
var pdf = new jsPDF();
pdf.fromHTML(jQuery('#content').html());
pdf.save('document.pdf');
});
</script>
<script>
jQuery(document).ready(function(){
var element = jQuery("#content"); // global variable
var getCanvas; // global variable
jQuery("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
jQuery("#previewImage").append(canvas);
getCanvas = canvas;
}
});
jQuery('<a>',{
text: 'Download as PNG',
id: 'btn-dl-png',
class: 'btn',
href: '#',
}).appendTo('#dl-image');
jQuery("#btn-dl-png").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
jQuery("#btn-dl-png").attr("download", "image.png").attr("href", newData);
});
jQuery('<a>',{
text: 'Download as JPEG',
id: 'btn-dl-jpeg',
class: 'btn',
href: '#',
}).appendTo('#dl-image');
jQuery("#btn-dl-jpeg").on('click', function () {
var imgageData = getCanvas.toDataURL("image/jpeg");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
jQuery("#btn-dl-jpeg").attr("download", "image.jpeg").attr("href", newData);
});
});
});
</script>
<script src="js/clipboard.min.js"></script>
<script>new Clipboard('.btn')</script>
</body>
</html>