mammothJs解析docx文件
生活随笔
收集整理的這篇文章主要介紹了
mammothJs解析docx文件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
今天接到一個任務(wù)，任務(wù)要求是把一個靜態(tài)頁面的表格內(nèi)的每個單元格內(nèi)容根據(jù)給出的Word文檔內(nèi)表格的內(nèi)容一一替換；
what？？？
?
這要是一個個復制、粘貼，不得直接弄到半夜回家吃宵夜啊。。。
于是乎就想著有沒有啥封裝好的可以直接用的，一通度娘，找到了mammothJs；
相關(guān)CDN地址：https://cdn.bootcss.com/mammoth/1.4.8/mammoth.browser.js
直接上代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><button id="copy" style="display: none;margin-bottom: 20px;">復制一下產(chǎn)出來的html</button><div class="container"><input id="document" type="file" /><div id="output"></div></div><script src="https://cdn.bootcss.com/mammoth/1.4.8/mammoth.browser.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script><script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script><script>// mammothJs只能讀取docx文件~所以打開word后先另存為docx（文件類型選擇Word文檔選項）格式$("#document").on("change", readFileInputEventAsArrayBuffer);function showResult(result) {console.log(result);let html = result.value;// 將解析出來的dom元素的展示替換成自己想要的樣子let newHTML = html.replace(/<table>/g, '<table style="border-collapse: collapse;">').replace(/<tr>/g, '<tr style="border: 1px solid rgb(204, 204, 204);color:#555555;">').replace(/<td>/g, '<td style="border: 1px solid rgb(204, 204, 204); padding: 8px 15px;">').replace(/<p>|<\/p>/g, '');// 將解析出來的html展示在頁面上$("#output").html(newHTML);// 使用clipboardJs復制table下的內(nèi)容，也就是我要替換的每個單元格里的內(nèi)容；// 這句就是我把table的內(nèi)容賦值到data-clipboard-text屬性，這樣的話點擊“復制一下產(chǎn)出來的html”按鈕，就可以把想要的復制的內(nèi)容復制下來；那么后面我可以直接到頁面上去粘貼就可以了$('#copy').attr('data-clipboard-text', $('table').html()).show();}function readFileInputEventAsArrayBuffer(event) {var file = event.target.files[0];var reader = new FileReader();reader.onload = function (loadEvent) {var arrayBuffer = loadEvent.target.result; // arrayBuffer // mammothJsmammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then(res => showResult(res));};reader.readAsArrayBuffer(file);}// clipboardJs復制部分const clipboard = new Clipboard('#copy');clipboard.on('success', function (e) {alert('復制成功');});clipboard.on('error', function (e) {alert('復制失敗');});</script> </body></html>由于不想到瀏覽器里復制出需要替換的dom，所以使用clipboardJs直接復制出來。
這樣整體就像一個生產(chǎn)零件的機器，把word上傳解析后，直接產(chǎn)出需要的代碼，然后把新零件換上，老零件換下~
?
總結(jié)
以上是生活随笔為你收集整理的mammothJs解析docx文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTMLParser（一个比较流行的ht
- 下一篇： 【Centos】查询命令