
1-docx-preview实现docx文件预览(原生的vue.js)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
前提条件:代码是原生的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);
坚持就是胜利!




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 个月前
更多推荐
所有评论(0)