PDF预览
H5页面pdf预览
插件：pdfh5
版本：“pdfh5”: “^1.4.7”
npm install pdfh5
import PdfH5 from "pdfh5";import "pdfh5/css/pdfh5.css";// methodsthis.$nextTick(() => { this.pdfH5 = new PdfH5("#pdf", { pdfurl: this.pdfData.url, pageNum: false, backTop: false, }); this.pdfH5.on("ready", () => { this.pdfData.totalNum = this.pdfH5.totalNum - 0 this.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-else class="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 = await fetch(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 = await fetch(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预览，其余交给微软服务 --><iframe allow="payment" v-if="fileUrl.includes('.pdf')" :src="fileUrl" style="min-width: 100vw;min-height: 100vh;"></iframe><iframe v-else :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`" style="min-width: 100vw;min-height: 100vh;"></iframe>