vue实现预览word,excel,ppt,pdf、图片、视频解决方案

2022年6月8日12:47:45

vue实现预览word,excel,ppt,pdf、图片、视频解决方案

第一种简单方法:

<el-tooltipcontent="预览"placement="top"><el-buttontype="warning"@click="coverUrl(scope.row)"icon="el-icon-document"circle></el-button></el-tooltip><el-dialog:customClass="['customWidth']"class="dialog":before-close="closePreviewClick":close-on-click-modal="false":visible.sync="iframeState"v-if="iframeState"><div><iframe:src="url"frameborder="0"style="z-index: 1000;height: 800px;width: 100%"></iframe></div></el-dialog>
/**
     * 代码预览
     */coverUrl(row){let type=this.iconByType(row)var fileUrl= row.urlif(type.indexOf('xsl')!==-1|| type.indexOf('xslx')!==-1|| type.indexOf('xls')!==-1||
          type.indexOf('docx')!==-1||
          type.indexOf('doc')!==-1||
          type.indexOf('pdf')!==-1||
          type.indexOf('jpg')!==-1||
          type.indexOf('png')!==-1||
          type.indexOf('jpeg')!==-1||
        type.indexOf('pptx')!==-1|| type.indexOf('ppt')!==-1){this.iframeState=truethis.url='https://view.xdocin.com/xdoc?_xdoc='+encodeURIComponent(fileUrl)}else{this.$message('当前文件暂不支持预览,请下载查看')}},iconByType(row){return row.filename.substring(row.filename.lastIndexOf('.')+1, row.filename.length)},

通过XDOC文档预览云服务链接直接访问 相关链接:XDOC文档预览云服务

第二种复杂方法:

包括四种方法 word excel,pdf,图片,ppt暂时没有找到方法,可以通过写java后台进行转换pdf实现预览。

<el-tooltipcontent="预览"placement="top"><el-buttontype="warning"@click="coverUrl(scope.row)"icon="el-icon-document"circle></el-button></el-tooltip><el-dialog:customClass="[showExcel == true || showDoc == true ?'customWidth' :'']":visible="showExcel === true || showPdf === true || showImg === true || showDoc === true || showPPt ===true"class="dialog":before-close="closePreviewClick":close-on-click-modal="false":visible.sync="iframeState"v-if="iframeState"><divv-if="showExcel == true"class="dialog-body-content-base-style"style="width:100%;height: 650px;display: flex;justify-content: center;"><divid="result"></div></div><divv-else-if="showDoc == true"style="margin-bottom: 20px;display: flex;justify-content: center;height: 850px;width: 100%;padding: 15px;"><divclass="hemldoc"v-loading="docVisible"element-loading-text="加载中"element-loading-spinner="el-icon-loading"v-html="vHtml"/></div><divv-else-if="showPdf == true"class="dialog-body-content-base-style"><divstyle="position: fixed;top: 10px;z-index: 100"><el-button-group><el-buttontype="primary"icon="el-icon-arrow-left"size="mini"@click="prePage">上一页</el-button><el-buttontype="primary"size="mini"@click="nextPage">下一页<iclass="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group><divstyle="margin-top: 10px;margin-left:60px;color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div></div><pdfstyle="width: 70%;margin: 0 auto;height: 850px"ref="pdf":page="pageNum":src="pdfUrl"@progress="loadedRatio = $event"@num-pages="pageTotalNum=$event"></pdf></div><divv-else-if="showImg == true"class="dialog-body-content-base-style"style="margin-bottom: 20px;display: flex;justify-content: center"><img:src="imgUrl"style="height: 500px;text-align: center"/></div><divv-else-if="showPPt == true"class="dialog-body-content-base-style"style="margin-bottom: 20px;display: flex;justify-content: center;width: 800px;height: 800px"><iframe:src="pptUrl"scrolling="no"frameborder="0"style="z-index: 1000;height: 100%;width: 100%"></iframe></div></el-dialog>
import pdffrom'vue-pdf'// 预览pdf插件importXLSXfrom'xlsx'// 预览excel文件import axiosfrom'axios'import mammothfrom'mammoth'// 预览word插件exportdefault{data(){return{
      showPPt:false,
      docVisible:false,
      vHtml:'',
      pageNum:1,
      pageTotalNum:1,// 总页数
      loadedRatio:0,// 当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了
      showImg:false,
      showExcel:false,
      showDoc:false,
      showPdf:false,
      iframeState:false,
      imgUrl:'',
      url:'',
      pdfUrl:'',
      pptUrl:'',
      currentPage:0,// pdf文件页码
      pageCount:0,// pdf文件总页数}},
  components:{
    AddOrUpdate,
    pdf,XLSX,
    mammoth},
