vue移动端实现excel在线预览

上篇博客我提到了ios手机不能实现下载功能，但是可以实现预览，图片预览和pdf预览我已经在前篇博客做了讲解，但是，在工作中大家上传最多的应该是excel的文件，今天我就讲解一下excel移动端的预览实现。

1. 预览excel当然也是需要引入插件的，这里使用的是一个SheetJS js-xlsx插件，首先在vue项目引入：

npm install xlsx

2. 然后在要预览excel的页面引入

import XLSX from ‘xlsx’

3. 只能预览肯定不行，有些文件数据可能很多，在手机上显示就很小，根本看不清，这时，我们继续使用手势缩放和移动，对文件的操作就好很多了。手势缩放和移动我上文已经说了，不懂的可以看一下我的上一篇文章，使用的是一个AlloyFinger手势插件，很好用的。

html代码

<template><divclass="excel-container"><van-nav-barleft-text="返回"title="excel查看"left-arrow:fixed="true":placeholder="true"@click-left="back"/><divref="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 2px0 2px;display: table-cell;}</style><script>importXLSXfrom'xlsx'import AlloyFingerfrom"../../../static/js/alloyfinger.js";import transformfrom"../../../static/js/transform.js";import Tofrom"../../../static/js/to.js";exportdefault{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= routerParamsthis.url=this.$route.params.url},readWorkbookFromRemoteFile:function(url){var xhr=newXMLHttpRequest()
        xhr.open('get', url,true)
        xhr.responseType='arraybuffer'let _this=this
        xhr.onload=function(e){var binary="";if(xhr.status===200){var bytes=newUint8Array(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];varHTML=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=newAlloyFinger(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>

效果