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

PDF预览

H5页面pdf预览

插件:pdfh5

版本:"pdfh5": "^1.4.7"

npm install pdfh5

js 复制代码
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>
 <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

js 复制代码
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

js 复制代码
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中引入没有加载,则动态引入

js 复制代码
// 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文件以后

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

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

微软免费预览

日常格式除了不能预览pdf,其他类型都可以(文件大小不超过10M)

html 复制代码
<!-- 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>
相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑10 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek