VUE3 预览docx、pdf文件（demo为预览本地文件）

DOCX 和PDF 预览。分别用到了 docx-preview和pdfjs开源组件

安装依赖

npm i docx-preview -D
npm i pdfjs-dist -D

<template>
  <h1>查看docx文件</h1>
  <input type="file" ref="input" @change="filechange" />
  <div ref="container"></div>
  <h1>查看PDF文件</h1>
  <input type="file" ref="inputpdf" @change="pdfChange" />
  <br />
  <br />
  <br />
  <el-row justify="center">
    <el-col :span="6">
      <el-pagination
        layout="prev, pager, next"
        small
        background
        :total="pdfPagesNum"
        @current-change="currentChange"
      />
    </el-col>
  </el-row>
  <br />

  <canvas ref="renderContext"></canvas>
</template>
<script setup>
import { ref } from "vue";
import { renderAsync } from "docx-preview";  // 引入异步渲染方法 
import * as PDFJS from "pdfjs-dist/legacy/build/pdf";  // 引入PDFJS 
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址

PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址

let container = ref(null);
let renderContext = ref(null);
let pdfUrl = "";
let pdfPagesNum = ref(0);
let readerpdfDoc = null;
function filechange(event) {
 
  renderAsync(event.target.files[0], container.value, null, {
    className: "docx", // 默认和文档样式类的类名/前缀
    inWrapper: true, // 启用围绕文档内容渲染包装器
    ignoreWidth: false, // 禁止页面渲染宽度
    ignoreHeight: false, // 禁止页面渲染高度
    ignoreFonts: false, // 禁止字体渲染
    breakPages: true, // 在分页符上启用分页
    ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
    experimental: false, //启用实验性功能（制表符停止计算）
    trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
    debug: false, // 启用额外的日志记录
  });
}

function pdfChange(event) {
  if (window.createObjectURL != undefined) {
    // basic
    pdfUrl = window.createObjectURL(event.target.files[0]);
  } else if (window.URL != undefined) {
    // mozilla(firefox)
    pdfUrl = window.URL.createObjectURL(event.target.files[0]);
  } else if (window.webkitURL != undefined) {
    // webkit or chrome
    pdfUrl = window.webkitURL.createObjectURL(event.target.files[0]);
  }
  getPdf(pdfUrl, 1);
}
function getPdf(url, pageNum) {
  PDFJS.getDocument(url).promise.then((pdfDoc) => {
    pdfPagesNum.value = pdfDoc.numPages * 10; // pdf的总页数
    //获取第pageNum页的数据
    readerpdfDoc = pdfDoc;
    showPdf(pdfDoc,pageNum)
  });
}
function currentChange(num) {
  showPdf(readerpdfDoc, num);
}
function showPdf(pdfDoc,pageNum) {
  pdfDoc.getPage(pageNum).then((page) => {
    // 设置canvas相关的属性
    const canvas = renderContext.value;
    const ctx = canvas.getContext("2d");
    const dpr = window.devicePixelRatio || 1;
    const bsr =
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1;
    const ratio = dpr / bsr;
    const viewport = page.getViewport({ scale: 1 });
    canvas.width = viewport.width * ratio;
    canvas.height = viewport.height * ratio;
    canvas.style.width = viewport.width + "px";
    canvas.style.height = viewport.height + "px";
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
    const context = {
      canvasContext: ctx,
      viewport: viewport,
    };
    // 数据渲染到canvas画布上
    page.render(context);
  });
}
</script>

 

DOCX 实现说明
引入renderAsync方法
将blob数据流传入方法中，渲染word文档
PDF实现说明
设置PDFJS.GlobalWorkerOptions.workerSrc的地址
通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc
通过pdfDoc.getPage单独获取第1页的数据
创建一个dom元素，设置元素的画布属性
通过page.render方法，将数据渲染到画布上

呈现效果

选择DOCX文件

选择PDF文件