// word 转换html流uploading(file){const xhr=newXMLHttpRequest()
      xhr.open('get', file,true)
      xhr.responseType='arraybuffer'
      xhr.onload=()=>{if(xhr.status===200){
          mammoth.convertToHtml({arrayBuffer:newUint8Array(xhr.response)}).then((resultObject)=>{this.$nextTick(()=>{this.vHtml= resultObject.valuethis.docVisible=false})})}}
      xhr.send()},// 上一页prePage(){let page=this.pageNum
      page= page>1? page-1:this.pageTotalNumthis.pageNum= page},// 下一页nextPage(){let page=this.pageNum
      page= page<this.pageTotalNum? page+1:1this.pageNum= page},closePreviewClick(){if(this.showExcel===true){this.showExcel=falsethis.iframeState=false}elseif(this.showPdf===true){this.showPdf=falsethis.iframeState=false}elseif(this.showImg===true){this.showImg=falsethis.iframeState=false}elseif(this.showDoc===true){this.showDoc=falsethis.iframeState=false}elseif(this.showPPt===true){this.showPPt=falsethis.iframeState=false}},/**
     * pdf预览
     */coverUrl(row){let type=this.iconByType(row)var fileUrl= row.urlif(type.indexOf('xsl')!==-1|| type.indexOf('xslx')!==-1|| type.indexOf('xls')!==-1){this.iframeState=truethis.url= fileUrlthis.previewExcel(this.url)this.showExcel=true}elseif(type.indexOf('docx')!==-1){this.iframeState=truethis.docVisible=truethis.uploading(fileUrl)this.showDoc=true}elseif(type.indexOf('pdf')!==-1){this.iframeState=truethis.pdfUrl= fileUrlthis.showPdf=true}elseif(type.indexOf('jpg')!==-1|| type.indexOf('png')!==-1|| type.indexOf('jpeg')!==-1){this.iframeState=truethis.imgUrl= fileUrlthis.showImg=true}elseif(type.indexOf('pptx')!==-1|| type.indexOf('ppt')!==-1){this.iframeState=truethis.pptUrl='https://view.xdocin.com/xdoc?_xdoc='+encodeURIComponent(fileUrl)this.showPPt=true}elseif(type.indexOf('doc')!==-1){this.$message('当前仅支持预览“.docx”文件,请下载查看')}else{this.$message('当前文件暂不支持预览,请下载查看')}},// 获取下标iconByType(row){return row.filename.substring(row.filename.lastIndexOf('.')+1, row.filename.length)},//  读取excel文件流readWorkbook(workbook){var sheetNames= workbook.SheetNames// 工作表名称集合var worksheet= workbook.Sheets[sheetNames[0]]// 这里我们只读取第一张sheetvar csv=XLSX.utils.sheet_to_csv(worksheet)
      document.getElementById('result').innerHTML=this.csv2table(csv)},csv2table(csv){var html="<table   class='table'>"var rows= csv.split('\n')
      rows.pop()// 最后一行没用的
      rows.forEach(function(row, idx){var columns= row.split(',')
        columns.unshift(idx+1)// 添加行索引if(idx===0){
  • 作者:辉@_@
  • 原文链接:https://blog.csdn.net/weixin_44378416/article/details/119543832
    更新时间:2022年6月8日12:47:45 ,共 5855 字。