按照需求在做一个图片和文件预览的功能。

因为后台返回的是二进制文件，所以根本不能直接打开。

第一步，针对图片的预览，我使用了el-image-viewer 组件。
1.后台请求的方法

download:  params => { 
		return axios.get('/contentmanagement/file/download?id='+params.id,{
        responseType: 'arraybuffer'
      });

	},

//responseType: 'arraybuffer'一定要加上，具体原因去百度

这个是前端的样式
2.预览按钮

<el-button type="warning" size="medium" icon="el-icon-view" circle title="预览" @click.stop="handlePreview(scope.$index, scope.row)"></el-button>

3.因为图片预览使用了image-viewer，所以一定要导入组件

// 导入组件
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

//注册组件
components: { ElImageViewer },

4.具体代码了

<template>
	<div >
	  <el-image-viewer 
               v-if="showViewer" 
               :on-close="closeViewer" 
               :url-list="[imgUrl]" />
	</div>
</template>

//这个是图片标签



//定义需要使用的属性
imgUrl:'',//图片
showViewer: false, // 显示查看器

//定义需要的事件
 // 关闭查看器
  closeViewer() {
     this.showViewer = false
   },



//定义预览按钮中绑定的事件handlePreview
			handlePreview: function(index,row){
				//截取文件后缀名
				var index = row.cnsName.lastIndexOf(".");
    			var suffix = row.cnsName.substr(index+1);
//  			console.log(suffix);
				if(this.compareImg(suffix)){//判断类型为图片
					
					let para = {
					
						id: row.cnsId,
					};
					this.listLoading = true;
					
					this.$api.cententscenter.download(para).then((res) => {
//						console.log(res,res.data);
						 return 'data:image/png;base64,' + btoa(
					          new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
					       )
						
					}).then(data => {
						this.imgUrl = data;
				    })
					this.showViewer = true;
					this.listLoading = false;
					return;
				}
		},


//判断类型为图片的方法
compareImg(type){//比较图片类型
	let typsList = ['bmp','jpg','png','gif','svg','webp'];
		if(typsList.indexOf(type)> -1){//说明类型是图片
			return true;
		}else{
			return false;
		}
},

图片的预览功能完成

第二步，搞的是word文档等等的预览，使用的是微软提供的Office Online

//其实很简单了，在handlePreview方法中加个判断
else if(this.compareFile(suffix)){//判断是word文档等等
	window.open(//显示word   1576205803810
           "https://view.officeapps.live.com/op/view.aspx?src=xxxx",
           "_blank"
       );
       return false;
}

//src后面加的就是你的文件路径，但是需要注意，必须是外网可以访问的路径，我的是