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

02-27 1096阅读 0评论

PDF预览

H5页面pdf预览

插件：pdfh5

$前端使用插件预览pdf、docx、xlsx、pptx格式文件,前端使用插件预览pdf、docx、xlsx、pptx格式文件,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,前端,插件,第1张$

（图片来源网络，侵删）

版本：“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 - 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'
// 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

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 || 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)
 })