前端使用插件预览pdf、docx、xlsx、pptx格式文件
Amodoro 2024-07-19 10:03:01 阅读 63
PDF预览
H5页面pdf预览
插件：pdfh5
版本：“pdfh5”: “^1.4.7”
npm install pdfh5
<code>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 - 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>code>
<view class="operation-box">code>
<view class="operation">code>
<view class="page-num-info">code>
<text>{ { pdfData.currentNum }}</text>
/
<text>{ { pdfData.totalNum }}</text>
</view>
<view class="jump-box" v-if="!tips" @click="clickInp">code>
<view class="inp-box">code>
跳转 <input style="width: 60px;text-align: center;color: black" type="number" @input="printfVal" v-model="jumpNum" /> 页code>
</view>
<view @click.stop="goToPage">确定</view>code>
</view>
<view v-else class="tips">尚未加载完成请等待..</view>code>
<uni-icons @click="goToTop" type="home" size="30" color="#b0b2b2"></uni-icons>code>
</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>code>
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="暂无更多数据">code>
<!-- 表头行 -->
<uni-tr>
<uni-th align="center" v-for="item in xlsxFileData.labelList">{ { item }}</uni-th>code>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr v-for="item in xlsxFileData.tableData">code>
<uni-td v-for="key in xlsxFileData.labelList">{ { item[key] }}</uni-td>code>
</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 = href
document.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>code>
微软免费预览
日常格式除了不能预览pdf，其他类型都可以（文件大小不超过10M）
<!-- pdf格式文件可以直接赋值iframe的src预览，其余交给微软服务 -->
<iframe allow="payment" v-if="fileUrl.includes('.pdf')" :src="fileUrl" style="min-width: 100vw;min-height: 100vh;"></iframe>code>
<iframe v-else :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`" style="min-width: 100vw;min-height: 100vh;"></iframe>code>
下一篇： 微信小程序支持h5实现webrtc h264 h265低延迟传输渲染
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。