在线预览word文档(仅支持.docx格式)

<!-- script -->
 <script src="https://cdn.jsdelivr.net/npm/mammoth@1.4.8/mammoth.browser.min.js"></script>

<!-- run -->
<style>
        #show{
          margin-top: 30px;
          white-space: pre-line;
          border: 1px solid #ccc;
          padding: 30px;
          border-radius: 10px;
        }
    </style>
<div id="app">
        <input id="wordFile" accept=".docx"   type="file" @change="getWordFile"/>
        <div id="show"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    
                }
            },
            methods: {
                getWordFile (e) {
                    console.log('getWordFile');
                    // const _this = this
                    const file = e.target.files[0]
                    const reader = new FileReader()
                    reader.readAsArrayBuffer(file)
                    reader.onload = function (evt) {
                        const arrayBuffer = evt.target.result
                        mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then((res) => {
                        console.log(res.value);
                        var textNode = document.getElementById('show');
                        textNode.innerHTML = res.value
                        // _this.displayResult = res.value
                        // _this.handler(res.value)
                        })
                    }
                }
            },
        })
        
    </script>