需求：上传的word、excel、pdf 能够在线预览。

1.word在线预览

安装docx-preview

npm i docx-preview

用弹窗展示word内容，用一个div标签渲染word文件，获取后端返回的二进制文件流，请注意接口请求的response Type 类型为 blob，如代码代码如下：

<template><div><el-button @click="handleServeFile()"></el-button><el-dialog:visible.sync="fileVisible":title="fileName"width="1000px"@close="handleCloseClick"append-to-body><div v-html="vHtml" ref="file"></div></el-dialog></div>
</template><script>
let docx = require('docx-preview');//引入docx插件
export default {data(){return{fileVisible:false,fileUrl:undefined,fileName:undefined,}},
methods:{handleServeFile(item){this.fileName = item.fileNamegetDocumentById({id:item.id}).then(res=>{this.fileVisible = trueconsole.log('docx--',res)// 带格式文本setTimeout(() => {this.$nextTick(() => {//带格式文本docx.renderAsync(res, this.$refs.file);})}, 200)})}}
}

在request.js中导出

// 根据id获取文档协议
export function getDocumentById(query) {return request({url: '/supplier/getDocumentById',method: 'get',responseType: 'blob',headers: {'Content-Type': 'application/json','Authorization': 'Bearer ' + getToken()},params: query})
}

效果图

2.excel 的在线预览

安装xlsx插件

npm install --save xlsx

在弹窗展示excel文件

<template><div><el-button @click="handleServeFile()"></el-button><el-dialog:visible.sync="fileVisible":title="fileName"width="1000px"@close="handleCloseClick"append-to-body><el-table :data="excelData" style="width: 100%"><el-table-columnv-for="(value, key, index) in tableColumn":key="index":prop="key":label="key"></el-table-column></el-table></el-dialog></div>
</template><script>
var XLSX = require("xlsx");//引入xlsx插件
export default {data(){return{fileVisible:false,fileUrl:undefined,fileName:undefined,}},
methods:{handleServeFile(item){this.fileName = item.fileName//调用接口，对返回参数进行解析与渲染getExcelById({id:item.id}).then(res=>{//带格式文本//excel 在网页打开this.fileVisible = truevar data = new Uint8Array(res.data);var excelData = XLSX.read(data, { type: "array" });var sheetNames = excelData.SheetNames; // 工作表名称集合var worksheet = excelData.Sheets[sheetNames[0]];this.excelData = XLSX.utils.sheet_to_json(worksheet);})}}
}

提交请求，获取后端返回的二进制文件流，请注意接口请求的response Type 类型为 arraybuffer，代码如下：

// 根据id获取文excel
export function getExcelById(data) {return request({url: '/xxx/xxx',method: 'post',responseType: 'arraybuffer',headers: {'Content-Type': 'application/json','Authorization': 'Bearer ' + getToken()},data: data})
}

3.pdf在线预览

安装vue-pdf插件

npm install --save vue-pdf

页面使用

import pdf from 'vue-pdf';

components: { pdf},

<el-dialog              :visible.sync = 'fileVisible':title="fileName"width="1000px"append-to-body ><pdf src="/pdf.pdf"></pdf>
</el-dialog>

在线打开 word、excel、pdf 文件相关推荐

在线查看word,excel,pdf文件解决
眼看着项目要结束,提出新的需求(-_-!!习惯成自然了)需要支持在线查看word,excel,pdf文件,网页中嵌套word的时候,不让word文档占据整个网页,页面内还要有审批等功能,第一感觉想到控 ...
vue 在线访问word,excel,pdf 文件以及打印
git 项目代码一.pdf 1. vue-pdf 安装 npm i --save vue-pdf 语法在组件种使用import pdf from 'vue-pdf'pdf.createLoadin ...
Web方式预览Office/Word/Excel/pdf文件解决方案
Web方式预览Office/Word/Excel/pdf文件解决方案参考文章: (1)Web方式预览Office/Word/Excel/pdf文件解决方案 (2)https://www.cnblog ...
java xpdf 转换成html_java将Word/Excel/PDF文件转换成HTML整理
项目开发过程中,需求涉及到了各种文档转换为HTML或者网页易显示格式,现在将实现方式整理如下: 一.使用Jacob转换Word,Excel为HTML "JACOB一个Java-COM中间件. ...
h5页面如何预览excel文件_移动端页面，如何解析预览 word/excel/PDF文件？
展开全部利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件,然后再利用免费的swftools.exe工具生成swf格式的Flash文件,网页中加 ...
web在线编辑word,excel,pdf插件-----WebOffice 文档控件API
目录一.工作原理...5 1.1 开发流程...5 1.2 WEB页面调用控件:.6 二.接口说明...7 2.1 接口...7 2.1.1 ...
java word转成表格_java将Word/Excel/PDF文件转换成HTML整理
项目开发过程中,需求涉及到了各种文档转换为HTML或者网页易显示格式,现在将实现方式整理如下: 一.使用Jacob转换Word,Excel为HTML "JACOB一个Java-COM中间件. ...
dsoframer控件学习小结（打开WORD,EXCEL等文件）
根据自己对dsoframer控件的学习,想把dsoframer控件进行简单的包装为C#的usercontrol,大体需要作如下:(创建windows的usercontrol的步骤就不再说了...) 我 ...
chrome浏览器在线打开预览pdf文件，而不是下载文件。
Content-Type: application/pdf Content-Disposition: inline; filename="pdf-file1.pdf" 关键有2个点 ...
office 文档在线预览功能实现(word,excel,pdf,ppt等多种格式)——使用https://view.xdocin.com/view 提示文档过期——基础积累
web实现office文档在线预览功能--基础积累最近遇到一个需求,就是要实现多种文档链接的在线预览,最简单的方式就是通过window.open(url地址)的方式来实现. 但是如果要求是在一个弹窗 ...

在线打开 word、excel、pdf 文件

1.word在线预览

2.excel 的在线预览

3.pdf在线预览

在线打开 word、excel、pdf 文件相关推荐

最新文章

热门文章