PDF預覽

H5頁面pdf預覽

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

npm install pdfh5

import PdfH5 from "pdfh5";
import "pdfh5/css/pdfh5.css";// methods
this.$nextTick(() => {this.pdfH5 = new PdfH5("#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-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'// methods
const 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 || onLaunch
this.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')//methods
addScript (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 = hrefdocument.head.appendChild(link);
},

引入拷貝的js文件以后

// methods
this.$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>