位置: IT常识 - 正文
vue实现本地预览word(docx)、excel(xlsx)、pdf文件(前端vue实现预览excel)
编辑：rootadmin推荐整理分享vue实现本地预览word(docx)、excel(xlsx)、pdf文件(前端vue实现预览excel)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue展示本地图片,vue预览本地文件,vue展示本地图片,vue本地预览excel,vue怎么预览写出来的界面,vue本地预览excel,vue预览本地文件,vue预览本地文件,内容如对您有帮助，希望把文章链接给更多的朋友！
通过点击预览，浏览器打开新标签页展示文件内容 word效果： pdf效果： excel效果：
前期准备：
word插件：
npm install --save docx-preview
excel插件：
npm install --save @handsontable/vue npm install --save handsontable npm install --save handsontable/i18n npm install --save exceljs xlsx的部分参考的是竹业大佬的开源代码，表格样式需要引入代码中的xlsx文件中的所有内容，有兴趣的小伙伴可以源码内容 Demo地址[1]：https://zhuye1993.github.io/file-view/dist/index.html github地址：https://github.com/zhuye1993/file-view/tree/master/src/vendors 本文使用的位置，以及引用方法
pdf插件：
pdf.js下载地址 http://mozilla.github.io/pdf.js/getting_started/#download 下载好的文件放如下位置即可
代码：1.全局方法：officeView// 文件预览/**row: 包含fileUrl文件地址的对象*that: vueRouter实例 */export const officeView = function(row, that) { // 获取文件类型 const type = row.fileUrl.substring(row.fileUrl.lastIndexOf('.') + 1, row.fileUrl.length).toLowerCase() if (type.indexOf('pdf') !== -1) { // pdf预览 const pdfSrc = 'pdf/web/viewer.html?file=' + encodeURIComponent(downloadUrl + row.fileUrl) // 打开新标签页 window.open(pdfSrc, '_blank') } else if (type.indexOf('docx') !== -1) { // docx预览 // 获取目标路由地址 const routeUrl = that.resolve({ name: 'OfficeView', query: { fileUrl: downloadUrl + row.fileUrl, fileType: 0 } }) // 打开新标签页 window.open(routeUrl.href, '_blank') } else if (type.indexOf('xlsx') !== -1) { // xlsx预览 // 获取目标路由地址 const routeUrl = that.resolve({ name: 'OfficeView', query: { fileUrl: downloadUrl + row.fileUrl, fileType: 1 } }) // 打开新标签页 window.open(routeUrl.href, '_blank') } else { Message({ type: 'error', message: '仅支持docx、pdf、xlsx文件预览，其它类型文件请下载查看' }) }}2.路由跳转至OfficeView文件，此文件展示word,excel预览内容<template> <div> <!-- excel文件内容位置 --> <div ref="output" /> <!-- wor文件内容位置 --> <div v-if="fileType == 0" id="container" /> </div></template><script>import { renderAsync } from 'docx-preview'import renderSheet from './xlsxView'export default { data() { return { fileUrl: null, fileType: 0, tableData: null, last: null } }, created() { // 从路由地址中获取fileUrl,fileType this.fileUrl = this.$route.query.fileUrl ? this.$route.query.fileUrl : null this.fileType = this.$route.query.fileType ? parseInt(this.$route.query.fileType) : 0 if (this.fileUrl == null) { this.$message({ type: 'error', message: '文件地址无效，请刷新后重试' }) } // 加载文件内容 this.uploading(this.fileUrl) }, methods: { // 加载文件内容 uploading(file) { // 获取文件流 const xhr = new XMLHttpRequest() xhr.open('get', file, true) xhr.responseType = 'blob' xhr.onload = () => { if (xhr.status === 200) { if (this.fileType === 0) { // word预览 renderAsync( xhr.response, document.getElementById('container'), null, { className: 'docx', // 默认和文档样式类的类名/前缀 inWrapper: true, // 启用围绕文档内容渲染包装器 ignoreWidth: false, // 禁止页面渲染宽度 ignoreHeight: false, // 禁止页面渲染高度 ignoreFonts: false, // 禁止字体渲染 breakPages: true, // 在分页符上启用分页 ignoreLastRenderedPageBreak: true, // 禁用lastRenderedPageBreak元素的分页 experimental: false, // 启用实验性功能（制表符停止计算） trimXmlDeclaration: true, // 如果为真，xml上一篇：Windows系统中Hosts文件的作用(window的hosts文件)
下一篇：如何知道家里网速测速多少兆？(如何知道家里网络是多少兆)
