前提条件:代码是原生的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);

坚持就是胜利!

GitHub 加速计划 / vu / vue
86
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 4 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