前端使用插件预览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 = 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                {{ pdfData.currentNum }}       /       {{ pdfData.totalNum }}                          跳转  页              确定          尚未加载完成请等待..         

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

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                                {{ item }}                                          {{ item[key] }}                  

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/ps2slides.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

微软免费预览

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