Foreword:
During project development, I encountered the need to export the content of the HTML page into a word document, so I wrote this essay.
Of course, the project development time was a bit tight, and the first thing I thought of was to use plug-ins, so Baidu took a look. Here are two methods for exporting word documents.
Remarks: Compatible with IE9 and above
After browsing the code of the jquery.wordexport.js plug-in, I learned that through This plug-in can export text and pictures, and the pictures are first drawn in the form of canvas
, and the text needs to rely on the FileSaver.js plug-in. The FileSaver.js plug-in mainly uses the new file operation feature of H5 new Blob() and new FileReader()
to implement text export.
Plug-in source code:
FileSaver.js
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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
|
View Code
jquery.wordexport.js
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 |
|
View Code
Plug-in call:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
You can export a word document by directly calling the wordExport() interface, and the passed parameter is the name of the exported word file.
Additional:
It is invalid to set the style through our regular external style writing. Through personal practice, I found that it is necessary to write inline style to take effect, and the unit also needs to follow the configuration of word
Unit pt setting.
The jquery.wordexport.js plug-in is configured with a style style for us to supplement the style settings:
But after personal practice, I set it The style cannot take effect, it can only take effect through inline setting.
Screenshot:
Mainly through js template setting corresponding tag, and then XDoc.to(baidu.template()) exports word, and the advantage of using Baidu js template engine is that it can also export PDF files.
Complete demo:
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 |
|
Here I call the js template to render into HTML through the renderTemplate function, realizing the combination of text display and exported content. And because the word document exported here needs to be specially styled, we can set it by adding .class under the page style display.
Attached are some exported word document style settings:
Screenshot:
The above is the detailed content of How to export HTML to generate word document?. For more information, please follow other related articles on the PHP Chinese website!