基于vue实现word 在线预览

1、安装mammoth插件

npm install mammoth

2、HTML代码

<template><div id="wordView" v-html="vHtml"></div>
</template>

3、JS代码

<script>
import mammoth from "mammoth"; //引入插件export default {name: 'WordPreview',props: {},data() {return {vHtml: "",wordURL:'',  //文件地址previewFlag:false,//预览文件内容};
},
created() {this.readExcelFromRemoteFile(this.wordURL);
},
methods:{// 在线查看word文件readExcelFromRemoteFile: function (url) {var vm = this;var xhr = new XMLHttpRequest();xhr.open("get", url, true);xhr.responseType = "arraybuffer";xhr.onload = function () {if (xhr.status == 200) {mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function (resultObject) {vm.$nextTick(() => {vm.vHtml = resultObject.value;});});}};xhr.send();},}}
</script>

完整代码

<template><div class="content"><button @click="preview">预览</button><div id="wordView" v-html="vHtml" v-if="previewFlag"></div></div>
</template><script>
import mammoth from "mammoth";
export default {name: 'WordPreview',props: {},data() {return {vHtml: "",wordURL:'/ftp/000001/1007920/2022/1582608356207235072.docx',//文件地址，根据自己的需求修改，可能会涉及到跨域previewFlag:false,//预览文件内容};
},
created() {this.readExcelFromRemoteFile(this.wordURL);this.preview();
},
methods:{// 在线查看word文件readExcelFromRemoteFile: function (url) {var vm = this;var xhr = new XMLHttpRequest();xhr.open("get", url, true);xhr.responseType = "arraybuffer";xhr.onload = function () {if (xhr.status == 200) {mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function (resultObject) {vm.$nextTick(() => {vm.vHtml = resultObject.value;});});}};xhr.send();},preview(){this.previewFlag=true;}
}}
</script>
<style scoped></style>

页面效果展示

基于vue实现word 在线预览相关推荐

前端如何实现 Word 在线预览
前端如何实现 Word 在线预览在前端实现 Word 文件在线预览时,常用的方法包括使用第三方库.浏览器插件.后端服务器.在线文档转换平台等,具体如下: 使用第三方库常见的前端第三方库包括 Mam ...
office在线预览 word在线预览 .net在线预览文件在线浏览接口
office在线预览 word在线预览 excel在线预览文件浏览接口服务支持移动端浏览,只要能使用浏览器上网都可以使用,不需要安装任何第三方工具. 1.word在线预览 excel在线预览,.n ...
js-xlsx vue导入excel在线预览
js-xlsx vue导入excel在线预览导入XLSX库官方地址Github 安装 npm install xlsx --s 引入 import XLSX from 'xlsx' HTML &l ...
基于Vue实现头像选择预览
基于Vue实现头像选择预览需求是点击头像这一栏可以弹出选择文件的弹出框. 1.首先添加一个input输入框,将其隐藏,设置一个accept属性,说明只选择图片,并且绑定ref属性方便原生dom操作 ...
实现word在线预览有php的写法也有插件似
1 <?php2 //header("Content-type:text/html;charset=utf-8");3 //word转html 展示4 $lj=$_GET[' ...
spring boot2.X word在线预览 pdf.js
最近公司项目需求需要在线预览word文档,并且不能在在线下载和编辑.在此记录我是如何做的. 针对word的在线预览网上大多给的解决方案就是先把word文件转成pdf,然后通过pdf.js在线预览pdf ...
基于SpringBoot的文件在线预览神器，支持99%的文件在线预览
kkFileView简介 kkFileView可以用来搭建文件在线预览服务,在Github上已有5.7k+Star.该项目使用流行的SpringBoot搭建,易上手和部署,基本支持主流办公文档的在线预 ...
java word在线预览_java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）...
背景之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大 ...
Vue实现pptx在线预览
PPTX在线预览,使用jquery的插件<PPTXjs>,纯前端实现pptx转html进行展示 1.在PPTXjs官网下载插件,并在index.html内引入 <link rel=& ...

基于vue实现word 在线预览

1、安装mammoth插件

2、HTML代码

3、JS代码

完整代码

页面效果展示

基于vue实现word 在线预览相关推荐

最新文章

热门文章