1200字范文 > vue 预览 word Excel pdf 图片数据流内网文件流亲测有效（word 目

vue 预览 word Excel pdf 图片数据流内网文件流亲测有效（word 目

时间：2019-11-08 00:13:07

如果是需要更好的体验：可以使用kkFileView - 在线文件预览

需要后端在服务器部署一个服务之后返回地址前端进行直接在线访问；（支持内网哦）

需求：在线预览文件（doc,docx,xls,xlsx,img,pdf）其他类型下载

如果你要是公网那直接参考在线office 引入url地址直接预览（本文是返回数据流不是公网）

效果图：

xls ：代码效果

xls：office效果

doc ：代码效果

doc ：office效果

pdf 效果

图片效果

pdf 直接用的浏览器自带的

excel 插件xlsx

docx 插件docx-preview

npm install xlsx --savenpm install docx-preview --save

也是查阅了好多东西也借鉴了许多人的代码，亲测有效！拿过去换地址直接就能用

html 代码

<template><div class="viewItemFile"><el-dialogwidth="100%"class="viewItemFileDialog"title="预览":visible.sync="dialogVisible":before-close="innerhandleClose":close-on-click-modal="false":close-on-press-escape="false">//判断类型<div class="image" v-if="type == 'image'"><div><el-image :src="imgUrl" :preview-src-list="srcList"> </el-image></div></div><div class="docWrap" v-if="type == 'doc'"><div ref="file"></div></div><div v-if="type == 'xls'"><div class="excel-view-container"><div id="excelView" v-html="excelView"></div></div></div>// pdf用嵌套的iframe<div v-if="type == 'pdf'"><iframe:src="pdfurl"type="application/x-google-chrome-pdf"width="100%"height="100%"/></div></el-dialog></div></template>

script

methods:{// 前一个页面调用的init 我在前一个页面根据文件名字后缀已经判断是什么类型的文件了init(file, type) {this.type = type;if (type == "image") {axios.request({method: "GET", //这个不解释了吧url: '后端接口', //路径responseType: "blob", //告诉服务器想到的响应格式headers: {Accept: "application/octet-stream",},}).then((res) => {console.log(res);if (res) {let blob = new Blob([res.data], { type: "image/jpeg" });const imageUrl = URL.createObjectURL(blob);this.imgUrl = imageUrl;this.srcList = [imageUrl],;that.loading = true;} else {that.$notify.error({ title: "失败", message: "接口请求失败" });that.loading = false;}}).catch(function (error) {that.$notify.error({ title: "失败", message: "接口请求失败" });console.log(error);that.loading = false;});} else if (type == "pdf") {axios.request({method: "GET", //这个不解释了吧url: '后端地址'//路径responseType: "blob", //告诉服务器想到的响应格式headers: {"Content-Type": "application/pdf;charset=UTF-8",},}).then((res) => {console.log(res);if (res) {let blob = new Blob([res.data], { type: "application/pdf" });const url = URL.createObjectURL(blob);console.log(url);that.loading = false;this.pdfurl = url;} else {that.$notify.error({ title: "失败", message: "接口请求失败" });that.loading = false;}}).catch(function (error) {that.$notify.error({ title: "失败", message: "接口请求失败" });console.log(error);that.loading = false;});} else if (type == "xls") {//表格var that = this;axios.request({method: "GET", //这个不解释了吧url: '后端地址', //路径responseType: "arraybuffer", //告诉服务器想到的响应格式headers: {"Content-Type":"application/vnd.ms-excel;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",},}).then((res) => {console.log(res);if (res) {const workbook = XLSX.read(new Uint8Array(res.data), {type: "array",}); // 解析数据const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表this.excelView = XLSX.utils.sheet_to_html(worksheet); // 渲染this.$nextTick(function () {// DOM加载完毕后执行，解决HTMLConnection有内容但是length为0问题。this.setStyle4ExcelHtml();});} else {that.$notify.error({ title: "失败", message: "接口请求失败" });that.loading = false;}}).catch(function (error) {that.$notify.error({ title: "失败", message: "接口请求失败" });console.log(error);that.loading = false;});} else if (type == "doc") {// wordvar that = this;axios.request({method: "GET", //这个不解释了吧url: '后端地址' //路径responseType: "blob", //告诉服务器想到的响应格式}).then((res) => {console.log(res);if (res) {let docx = require("docx-preview");docx.renderAsync(res.data, this.$refs.file);} else {that.$notify.error({ title: "失败", message: "接口请求失败" });that.loading = false;}}).catch(function (error) {that.$notify.error({ title: "失败", message: "接口请求失败" });console.log(error);that.loading = false;});}this.dialogVisible = true;},// 设置Excel转成HTML后的样式setStyle4ExcelHtml() {const excelViewDOM = document.getElementById("excelView");if (excelViewDOM) {const excelViewTDNodes = excelViewDOM.getElementsByTagName("td"); // 获取的是HTMLConnectionif (excelViewTDNodes) {const excelViewTDArr = Array.prototype.slice.call(excelViewTDNodes);for (const i in excelViewTDArr) {const id = excelViewTDArr[i].id; // 默认生成的id格式为sjs-A1、sjs-A2......if (id) {const idNum = id.replace(/[^0-9]/gi, ""); // 提取id中的数字，即行号if (idNum && (idNum === "1" || idNum === 1)) {// 第一行标题行excelViewTDArr[i].classList.add("class4Title");}if (idNum && (idNum === "2" || idNum === 2)) {// 第二行表头行excelViewTDArr[i].classList.add("class4TableTh");}}}}}},}

css 有需要的自行添加

文件流

excel 文件流其他的就不都发了

doc 文件需要后端转成docx文件流返回之后直接用docx插件搞定！

参考地址：java doc转docx

xls 引用之处

doc 引用之处

vue 在线预览 word Excel pdf 图片数据流内网文件流亲测有效（word 目前支持docx文件以及doc文件（doc需要后端处理））

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。