1-docx-preview实现docx文件预览(原生的vue.js)

前提条件：代码是原生的vue.js写的，需要在线预览docx文件，不调后台接口

过程：找到一个docx-preview组件包，可使用npm下载，但没有直接找到一个js。其实可以通过npm下载后在下载的文件中获取

demo实现

引入js文件

<script src="./js/vue.js" type="text/javascript"></script>
<script src="./js/docx-preview.min.js" type="text/javascript"></script>

准备一个input上传文件

<div id="app">
   <input type="file" @change="upload">
   <div ref="file"></div>
</div>

在js中调用预览组件

<script>
    var app = new Vue({
        el: '#app',
        data: {
            file: null
        },
        methods: {
            upload(e) {
                this.file = e.target.files[0]
                this.renderDocx(this.file)
            },
            renderDocx(file) {
                docx.renderAsync(file, this.$refs.file);
            },
        }
    })
</script>

根据上面的写法后上传文件，结果报错了

查了材料发现，loadAsync是属于jszip这个包的方法，也就是说还需要再引入一个jszip.js文件，按照上述同样的方法引入

<script src="./js/jszip.js" type="text/javascript"></script>

最后成功啦！！！

后面完成需求后又找了一下docx-preview这个包的具体用法

npm文档：docx-preview - npm

文档的API使用中表示文件可以是JSZip.loadAsync支持的任何类型，所以我又使用了Blob、ArrayBuffer类型试了一下，以下贴上转换的方法

Blob

this.renderDocx(new Blob([this.file], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}))

ArrayBuffer

let fileReader = new FileReader();
fileReader.readAsArrayBuffer(this.file);
fileReader.addEventListener("loadend", (e) => {
   let arrayBuffer = e.target.result;
   this.renderDocx(arrayBuffer );
}, false);

坚持就是胜利！