vue+iview 内网预览(本文重点)+外网预览word、excel、pdf、ppt

访问内网文件思路如下:
1.后端将word、excel、pdf文件转为二进制文件流 前端将文件流转为html从而实现文件预览
2.pdf没这么复杂具体可看下文
3.ppt的实现方式是后端将ppt转为pdf 然后调用pdf接口

上众所期待的效果图:
word

excel

pdf

一、预览公网上的文件(较为简单 所以放第一)
1.预览公网能访问的文件 使用XDOC就能实现

//file_url是你的文件地址
<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=file_url" target="_blank" rel="nofollow">预览</a>

二、预览内网上的文件(word、excel、pdf本文重点)
前端
word预览-mammoth.js
安装: npm install --save mammoth

excel预览-sheetjs
安装: npm install --save xlsx

2.1接口定义

//预览excel
getExcel(params) {
  return $http.post(`${global.API_URL}/gt1/employeeArchives/getExcel`,params,{
    responseType: 'arraybuffer'
  });
},
//预览word
getWord(params) {
  return $http.post(`${global.API_URL}/gt1/employeeArchives/getWord`,params,{
    responseType: 'arraybuffer'
  });
},
//预览pdf
getPdf(params) {
  return $http.post(`${global.API_URL}/gt1/employeeArchives/getPdf`,params,{
    responseType: 'blob'
  });
}

2.2预览按钮

<Modal title="附件列表" v-model="dialogVisible" width="55%" footer-hide>
    <Table :columns="columns" :data="fileData" style="width: 100.1%;" class="table-css" height="500">
        <!-- 下载 -->
        <template slot-scope="{row,index}" slot="download">
        	<Button type="warning" size="small" @click="preview(row.type)">预览</Button>
        </template>	
    </Table>
</Modal>

2.3预览模式框

<!-- 预览模式框 -->
<Modal v-model="modalPreview" fullscreen title="预览" @on-cancel="cancelPreview">
     <!-- excel -->
     <div v-if="previewType===0">
         <div class="tableExcel" v-html="excelHtml"></div>
     </div>
     <!-- word -->
     <div v-else-if="previewType===1">
         <div class="word" id="wordView"/>
     </div>
     <div slot="footer"></div>
 </Modal>

2.4 引用安装的mammoth和xlsx(供word和excel使用)

import mammoth from "mammoth";
import XLSX from 'xlsx'

2.5初始化参数

data () {
	return {
	    // 预览附件
	    previewType:'',
	    modalPreview:false,
	    excelHtml:'',//excel
	    columns: [
	    {
	        title: '文件名',
	        key: 'fileName'
	    },
	    {
	        title: '文件类型',
	        key: 'fileType'
	    },
	    {
	        title: '操作',
	        slot: 'download',
	        width: 120
	    }],
	    fileData:[{
		    type:0,
		    fileName:"预览excel",
		    fileType:"excel"
		},{
		    type:1,
		    fileName:"预览word",
		    fileType:"word"
		},{
		    type:2,
		    fileName:"预览pdf",
		    fileType:"pdf"
		},{
		    type:3,
		    fileName:"预览ppt",
		    fileType:"ppt"
		}]
	}
},

2.6附件预览方法

methods: {
	/***********************************附件预览***********************************/ 
	/********** 预览excel ***************/ 
	previewExcel:function(){
	    let list=[];
	    let obj={};
	    this.previewType=0;
	    this.modalPreview=true; 
	    this.$api.employeeArchives.getExcel()
	    .then(res => {
	        var data = new Uint8Array(res.data)
	        var workbook = XLSX.read(data, {
	            type: 'array'
	        })
	        this.excelHtml='';
	        for(var i=0;i<workbook.SheetNames.length;i++){
	            const exlname = workbook.SheetNames[i];
	            this.excelHtml+='<h4 style="padding-left:10px;font-size:13px;">'+exlname+'</h4>'+''+XLSX.utils.sheet_to_html(workbook.Sheets[exlname])+'<br>'
	        }
	    })
	},
	/********** 预览word ***************/ 
	previewWord() {
	    this.previewType=1;
	    this.modalPreview=true;
	    this.$api.employeeArchives.getWord()
	    .then(res => {
	        let content = res.data;
	        let blob = new Blob([content], { type: "application/pdf" });
	        let reader = new FileReader();
	        reader.readAsArrayBuffer(blob);
	        reader.onload = function (e) {
	            var arrayBuffer = e.target.result; //arrayBuffer
	            mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then(displayResult).done();
	        };
	        function displayResult(result) {
	            document.getElementById("wordView").innerHTML =result.value;
	        }
	    })
	},
	/********** 预览pdf ***************/ 
	previewPdf:function(){
	    this.previewType=2;
	    this.$api.employeeArchives.getPdf()
	    .then(res => {
	        const responseData = res.data;
	        if (responseData != null) {
	            let pdfUrl = window.URL.createObjectURL(new Blob([responseData], { type: "application/pdf" }));
	            window.open(pdfUrl)
	        } 
	    })  
	},
	/********** 预览ppt ***************/ 
	previewPPt:function(){
	    this.previewType=3;
	    this.$api.employeeArchives.getPdf()
	    .then(res => {
	        const responseData = res.data;
	        if (responseData != null) {
	            let pdfUrl = window.URL.createObjectURL(new Blob([responseData], { type: "application/pdf" }));
	            window.open(pdfUrl)
	        } 
	    })  
	},
	// 预览
	preview: function(type) {
	    // excel
	    if(type===0){
	        this.previewExcel();
	    }
	    // word
	    else if(type===1){
	         this.previewWord();
	    }
	    // pdf
	    else if(type===2){
	        this.previewPdf();
	    }
	    // ppt
	    else if(type===3){
	        this.previewPPt();
	    }
	},
	// 取消
	cancelPreview:function(){
	    this.excelHtml='';
	}

2.7 word和excel的 css样式(可自行灵活修改

<style scoped>
    /*word样式*/
    .word>>>img
    {
        width: 100%;
    }
    .word
    {
        font-size: 16px;
    }
    /*excel样式*/
    .tableExcel>>>table {
        width: 100%;
        border-right: 1px solid  #e8eaec;
        border-bottom:1px solid  #e8eaec;
        border-collapse: collapse;
        margin: auto;
    }
    .tableExcel>>>table td {
        border-left: 1px solid  #e8eaec;
        border-top: 1px solid  #e8eaec;
        white-space: nowrap;
        padding: .5rem;
    }
    .tableExcel>>>tbody tr:nth-of-type(1) {
        font-weight: bold;
        font-size:13px;
    }
</style>

后端
此文的后端展现如下 为二进制文件流

以上所见接口的请求都是项目封装过的方法 烦请各自灵活应用