vue移动端实现excel在线预览
程序员文章站
2022-06-19 15:35:34
上篇博客我提到了ios手机不能实现下载功能,但是可以实现预览,图片预览和pdf预览我已经在前篇博客做了讲解,但是,在工作中大家上传最多的应该是excel的文件,今天我就讲解一下excel移动端的预览实现。预览excel当然也是需要引入插件的,这里使用的是一个SheetJS js-xlsx插件,首先在vue项目引入:npm install xlsx然后在要预览excel的页面引入import XLSX from ‘xlsx’只能预览肯定不行,有些文件数据可能很多,在手机上显示就很小...
上篇博客我提到了ios手机不能实现下载功能,但是可以实现预览,图片预览和pdf预览我已经在前篇博客做了讲解,但是,在工作中大家上传最多的应该是excel的文件,今天我就讲解一下excel移动端的预览实现。
- 预览excel当然也是需要引入插件的,这里使用的是一个SheetJS js-xlsx插件,首先在vue项目引入:
npm install xlsx
- 然后在要预览excel的页面引入
import XLSX from ‘xlsx’
- 只能预览肯定不行,有些文件数据可能很多,在手机上显示就很小,根本看不清,这时,我们继续使用手势缩放和移动,对文件的操作就好很多了。手势缩放和移动我上文已经说了,不懂的可以看一下我的上一篇文章,使用的是一个AlloyFinger手势插件,很好用的。
html代码
<template>
<div class="excel-container">
<van-nav-bar
left-text="返回"
title="excel查看"
left-arrow
:fixed="true"
:placeholder="true"
@click-left="back"
/>
<div ref="preview"></div>
</div>
</template>
js代码和style代码
- 首先说一下style代码一定要放在js代码上面,因为页面加载是从上往下的,我们在mounted()钩子函数中调用的渲染方法,已经渲染完了,style代码还没有加载,就会导致没有样式,所以放在js代码上面,会先加载样式。
- 如果你在本地测试,要把excel文件放在static文件下,然后将url换成你static文件夹下的路径,就可以显示了。放在其他文件夹下显示不出来,可能是vue项目静态文件一定要放在static下才能引到吧。
<style sceped>
.excel-container {
width: 100%;
}
table {
table-layout: fixed !important;
width: 100% !important;
border-collapse:collapse;
border:none;
font-size:0.23rem;
}
td,th {
width:1px;
white-space:nowrap; /* 自适应宽度*/
word-break:keep-all; /* 避免长单词截断,保持全部 */
border:solid #676767 1px;
text-align:center;
white-space:pre-line;
word-break:break-all !important;
word-wrap:break-word !important;
display:table-cell;
vertical-align:middle !important;
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding:2px 2px 0 2px;
display: table-cell;
}
</style>
<script>
import XLSX from 'xlsx'
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.readWorkbookFromRemoteFile(this.url);
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 = routerParams
this.url = this.$route.params.url
},
readWorkbookFromRemoteFile: function (url) {
var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'arraybuffer'
let _this = this
xhr.onload = function (e) {
var binary = "";
if (xhr.status === 200) {
var bytes = new Uint8Array(xhr.response)
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
var wb = XLSX.read(binary, { type: "binary" });
var wsname = wb.SheetNames[0];
var ws = wb.Sheets[wsname];
var HTML = XLSX.utils.sheet_to_html(ws);
if (_this.$refs.preview) {
_this.$refs.preview.innerHTML = HTML;
}
}
}
xhr.send()
},
getData() {
let that = this;
let element = that.$refs.preview;
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>
下一篇: vue移动端实现word在线预览
本文地址:https://blog.csdn.net/weixin_45956838/article/details/111867255
上一篇: 详解Linux time 命令的使用
下一篇: 【JS之路】“简单”的数据类型