js前端页面用插件docx-preview展示docx文件
更新时间：2024年11月26日 11:12:33 作者：shengmeshi
这篇文章主要给大家介绍了如何使用docx-preview.min.js插件在页面上展示.docx文件,并说明了该插件依赖于jszip.min.js插件,通过实例展示了如何实现这一功能,需要的朋友可以参考下
需求： 页面展示docx文件
使用插件：docx-preview.min.js，以及该插件依赖jszip.min.js
1、jszip.min.js 地址：https://cdn.bootcdn.net/ajax/libs/jszip/3.10.0/jszip.min.js 2、docx-preview.min.js 地址： https://github.com/VolodymyrBaydalka/docxjs //自测项目用了vue 3、vue.js地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
插件使用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="file" @change="upload">
<div ref="file"></div>
</div>
<script src="./jszip.min.js"></script>
<script src="./vue.js"></script>
<script src="./docx-preview.min.js" type="text/javascript"></script>
<script>
var app = new Vue({
el: '#app',
data: {
file: null
},
mounted(){
this.getApi("./****.docx");//本地文档地址：./****.docx
},
methods: {
//1、通过input预加载展示文档
upload(e) {
this.file = e.target.files[0]
console.log('this.file=-======',this.file)
docx.renderAsync(this.file, this.$refs.file);
},
//2、直接请求本地文档
getApi(path){
let _that = this;
let xhr = new XMLHttpRequest();
xhr.open('GET', path, true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
//docx文档blob对象type类型值为：
//application/vnd.openxmlformats-officedocument.wordprocessingml.document
let blob = new Blob([this.response], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
// 使用blob对象进行操作
console.log('blob=====',blob)
docx.renderAsync(blob, _that.$refs.file);
}
};
xhr.send();
}
}
})
</script>
</body>
</html>总结
到此这篇关于js前端页面用插件docx-preview展示docx文件的文章就介绍到这了,更多相关js前端展示docx文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序模板语法，WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
本篇文章主要介绍了Ionic3实现图片瀑布流布局，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）
这篇文章主要介绍了JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）的相关资料,需要的朋友可以参考下2016-01-01
本文主要介绍了js百度地图鼠标滚轮缩放导致地图中心点偏移问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
排序算法的理解算是程序员的基本功之一了，其功能是对一个数据元素集合或序列重新排列成一个按数据元素某个项值有序的序列。2011-02-02
这篇文章主要为大家详细介绍了js实现图片查看器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要给大家介绍了关于前端实现Word在线预览功能的相关资料,工作中经常有时会遇到需要给用户创建word文档并实现word文档在线预览的需求,需要的朋友可以参考下2023-09-09
jQuery 事件绑定及取消 bind live delegate on one区别解析
这篇文章主要介绍了jquery 事件绑定及取消 bind live delegate on one区别解析，本文给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11
计算器是我们日常生活中经常使用的工具之一,可以帮助我们进行简单的数学运算,在本博文中,我将使用JavaScript编写一个漂亮的计算器,并添加加减乘除功能,感兴趣的同学可以自己动手尝试一下2023-09-09
这篇文章主要介绍了JavaScript模拟重力状态下抛物运动的方法,实例分析了javascript操作dom元素模拟运动的方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
最新评论