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:'',//excelcolumns: [{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; //arrayBuffermammoth.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) {// excelif(type===0){this.previewExcel();}// wordelse if(type===1){this.previewWord();}// pdfelse if(type===2){this.previewPdf();}// pptelse 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>

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

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

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

office 文档在线预览功能实现(word,excel,pdf,ppt等多种格式)——使用https://view.xdocin.com/view 提示文档过期——基础积累
web实现office文档在线预览功能--基础积累最近遇到一个需求,就是要实现多种文档链接的在线预览,最简单的方式就是通过window.open(url地址)的方式来实现. 但是如果要求是在一个弹窗 ...
前端在线预览word,excel,pdf
前端在线预览word,excel,pdf 预览Word 预览pdf 预览Excel 预览Word 微软的在线预览功能,可以预览word.ppt.Excel.PDF 局限: 需要外网能访问文件,如果是只 ...
Java通过openOffice实现word,excel，ppt转成pdf实现在线预览
Java通过openOffice实现word,excel,ppt转成pdf实现在线预览一.OpenOffice 1.1 下载地址 1.2 JodConverter 1.3 新建实体类PDFDemo ...
Web方式预览Office/Word/Excel/pdf文件解决方案
Web方式预览Office/Word/Excel/pdf文件解决方案参考文章: (1)Web方式预览Office/Word/Excel/pdf文件解决方案 (2)https://www.cnblog ...
乐鑫Esp32学习之旅13 esp32 内置 dns 服务器，无需外网访问域名返回指定网页。（附带Demo）
本系列博客学习由非官方人员半颗心脏潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1. 爬坑学习新旅程,虚拟机搭建esp32开发环境,打印 " ...
k8s内nginx设置dns无法访问外网
当upstream使用域名的时候, 需要指定: resolver 8.8.8.8; server { listen 8090; 设置8.8.8.8时不能访问内网地址.只能访问外网,不设置不能放外网. ...
内网机无法ping通外网机
**内网机无法ping通外网机** 叙述:出差人员想通过外网连接公司内网服务器,公司内部通过TP-Link路由开启vpn服务,使用一台PC做中转内网机(双网口).一端连接外网192网段,一端连接内网服 ...
搭建ngrok服务器，实现内网穿透服务，实现外网到内网的在线访问
一:前言场景问题: 如果本地的项目在没有服务器的情况下,需要让他人访问: 在自己的电脑上搭建一个web服务器,实现本地的访问和外部的访问.我们就要做内网穿透了,内网穿透就是别人通过外网能够访问到我们 ...
阿里云ECS搭建的PPTP内网通，但无法访问外网，无法转发。
1 .清除旧规则 ,一定得记得清nat记录,不清除会越加越多. iptables -F iptables -X iptables -t nat -F iptables -t nat -X ---查看n ...

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

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

最新文章

热门文章