前端使用插件预览pdf、docx、xlsx、pptx格式文件

PDF预览

H5页面pdf预览

插件：pdfh5
版本：“pdfh5”: “^1.4.7”

npm install pdfh5

import PdfH5 from"pdfh5";import"pdfh5/css/pdfh5.css";// methodsthis.$nextTick(()=>{this.pdfH5 =newPdfH5("#pdf",{pdfurl:this.pdfData.url,pageNum:false,backTop:false,});this.pdfH5.on("ready",()=>{this.pdfData.totalNum =this.pdfH5.totalNum -0this.pdfData.currentNum =this.pdfH5.currentNum -0})this.pdfH5.on("scroll",(scrollTop, currentNum)=>{this.pdfData.currentNum = currentNum -1===0?1: currentNum -1})this.pdfH5.on('success',()=>{this.inpDisabled =false})})// html<view id="pdf"></view><view class="operation-box"><view class="operation"><view class="page-num-info"><text>{{ pdfData.currentNum }}</text>/<text>{{ pdfData.totalNum }}</text></view><view class="jump-box" v-if="!tips" @click="clickInp"><view class="inp-box">
         跳转 <input style="width: 60px;text-align: center;color: black" type="number" @input="printfVal" v-model="jumpNum"/> 页
       </view><view @click.stop="goToPage">确定</view></view><view v-elseclass="tips">尚未加载完成请等待..</view><uni-icons @click="goToTop" type="home" size="30" color="#b0b2b2"></uni-icons></view></view>

docx预览（不能预览doc格式文件）

插件：docx-preview
版本：“docx-preview”: “^0.1.20”

npm i docx-preview

import*as DocxJs from'docx-preview'// methodsconst f =awaitfetch(this.fileUrl);const ab =await f.arrayBuffer();await DocxJs.renderAsync(ab, document.getElementById('docxDom'), document.getElementById('docxDom'),{inWrapper:false,// 适配移动端})// html<view id="docxDom"></view>

xlsx预览

npm i xlsx

const f =awaitfetch(this.fileUrl);const ab =await f.arrayBuffer();const wb =XLSX.read(ab,{});const ws = wb.Sheets[wb.SheetNames[0]];this.xlsxFileData.tableData =XLSX.utils.sheet_to_json(ws,{raw:false,rawNumbers:false})this.xlsxFileData.labelList.splice(0)
      Object.keys(this.xlsxFileData.tableData[0]).forEach(v=>{this.xlsxFileData.labelList.push(v)})// html<uni-table border stripe emptyText="暂无更多数据"><!-- 表头行 --><uni-tr><uni-th align="center" v-for="item in xlsxFileData.labelList">{{ item }}</uni-th></uni-tr><!-- 表格数据行 --><uni-tr v-for="item in xlsxFileData.tableData"><uni-td  v-for="key in xlsxFileData.labelList">{{ item[key]}}</uni-td></uni-tr></uni-table>

pptx预览

github: PPTXjs
gitee: PPTXjs

拷贝文件到本地项目中在index.html引入

如果在index.html中引入没有加载，则动态引入

// app.vue// created || onLaunchthis.addLink('/static/PPTXjs/css/pptxjs.css')this.addLink('/static/PPTXjs/css/nv.d3.min.css')this.addScript('/static/PPTXjs/js/jquery-1.11.3.min.js')this.addScript('/static/PPTXjs/js/jszip.min.js')this.addScript('/static/PPTXjs/js/filereader.js')this.addScript('/static/PPTXjs/js/d3.min.js')this.addScript('/static/PPTXjs/js/nv.d3.min.js')this.addScript('/static/PPTXjs/js/dingbat.js')this.addScript('/static/PPTXjs/js/pptxjs.js')this.addScript('/static/PPTXjs/js/divs2slides.js')//methodsaddScript(src){let script = document.createElement('script');
  script.src = src;
  script.type ='text/javascript';// script.setAttribute('async', true);// script.setAttribute('defer', true);
  document.head.appendChild(script);},addLink(href){let link = document.createElement('link');
  link.rel ="stylesheet"
  link.href = href
  document.head.appendChild(link);},

引入拷贝的js文件以后

// methodsthis.$nextTick(()=>{$("#pptxDom").pptxToHtml({pptxFileUrl:this.fileUrl,slidesScale:"100%",slideMode:false,keyBoardShortCut:false,});// 适配移动端！！let timer =setInterval(()=>{const $slides =$(".slides");if($slides.children().length){const slidesWidth = Math.max(...Array.from($slides.children()).map((s)=> s.offsetWidth));const $wrapper =$("#pptxDom");const wrapperWidth = window.innerWidth;const wrapperHeight = window.innerHeight;
       $wrapper.css({transform:`scale(${wrapperWidth / slidesWidth})`,"transform-origin":"top left",height: wrapperHeight *(1/(wrapperWidth / slidesWidth))+"px",});clearInterval(timer);}},100)})

使用iframe预览（缺点：在微信内置浏览器不显示或者跨域，需要使用插件。）

文档预览服务

xdocin需要付费，前几天免费体验
日常格式都可以预览，比如xls、xlsx、doc、docx、pptx、pdf

<iframe:src="`https://view.xdocin.com/view?src=${encodeURIComponent(fileUrl)}`"style="min-width: 100vw;min-height: 100vh;"></iframe>

微软免费预览
日常格式除了不能预览pdf，其他类型都可以（文件大小不超过10M）

<!-- pdf格式文件可以直接赋值iframe的src预览，其余交给微软服务 --><iframeallow="payment"v-if="fileUrl.includes('.pdf')":src="fileUrl"style="min-width: 100vw;min-height: 100vh;"></iframe><iframev-else:src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`"style="min-width: 100vw;min-height: 100vh;"></iframe>