一文详解如何在vue中实现文件预览功能

npm install docx-preview

import { renderAsync } from 'docx-preview';

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

npm install pdfjs-dist

import * as PDFJS from "pdfjs-dist/legacy/build/pdf";  // 引入PDFJS 
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址

const blobPdf = new window.Blob([res.data], { type: 'application/pdf;chaset-UTF-8' })
const pdfhref = URL.createObjectURL(blobPdf);
PDFJS.getDocument(pdfhref).promise.then(pdfDoc=>{
   const numPages = pdfDoc.numPages; // pdf的总页数
   // 获取第1页的数据
   pdfDoc.getPage(1).then(page =>{
      // 设置canvas相关的属性
      const canvas = document.getElementById("pdf_canvas");
      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 renderContext = {
      canvasContext: ctx,
      viewport: viewport,
   };
   // 数据渲染到canvas画布上
   page.render(renderContext);
  })
})

      // 切换pdf页数
      function changePdfPage (type) {
        if (type == 'pre') {
          if (pdfPage.value <= 1) {
            ElMessage.error('没有上一页了');
            return 
          }
          pdfPage.value -= 1
        } else {
          if (pdfPage.value >= pdfValue.numPages) {
            ElMessage.error('没有下一页了');
            return 
          }
          pdfPage.value += 1
        }
        initPdfPage()
      }
      
      // 重新初始化pdf对应页数
      function initPdfPage () {
        pdfValue.getPage(pdfPage.value).then(page =>{
          // 设置canvas相关的属性
          const canvas = document.getElementById("pdf_canvas");
          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 renderContext = {
            canvasContext: ctx,
            viewport: viewport,
          };
          // 数据渲染到canvas画布上
          page.render(renderContext);
        })
      }

npm install xlsx

import * as XLSX from 'xlsx/xlsx.mjs'

<div class="sheet_list">
   <p class="sheet_item" v-for="(item, index) in workbook.SheetNames" @click="getTable(item)">{{item}}</p>
</div>
<el-table :data="excelData" style="width: 100%">
   <el-table-column
     v-for="(value, key, index) in excelData[0]"
     :key="index"
     :prop="key"
     :label="key"
   ></el-table-column>
</el-table>

 const xlsx_data = await res.data.arrayBuffer()
 let tem_workbook = XLSX.read(xlsx_data, {type:"array"}); // 解析数据
 workbook.value = tem_workbook
 getTable(tem_workbook.SheetNames[0]); // 读取第一张表数据
 
 // 解析xlsx数据为table
 function getTable(sheetName) {
    let worksheet = workbook.value.Sheets[sheetName];
    excelData.value = XLSX.utils.sheet_to_JSON(worksheet);
 }

const blobImage = new window.Blob([res.data], { type: 'image/' + fileType }) // fileType指图片的类型
const imageHref = URL.createObjectURL(blobImage); // 创造一个地址
preloadImg.value = imageHref // img标签的src属性的值