vue中实现word,pdf,excel，图⽚的⽂件预览—⼀些插件的使⽤,mammoth.。。。word
安装：npm install --save mammoth
// 使⽤mammoth
import mammoth from'mammoth'
node.js 上，⽀持以下输⼊： {path: path}，其中 path 是. docx ⽂件的路径。 {buffer:
buffer}，其中 buffer 是包含. docx ⽂件的node.js 缓冲区。 在浏览器中，⽀持以下输⼊：
{arrayBuffer: arrayBuffer}，其中 arrayBuffer 是包含. docx ⽂件的array 缓冲区。
options ( 可选): 转换的选项。 浏览器表⽰⽀持arrayBuffer 转换也仅仅⽀持docx
只能预览.docx⽂件不能预览doc⽂件
看代码就对了
/
/ ⽤于word预览时的弹框
<el-dialog
ref="appendixDialog"
:visible="IsShow"
:show-close="true"
:width="'900px'"
class="dialog-div-pre-style"
:before-close="closePreviewClick"
center
:title="fileName"
>
<div slot="title"class="header-title">
<h1 class="title-name">{{ fileName }}</h1>
</div>
<div id="el-dialog-div">
<div>
<div v-else-if="fileType === 'doc'">
<div v-html="fileUrl"></div>
</div>
</div>
</div>
</el-dialog>
return{
// ⽤于存储附件的数组(只存id)
fileIdsList:[],
// 存放编辑⽂件的集合（附件回显）
fileList:[],
fileListData:[],
spanArr:[],
pos:0,
singer:false,
isTemplate:false,
selectRow:[],
multipleSelection:[],
deleteAttachListIds:'',
// 是否选择模板附件替换fileListData数组
deleteFunctionId:false,
fileUrl:'',// ⽂件路径
fileName:'',// ⽂件名称
IsShow:false,// 是否显⽰预览
images:[],// 显⽰图⽚(可拓展，直接获取所有的图⽚，然后⼀起展⽰) fileType:'',// ⽂件类型
pagesPdfCount:0,// pdf⽂件总页数
workbook:[],// ⼯作表
sheetNames:[],// ⼯作表名称合集
sheetNameActive:'sheet1',// 现在所在位置的⼯作表（默认为sheet1） SheetActiveTable:'',
emptyTips:'暂⽆内容，如有需要请下载查看'// 空⽂件提⽰信息
}
},
// 按钮添加的事件
click_edit(row, index){
const fileRoute = row.url ? row.url : row.path // (新增与修改字段不同导致需要进⾏兼容)
const type = fileRoute.substring(fileRoute.lastIndexOf('.')+1).toLocaleLowerCase()// 后缀名
this.fileUrl = v.VUE_APP_BASE_API+ fileRoute
this.fileName = row.name ? row.name :'预览'htmlradio多选怎么用
if(type.indexOf('doc')!==-1|| type.indexOf('docx')!==-1){// WORD
this.fileType ='doc'
this.IsShow =true
this.handlerDocPreview()// 现在不需要file对象，直接使⽤数据缓冲区
}
},
// 预览doc
handlerDocPreview(){
try{
// ArrayBuffer
const file =this.fileUrl
this.fileUrl ='正在加载……'
var xhr =new XMLHttpRequest()
xhr.open('get', file,true)
const that =this
if(xhr.status ===200){
const data =new sponse)// 可直接使⽤ponse
that.fileUrl = result.value
}).done()
}
}
xhr.send()
}catch(e){
this.fileUrl ='<h1 >'+ptyTips +'</h1>'
}
}
}
预览效果
2.Excel预览插件的使⽤
安装：npm install --save xlsx
/
/ 使⽤xlsx--SheetJS
import XLSX from'xlsx'
<div v-else-if="fileType === 'xls'">
<div class="tab">
<el-radio-group v-model="sheetNameActive">
<el-radio-button v-for="(item,index) in sheetNames":key="index":label="item"></el-radio-button> </el-radio-group>
</div>
<div v-html="SheetActiveTable"></div>
</div>
sheetNameActive(newData, oldData){
// 监听如改变那么则改变数据
if(oldData !==''&& oldData !== newData){
}
}
}
methods：{
// 点击事件，触发弹框出来预览效果
Click_edit(row.index){
// EXCEL
if(type.indexOf('xls')!==-1|| type.indexOf('xls')!==-1){
// 读取excel⽂件并进⾏赋值
this.IsShow =true
}
},
// 预览excel
readWorkbookFromRemoteFile:function(url){
var xhr =new XMLHttpRequest()
xhr.open('get', url,true)
const _this =this
if(xhr.status ===200){
const data =new sponse)
const workbook =ad(data,{ type:'array'})
const sheetNames = workbook.SheetNames // ⼯作表名称集合
_this.workbook = workbook
_this.sheetNames = sheetNames
_this.sheetNameActive = sheetNames[0]
_SheetNameTable(sheetNames[0])
}
}
xhr.send()
},
// 根据⼯作表名称获取数据
getSheetNameTable(sheetName){
try{
// 获取当前⼯作表的数据
const worksheet =this.workbook.Sheets[sheetName]
// 转换为数据 1.json数据有些问题，2.如果是html那么样式需修改
let htmlData =XLSX.utils.sheet_to_html(worksheet,{ header:'', footer:''})
htmlData = htmlData ===''? htmlData : place(/<table/,'<table class="tableFormApprove" border="1px solid #ccc" cellpadding="0" cellspaci ng="0"')
// 第⼀⾏进⾏改颜⾊
htmlData = htmlData ===''? htmlData : place(/<tr/,'<tr ')
this.SheetActiveTable = htmlData
}catch(e){
// 如果⼯作表没有数据则到这⾥来处理
this.SheetActiveTable ='<h1 >'+ptyTips +'</h1>'
}
},
}
3.Vue图⽚浏览插件v-viewer的使⽤
安装：yarn add v-viewer(两个都可以)
安装：npm install v-viewer --save(两个都可以)
import'viewerjs/dist/viewer.css'
import Viewer from'v-viewer'
Vue.use(Viewer,{
defaultOptions:{
zIndex:9999
}
})
<!--图⽚进⾏单独出来进⾏显⽰-->
<div >
<viewer id="imagesListView" ref="viewer":images="images" @inited="inited">
<img v-for="(item,index) in images":key="index":alt="item":src="item" width="150px" height="150px"> </viewer>
</div>
props:{
// 上传的附件回显
editFileList:{
type: Array,
// 当为数组类型设置默认值时必须使⽤数组返回
default:function(){
return[]
}
},
}
watch:{
editFileList:function(val){
if(val !== undefined && val.length >0){
if(this.attachListList.length ===0){
this.isTemplate =false
}
this.fileList =JSON.parse(JSON.stringify(val))
this.fileIdsList =JSON.parse(JSON.stringify(val))
}
},
// 监听⽗组件向⼦组件传输的附件模板list
attachListList:function(val){
if(val !== undefined && val.length >0){
this.isTemplate =true
this.$set(this.fileListData)
this.fileListData =JSON.parse(JSON.stringify(val))
this.spanArr =[]
this.pos =0
// this.fileIdsList = JSON.parse(JSON.stringify(val))
}
},
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论