vue移动端实现word在线预览

上一篇说了excel文件的预览，其实word预览跟excel预览很相似，代码都大差不差，言归正传

word预览同样要使用插件，这里使用的是mammoth插件，首先vue项目引入：

npm install mammoth

在预览的页面导入

import mammoth from ‘mammoth’

同样的也引用了手势缩放和移动，在我pdf预览那篇文章有说明手势的操作，使用的AlloyFinger 手势插件。
html代码

<template><div class="excel-container"><van-nav-barleft-text="返回"title="word查看"left-arrow:fixed="true":placeholder="true"@click-left="back"/><div ref="docPreview"></div></div>
</template>

js代码

同样的，在本地测试，把word文件放在static文件夹下，然后将url地址换成你static文件夹下的路径。

<script>import mammoth from 'mammoth'import AlloyFinger from "../../../static/js/alloyfinger.js";import transform from "../../../static/js/transform.js";import To from "../../../static/js/to.js";export default {data () {return {id: '',url:"",// excel文件地址goPath: '',       //将要去的界面}},beforeRouteEnter (to, from, next) { //监听从哪个页面过来let path = from.fullPath;next(vm => vm.setPath(path));},created(){this.getParams()},mounted () {this.previewFile();this.getData();},methods: {setPath(path) {this.goPath = path.split("/")[1];},//返回键back() {this.$router.push({name: this.goPath,params: {id: this.id}})},getParams() {// 取到路由带过来的参数let routerParams = this.$route.params.id// 将数据放在当前组件的数据内this.id = routerParamsthis.url = this.$route.params.url},previewFile() {let _this=this;try {var xhr = new XMLHttpRequest();xhr.open("GET", this.url);xhr.responseType = "arraybuffer";xhr.onload = function(e) {var arrayBuffer = xhr.response; //arrayBuffermammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then(displayResult).done();function displayResult(result) {_this.$refs.docPreview.innerHTML = result.value || "";}};xhr.send();} catch (e) {console.log(e);_this.$emit("errorPreview");}},getData() {let that = this;let element = that.$refs.docPreview;Transform(element);var initScale = 1;this.af = new AlloyFinger(element, {// rotate: function (evt) {  //实现旋转//   element.rotateZ += evt.angle;// },multipointStart: function () {initScale = element.scaleX;},pinch: function (evt) {   //实现缩放element.scaleX = element.scaleY = initScale * evt.zoom;},pressMove: function (evt) {   //实现移动element.translateX += evt.deltaX;element.translateY += evt.deltaY;evt.preventDefault();},});},}}
</script>

效果

gitee测试源码: https://gitee.com/fang_zheng_wei/mobile-preview

vue移动端实现word在线预览相关推荐

vue移动端实现excel在线预览
上篇博客我提到了ios手机不能实现下载功能,但是可以实现预览,图片预览和pdf预览我已经在前篇博客做了讲解,但是,在工作中大家上传最多的应该是excel的文件,今天我就讲解一下excel移动端的预览实 ...
office在线预览 word在线预览 .net在线预览文件在线浏览接口
office在线预览 word在线预览 excel在线预览文件浏览接口服务支持移动端浏览,只要能使用浏览器上网都可以使用,不需要安装任何第三方工具. 1.word在线预览 excel在线预览,.n ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
前端如何实现 Word 在线预览
前端如何实现 Word 在线预览在前端实现 Word 文件在线预览时,常用的方法包括使用第三方库.浏览器插件.后端服务器.在线文档转换平台等,具体如下: 使用第三方库常见的前端第三方库包括 Mam ...
vue 使用 vue-pdf 实现pdf在线预览
vue 使用 vue-pdf 实现pdf在线预览 1.安装 npm install --save vue-pdf 2.引用 import pdf from 'vue-pdf' export defau ...
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
实现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 ...
java word在线预览_java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）...
背景之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大 ...
vue docx-preview实现docx文件在线预览
之前一般做项目进行文件浏览的时候基本都是用的window.open+url的形式打开文件,进行浏览操作的,但是这种打开方式只能够在线浏览如jpg.png.pdf这类文件,对于文档类型docx这种则是用 ...

vue移动端实现word在线预览

上一篇说了excel文件的预览，其实word预览跟excel预览很相似，代码都大差不差，言归正传

vue移动端实现word在线预览相关推荐

最新文章

热门文章