注doc转 docx后端转数据流 谷歌 114 版本以上会解析错误如果是需要更好的体验可以使用 kkFileView - 在线文件预览需要后端在服务器部署一个服务 之后返回地址前端进行直接在线访问支持内网哦需求在线预览文件doc,docx,xls,xlsx,img,pdf其他类型下载如果你要是公网 那直接参考在线office 引入url地址 直接预览本文是返回数据流 不是公网效果图xls 代码效果xlsoffice效果doc 代码效果doc office效果pdf 效果图片效果pdf 直接用的浏览器自带的excel 插件 xlsxdocx 插件 docx-previewnpm install xlsx --save npm install docx-preview --save也是查阅了好多东西也借鉴了许多人的代码亲测有效 拿过去换地址 直接就能用html 代码template div classviewItemFile !-- 预览文件 -- el-dialog width100% classviewItemFileDialog title预 览 :visible.syncdialogVisible :before-closeinnerhandleClose :close-on-click-modalfalse :close-on-press-escapefalse //判断类型 div classimage v-iftype image div el-image :srcimgUrl :preview-src-listsrcList /el-image /div /div div classdocWrap v-iftype doc !-- 预览文件的地方用于渲染 -- div reffile/div /div div v-iftype xls div classexcel-view-container div idexcelView v-htmlexcelView/div /div /div // pdf用嵌套的iframe div v-iftype pdf iframe :srcpdfurl typeapplication/x-google-chrome-pdf width100% height100% / /div /el-dialog /div /templatescriptmethods:{ // 前一个页面调用的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;charsetUTF-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) { // word var 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); // 获取的是HTMLConnection if (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 有需要的 自行添加style langscss scoped .viewItemFile { .image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; div { height: 600px; width: 600px; } } .divContent { display: flex; align-items: center; justify-content: center; } /deep/ .el-dialog { margin: 0 !important; height: 100vh !important; .el-dialog__footer { margin-bottom: 30px; padding: 0px; } } /deep/ .el-dialog__body { height: 96%; width: 100%; padding: 0; overflow: auto; } } .viewItemFile { /deep/ table { width: 100% !important; border-collapse: collapse !important; border-spacing: 0 !important; text-align: center !important; border: 0px !important; overflow-x: auto !important; } /deep/ table tr td { /* border: 1px solid gray !important; */ border-right: 1px solid gray !important; border-bottom: 1px solid gray !important; width: 300px !important; height: 33px !important; } /**整体样式 */ /deep/ .excel-view-container { background-color: #ffffff; } /**标题样式 */ /deep/ .class4Title { font-size: 22px !important; font-weight: bold !important; padding: 10px !important; } /**表格表头样式 */ /deep/ .class4TableTh { /* font-size: 14px !important; */ font-weight: bold !important; padding: 2px !important; background-color: #ccc !important; } } /style style langscss .viewItemFileDialog { overflow: hidden; .el-dialog__header { padding: 10px 20px 10px; background-color: #19a199; } .el-dialog__header .el-dialog__title { font-size: 15px; color: #ffffff; font-weight: 700; } .dialog-footer { display: flex; justify-content: center; } .search-btn { background: #19a8a6; color: white; border: none; height: 30px; padding: 0px 20px; } .el-dialog__headerbtn .el-dialog__close { color: #ffffff; } .well { display: block; background-color: #f2f2f2; border: 1px solid #ccc; margin: 0px; width: 100%; height: 100%; overflow: auto; } } /style文件流excel 文件流 其他的就不都发了doc 文件需要后端转成docx文件流返回 之后直接用docx插件搞定参考地址java doc转docxxls 引用之处doc 引用之处
