vue 移动端word、excel、pdf预览本地测试案例
第一步新建一个vue项目。打开控制命令行程序(CMD),运行命令: vue init webpack“项目名称”。第二步安装依赖,在控制命令行程序(CMD),运行命令:npm install 或者 cnpm install.实现预览这里先以word为例。首先运行命令:npm install mammoth,这是预览word的一个插件,必须要安装;在static文件夹下放一个.docx为后缀的wor
第一步
新建一个vue项目。打开控制命令行程序(CMD),运行命令: vue init webpack “项目名称”。
第二步
安装依赖,在控制命令行程序(CMD),运行命令:npm install 或者 cnpm install.
实现预览
这里先以word为例。首先运行命令:npm install mammoth,这是预览word的一个插件,必须要安装;在static文件夹下放一个.docx为后缀的word文件:
然后在页面引入即可:
<template>
<div class="excel-container">
<div ref="docPreview"></div>
</div>
</template>
<script>
import mammoth from 'mammoth'
import AlloyFinger from "../../static/js/alloyfinger.js";
import Transform from "../../static/js/transform.js";
export default {
data () {
return {
url: '../../static/file/TMS.docx', //这里使用相对路径
card: [],
cardActive: '',
workbook: {},
data: [],
}
},
mounted () {
this.previewFile();
this.getData();
},
methods: {
previewFile() {
let _this=this;
try {
var xhr = new XMLHttpRequest();
xhr.open("GET", this.url);
xhr.responseType = "arraybuffer";
console.log(xhr)
xhr.onload = function(e) {
var arrayBuffer = xhr.response; //arrayBuffer
mammoth
.convertToHtml({ arrayBuffer: arrayBuffer })
.then(displayResult)
.done();
function displayResult(result) {
console.log(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>
<style>
.excel-container {
width: 100%;
}
</style>
其中引入的三个.js 文件是实现手势缩放、旋转、移动的方法,也可以不引入;
然后修改一下config文件夹下的index.js文件,将host改为0.0.0.0,只要手机和电脑在同一个域名ip下,就可以用手访问项目查看预览效果(ip地址:端口号)
excel、pdf预览都是一样,只是引入的插件不一样
excel预览运行命令:npm install xlsx,页面引入import XLSX from ‘xlsx’
pdf预览运行命令:npm install --save vue-pdf,页面引入import pdf from ‘vue-pdf’
gitee测试源码: https://gitee.com/fang_zheng_wei/mobile-preview
更多推荐
所有评论(0)